/* Hantes Florenia — Accueil (héro plein écran + overlay noir, textes en blur fade-in). */

/* Image de fond + voile noir à 45 %. */
.home-bg{ position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; }
.home-bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); transition:background .45s ease; }
body.menu-open .home-bg::after{ background:rgba(0,0,0,.5); }
/* Téléphone en portrait : la photo est calée sur la hauteur de l'écran, sa
   largeur vaut donc 1,5 × la hauteur. Le visage du soleil est à 50,47 % de la
   largeur de la photo (mesuré : yeux à 1460 et 1568 px sur 3000) : on décale de
   (50 − 50,47) % × 150vh ≈ −0,7vh pour le poser pile au centre de l'écran. */
@media (max-width:768px) and (orientation:portrait){
	.home-bg:not(.has-bg-mobile){ background-position:calc(50% - .7vh) center; }
}

main{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20vh clamp(24px,6vw,60px); }

/* Apparition : blur fade-in (remplace la machine à écrire). */
.typed{ opacity:0; filter:blur(16px); transition:opacity 1s ease, filter 1s ease; }
.typed.on{ opacity:1; filter:blur(0); }

.welcome{
	font-family:var(--script);
	font-style:normal; font-weight:400; text-transform:none;
	font-size:50px; letter-spacing:.05em; text-indent:.05em; word-spacing:.05em; line-height:1.12;
	margin:0 auto; max-width:var(--container-hero);
	/* Lettres pleines en blanc cassé, cernées d'un filet noir. */
	color:#D9D9D9;
	-webkit-text-stroke:0.5px #000000;
	paint-order:stroke fill;
}
.tagline{
	font-family:var(--body);
	font-style:italic; font-weight:300;
	font-size:clamp(14px,1.4vw,16px); line-height:1.55; color:#e7ddcb;
	margin:clamp(28px,4vh,44px) 0 0;
}
.tagline .gold{ color:var(--gold-soft); }
.drop{
	font-family:var(--title); font-style:normal; font-weight:400;
	font-size:15px; letter-spacing:.05em; text-transform:uppercase;
	color:#D9D9D9; margin:clamp(18px,3vh,34px) 0 0;
	text-indent:.05em;
}
/* Sans slogan, la ligne « drop » est isolée : même respiration au-dessus et en dessous. */
main{ --drop-gap:clamp(24px,3.7vh,42px); }
/* Compensation optique : les marges de boîte sont égales de part et d'autre, mais
   la police script laisse du blanc sous ses jambages — proportionnel au corps,
   soit ~17 px depuis que le titre est passé de 64 à 80 px. */
.welcome + .drop{ margin-top:calc(var(--drop-gap) - 17px); }
.drop + .cta,
.drop + .home-req{ margin-top:var(--drop-gap); }
.cta{
	display:inline-flex; align-items:center; justify-content:center;
	margin:clamp(16px,2.4vh,28px) 0 0;
	width:310px; max-width:100%; height:37px; border-radius:3px;
	background:transparent; color:rgba(255,255,255,.7);
	border:1px solid #ffffff;
	font-family:var(--mono); font-weight:700; font-size:8px; letter-spacing:.2em; text-transform:uppercase; text-indent:.2em;
	opacity:0; filter:blur(14px); transition:opacity .8s ease, filter .8s ease, background .35s ease, color .35s ease, transform .35s ease;
}
.cta.on{ opacity:1; filter:blur(0); }
.cta:hover{ background:#ffffff; color:#000000; transform:translateY(-2px); }

/* ============ COMPTE À REBOURS DU PROCHAIN DROP ============
   Toujours présent (demande client) : « RELEASE 2 — UNLOCKS IN », quatre cases
   jours / heures / min / sec (même dessin que sur All Collections), puis
   « Request Access » (or) et « Discover all collections ». */
.home-cd{ display:flex; flex-direction:column; align-items:center; margin-top:calc(var(--drop-gap) - 17px); }
.home-cd .drop{ margin:0 0 clamp(12px,1.8vh,18px); font-size:13px; letter-spacing:.16em; text-indent:.16em; }
.home-cd .uc-units{
	display:inline-flex; align-items:flex-start; gap:.3em;
	font-family:var(--title); font-weight:300; font-size:clamp(26px,2.6vw,36px);
	letter-spacing:.04em; line-height:1; color:#fff;
}
.home-cd .uc-u{ display:inline-flex; flex-direction:column; align-items:center; min-width:2.2em; }
.home-cd .uc-u b{ font-weight:inherit; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.home-cd .uc-u i{
	margin-top:.42em; font-family:var(--mono); font-style:normal; font-weight:400;
	font-size:10px; letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; opacity:.7;
}
.home-cd .uc-sep{ opacity:.5; }
.home-ctas{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:var(--drop-gap); }
.home-ctas .cta{ margin:0; }
/* Les deux boutons en blanc, libellé un peu plus clair que le .cta d'origine
   (lisibilité, demande client), et de même largeur. Variante essayée puis
   écartée : « Request Access » à ~72 % (224 px, mobile min(204px, 55vw)). */
.home-ctas .cta{ color:rgba(255,255,255,.92); }
.home-ctas .cta:hover{ color:#000; }

/* Liste d'attente : rangée bordée de blanc, comme les boutons de l'accueil
   (demande client : plus d'or). */
.home-req{ display:inline-flex; align-items:stretch; margin:clamp(20px,3vh,32px) auto 0; border:1px solid #ffffff; border-radius:3px; width:clamp(300px,24vw,360px); max-width:100%; }
/* Le filet entre champ et bouton tombe sous le milieu des minutes du compte
   à rebours (--req-split, calculé par home.js ; repli 62 %). Libellés centrés. */
.home-req-input,
.home-req-btn{ text-align:center; }
.home-req-input{ flex:1 1 auto; min-width:0; background:transparent; border:none; color:#f4efe6; font-family:var(--mono); font-weight:300; font-size:11px; letter-spacing:.06em; padding:0 12px; height:40px; flex:0 0 var(--req-split, 62%); width:auto; }
/* iPhone : le zoom automatique au toucher du champ est coupé (maximum-scale
   ajouté par header.php), la saisie peut rester petite. */
.home-req-input::placeholder{ color:rgba(255,255,255,.6); font-size:10px; }
.home-req-input:focus{ outline:none; }
/* Autofill Chrome/Safari : neutralise le fond blanc imposé par le navigateur. */
.home-req-input:-webkit-autofill,
.home-req-input:-webkit-autofill:hover,
.home-req-input:-webkit-autofill:focus,
.home-req-input:-webkit-autofill:active{
	-webkit-text-fill-color:#f4efe6;
	caret-color:#f4efe6;
	/* Le fond d'autofill n'est peint qu'après la transition → jamais visible. */
	transition:background-color 0s 9999s, color 0s 9999s;
}
.home-req-input:autofill{ -webkit-text-fill-color:#f4efe6; caret-color:#f4efe6; }
.home-req-btn{ flex:1 1 0; min-width:0; background:transparent; border:none; border-left:1px solid #ffffff; color:rgba(255,255,255,.92); font-family:var(--mono); font-weight:700; font-size:8px; letter-spacing:.2em; text-transform:uppercase; padding:0 6px; text-indent:.2em; cursor:pointer; white-space:nowrap; transition:background .3s ease, color .3s ease; }
.home-req-btn:hover{ background:#ffffff; color:#000; }
.home-req-btn:disabled{ opacity:.5; cursor:default; }
.home-req-msg{ min-height:1.1em; margin:12px 0 0; font-family:var(--mono); font-weight:300; font-size:10px; letter-spacing:.1em; color:#ffffff; }

/* Liste d'attente sous le compte à rebours (inc/waitlist.php), une ligne
   d'information discrète en dessous. */
.home-cd ~ .home-req{ margin-top:var(--drop-gap); }
.home-req-note{
	max-width:360px; margin:6px auto 0;
	font-family:var(--mono); font-weight:300; font-size:10px; line-height:1.6; letter-spacing:.06em;
	color:#e7ddcb; opacity:.72;
}
.home-req.typed.on + .home-req-msg:empty{ margin-top:10px; }
/* Désinscription (lien des e-mails) : question puis bouton, ou message seul. */
.home-unsub{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:var(--drop-gap); }
.home-unsub .home-req-note{ margin:0; font-size:11px; opacity:.85; }
.home-unsub .cta{ margin:0; }
.home-unsub-done{ margin-top:var(--drop-gap); font-size:11px; opacity:.85; }
.stock{
	font-family:var(--mono); font-weight:300;
	font-size:clamp(11px,1.1vw,13px); letter-spacing:.06em; color:#e7ddcb;
	margin:clamp(38px,7vh,78px) 0 0;
}

@media (max-width:768px){
	/* svh = hauteur réellement visible, barre d'URL du navigateur déduite. Avec
	   100vh la page dépassait de la hauteur de cette barre et devenait scrollable
	   de quelques dizaines de pixels sur téléphone. */
	/* Le texte se centre entre la barre noire fixe (--hf-bar-h) et le bas
	   de l'écran, et non plus sur l'écran entier. */
	main{ padding:calc(14vh + var(--hf-bar-h, 0px)) 22px 14vh; min-height:100vh;min-height:100svh; }
	.welcome{ font-size:clamp(32px,10vw,50px); letter-spacing:.05em; text-indent:.05em; -webkit-text-stroke-width:.5px; }
	.tagline{ font-size:14px; }
	.drop{ font-size:15px; letter-spacing:.08em; text-indent:.08em; }
	.home-req{ width:100%; max-width:340px; }
	.cta{ font-size:11px; letter-spacing:.16em; }
	.home-req-btn{ font-size:9.5px; letter-spacing:.18em; text-indent:.18em; }
	.home-req-input::placeholder{ font-size:11px; }
	.home-req-msg{ font-size:11px; }
	.home-req-note{ font-size:10.5px; max-width:320px; }
}

/* ============ Zone tactile CTA ≥44px — mobile/tablette (≤1024px) ============ */
@media (max-width:1024px){
	/* Le corps de 8px de la maquette desktop devient illisible sur tablette et
	   téléphone en paysage (qui n'entrent pas dans le palier ≤768). */
	.cta{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.16em; }
	.home-req-input{ height:44px; font-size:12px; }
	.home-req-btn{ min-height:44px; }
}

/* Téléphone : CTA plus petit et plus fin — largeur au contenu, 36 px de haut,
   filet d'un demi-pixel (Retina) légèrement translucide. Placé APRÈS le palier
   ≤1024 pour l'emporter sur son min-height:44px ; la zone tactile de 44 px est
   conservée par un ::after débordant. */
@media (max-width:768px){
	/* Plus large (demande client), libellé un peu plus petit et plus léger. */
	.cta{
		position:relative; width:min(280px, 76vw); min-width:0; height:38px; min-height:38px;
		padding:0 20px; border-radius:2px;
		border-width:.5px; border-color:rgba(255,255,255,.72);
		font-size:9px; font-weight:400; letter-spacing:.24em; text-indent:.24em;
	}
	.cta::after{ content:""; position:absolute; inset:-6px; }
	.home-cd .uc-units{ font-size:clamp(24px,7vw,30px); gap:clamp(2px,1vw,6px); }
	.home-cd .uc-u{ min-width:2.3em; }
	.home-cd .drop{ font-size:12px; }
}

/* Accueil figé : plus rien à faire défiler sur téléphone. Écarté sous 600 px de
   hauteur (téléphone en paysage), où le contenu doit rester atteignable. */
@media (max-width:768px) and (min-height:600px){
	/* Le héros occupe l'écran, mais la page reste défilable : le pied de page
	   doit rester atteignable. */
	body.home main{ min-height:100vh;min-height:100svh; }
}

/* Téléphone en paysage : le héros tient entre la barre et le bas d'écran. */
@media (max-height:500px) and (orientation:landscape) and (max-width:1024px){
	main{ padding:calc(var(--frame) + 84px) clamp(24px,6vw,60px) 28px; min-height:100vh;min-height:100svh; }
	.welcome{ font-size:clamp(32px,8vh,44px); }
	main{ --drop-gap:18px; }
	.welcome + .drop{ margin-top:6px; }
	.home-cd{ margin-top:6px; }
	.home-ctas{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
}