/* Hantes Florenia — Pages légales (Terms, Privacy, Cookies). */

.legal-main{
	max-width:760px; margin:0 auto;
	padding:clamp(120px,18vh,200px) clamp(20px,5vw,48px) clamp(70px,12vh,140px);
}

/* Pages centrées sur un écran (demande d'accès, compte) : le contenu tient dans
   la hauteur visible, le pied de page ne se découvre qu'au défilement.
   « svh » et non « vh » : sur mobile, la hauteur barres déployées, pour que rien
   ne soit poussé sous le pli quand elles réapparaissent. Le remplissage haut
   dégage la navbar, le centrage se fait dans ce qu'il reste. */
/* Le sélecteur est doublé pour les pages boutique : « .woocommerce-page
   .legal-main » (woocommerce.css) impose min-height:70vh et son propre
   remplissage, à spécificité égale — sans ce renfort, la page compte
   70 % de l'écran et le pied de page remonte dans le champ. */
.legal-main.hf-center,
.woocommerce-page .legal-main.hf-center{
	box-sizing:border-box;
	/* La page occupe TOUTE la hauteur visible : le pied de page se trouve donc
	   juste sous le pli et ne se découvre qu'au défilement. « vh » et non
	   « svh » : svh est la hauteur écran barres du navigateur DÉPLOYÉES, plus
	   petite — la page devenait plus courte que l'écran et le pied remontait
	   dans le champ. */
	min-height:100vh;
	display:flex; flex-direction:column; justify-content:center;
	padding-top:calc(var(--frame) + 96px);
	padding-bottom:calc(var(--frame) + 40px);
}
/* Le formulaire et le bloc d'accès portent « margin:0 auto » : en contexte flex,
   des marges latérales automatiques annulent l'étirement et l'élément se réduit
   à la largeur de son contenu. On lui rend sa pleine largeur, son max-width
   continue de le brider et les marges auto de le centrer. */
.legal-main.hf-center > *{ width:100%; }

/* ============ EN-TÊTE (centré) ============ */
.legal-main .kicker{
	font-family:var(--mono); font-weight:400; font-size:clamp(11px,1.1vw,12px);
	letter-spacing:.36em; text-indent:.36em; text-transform:uppercase; color:var(--gold-soft);
	text-align:center; margin-bottom:clamp(18px,2.6vh,26px);
}
.legal-main h1{
	font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase;
	color:var(--white); text-align:center; text-wrap:balance;
	font-size:clamp(32px,5vw,60px); letter-spacing:.06em; line-height:1.08; margin:0;
}
.legal-main h1::after{
	content:""; display:block; width:48px; height:1px; background:var(--gold-soft);
	margin:clamp(22px,3vh,30px) auto 0;
}
.legal-main .updated{
	font-family:var(--mono); font-weight:400; font-size:clamp(11px,1.2vw,12.5px);
	letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
	text-align:center; margin:clamp(16px,2.2vh,22px) 0 clamp(50px,8vh,88px);
}

/* ============ CORPS ============ */
.legal-body{ font-family:var(--body); color:var(--cream); }

/* Intro : paragraphe d'accroche clair + lettrine dorée (signature éditoriale). */
.legal-body > p:first-of-type{
	font-style:italic; font-size:clamp(16px,1.6vw,20px); line-height:1.78; color:var(--white);
	margin:0 0 clamp(28px,4vh,46px);
}
.legal-body > p:first-of-type::first-letter{
	font-family:var(--title); font-style:italic; font-weight:300; font-size:3.4em; line-height:.82;
	float:left; margin:.04em .14em 0 0; color:var(--gold-soft);
}

/* Titres de section : filet supérieur + tiret doré + label mono. */
/* Enfants DIRECTS seulement : ce filet de section appartient aux pages
   légales. Il s'appliquait aussi au titre du panier vide, un h2 imbriqué dans
   le rendu WooCommerce — d'où une ligne inexpliquée au-dessus de lui. */
.legal-body > h2{
	font-family:var(--mono); font-weight:400; text-transform:uppercase; color:var(--white);
	font-size:clamp(12px,1.4vw,15px); letter-spacing:.22em;
	margin:clamp(46px,7vh,78px) 0 clamp(18px,2.6vh,24px);
	padding-top:clamp(30px,4.6vh,48px); border-top:1px solid var(--line); position:relative;
}
.legal-body > h2::before{
	content:""; position:absolute; top:-1px; left:0; width:44px; height:1px; background:var(--gold-soft);
}
.legal-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-body > h2:first-child::before{ display:none; }

.legal-body > h3{
	font-family:var(--title); font-style:italic; font-weight:300; color:var(--white);
	font-size:clamp(16px,1.6vw,20px); letter-spacing:.02em; margin:clamp(28px,4vh,38px) 0 12px;
}

/* Enfants DIRECTS : cette typographie est celle du corps des pages légales.
   Depuis que la feuille est aussi chargée sur les pages boutique (même
   conteneur .legal-body), elle atteignait les paragraphes du rendu WooCommerce
   — et sa marge « 0 0 1.35em » écrasait le centrage du texte du panier vide. */
.legal-body > p{
	font-style:normal; font-size:clamp(14.5px,1.35vw,16.5px); letter-spacing:.01em; line-height:1.9;
	margin:0 0 1.35em; color:var(--cream); text-wrap:pretty;
}
.legal-body > p:last-child{ margin-bottom:0; }
.legal-body strong{ color:var(--white); font-weight:400; }
.legal-body a{
	color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px;
	text-decoration-thickness:1px; transition:color .3s ease;
}
.legal-body a:hover{ color:var(--white); }
/* Boutique / compte : le même conteneur .legal-body ne doit pas souligner
   tous les liens (cartes, navigation, pied de page du compte). */
.woocommerce-page .legal-body a{ text-decoration:none; }

/* Compte connecté : même cadre que le dashboard (hauteur + padding),
   mais collé en haut pour que Commandes / Adresses ne « sautent » pas. */
.legal-main.hf-account-app,
.woocommerce-page .legal-main.hf-account-app{
	box-sizing:border-box;
	min-height:100vh;
	display:flex; flex-direction:column; justify-content:flex-start;
	padding-top:calc(var(--frame) + 96px);
	padding-bottom:calc(var(--frame) + 40px);
}
.legal-main.hf-account-app > *{ width:100%; }

/* Listes : marqueurs dorés (tiret pour ul, numéro mono pour ol). */
.legal-body > ul, .legal-body > ol{
	font-size:clamp(14.5px,1.35vw,16.5px); letter-spacing:.01em; line-height:1.9;
	color:var(--cream); margin:0 0 1.5em; padding-left:0; list-style:none;
}
.legal-body > ul li, .legal-body > ol li{ position:relative; padding-left:26px; margin-bottom:.7em; }
.legal-body > ul li::before{ content:""; position:absolute; left:2px; top:.78em; width:9px; height:1px; background:var(--gold-soft); }
.legal-body > ol{ counter-reset:hf-leg; }
.legal-body > ol li{ counter-increment:hf-leg; }
.legal-body > ol li::before{
	content:counter(hf-leg,decimal-leading-zero); position:absolute; left:0; top:.15em;
	font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--gold-soft);
}

/* 769–1024px (tablette, iPhone Fold déplié) : le bouton Menu et les icônes
   passent à 44px et « Go Back » descend d'autant (bas à ~108px). Avec les 96px
   du desktop, « Your selection » (panier) venait se coller dessous. Le palier
   ≤768 plus bas reprend la main avec sa propre valeur. */
@media (max-width:1024px){
	.legal-main.hf-center,
	.woocommerce-page .legal-main.hf-center,
	.legal-main.hf-account-app,
	.woocommerce-page .legal-main.hf-account-app{ padding-top:calc(var(--frame) + 136px); }
	/* iOS zoome dès qu'un champ est <16 px — y compris Fold déplié / tablette. */
	.hf-contact-form input,
	.hf-contact-form select,
	.hf-contact-form textarea,
	.hf-field input,
	.hf-field select,
	.hf-field textarea{ font-size:16px; min-height:44px; }
	.hf-gate-btn{ min-height:44px; }
}
@media (max-width:768px){
	.legal-body > p:first-of-type::first-letter{ font-size:2.8em; }
	.hf-contact-form input,
	.hf-contact-form select,
	.hf-field input,
	.hf-field select{ min-height:44px; }
	.hf-gate-btn{ width:100%; min-width:0; }
	.hf-contact-lead{ font-size:15px; }
	.hf-field input,
	.hf-field textarea,
	.hf-field select,
	.hf-contact-form input,
	.hf-contact-form textarea,
	.hf-contact-form select{ font-size:16px; }
	.hf-field-row{ grid-template-columns:1fr; gap:0; }
	.hf-contact-form{ margin-top:clamp(26px,4vh,40px); }
	/* Go back est en absolute sous le Menu : sans ce retrait, les onglets
	   « Se connecter / Créer un compte » passent dessus. */
	.legal-main.hf-center,
	.woocommerce-page .legal-main.hf-center,
	.legal-main.hf-account-app,
	.woocommerce-page .legal-main.hf-account-app{
		padding-top:calc(var(--frame) + 148px);
		justify-content:flex-start;
	}
}

/* ==========================================================================
   CONTACT — même grammaire que les pages Woo (checkout, compte) : filets fins,
   libellés mono en capitales, bouton doré.
   ========================================================================== */
/* Titre en casse naturelle (les pages légales, elles, sont en capitales). */
.hf-contact h1{ text-transform:none; }
/* « Access request » en romain (demande client). */
.hf-contact h1.hf-access-title{ font-style:normal; }
.hf-contact-lead{
	font-family:var(--body); font-style:italic; font-weight:300;
	font-size:clamp(15px,1.5vw,19px); line-height:1.75; color:var(--cream);
	text-align:center; max-width:60ch; margin:clamp(26px,4vh,44px) auto 0;
}
.hf-contact-note{
	margin:clamp(24px,3.4vh,34px) auto 0; padding:14px 18px; max-width:56ch;
	font-family:var(--mono); font-size:12px; letter-spacing:.06em; line-height:1.6;
	border:1px solid var(--line); border-radius:2px; text-align:center;
}
.hf-contact-note.is-ok{ border-color:rgba(199,161,92,.5); color:var(--gold-soft); }
.hf-contact-note.is-error{ border-color:rgba(201,141,141,.5); color:#c98d8d; }

.hf-contact-form{ margin:clamp(34px,5vh,56px) auto 0; max-width:620px; }
.hf-field{ margin:0 0 clamp(18px,2.6vh,26px); }
.hf-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); }
.hf-field label{
	display:block; margin-bottom:11px;
	font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--label);
}
.hf-field input,
.hf-field textarea,
.hf-field select{
	width:100%; background:rgba(255,255,255,.03);
	border:1px solid rgba(244,239,230,.2); border-radius:2px;
	color:var(--white); font-family:var(--body); font-size:15px; line-height:1.5; padding:12px 14px;
	transition:border-color .3s ease, background .3s ease;
}
.hf-field textarea{ resize:vertical; min-height:104px; }
.hf-field input::placeholder,
.hf-field textarea::placeholder{ color:#857a6a; opacity:1; }
.hf-field input:focus,
.hf-field textarea:focus,
.hf-field select:focus{ outline:none; border-color:var(--gold-soft); background:rgba(255,255,255,.05); }
/* Identité du demandeur : lue sur son compte, montrée mais pas ressaisie. */
.hf-field-from{ text-align:left; }
.hf-field .hf-field-label{
	display:block; margin-bottom:11px;
	font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--label);
}
.hf-from{
	display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
	padding:12px 14px; border:1px solid rgba(244,239,230,.12); border-radius:2px;
	background:rgba(255,255,255,.02);
}
.hf-from strong{ font-family:var(--body); font-weight:400; font-size:15px; color:var(--white); }
.hf-from em{ font-family:var(--mono); font-style:normal; font-size:12px; letter-spacing:.04em; color:var(--label); }

/* Sans compte : la porte d'entrée remplace le formulaire. */
.hf-gate{ margin:clamp(34px,5vh,56px) auto 0; max-width:620px; text-align:center; }
.hf-gate-note{
	margin:0; font-family:var(--body); font-style:italic; font-weight:300;
	font-size:clamp(14px,1.4vw,17px); line-height:1.75; color:var(--cream);
	max-width:52ch; margin-inline:auto;
}
.hf-gate-actions{
	display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vh,20px);
	margin-top:clamp(26px,3.6vh,38px);
}
.hf-gate-btn{
	display:inline-flex; align-items:center; justify-content:center; min-width:260px;
	background:transparent; color:var(--gold-soft); border:1px solid var(--gold-soft); border-radius:2px;
	font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
	padding:16px 28px; line-height:1; text-decoration:none;
	transition:background .3s ease, color .3s ease;
}
.hf-gate-btn:hover{ background:var(--gold-soft); color:#000; }
.hf-gate-link{
	font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
	color:var(--label); text-decoration:none; border-bottom:1px solid rgba(244,239,230,.2);
	padding-bottom:3px; transition:color .3s ease, border-color .3s ease;
}
.hf-gate-link:hover{ color:var(--cream); border-color:var(--cream); }

.hf-contact-submit{
	display:inline-flex; align-items:center; justify-content:center; width:100%;
	background:transparent; color:var(--gold-soft); border:1px solid var(--gold-soft); border-radius:2px;
	font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
	padding:16px 28px; line-height:1; cursor:pointer;
	transition:background .3s ease, color .3s ease, transform .12s ease;
}
.hf-contact-submit:hover{ background:var(--gold-soft); color:#000; }
.hf-contact-submit:active{ transform:scale(.98); }
/* Pot de miel : hors écran, jamais focusable au clavier. */
.hf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:640px){
	.hf-from{ flex-direction:column; gap:2px; }
}