/* ==========================================================
   Landing page Lumina — CSS écrit à la main, Mobile First :
   styles de base pour le téléphone, puis enrichis à 768 px.
   ========================================================== */

/* Polices hébergées sur le site (licence SIL Open Font License) */
@font-face { font-family: "Oranienbaum"; src: url("fonts/oranienbaum-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); font-display: swap; }

/* Couleurs de la charte */
:root {
	--noir: #0B0B14;
	--surface: #16162A;
	--blanc: #F4F1FA;
	--brume: #A8A6B8;
	--laser: #CDFFA0;
	--aurore: #E6A0FF;
	--halo: #82E6FF;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--noir) url("fond-lumina.webp") center top / cover no-repeat fixed;
	color: var(--blanc);
	font: 400 1rem/1.6 "Montserrat", system-ui, sans-serif;
}

a { color: var(--aurore); }
a:hover { color: var(--halo); }
:focus-visible { outline: 3px solid var(--halo); outline-offset: 3px; }

/* Lien d'évitement, visible seulement au clavier */
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 1rem; top: 1rem; background: var(--laser); color: var(--noir); padding: .75rem 1rem; z-index: 10; }

/* Logo en texte (mêmes polices que le logo officiel) */
.entete { padding: 1.25rem; }
.logo { margin: 0; display: inline-flex; flex-direction: column; line-height: 1; }
.logo__script { font-family: "Pinyon Script", cursive; color: var(--aurore); font-size: 1.1rem; }
.logo__nom { font-family: "Oranienbaum", serif; font-size: 1.8rem; letter-spacing: .14em; }

main { padding: 0 1.25rem 3rem; max-width: 40rem; margin: 0 auto; }

/* Titre et accroche */
h1, h2 { font-family: "Oranienbaum", Georgia, serif; font-weight: 400; line-height: 1.08; margin: 0 0 1rem; }
h1 { font-size: 2.5rem; margin-top: 2rem; }
h2 { font-size: 1.75rem; }
.accroche { font-size: 1.125rem; margin: 0 0 2rem; }

/* Formulaire */
.inscription { background: rgba(22, 22, 42, .88); border: 1px solid rgba(230, 160, 255, .35); border-radius: 16px; padding: 1.5rem; display: grid; gap: .75rem; }
.inscription label { font-weight: 600; }
.inscription input[type="email"] {
	min-height: 48px; width: 100%; padding: .625rem .875rem;
	font: inherit; font-size: 16px; /* 16 px : pas de zoom automatique sur iPhone */
	background: var(--noir); color: var(--blanc);
	border: 1.5px solid rgba(244, 241, 250, .4); border-radius: 10px;
}
.consentement { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: .875rem; color: var(--brume); }
.consentement input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--halo); }
.consentement label { font-weight: 400; }
.inscription button {
	min-height: 56px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--laser); color: var(--noir);
	font: 600 1rem "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .08em;
}
.inscription button:hover { box-shadow: 0 0 32px rgba(205, 255, 160, .4); }
.piege { position: absolute; left: -9999px; }
.message { margin: 0; padding: .75rem 1rem; border-radius: 10px; }
.message--ok { background: rgba(205, 255, 160, .15); border: 1px solid var(--laser); }
.message--erreur { background: rgba(255, 143, 163, .15); border: 1px solid #FF8FA3; }
.bonus { margin: 0; font-size: .875rem; color: var(--halo); }

/* Trois arguments */
.arguments ul { list-style: none; padding: 0; margin: 3rem 0 .5rem; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.arguments strong { display: block; font-family: "Oranienbaum", serif; font-weight: 400; font-size: 3rem; line-height: 1; color: var(--laser); }
.arguments li { text-transform: uppercase; letter-spacing: .12em; font-size: .8125rem; font-weight: 600; color: var(--brume); }
.arguments p { text-align: center; color: var(--brume); }

.infos { margin-top: 2.5rem; }
.lien-billets { font-weight: 600; }

.pied { padding: 2rem 1.25rem; text-align: center; font-size: .8125rem; color: var(--brume); background: var(--surface); }
.pied p { margin: .25rem 0; }

/* Écrans de 768 px et plus */
@media (min-width: 768px) {
	.entete { padding: 2rem 3rem; }
	h1 { font-size: 4rem; }
	h2 { font-size: 2.5rem; }
	.accroche { font-size: 1.25rem; }
	.inscription { padding: 2rem; }
	.arguments strong { font-size: 4.5rem; }
}

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}