/* Hantes Florenia — base commune (variables, reset, préchargeur, menu, footer). */

:root{
	/* PALETTE — noir, or, ivoire chaud */
	--bg:#000000;
	--black:#000000;
	--noir-2:#0b0b0b;              /* surfaces (cartes, tiroir) */
	--gold:#c49a4e;               /* or principal */
	--gold-soft:#c7a15c;          /* or accent (prix, liens actifs) */
	--gold-lite:#d8be8c;          /* champagne (survols, éclats) */
	--gold-deep:#a17e3c;
	--ink:#141210;                /* brun-noir chaud (UI sur fond clair) */
	--media-bg:#E5E5E5;           /* fond des visuels produit (carrousel, loupe) */
	--white:#f4efe6;              /* ivoire chaud (titres, texte fort) */
	--cream:#e7dcc8;              /* crème (texte courant clair) */
	--muted:#8f8577;              /* taupe chaud (mentions discrètes) */
	--label:#b3a99b;              /* taupe éclairci : libellés et intitulés de formulaire */
	/* CHAMPS DE SAISIE — fond sombre à peine translucide : assez dense pour que
	   la saisie reste lisible par-dessus la photo, assez ouvert pour que celle-ci
	   se devine et que le champ ne fasse pas bloc opaque. Le liseré reste
	   discret : le remplissage suffit à dessiner le champ, la bordure n'a plus à
	   porter le contraste. Elle ne s'affirme qu'au survol, puis passe à l'or au
	   focus. */
	--field-bg:rgba(7,6,5,.6);         /* gris très foncé chaud, translucide */
	--field-bg-focus:rgba(14,12,10,.7);  /* le même, un peu plus dense, au focus */
	--field-line:rgba(244,239,230,.13);      /* liseré au repos */
	--field-line-hover:rgba(244,239,230,.26); /* liseré au survol */
	--placeholder:#857a6a;        /* invites de saisie, et valeur des listes déroulantes */
	--line:rgba(244,239,230,.14); /* filets clairs chauds */
	--line-soft:rgba(244,239,230,.09);
	--mauve:#d3ba8a;              /* héritage → sable doré (plus de violet) */
	--title:"Fraunces", Georgia, serif;
	--body:"Fraunces", Georgia, serif;
	--script:"Pinyon Script", cursive;
	--mono:"Manrope", ui-sans-serif, sans-serif;
	--frame: clamp(14px, 1.4vw, 22px);

	/* DESIGN SYSTEM — tokens (ruptures : 640 / 760 / 1024px) */

	/* Marge latérale de page + largeurs de conteneur */
	--gutter: clamp(20px, 5vw, 62px);      /* padding latéral des sections */
	--gutter-sm: clamp(16px, 4vw, 40px);   /* variante resserrée */
	--container: 1560px;                    /* contenu large (collections) */
	--container-mid: 1180px;                /* contenu texte (story) */
	--container-narrow: 880px;              /* pages légales */
	--container-hero: min(1080px, 92vw);    /* héros centrés */

	/* Échelle d'espacement fluide (vertical rythme) */
	--space-3xs: clamp(6px, 1vw, 9px);
	--space-2xs: clamp(10px, 1.4vw, 14px);
	--space-xs:  clamp(14px, 2vw, 20px);
	--space-sm:  clamp(20px, 3vw, 34px);
	--space-md:  clamp(28px, 4.5vh, 44px);
	--space-lg:  clamp(40px, 7vh, 80px);
	--space-xl:  clamp(56px, 9vh, 110px);
	--space-2xl: clamp(70px, 12vh, 150px);

	/* Échelle typographique fluide (max = taille desktop du design) */
	--fs-micro:   clamp(7px, 0.7vw, 7px);      /* micro-CTA */
	--fs-mono-xs: clamp(11px, 1vw, 12px);      /* mentions mono (plancher 11px : 10px illisible sur mobile) */
	--fs-mono-sm: clamp(11px, 1.1vw, 12px);    /* eyebrow / labels */
	--fs-mono:    clamp(13px, 1.2vw, 14px);    /* mono courant */
	--fs-body-sm: clamp(13px, 1.15vw, 15.5px);
	--fs-body:    clamp(14px, 1.35vw, 17px);
	--fs-body-lg: clamp(16px, 1.4vw, 21px);
	--fs-title-xs: clamp(15px, 1.5vw, 19px);
	--fs-title-sm: clamp(17px, 1.8vw, 22px);
	--fs-title:    clamp(20px, 2.5vw, 30px);
	--fs-title-lg: clamp(22px, 2.6vw, 34px);
	--fs-title-xl: clamp(22px, 3vw, 40px);
	--fs-display:  clamp(30px, 5.5vw, 68px);
	--fs-display-lg: clamp(30px, 6.2vw, 86px);

	/* Interlignes */
	--lh-tight: 1.2;
	--lh-snug: 1.5;
	--lh-body: 1.7;
	--lh-loose: 1.9;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
	background:var(--bg); color:var(--white);
	font-family:var(--body);
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	overflow-x:hidden; min-height:100vh;
}
a{ color:var(--mauve); text-decoration:none; transition:color .3s ease; }
a:hover{ color:var(--white); }
img{ max-width:100%; }

/* ============ LOADER + DOCKING MARK ============ */
/* Noir franc : le préchargeur couvre l'écran à l'arrivée sur le site comme à
   chaque changement de page, il ne doit laisser voir aucun gris. */
/* Noir posé en dégradé et non en couleur de fond : Safari 26 teinte sa barre
   d'adresse d'après la COULEUR de fond des calques fixes collés au bord de
   l'écran, et gardait ce noir jusqu'au premier défilement. Un dégradé n'est
   pas pris en compte : la barre reste transparente dès l'ouverture. */
#loaderBg{ position:fixed; inset:0; z-index:900; background:linear-gradient(#000,#000); transition:opacity 1.1s ease; }
#loaderBg.gone{ opacity:0; }
.mark{
	/* fixed pour coïncider avec le loader (évite le décalage scrollbar) ; absolute une fois docké */
	position:fixed; left:50%; top:50%; z-index:950;
	transform:translate(-50%,-50%);
	font-family:var(--script);
	font-size:clamp(88px, 12vw, 150px); line-height:1;
	color:#ffffff;
	text-shadow:0 2px 30px rgba(255,255,255,.14);
	opacity:0; animation:markIn 1.5s ease forwards;
	transition:top 1.15s cubic-bezier(.66,0,.2,1), font-size 1.15s cubic-bezier(.66,0,.2,1);
	-webkit-user-select:none; user-select:none;
}
/* reste au-dessus du loader pendant le dock ; redescend sous le menu une fois .settled */
.mark.settled{ z-index:105; }
/* Docké : repasse en absolute pour défiler avec la page (le logo n'est pas sticky). */
.mark.docked{ position:absolute; top:calc(var(--frame) + 33px); font-size:clamp(38px,3.4vw,46px); }
/* Logo image (custom_logo) : taille par hauteur ; se réduit au dock. */
.mark img{ display:block; height:auto; width:clamp(128px,15vw,204px); transition:width 1.15s cubic-bezier(.66,0,.2,1); }
.mark.docked img{ width:91px; }
@keyframes markIn{ from{ opacity:0; transform:translate(-50%,-46%); } to{ opacity:1; transform:translate(-50%,-50%); } }
.mark a{ color:inherit; }

/* Intro jouée une fois par session : ensuite loader masqué, mark directement docké. */
.hf-preloaded #loaderBg{ display:none !important; }
.hf-preloaded .mark{ position:absolute; top:calc(var(--frame) + 33px); font-size:clamp(38px,3.4vw,46px); opacity:1; animation:none; z-index:105; transition:none; }
.hf-preloaded .mark img{ width:91px; transition:none; }
.hf-preloaded .menu-btn,
.hf-preloaded .nav-actions{ opacity:1; }

/* ============ MENU BUTTON ============ */
.menu-btn{
	position:absolute; left:calc(var(--frame) + 24px); top:calc(var(--frame) + 18px); z-index:120;
	display:flex; align-items:center; gap:14px;
	background:none; border:none; cursor:pointer; padding:6px 2px;
	color:var(--white);
	opacity:0; transition:opacity .8s ease .3s, color .3s ease;
}
body.ready .menu-btn{ opacity:1; }
.menu-btn:hover{ color:var(--mauve); }
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:20px; }
.burger span{ display:block; height:1.5px; background:currentColor; transition:transform .4s ease, opacity .3s ease; }
body.menu-open .burger span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

/* ============ MENU OVERLAY ============ */
/* Lien d'évitement (a11y, WCAG 2.4.1) — masqué jusqu'au focus clavier. */
.hf-skip-link{ position:fixed; top:10px; left:10px; z-index:9999; padding:10px 18px; background:var(--gold-soft); color:#000; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border-radius:2px; transform:translateY(-160%); transition:transform .2s ease; }
.hf-skip-link:focus{ transform:none; outline:2px solid #000; outline-offset:2px; }

#menu{
	position:fixed; inset:0; z-index:110;
	/* Menu transparent : c'est l'overlay du fond de page qui se fonce à l'ouverture. */
	background:transparent;
	opacity:0; visibility:hidden;
	display:flex; flex-direction:column; justify-content:space-between;
	padding:clamp(100px,0vh,168px) clamp(40px,5vw,90px) clamp(40px,1vh,64px) calc(var(--frame) + 110px);
}
body.menu-open #menu{ opacity:1; visibility:visible; }
/* Menu (ou tiroir panier) ouvert : on verrouille le défilement de la page. */
body.menu-open, body.cart-open{ overflow:hidden; }
/* À l'ouverture du menu, le contenu s'efface (il ne reste que l'image de fond). */
body.menu-open main,
body.menu-open .intro-scene,
body.menu-open .letter,
body.menu-open .founder,
body.menu-open .collection,
body.menu-open .deck,
body.menu-open .gallery,
body.menu-open .archive-gallery,
body.menu-open .legal-main,
body.menu-open .site-foot{ opacity:0 !important; transition:opacity .35s ease; }
#menu nav{ display:flex; flex-direction:column; gap:clamp(20px,2.8vh,32px); align-items:flex-start; }
#menu nav a{
	font-family:var(--body); font-style:italic; font-weight:400;
	font-size:15px; letter-spacing:.14em; color:#fff; line-height:1.1;
	width:max-content; opacity:0; transform:translateY(4px); filter:blur(2px);
	transition:opacity .18s ease, transform .18s ease, filter .18s ease, color .3s ease;
}
/* Ouverture : les liens se révèlent un par un, du haut vers le bas. La cascade
   est posée par app.js (classe .on), un minuteur par lien : les transition-delay
   du CSS sortaient parfois dans le désordre. */
#menu nav a.on{ opacity:.92; transform:none; filter:blur(0); }
#menu nav a .caret{ height:.95em; background:#fff; }
#menu nav a:hover{ opacity:1; transform:translateX(10px); color:var(--gold-soft); }
#menu nav a.current{ color:var(--gold-soft); }
/* Sélecteur de langue : la langue courante en doré, l'autre atténuée. */
.lang-switch .ls-part{ opacity:.45; transition:opacity .3s ease, color .3s ease; }
.lang-switch .ls-part.on{ color:var(--gold-soft); opacity:1; }
.lang-switch .ls-sep{ opacity:.45; }
.lang-switch:hover .ls-part{ opacity:.8; }
.lang-switch:hover .ls-part.on{ opacity:1; }
.menu-foot{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.menu-foot a{ font-family:var(--body); font-style:italic; font-weight:400; font-size:14px; letter-spacing:.08em; color:#d2c6b0; opacity:.65; }
.menu-foot a:hover{ opacity:1; color:var(--gold-soft); }

@media (prefers-reduced-motion: reduce){
	#menu nav a{ transition:opacity .2s ease, color .3s ease; transform:none; filter:none; }
	body.menu-open #menu nav a{ transition-delay:0s; }
}

/* ============ ACTIONS NAVBAR (compte + panier) ============ */
.nav-actions{
	position:absolute; right:calc(var(--frame) + 24px); top:calc(var(--frame) + 20px); z-index:120;
	display:flex; align-items:center; gap:clamp(14px,1.6vw,22px);
	opacity:0; transition:opacity .8s ease .3s;
}
.hf-fx{ position:relative; }
.hf-fx-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:5px;
	height:26px; padding:0; background:none; border:none; cursor:pointer;
	font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.14em;
	color:var(--white); transition:color .3s ease;
}
.hf-fx-chevron{
	width:8px; height:6px; opacity:.42; flex:0 0 auto;
	transition:opacity .25s ease, transform .25s ease;
}
.hf-fx-btn:hover .hf-fx-chevron, .hf-fx.is-open .hf-fx-chevron{ opacity:.8; }
.hf-fx.is-open .hf-fx-chevron{ transform:rotate(180deg); }
.hf-fx-btn:hover, .hf-fx.is-open .hf-fx-btn{ color:var(--gold-soft); }
.hf-fx-list{
	position:absolute; top:calc(100% + 8px); right:0; z-index:130;
	margin:0; padding:8px 0; min-width:4.6em;
	list-style:none; background:#141210; border:1px solid rgba(199,161,92,.38);
}
.hf-fx-list a{
	display:block; padding:7px 14px;
	font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.14em;
	color:#e7ddcb; text-align:right; text-decoration:none;
	transition:color .25s ease;
}
.hf-fx-list a:hover, .hf-fx-list a.is-on{ color:var(--gold-soft); }

/* Sélecteur accroché au prix : le bouton n'a plus de typo propre, il porte celle
   des chiffres qu'il enveloppe et pose seulement son chevron à leur droite. */
.hf-fx-price{ display:inline-flex; vertical-align:baseline; }
.hf-fx-price .hf-fx-btn{
	height:auto; gap:7px; align-items:baseline; color:inherit;
	font:inherit; letter-spacing:inherit; text-align:left;
}
.hf-fx-price .hf-fx-val{ display:inline-flex; align-items:baseline; }
.hf-fx-price .hf-fx-chevron{ width:9px; height:7px; opacity:.55; transform:translateY(-1px); }
.hf-fx-price .hf-fx-btn:hover .hf-fx-chevron,
.hf-fx-price.is-open .hf-fx-chevron{ opacity:1; }
.hf-fx-price.is-open .hf-fx-chevron{ transform:translateY(-1px) rotate(180deg); }
/* La couleur du prix ne doit pas virer au survol : seul le chevron répond. */
.hf-fx-price .hf-fx-btn:hover, .hf-fx-price.is-open .hf-fx-btn{ color:inherit; }
.hf-fx-price .hf-fx-list{ right:auto; left:0; min-width:5.2em; }
.hf-fx-price .hf-fx-list a{ text-align:left; }
body.ready .nav-actions{ opacity:1; }
body.menu-open .nav-actions{ opacity:0; pointer-events:none; }
.nav-ico{
	position:relative; display:inline-flex; align-items:center; justify-content:center;
	width:26px; height:26px; padding:0; background:none; border:none; cursor:pointer;
	color:var(--white); transition:color .3s ease, transform .3s ease;
}
.nav-ico:hover{ color:var(--gold-soft); transform:translateY(-1px); }
.nav-ico svg{ width:22px; height:22px; }
.nav-ico-dot{ position:absolute; top:1px; right:1px; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); }
.hf-cart-count{
	position:absolute; top:-7px; right:-9px; min-width:18px; height:18px; padding:0 5px;
	display:flex; align-items:center; justify-content:center;
	background:var(--gold-soft); color:#000; border-radius:9px;
	font-family:var(--mono); font-weight:400; font-size:10px; line-height:1;
	opacity:0; transform:scale(.6); transition:opacity .3s ease, transform .3s ease;
}
.hf-cart-count.has{ opacity:1; transform:scale(1); }

/* ============ TIROIR PANIER (mini-cart) ============ */
.cart-overlay{
	position:fixed; inset:0; z-index:130; background:rgba(0,0,0,.6);
	opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
body.cart-open .cart-overlay{ opacity:1; visibility:visible; }
.cart-drawer{
	position:fixed; top:0; right:0; z-index:131; height:100%;
	width:min(420px,100%); max-width:100%; background:#0a0a0a; border-left:1px solid rgba(244,239,230,.14);
	display:flex; flex-direction:column;
	transform:translateX(100%); transition:transform .5s cubic-bezier(.5,.02,.2,1);
	box-shadow:-20px 0 60px rgba(0,0,0,.5);
	padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.cart-open .cart-drawer{ transform:none; }
/* inert via JS (a11y) ; repli CSS si inert non géré par le navigateur. */
.cart-drawer[inert]{ pointer-events:none; }

/* ============ 404 — page introuvable (écran de marque) ============ */
.hf-404{ min-height:74vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(14px,2vh,22px); max-width:var(--container-narrow); margin:0 auto; padding:clamp(120px,18vh,220px) var(--gutter) clamp(80px,12vh,140px); }
.hf-404-eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft); margin:0; }
.hf-404-title{ font-family:var(--title); font-style:italic; font-weight:400; font-size:clamp(30px,4vw,46px); color:var(--white); margin:0; }
.hf-404-lead{ font-family:var(--body); font-style:italic; font-weight:300; font-size:clamp(15px,1.4vw,18px); line-height:1.9; color:var(--cream); max-width:46ch; margin:0 auto; }
.hf-404-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:clamp(10px,2vh,20px); }
.hf-404-btn{ display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 30px; border-radius:2px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; border:1px solid var(--line); color:var(--cream); transition:border-color .3s ease, color .3s ease, background .3s ease; }
.hf-404-btn:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
.hf-404-btn.primary{ background:transparent; color:var(--gold-soft); border-color:var(--gold-soft); }
.hf-404-btn.primary:hover{ background:var(--gold-soft); color:#000; }
.hf-404-btn.primary:hover{ background:transparent; color:var(--gold-soft); }
.cart-drawer-head{
	display:flex; align-items:center; justify-content:space-between;
	padding:clamp(22px,3vh,30px) clamp(22px,3vw,32px) clamp(16px,2vh,22px);
	border-bottom:1px solid rgba(244,239,230,.12);
}
.cart-drawer-title{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; font-size:16px; letter-spacing:.14em; color:var(--white); }
.cart-drawer-close{ background:none; border:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; transition:color .3s ease; }
.cart-drawer-close:hover{ color:var(--gold-soft); }
.cart-drawer .widget_shopping_cart_content{ flex:1; min-width:0; overflow-x:hidden; overflow-y:auto; padding:clamp(18px,2.4vh,26px) clamp(22px,3vw,32px) clamp(22px,3vh,30px); }

/* ============ CARET (typewriter partagé) ============ */
.caret{ display:inline-block; width:1px; margin-left:2px; background:currentColor; animation:blink .9s steps(1) infinite; vertical-align:baseline; height:.95em; }
@keyframes blink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* ============ PIED DE PAGE ============ */
/* z-index:2 → au-dessus des fonds fixes (sinon le footer reste caché). */
.site-foot{
	position:relative; z-index:2; background:transparent;
	padding:clamp(48px,8vh,90px) var(--gutter) clamp(26px,4vh,42px);
	border-top:1px solid rgba(244,239,230,.12);
}
.foot-inner{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.4fr 2fr; gap:clamp(30px,6vw,90px); align-items:start; }
.foot-brand{ max-width:340px; }
.foot-logo img{ height:clamp(34px,3.4vw,46px); width:auto; display:block; }
.foot-tag{ font-family:var(--body); font-style:italic; font-size:clamp(13px,1.1vw,15px); line-height:1.6; color:#cfc2ac; margin:clamp(16px,2.4vh,24px) 0 0; }
/* Lieu, juste sous l'accroche : c'est elle qui porte l'espace vers le bas. */
.foot-place{ font-family:var(--body); font-style:italic; font-size:clamp(13px,1.1vw,15px); line-height:1.6; color:#cfc2ac; opacity:.72; margin:2px 0 clamp(18px,2.6vh,26px); }
.foot-social{ display:flex; gap:14px; }
.foot-social a{ color:var(--white); display:inline-flex; transition:color .3s ease, transform .3s ease; }
.foot-social a:hover{ color:var(--gold-soft); transform:translateY(-2px); }
.foot-social svg{ width:17px; height:17px; }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px); }
.foot-col h4{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 clamp(16px,2.4vh,22px); }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(10px,1.6vh,14px); }
.foot-col a{ font-family:var(--title); font-style:italic; font-weight:400; font-size:clamp(14px,1.2vw,16px); color:#d8ccb6; transition:color .3s ease, padding-left .3s ease; }
.foot-col a:hover{ color:var(--gold-soft); padding-left:5px; }
.foot-base{ max-width:var(--container); margin:clamp(40px,6vh,64px) auto 0; padding-top:clamp(18px,2.6vh,24px); border-top:1px solid rgba(244,239,230,.1); display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--mono); font-weight:400; font-size:var(--fs-mono-xs); letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }

/* ============ FOND DE PAGE EN VIDÉO (Accueil / Collections / Story) ============ */
/* Le calque garde sa classe d'origine ; la vidéo se glisse dessous, l'overlay ::after reste au-dessus. */
.home-bg, .coll-bg, .st-bg{ overflow:hidden; }
.home-bg::after, .coll-bg::after, .st-bg::after{ z-index:1; }
.bg-video{
	position:absolute; inset:0; z-index:0;
	width:100%; height:100%; object-fit:cover; object-position:center;
	border:0; pointer-events:none;
}
/* Mouvement réduit : on s'en tient au poster posé en background-image. */
@media (prefers-reduced-motion: reduce){
	.bg-video{ display:none; }
}

/* ============ MOBILE / TABLETTE — ruptures canoniques (desktop >1024 intact) ============ */
/* ≤1024 : footer 1 colonne (héritage 820) + zones tactiles ≥44px. */
@media (max-width:1024px){
	.foot-inner{ grid-template-columns:1fr; gap:36px; }
	.foot-cols{ grid-template-columns:repeat(3,1fr); gap:24px; }
	/* Sans le libellé, le bouton se réduit aux deux traits (~24px) : on élargit la
	   zone tactile vers la droite sans déplacer le burger. */
	.menu-btn{ min-height:44px; min-width:44px; justify-content:flex-start; }
	.nav-ico{ min-width:44px; min-height:44px; }
	.hf-fx-btn{ min-height:44px; }
	/* Sur le prix, un min-height creuserait la ligne : on élargit la zone tactile
	   par du remplissage vertical, repris en marge négative. */
	.hf-fx-price .hf-fx-btn{ min-height:0; padding:10px 0; margin:-10px 0; }
	/* Le bouton Menu et les icônes passent à 44px de haut ici : leur centre descend
	   à ~55px alors que le logo restait calé à 47, d'où le décalage vertical.
	   On redescend le logo pour aligner les trois sur la même ligne médiane. */
	.mark.docked,
	.hf-preloaded .mark{ top:calc(var(--frame) + 41px); }
	.cart-drawer-close{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
	.hf-lightbox-close{ width:44px; height:44px; }
	.hf-fx-list a{ padding:11px 14px; min-height:44px; box-sizing:border-box; }
	/* Le menu s'ouvre vers le bas, par-dessus « Buy » et le texte qui suit.
	   Sans empilement sur l'enveloppe, ces blocs (plus tard dans la page) le
	   recouvrent, même avec un z-index sur la liste. */
	.hf-fx.is-open{ z-index:40; }
	.hf-fx.is-open .hf-fx-list{ z-index:40; box-shadow:0 18px 40px rgba(0,0,0,.5); }
	.col-buyrow:has(.hf-fx.is-open),
	.col-subrow:has(.hf-fx.is-open),
	.hf-pdp-price-row:has(.hf-fx.is-open){ position:relative; z-index:30; }
	.drop-left:has(.hf-fx.is-open),
	.hf-pdp-summary:has(.hf-fx.is-open){ position:relative; z-index:4; }
	/* Zone tactile via padding, mais gap réduit pour ne pas trop écarter les liens. */
	#menu nav{ gap:clamp(6px,1vh,12px); }
	#menu nav a{ padding-block:11px; }
	.menu-foot a{ display:inline-block; padding-block:11px; }
	.foot-col a{ display:inline-block; padding-block:13px; }
	.foot-social a{ min-width:44px; min-height:44px; }
	.hf-skip-link{ min-height:44px; display:inline-flex; align-items:center; }
}
/* ≤768 : colonnes footer en 1fr, base empilée, menu resserré. */
@media (max-width:768px){
	/* Compte et panier rapprochés (demande client) : 39 → 25 px entre les deux
	   dessins ; les zones tactiles de 44 px se touchent sans se chevaucher. */
	.nav-actions{ right:calc(var(--gutter) + env(safe-area-inset-right, 0px)); gap:0; }
	/* Le sélecteur ne fait que la largeur du prix. Ouvert, le menu couvre la
	   colonne : sinon « Buy », la description ou les pastilles restent lisibles
	   juste à sa droite. */
	.hf-fx-price.is-open .hf-fx-list{
		width:calc(100vw - 2 * var(--gutter));
		min-width:0; box-sizing:border-box;
		background:#141210;
	}
	.menu-btn{ left:calc(var(--frame) + 12px + env(safe-area-inset-left, 0px)); }
	.hf-prefs{ gap:10px; }
	/* Les trois rubriques (La Maison | Boutique | Légal) sur UNE ligne, comme
	   sur desktop (demande client). Corps légèrement réduit pour que
	   « All Collections » et « Privacy Notice » tiennent dans ~110 px. */
	.foot-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 12px; }
	.foot-col h4{ margin-bottom:6px; font-size:10px; letter-spacing:.14em; }
	.foot-col ul{ gap:0; }
	.foot-col a{ padding-block:9px; font-size:13px; }
	.foot-inner{ gap:30px; }
	.foot-base{ flex-direction:column; align-items:flex-start; gap:8px; margin-top:34px; }
	/* overlay : moins de retrait à gauche sur petit écran */
	#menu{ padding-left:calc(var(--frame) + 30px + env(safe-area-inset-left, 0px)); padding-right:calc(var(--gutter) + env(safe-area-inset-right, 0px)); padding-top:calc(var(--frame) + 88px + env(safe-area-inset-top, 0px)); padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px)); }
	#menu nav a{ font-size:16px; max-width:100%; white-space:normal; }
	.menu-foot a{ font-size:15px; }
	.cart-drawer{ padding-bottom:env(safe-area-inset-bottom, 0px); }
}

/* Angles communs : boutons et champs du thème arrondis à 2 px. */
button, input[type="submit"], input[type="button"],
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
textarea, select{ border-radius:2px; }
/* Contrôles natifs (listes déroulantes, dates, cases) en rendu sombre. La
   balise <meta color-scheme> a été retirée (elle noircissait la barre Safari
   iOS) : la propriété CSS suffit pour les champs. */
input, select, textarea, button{ color-scheme:dark; }

/* ============ NAVBAR « SMART STICKY » ============ */
/* Le bouton Menu et les icônes compte/panier s'effacent vers le haut quand on
   descend et reviennent dès qu'on remonte.
   Le LOGO reste volontairement hors de ce mécanisme : il n'est pas collant et
   défile avec la page. Le rendre fixe entrait en conflit avec l'animation du
   préchargeur, qui fait justement monter le logo jusqu'à la barre. */
/* Un seul état : « nav-stuck » = on remonte, la barre est là et fixe.
   En descendant la classe est retirée : la navigation redevient absolue et s'en
   va avec la page. Rien ne reste collé en haut, logo compris.
   Le logo n'entre dans le mécanisme qu'une fois « settled », c'est-à-dire après
   l'animation du préchargeur qui le fait justement monter vers la barre. */
/* Quand on remonte, la barre revient d'un coup, logo compris (demande
   client) : plus d'animation d'entrée, qui faisait arriver le logo en décalé. */
body.nav-smart.nav-stuck .menu-btn,
body.nav-smart.nav-stuck .nav-actions{
	position:fixed; animation:none;
}
/* opacity:1 explicite : l'opacité du logo venait de son animation d'entrée. */
body.nav-smart.nav-stuck .mark.docked.settled{
	position:fixed; animation:none; opacity:1;
}
@keyframes hfNavIn{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
/* Téléphone : la navigation a son propre bandeau NOIR, fin et TOUJOURS fixe
   (demande client) : même hauteur sur toutes les pages, à toutes les
   positions de défilement, et ses coins arrondis restent visibles en haut de
   l'écran pendant qu'on fait défiler. Le smart sticky ne s'applique donc plus
   sur téléphone : logo, bouton Menu et icônes restent dans la barre.
   --hf-bar : hauteur de la barre sous la zone de statut, réduite au plus près
   du logo (34 px de haut, la taille de celui du pied de page), qui est remonté
   au maximum (demande client). Les zones tactiles de 44 px du bouton Menu et
   des icônes débordent un peu de la barre, sans que cela se voie. */
.hf-topbar{ display:none; }
@media (max-width:768px){
	:root{
		--hf-bar: 40px;
		--hf-bar-h: calc(var(--hf-bar) + env(safe-area-inset-top, 0px));
	}
	.hf-topbar{
		display:block; position:fixed; top:0; left:0; right:0; z-index:104;
		height:var(--hf-bar-h); background:#000; pointer-events:none;
		/* Défilement rapide sur iPhone : Safari décale parfois la page de
		   quelques pixels vers le bas (rebond, clavier, zoom) et la photo
		   apparaissait en bande entre la zone de statut et la barre. Un
		   prolongement noir de 400 px au-dessus de la barre la couvre — sans
		   « spread », l'ombre décalée laissait un jour juste au-dessus. */
		box-shadow:0 -200px 0 200px #000;
	}
	body.menu-open .hf-topbar{ opacity:0; }
	/* Coins arrondis sous le bandeau (maquette client) : l'image paraît
	   arrondie en haut, au rayon des coins de l'écran de l'iPhone (~56 px). */
	.hf-topbar::before,
	.hf-topbar::after{
		content:""; position:absolute; top:100%; width:56px; height:56px; pointer-events:none;
	}
	.hf-topbar::before{ left:0; background:radial-gradient(circle at 100% 100%, transparent 55.5px, #000 56px); }
	.hf-topbar::after{ right:0; background:radial-gradient(circle at 0 100%, transparent 55.5px, #000 56px); }
	/* Bouton Menu et icônes : fixes, centrés dans la barre (zones de 44 px). */
	.menu-btn,
	.nav-actions,
	body.nav-smart.nav-stuck .menu-btn,
	body.nav-smart.nav-stuck .nav-actions{
		position:fixed; top:calc(env(safe-area-inset-top, 0px) + (var(--hf-bar) - 44px) / 2);
	}
	/* Logo : fixe au centre de la barre dès qu'il a fini de monter depuis le
	   préchargeur (il y monte en position fixe, la transition de « top » reste
	   donc continue). 50 × 34 px, la taille du logo du pied de page
	   (hf-logo-crop.png, 820 × 560). */
	.mark.docked,
	.hf-preloaded .mark,
	body.nav-smart.nav-stuck .mark.docked.settled{
		position:fixed; top:calc(env(safe-area-inset-top, 0px) + var(--hf-bar) / 2);
	}
	.mark.docked img,
	.hf-preloaded .mark img{ width:50px; }
	.mark.docked.settled{ opacity:1; }
	/* Icônes compte / panier plus petites, traits du menu affinés. */
	.nav-ico svg{ width:19px; height:19px; }
	.burger span{ height:1px; }
	body.menu-open .burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
	body.menu-open .burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
	/* Pastille du panier : plus petite, posée sur le coin haut droit du sac.
	   Calée sur le dessin (19 px au centre de la zone de 44 px) et non plus sur
	   la zone tactile, dont elle débordait au-dessus du haut de l'écran. */
	.nav-ico .hf-cart-count{
		top:6px; right:5px; min-width:14px; height:14px; padding:0 3px;
		border-radius:7px; font-size:9px;
	}
	.nav-ico-dot{ top:10px; right:10px; }
}
/* Le logo est centré par translate(-50%,-50%) : l'animation doit le conserver. */
@keyframes hfMarkIn{
	from{ opacity:0; transform:translate(-50%, calc(-50% - 14px)); }
	to{ opacity:1; transform:translate(-50%,-50%); }
}

/* ============ RETOUR — COIN HAUT DROIT (pages secondaires) ============ */
/* Mêmes métriques que le bouton Menu, en miroir : libellé puis icône. */
.hf-corner-back{
	/* Sans cadre ni padding, la FLÈCHE tombe pile sur les traits du burger et
	   « Go back » sur le mot « Menu ». */
	position:absolute; left:calc(var(--frame) + 24px); top:calc(var(--frame) + 62px); z-index:118;
	display:inline-flex; align-items:center; gap:14px; padding:6px 2px;
	color:var(--white); text-decoration:none;
	opacity:0; transition:opacity .8s ease .3s, color .3s ease;
}
body.ready .hf-corner-back{ opacity:1; }
.hf-corner-back:hover{ color:var(--gold-lite); }
.hf-corner-label{ font-family:var(--mono); font-style:normal; font-weight:400; font-size:11px; letter-spacing:.14em; }
.hf-corner-ico{ display:inline-flex; width:20px; justify-content:center; }
.hf-corner-ico svg{ width:20px; height:20px; display:block; }
body.menu-open .hf-corner-back{ opacity:0; pointer-events:none; }

@media (max-width:768px){
	/* Entièrement sur l'image, jamais à cheval sur la barre noire (demande
	   client) : 14 px sous la barre, la flèche à l'aplomb du bouton Menu, hors
	   des coins arrondis. En défilant, il passe SOUS la barre (z-index 103). */
	.hf-corner-back{
		left:calc(var(--frame) + 12px + env(safe-area-inset-left, 0px));
		top:calc(var(--hf-bar-h) + 14px); gap:10px; z-index:103;
	}
}

/* ============ VISIONNEUSE (image en grand, navigable) ============ */
.hf-lightbox{
	position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
	gap:clamp(8px,1.6vw,26px); padding:clamp(24px,5vh,64px) clamp(16px,4vw,72px);
	background:#050505; opacity:0; visibility:hidden;
	transition:opacity .35s ease, visibility .35s ease;
}
.hf-lightbox.is-on{ opacity:1; visibility:visible; }
.hf-lightbox-stage{ margin:0; flex:1 1 auto; min-width:0; height:100%; display:flex; align-items:center; justify-content:center; }
/* Même fond gris et même rayon que le carrousel produit, mais SANS padding :
   le visuel touche ses bords, aucun liseré, juste les angles arrondis. */
.hf-lightbox img{
	display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
	background:var(--media-bg); padding:0; border:0; border-radius:10px; box-shadow:none;
	transform:scale(.985); transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.hf-lightbox.is-on img{ transform:none; }
.hf-lightbox-nav{
	flex:0 0 auto; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
	background:none; border:1px solid rgba(244,239,230,.24); border-radius:2px;
	color:#f4efe6; cursor:pointer; transition:border-color .3s ease, color .3s ease;
}
.hf-lightbox-nav svg{ width:20px; height:20px; display:block; }
.hf-lightbox-nav:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
.hf-lightbox.is-solo .hf-lightbox-nav,
.hf-lightbox.is-solo .hf-lightbox-count{ display:none; }
.hf-lightbox-close{
	position:absolute; top:clamp(14px,2.4vh,26px); right:clamp(16px,2.4vw,30px);
	width:38px; height:38px; display:flex; align-items:center; justify-content:center;
	background:none; border:1px solid rgba(244,239,230,.24); border-radius:2px;
	color:#f4efe6; font-size:22px; line-height:1; cursor:pointer;
	transition:border-color .3s ease, color .3s ease;
}
.hf-lightbox-close:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
.hf-lightbox-count{
	position:absolute; left:0; right:0; bottom:clamp(14px,2.4vh,26px); text-align:center;
	font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(244,239,230,.6);
}
body.lightbox-open{ overflow:hidden; }
/* Bouton d'achat (The Gallery) : sous l'image, au-dessus du compteur. */
.hf-lightbox-cta{
	position:absolute; left:50%; bottom:clamp(44px,6vh,64px); transform:translateX(-50%);
	display:inline-flex; align-items:center; justify-content:center; min-width:200px; height:42px; padding:0 30px;
	background:var(--gold-soft); color:#141210; border-radius:2px; text-decoration:none;
	font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.2em; text-indent:.2em; text-transform:uppercase;
	transition:background .3s ease, color .3s ease;
}
.hf-lightbox-cta[hidden]{ display:none; }
.hf-lightbox-cta:hover{ background:transparent; color:var(--gold-soft); box-shadow:inset 0 0 0 1px var(--gold-soft); }
.hf-lightbox.has-cta{ padding-bottom:calc(clamp(44px,6vh,64px) + 66px); }

/* Téléphone : l'image s'arrête au-dessus d'une bande réservée aux flèches et
   au compteur (une rangée), et au bouton d'achat s'il y en a un. Avant, les
   visuels hauts recouvraient les flèches (demande client). */
@media (max-width:768px){
	.hf-lightbox{ padding:64px 12px 92px; }
	.hf-lightbox-nav{ position:absolute; bottom:24px; width:44px; height:44px; }
	.hf-lightbox-nav.prev{ left:16px; }
	.hf-lightbox-nav.next{ right:16px; }
	.hf-lightbox-count{ bottom:39px; }
	.hf-lightbox-close{ width:44px; height:44px; top:max(14px, env(safe-area-inset-top, 0px)); right:max(16px, env(safe-area-inset-right, 0px)); }
	.hf-lightbox.has-cta{ padding-bottom:150px; }
	.hf-lightbox-cta{ bottom:88px; }
}

/* ============ BARRE D'ADMIN — scènes plein écran ============ */
/* Connecté, WordPress décale la page de 32 px : les héros en 100vh débordaient
   d'autant et leur contenu tombait sous l'axe de l'écran. On leur retire la
   hauteur de la barre (46 px sous 783 px, comme le fait WordPress). */
.admin-bar .coll-scene[data-scene="0"],
.admin-bar .st-scene[data-scene="0"],
.admin-bar .arch-hero{ height:calc(100vh - 32px);height:calc(100svh - 32px); }
@media screen and (max-width:782px){
	.admin-bar .coll-scene[data-scene="0"],
	.admin-bar .st-scene[data-scene="0"],
	.admin-bar .arch-hero{ height:calc(100vh - 46px);height:calc(100svh - 46px); }
}

/* ============ FOND DE PAGE (image fixe + voile noir) ============
   Fiche produit, caisse, compte, demande d'accès. Le calque est derrière le
   contenu (z-index négatif) : le noir du body reste peint dessous, le texte
   clair et l'or passent devant sans perdre en lisibilité. */
.hf-page-bg{
	position:fixed; inset:0; z-index:-1;
	background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hf-page-bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.84); }

/* Texte réservé aux lecteurs d'écran. Sans cette règle, les mentions
   « Required » de WooCommerce s'affichaient à côté de chaque libellé. */
.screen-reader-text{
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
	position:static !important; width:auto; height:auto; margin:0;
	overflow:visible; clip:auto; clip-path:none; white-space:normal;
}

/* ============ iPHONE — pas de rebond élastique ============
   Sur iOS (classe posée par app.js), la page ne se tire plus dans le vide au-
   delà de son haut ou de son bas : la zone hors page, où Safari 26 recopie
   le bord de la page sous sa barre, n'est plus atteignable.
   Rappel : les fonds sont des calques fixed natifs. Les tentatives de calque
   absolu suivi au défilement (v5.56.13–21) ont été retirées à la demande du
   client (image dupliquée en haut au défilement). */
html.hf-ios, html.hf-ios body{ overscroll-behavior-y:none; }

/* ============ PRÉCHARGEUR PLEIN ÉCRAN (iPhone) ============
   Safari 26 coupe le calque fixe du préchargeur au bord de sa barre d'adresse,
   et le contenu de la page, lui, passe dessous : il apparaissait sous la barre
   pendant le chargement. Tant que la page n'est pas prête, tout ce qui n'est
   pas le préchargeur est masqué (sans effet sur la mise en page). */
body:not(.ready) > :not(#loaderBg):not(.mark):not(script):not(.hf-skip-link){ visibility:hidden; }
/* iPhone : le préchargeur est dans le conteneur qui défile (#hf-scroll) ; il
   reste visible même si le conteneur est masqué. */
body:not(.ready) #loaderBg, body:not(.ready) .mark{ visibility:visible; }

/* ============ FOND « VERSION TÉLÉPHONE » (facultatif) ============
   Une photo paysage ne peut pas remplir toute la hauteur d'un téléphone tenu
   droit sans être agrandie ~3 fois. Si une image au format portrait est
   choisie dans la page (champ « Fond — version téléphone »), elle la remplace
   sur téléphone : pleine hauteur, sans zoom excessif. */
@media (max-width:768px) and (orientation:portrait){
	.has-bg-mobile{ background-image:var(--hf-bg-m) !important; }
}

/* ============ iPHONE / iPAD — défilement intérieur (classe posée par header.php) ============
   Safari 26 coupe tout calque position:fixed ou sticky au bord de sa barre
   d'adresse (comportement voulu par WebKit, bug 297779) : une photo « fixe »
   laisse une bande noire dessous. Ici la page ne défile plus : c'est
   #hf-scroll qui défile, et la photo, sortie du conteneur, est un simple calque
   absolu qui ne bouge jamais. Elle passe sous la barre translucide, sans
   tremblement (vérifié au simulateur iOS 26.1 et 26.5, gestes réels).
   Contrepartie : Safari ne replie plus sa barre (il ne le fait que pour le
   défilement de la page elle-même). Hors iOS, #hf-scroll est un bloc neutre. */
html.hf-ios-inner,
html.hf-ios-inner body{ height:100%; overflow:hidden; overscroll-behavior:none; }
html.hf-ios-inner body{ position:static; min-height:0; }
/* Le conteneur descend sous la barre (--hf-under : zone de la barre, un peu
   large) pour que le contenu y passe comme en défilement natif ; une marge
   finale de même hauteur garde la fin de page atteignable au-dessus d'elle. */
html.hf-ios-inner{ --hf-under:calc(env(safe-area-inset-bottom, 0px) + 90px); }
/* Rebond élastique rendu au conteneur (demande client, avec le « tirer pour
   rafraîchir » d'app.js) : il reste contenu, la page elle-même ne bouge pas —
   la photo, hors du conteneur, ne se décroche donc jamais. */
html.hf-ios-inner #hf-scroll{
	position:absolute; top:0; left:0; right:0; bottom:calc(-1 * var(--hf-under));
	overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none; overscroll-behavior-y:contain;
	scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
html.hf-ios-inner #hf-scroll::after{ content:""; display:block; height:var(--hf-under); }
html.hf-ios-inner .home-bg,
html.hf-ios-inner .coll-bg,
html.hf-ios-inner .st-bg,
html.hf-ios-inner .arch-bg,
html.hf-ios-inner .hf-page-bg,
html.hf-ios-inner #loaderBg{
	position:absolute; inset:auto; top:0; left:0; width:100%;
	height:calc(100vh + 120px); height:calc(100vh + 120px);height:calc(100lvh + 120px);
}
/* Le noir du préchargeur suit le même chemin (sorti du conteneur, absolu) :
   fixe, Safari s'en servait pour teinter sa barre, qui restait noire en bas
   de l'écran une seconde après l'apparition de la page. */
/* All Collections (fond tourné d'un quart de tour sur téléphone) : même
   débord sous la barre que les autres fonds, en longueurs fixes — un 50 % de
   hauteur se calait sur la fenêtre réduite du chargement et la photo
   s'arrêtait au-dessus de la barre, noire jusqu'au premier défilement. */
@media (max-width:768px) and (orientation:portrait){
	html.hf-ios-inner .coll-bg:not(.has-bg-video):not(.has-bg-mobile){
		top:calc((100vh + 120px) / 2); top:calc((100vh + 120px) / 2);top:calc((100lvh + 120px) / 2);
		width:calc(100vh + 120px); width:calc(100vh + 120px);width:calc(100lvh + 120px);
	}
}
/* Tirer pour rafraîchir (app.js) : la pastille sort de sous la barre noire. */
.hf-ptr{
	position:fixed; top:var(--hf-bar-h, 0px); left:50%; z-index:103;
	width:36px; height:36px; border-radius:50%;
	display:grid; place-items:center; pointer-events:none;
	background:rgba(12,11,10,.78); border:1px solid rgba(244,239,230,.28); color:#f4efe6;
	opacity:0; transform:translate(-50%,-44px);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hf-ptr svg{ width:18px; height:18px; display:block; }
.hf-ptr.is-armed{ color:var(--gold-soft); border-color:var(--gold-soft); }
.hf-ptr.is-back{ transition:transform .25s ease, opacity .25s ease; }
.hf-ptr.is-spin{ color:var(--gold-soft); border-color:var(--gold-soft); opacity:1; transition:transform .2s ease; }
.hf-ptr.is-spin svg{ animation:hfPtrSpin .7s linear infinite; }
@keyframes hfPtrSpin{ to{ transform:rotate(360deg); } }

/* Menu, panier, visionneuse ouverts ou galerie verrouillée : le conteneur ne
   défile pas (c'était le rôle de overflow:hidden sur le body). */
html.hf-ios-inner body.menu-open #hf-scroll,
html.hf-ios-inner body.cart-open #hf-scroll,
html.hf-ios-inner body.lightbox-open #hf-scroll,
html.hf-ios-inner.arch-locked #hf-scroll{ overflow:hidden; }

/* ============ MOBILE — plancher de lisibilité (desktop inchangé) ============ */
@media (max-width:768px){
	:root{
		--fs-micro: 10px;
		--fs-mono-xs: 11px;
		--fs-mono-sm: 11px;
		--fs-body-sm: 14px;
		--fs-body: 15px;
		/* Go back (barre + 14 px, ~32 px de haut) puis ~50 px d'air. */
		--hf-back-clearance: calc(var(--hf-bar-h) + 96px);
	}
	.hf-corner-label{ font-size:11px; }
	.menu-foot{ font-size:12px; }
	/* Go back (frame+66) + hauteur du lien + filet : toutes les pages secondaires. */
	body.hf-has-back .legal-main,
	body.hf-has-back .hf-404,
	body.hf-has-back main.hf-woo{
		padding-top:var(--hf-back-clearance);
	}
	body.hf-has-back .legal-main.hf-center,
	body.hf-has-back .legal-main.hf-account-app{
		padding-top:var(--hf-back-clearance);
		justify-content:flex-start;
	}
}

/* ============ PAYSAGE BAS (téléphone couché, iPhone Fold déplié ≈ 890×626) ============ */
/* Menu : les liens et le pied (Instagram, conditions, livraison) ne tiennent
   plus. Le menu défile au lieu de couper son dernier lien. */
@media (max-height:700px) and (orientation:landscape) and (max-width:1024px){
	#menu{
		justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain;
		padding-top:calc(var(--frame) + 84px + env(safe-area-inset-top, 0px));
		padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
	}
	#menu nav{ gap:4px; }
	/* Visionneuse : l'image descendait sur le compteur « 01 / 61 ». On réserve
	   la bande du compteur sous l'image. */
	.hf-lightbox{ padding:14px clamp(16px,4vw,72px) 34px; }
	.hf-lightbox-count{ bottom:10px; }
	/* Pied du menu sur une ligne : Instagram · conditions · livraison. */
	.menu-foot{ margin-top:18px; flex-direction:row; flex-wrap:wrap; gap:0 22px; }
}

/* Réarmement d'une scène sortie de l'écran (HF.rearm, app.js) : retour à
   l'état initial sans transition. */
.hf-rearm, .hf-rearm *{ transition:none !important; }

/* ============ Bandeau cookies (inc/cookies.php) ============
   Petite carte en bas à gauche : noir chaud translucide, filet ivoire, or.
   Elle glisse doucement à l'ouverture et ne recouvre rien d'essentiel. */
.hf-cookie{
	position:fixed; left:clamp(14px,1.6vw,24px); bottom:clamp(14px,1.6vw,24px); z-index:105; /* sous le menu (110) et le panier (130) */
	width:min(330px, calc(100vw - 28px)); box-sizing:border-box;
	padding:16px 18px 15px;
	/* Dégradé et non couleur de fond : Safari 26 teinterait sa barre d'adresse
	   de ce noir (calque fixe proche du bas de l'écran). */
	background:linear-gradient(rgba(11,10,9,.86),rgba(11,10,9,.86)); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
	border:1px solid var(--line); border-radius:2px;
	box-shadow:0 22px 50px -28px rgba(0,0,0,.9);
	color:var(--cream);
	opacity:0; transform:translateY(10px);
	transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.hf-cookie[hidden]{ display:none; }
.hf-cookie.is-in{ opacity:1; transform:none; }
.hf-cookie::before{ content:""; position:absolute; left:18px; right:18px; top:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity:.55; }
.hf-cookie-eyebrow{ margin:0 0 7px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); }
.hf-cookie-text{ margin:0; font-family:var(--body); font-style:italic; font-weight:300; font-size:13.5px; line-height:1.5; color:var(--cream); }
.hf-cookie-text a{ color:var(--white); text-decoration:underline; text-decoration-color:rgba(199,161,92,.55); text-underline-offset:3px; white-space:nowrap; transition:color .3s ease; }
.hf-cookie-text a:hover{ color:var(--gold-soft); }
.hf-cookie-actions{ display:flex; align-items:center; gap:16px; margin-top:13px; }
.hf-cookie-actions button{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:background .3s ease, color .3s ease, border-color .3s ease; }
.hf-cookie-accept{ height:30px; padding:0 16px; background:var(--gold-soft); color:var(--ink); border:1px solid var(--gold-soft); }
.hf-cookie-accept:hover{ background:transparent; color:var(--gold-soft); }
.hf-cookie-essential{ height:30px; padding:0; background:none; border:0; color:var(--label); }
.hf-cookie-essential:hover{ color:var(--white); }
.hf-cookie button:focus-visible, .hf-cookie a:focus-visible{ outline:1px solid var(--gold-soft); outline-offset:3px; }
@media (max-width:560px){
	.hf-cookie{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); width:auto; padding:14px 16px 13px; }
	.hf-cookie-text{ font-size:13px; }
	.hf-cookie-actions button{ min-height:40px; }
}
@media (prefers-reduced-motion:reduce){ .hf-cookie{ transition:opacity .2s linear; transform:none; } }

/* Avant-première (inc/launch.php) : seul l'accueil est ouvert, compte et
   panier n'ont pas encore lieu d'être. */
body.hf-prelaunch #navActions{ display:none; }

/* Barre du haut collée au bord de l'écran même zoomé ou clavier ouvert
   (décalages publiés par app.js). « translate » s'ajoute aux transform
   existants (logo centré, animations) sans les remplacer. */
@media (max-width:768px){
	.hf-topbar{ translate:var(--hf-vv-l, 0px) var(--hf-vv-top, 0px); }
	.menu-btn{ translate:var(--hf-vv-l, 0px) var(--hf-vv-top, 0px); }
	.nav-actions{ translate:var(--hf-vv-r, 0px) var(--hf-vv-top, 0px); }
	.mark.docked,
	.hf-preloaded .mark{ translate:var(--hf-vv-c, 0px) var(--hf-vv-top, 0px); }
}

/* Avant-première : le logo seul en haut, ni menu ni icônes. */
body.hf-prelaunch .menu-btn,
body.hf-prelaunch #menu{ display:none; }

/* ============ MISE EN FORME DES TEXTES (admin → inc/richtext.php) ============
   Gras, italique, « droit » dans un texte en italique, et taille par écran
   (ordinateur, tablette ≤ 1024 px, mobile ≤ 768 px ; vide = taille du site :
   la valeur invalide retombe sur celle héritée). */
hf-b{ font-weight:600; }
hf-i{ font-style:italic; }
hf-ni{ font-style:normal; }
hf-nb{ font-weight:400; }
hf-g{ color:var(--gold-soft); }
hf-rt{ font-size:var(--fs-d); }
/* Alignement par écran : le texte devient un bloc pour pouvoir s'aligner. */
hf-rt.hf-al{ display:block; text-align:var(--ta-d); }
@media (max-width:1024px){
	hf-rt{ font-size:var(--fs-t, var(--fs-d)); }
	hf-rt.hf-al{ text-align:var(--ta-t, var(--ta-d)); }
}
@media (max-width:768px){
	hf-rt{ font-size:var(--fs-m, var(--fs-t, var(--fs-d))); }
	hf-rt.hf-al{ text-align:var(--ta-m, var(--ta-t, var(--ta-d))); }
}