/* ==========================================================================
   Fromagerie David : site.css (Nicolam Studio)
   Un étal de fromagère tenu avec soin : le jaune de sa marque porte l'action, le violet les repères, sur une crème chaude ;
   serif d'épicerie fine (Playfair Display) sur un texte simple (Karla), une ombre violette douce. Aucune bibliothèque CSS chargée : tout le style vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts) : Playfair Display 600, Karla 400/500/600/700, latin ---------- */
@font-face{ font-family:"Playfair Display"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/karla-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/karla-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/karla-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/karla-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens (Invariants du prompt) ---------- */
:root{
  /* Couleurs */
  --c-fond:#FAF7F0;          /* A du flux, fond du site, footer */
  --c-carte:#FFFDF8;         /* fond des tuiles, cartes et panneaux posés sur le flux */
  --c-jaune-clair:#FAF1CF;   /* B du flux (jaune en faible opacité), fonds teintés, placeholders */
  --c-jaune:#E5C437;         /* action : boutons pleins, barre d'annonce, carte CTA ; toujours avec #2B2621 dessus (8,76:1),
                                jamais en texte ni en icône sur fond clair */
  --c-violet-clair:#ECE8F4;  /* repères : cellules de stats, pastilles, coches */
  --c-violet:#56478A;        /* repères et texte d'accent : sur-titres, icônes, chiffres, pins, focus (7,37:1 sur le fond) */
  --c-texte:#2B2621;
  --c-texte-2:#665E55;       /* texte secondaire (5,95:1 sur le fond, 5,28:1 sur le violet clair) */
  --c-filet:rgba(43,38,33,.14);
  --c-erreur:#A8281E;
  --grad-signature:linear-gradient(90deg,#E5C437,#56478A);
  --grad-annonce:linear-gradient(180deg,#EFD35E,#E5C437);
  --grad-bouton-clair:linear-gradient(135deg,#FAF1CF 0%,#FAF1CF 40%,#FFFFFF 100%);
  /* Espacements */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  /* Rayons */
  --r-btn:12px; --r-petit:12px; --r-carte:20px; --r-pilule:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Barre d'annonce + header */
  --ann-h:40px; --hdr-h:80px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  /* Typographie */
  --f-titre:"Playfair Display",Georgia,serif;
  --f-texte:"Karla",system-ui,sans-serif;
  --t-h1-accueil:clamp(2.25rem,1.35rem + 3.4vw,4rem);
  --t-h1-page:clamp(2rem,1.3rem + 2.6vw,3.25rem);
  --t-h2:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
  --t-h3:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --t-h4:1.125rem;
  --t-corps:1.0625rem;
  --t-chapo:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --t-label:.875rem;
  --t-surtitre:.8125rem;
  --t-chiffre:clamp(2.25rem,1.8rem + 1.6vw,3rem);
  /* Ombre : une seule pour tout le site, teinte violette, niveau moyen */
  --sh-card:0 1px 2px rgba(86,71,138,.10),0 4px 14px rgba(86,71,138,.14),0 12px 32px rgba(86,71,138,.06),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 3px rgba(86,71,138,.08),0 6px 20px rgba(86,71,138,.10);
  --sh-btn:0 1px 2px rgba(86,71,138,.18),0 4px 12px rgba(86,71,138,.22);
  /* Mouvement : ease-in-out partout, .4s minimum ; ticker et lueur en linear */
  --ease:ease-in-out; --dur:.4s; --dur-in:.9s; --dur-open:.5s;
  /* Tickers */
  --tk-lead:96px; --tk-fade:24px;
}
@supports (background:linear-gradient(in oklch,red,blue)){
  :root{ --grad-signature:linear-gradient(90deg in oklch,#E5C437,#56478A); }
}
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --tk-lead:64px; --ann-h:36px; --hdr-h:68px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth;
  scroll-padding-top:var(--hdr-h); }
body{ margin:0; background:var(--c-fond); color:var(--c-texte); overflow-x:clip; font-family:var(--f-texte);
  font-size:var(--t-corps); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; letter-spacing:inherit; color:inherit; background:transparent; border:0; padding:0; margin:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
[hidden]{ display:none !important; }
::selection{ background:var(--c-jaune); color:var(--c-texte); }
:focus-visible{ outline:2px solid var(--c-violet); outline-offset:3px; }
.nw{ white-space:nowrap; }
.num{ font-family:var(--f-texte); font-weight:600; font-variant-numeric:lining-nums tabular-nums; letter-spacing:0; }

/* Saison raclette : html.hors-saison (posé par site.js) retire tout ce qui ne vit qu'en saison */
html.hors-saison [data-saison]{ display:none !important; }
html:not(.hors-saison) [data-hors-saison]{ display:none !important; }

/* Titres : coupure normale à gauche, balance seulement sur un titre centré ; jamais pretty */
h1,h2,h3,h4{ font-family:var(--f-titre); font-weight:600; color:var(--c-texte); }
h1{ line-height:1.12; letter-spacing:-.015em; }
h2{ font-size:var(--t-h2); line-height:1.2; letter-spacing:-.015em; }
h3{ font-size:var(--t-h3); line-height:1.25; letter-spacing:-.01em; }
h4{ font-size:var(--t-h4); line-height:1.3; }
.center h2,.hero h1,.phero h1{ text-wrap:balance; }
.eyebrow{ display:inline-block; font-family:var(--f-texte); font-weight:600; font-size:var(--t-surtitre); line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase; color:var(--c-violet); }
.lead{ font-size:var(--t-chapo); line-height:1.55; color:var(--c-texte-2); }
.lead a,.tlink{ color:var(--c-violet); text-decoration:underline; text-decoration-color:rgba(86,71,138,.4); text-underline-offset:3px;
  cursor:pointer; transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease); }
.lead a:hover,.tlink:hover{ color:var(--c-texte); text-decoration-color:currentColor; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; isolation:isolate; padding:96px 0; }
.section > .container{ position:relative; z-index:1; }
.section.is-tight{ padding-top:48px; }   /* deux sections d'un même thème : écart réduit */
/* grain 4 % sur les fonds de section uniquement ; les composants restent lisses au-dessus */
.section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width:767px){ .section{ padding-block:64px; } .section.is-tight{ padding-top:32px; } }
/* flux des fonds : A = #FAF7F0, B = #FAF1CF, posé par flow() au build (en saison : classes ; hors saison : data-hs-*) */
.bg-ab,html.hors-saison .section[data-hs-bg="ab"]{ background:linear-gradient(180deg,var(--c-fond),var(--c-jaune-clair)); }
.bg-ba,html.hors-saison .section[data-hs-bg="ba"]{ background:linear-gradient(180deg,var(--c-jaune-clair),var(--c-fond)); }
.bg-aba,html.hors-saison .section[data-hs-bg="aba"]{ background:linear-gradient(180deg,var(--c-fond),var(--c-jaune-clair) 50%,var(--c-fond)); }
.bg-bab,html.hors-saison .section[data-hs-bg="bab"]{ background:linear-gradient(180deg,var(--c-jaune-clair),var(--c-fond) 50%,var(--c-jaune-clair)); }
html.hors-saison .section[data-hs-tight="1"]{ padding-top:48px; }
html.hors-saison .section[data-hs-tight="0"]{ padding-top:96px; }
@media (max-width:767px){
  html.hors-saison .section[data-hs-tight="1"]{ padding-top:32px; }
  html.hors-saison .section[data-hs-tight="0"]{ padding-top:64px; }
}

/* En-tête de section : le chapô prend la largeur de son titre (jamais plus étroit, jamais plus long), plancher ~70 caractères */
.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; width:fit-content; max-width:100%; min-width:min(100%,40rem); }
.shead .lead{ align-self:stretch; contain:inline-size; }
.shead.center{ align-items:center; text-align:center; margin-inline:auto; }
.shead.center .lead{ text-wrap:balance; }
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

/* ---------- Icônes (Phosphor light, une seule épaisseur) ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }

/* ---------- Boutons : deux niveaux, coins doux 12px, icône à droite dans la couleur du libellé ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-texte);
  font-weight:500; font-size:1rem; line-height:1.2; cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),filter var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.btn .ic{ width:20px; height:20px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
/* plein : jaune uni, sans dégradé signature, texte et icône #2B2621 (8,76:1) ; survol et actif à la luminosité */
.btn--primary{ background-color:var(--c-jaune); color:var(--c-texte); box-shadow:var(--sh-btn); }
.btn--primary:hover{ filter:brightness(.94); box-shadow:0 2px 4px rgba(86,71,138,.2),0 10px 22px rgba(86,71,138,.28); }
.btn--primary:active{ filter:brightness(.88); }
.btn--ghost{ color:var(--c-texte); border-color:var(--c-texte); background-color:transparent; }
.btn--ghost:hover{ background-color:rgba(43,38,33,.06); }
.btn--ghost:active{ background-color:rgba(43,38,33,.11); }
/* sur la carte CTA : bouton clair au dégradé clair (135°, point à 40 %), texte #2B2621 ; « M'appeler » en ghost #2B2621 */
.btn--light{ color:var(--c-texte); border-color:transparent; background:var(--grad-bouton-clair);
  background-origin:border-box; background-repeat:no-repeat; box-shadow:0 1px 2px rgba(43,38,33,.16),0 6px 16px rgba(43,38,33,.18); }
.btn--light:hover{ filter:brightness(.95); box-shadow:0 2px 4px rgba(43,38,33,.2),0 10px 22px rgba(43,38,33,.24); }
.btn--light:active{ filter:brightness(.9); }
/* deux boutons côte à côte : sur une ligne tant qu'ils tiennent, sinon empilés en pleine largeur (classe posée par site.js) */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row.is-stacked{ flex-direction:column; align-items:stretch; }
.btn-row.is-stacked .btn{ width:100%; }

/* ---------- Placeholder image : radial jaune clair → crème, motif « Fromagerie David » au centre, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; container-type:inline-size;
  background:radial-gradient(ellipse at center,var(--c-jaune-clair) 0%,var(--c-fond) 100%); }
.ph::before{ content:"Fromagerie David"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--f-titre); font-weight:600; font-size:clamp(11px,8.5cqi,44px); letter-spacing:-.01em; line-height:1;
  color:var(--c-texte); opacity:.13; pointer-events:none; }
.ph__cap{ position:absolute; left:12px; bottom:12px; z-index:1; width:max-content; max-width:calc(100% - 24px);
  padding:6px 12px; border-radius:var(--r-petit); background:rgba(250,247,240,.9); color:var(--c-texte-2);
  font-size:var(--t-label); line-height:1.4; box-shadow:var(--sh-soft); }
@media (max-width:767px){ .gal .ph__cap{ left:8px; bottom:8px; max-width:calc(100% - 16px); padding:4px 8px; } }

/* ---------- Barre d'annonce : dégradé vertical du jaune (haut plus clair), opaque, texte et icônes #2B2621 ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:var(--grad-annonce); color:var(--c-texte); }
.annonce__in{ width:100%; max-width:var(--container-header); margin-inline:auto; padding-inline:var(--pad); overflow:hidden; }
.annonce .tk{ justify-content:center; }
.annonce__set{ margin:0; padding:0; display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:500; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:18px; height:18px; }
.annonce li.sep{ opacity:.75; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
/* ticker dès que la ligne ne tient plus (largeur mesurée : en saison 1102px + marges 2 × 24 + barre de défilement = 1165px, hors saison 921px) ;
   vide de lecture devant CHAQUE copie, le point médian saute au raccord (chaque copie finit sur un élément) */
@media (max-width:1179px){
  html:not(.hors-saison) .annonce__in{ padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  html:not(.hors-saison) .annonce .tk{ justify-content:flex-start; width:max-content; }
  html:not(.hors-saison) .annonce .tk > .annonce__set[aria-hidden]{ display:flex; }
  html:not(.hors-saison) .annonce__set{ padding-left:var(--tk-lead); }
}
@media (max-width:939px){
  html.hors-saison .annonce__in{ padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  html.hors-saison .annonce .tk{ justify-content:flex-start; width:max-content; }
  html.hors-saison .annonce .tk > .annonce__set[aria-hidden]{ display:flex; }
  html.hors-saison .annonce__set{ padding-left:var(--tk-lead); }
}
@media (max-width:767px){ .annonce li{ font-size:.875rem; } .annonce li .ic{ width:16px; height:16px; } }

/* ---------- Ticker (mécanique commune) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk.paused{ animation-play-state:paused !important; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Logo provisoire : « Fromagerie David » en Playfair Display ---------- */
.logo{ display:inline-flex; align-items:center; min-height:44px; font-family:var(--f-titre); font-weight:600; font-size:1.5rem;
  line-height:1; letter-spacing:-.015em; color:var(--c-texte); white-space:nowrap; border-radius:var(--r-petit);
  transition:opacity var(--dur) var(--ease); }
.logo:hover{ opacity:.8; }
@media (max-width:767px){ .logo{ font-size:1.3125rem; } }

/* ---------- Header : verre de la crème densifié, un seul état, séparation par l'ombre seule ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{ position:relative; height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(250,247,240,.95),rgba(250,247,240,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--sh-soft); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--c-fond); opacity:0; pointer-events:none;
  transition:opacity var(--dur-open) var(--ease); }
.hdr.is-open .hdr__bar::after{ opacity:1; }
.hdr__bar > .container{ max-width:var(--container-header); height:100%; display:flex; align-items:center; gap:24px;
  flex-wrap:nowrap; position:relative; z-index:1; }
.hdr__logo{ flex:0 0 auto; }
.nav{ display:flex; align-items:center; gap:8px; margin-inline:auto; flex-wrap:nowrap; }
.nav__link{ display:inline-flex; align-items:center; flex:0 0 auto; white-space:nowrap; min-height:44px;
  padding:10px 16px; border-radius:var(--r-btn); font-weight:500; font-size:1rem; color:var(--c-texte);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ background:var(--c-jaune-clair); color:var(--c-texte); }
/* lien actif : texte #2B2621 souligné d'un trait jaune de 2px */
.nav__link[aria-current="page"],.hdr__panel a[aria-current]:not(.btn){ color:var(--c-texte); text-decoration:underline; text-decoration-color:var(--c-jaune);
  text-decoration-thickness:2px; text-underline-offset:6px; }
.hdr__cta{ flex:0 0 auto; }
html.hors-saison .nav{ margin-right:0; }
.burger{ display:none; flex:0 0 auto; margin-left:auto; width:44px; height:44px; border-radius:var(--r-btn);
  border:1.5px solid rgba(43,38,33,.22); align-items:center; justify-content:center; color:var(--c-texte);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:var(--c-jaune-clair); border-color:var(--c-texte); }
.burger .ic{ width:24px; height:24px; }
.burger .ic-x,.hdr.is-open .burger .ic-menu{ display:none; }
.hdr.is-open .burger .ic-x{ display:block; }
.hdr__panel{ display:none; }
/* bascule burger mesurée sur le contenu réel : logo 191 + nav 495 + CTA 261 + gouttières 2 × 24 + 24px d'air de part et d'autre de la nav
   + marges 2 × 24 + barre de défilement = 1106px en saison ; hors saison, sans le CTA, 822px */
@media (max-width:1119px){ html:not(.hors-saison) .nav,html:not(.hors-saison) .hdr__cta{ display:none; } html:not(.hors-saison) .burger{ display:inline-flex; } html:not(.hors-saison) .hdr__panel{ display:grid; } }
@media (max-width:839px){ html.hors-saison .nav{ display:none; } html.hors-saison .burger{ display:inline-flex; } html.hors-saison .hdr__panel{ display:grid; } }
/* le panneau se déplie et se replie à sa hauteur exacte (grid-template-rows 0fr → 1fr), sans fondu ; il ne pousse jamais la page */
.hdr__panel{ grid-template-rows:0fr; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--c-fond);
  box-shadow:0 12px 24px rgba(86,71,138,.14); visibility:hidden;
  transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
.hdr.is-open .hdr__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
.hdr__scroll{ min-height:0; max-height:calc(100svh - var(--stack-h)); overflow:hidden; }
.hdr.is-open .hdr__scroll{ overflow-y:auto; }
.hdr__panel .container{ display:flex; flex-direction:column; gap:4px; padding-block:16px 32px; }
.hdr__panel a:not(.btn){ display:flex; align-items:center; min-height:48px; padding:12px 8px; border-radius:var(--r-btn);
  font-weight:500; font-size:1.0625rem; color:var(--c-texte);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.hdr__panel a:not(.btn):hover{ background:var(--c-jaune-clair); color:var(--c-texte); }
.hdr__panel .btn{ margin-top:16px; align-self:stretch; }

/* ---------- Hero d'accueil : placeholder du site en plein fond, contenu centré, pleine hauteur moins barre + header ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:calc(100vh - var(--stack-h)); padding:96px var(--pad); color:var(--c-texte); }
@supports (height:100svh){ .hero{ min-height:calc(100svh - var(--stack-h)); } }
.hero__media{ position:absolute; inset:0; z-index:-1; container-type:inline-size;
  background:radial-gradient(ellipse at center,var(--c-jaune-clair) 0%,var(--c-fond) 100%); }
/* le nom en motif, très discret derrière le H1 (il se lirait sous le titre) */
.hero__media::before,.phero__bg::before{ content:"Fromagerie David"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  white-space:nowrap; font-family:var(--f-titre); font-weight:600; font-size:9.5cqi; line-height:1; letter-spacing:-.02em;
  color:var(--c-texte); opacity:.03; pointer-events:none; }
.hero__in{ width:fit-content; max-width:min(100%,var(--container)); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero h1{ font-size:var(--t-h1-accueil); }
/* la tagline prend la largeur du H1 (jamais coupée en deux sous un titre d'une ligne), la rangée de boutons au minimum */
.hero__tag{ font-size:var(--t-chapo); line-height:1.55; color:var(--c-texte-2); align-self:stretch; contain:inline-size; text-wrap:balance; }
.hero__cta{ justify-content:center; margin-top:8px; }
.hero__cta.is-stacked{ align-self:stretch; }
/* Indicateur de scroll : la barre pile sur l'axe des boutons, au milieu de l'espace vide qui reste sous eux, haute de la moitié
   de cet espace (site.js) ; le nom de la première section (« Mon histoire ») 12px à sa droite, même couleur et même opacité.
   Grille 1fr | 1px | 1fr : la colonne vide de gauche prend la largeur du mot, la ligne tombe au centre exact.
   Sans JS : 72px de haut (56px en mobile), 32px au-dessus du bas du hero. */
.scroll-ind{ --ind-h:72px; position:absolute; left:0; right:0; bottom:calc(32px + env(safe-area-inset-bottom)); z-index:1; width:max-content; margin-inline:auto;
  display:grid; grid-template-columns:1fr 1px 1fr; column-gap:12px; align-items:center; height:var(--ind-h); cursor:pointer;
  color:rgba(86,71,138,.32); border-radius:var(--r-petit);
  transition:opacity .6s var(--ease),visibility 0s linear .6s,color var(--dur) var(--ease); }
.scroll-ind__line{ position:relative; grid-column:2; width:1px; height:100%; overflow:hidden; background:currentColor; }
.scroll-ind__word{ grid-column:3; justify-self:start; font-family:var(--f-texte); font-weight:600; font-size:var(--t-surtitre); line-height:1;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
/* la lueur : transparent → violet → transparent sur 40 % de la ligne (un clair ne se verrait pas sur le hero clair),
   vitesse constante, elle repart d'en haut dès qu'elle sort en bas, un passage en 2,4 s */
.scroll-ind__line::after{ content:""; position:absolute; left:0; top:0; width:100%; height:40%;
  background:linear-gradient(180deg,rgba(86,71,138,0),var(--c-violet),rgba(86,71,138,0)); animation:ind-glow 2.4s linear infinite; }
@keyframes ind-glow{ from{ transform:translateY(-100%); } to{ transform:translateY(250%); } }
.scroll-ind:hover{ color:rgba(86,71,138,.6); }
.scroll-ind:focus-visible{ outline-offset:6px; }
.scroll-ind.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }   /* page défilée de 40 % d'un écran */
.scroll-ind:not(.is-gone){ transition:opacity .6s var(--ease),visibility 0s,color var(--dur) var(--ease); }
@media (max-width:767px){ .scroll-ind{ --ind-h:56px; } }
/* Pastille, variante chiffre vérifiable : violet clair en verre, une seule ligne, texte et icône #56478A */
.pastille{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 12px; border-radius:var(--r-pilule);
  background:rgba(236,232,244,.62); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(86,71,138,.16); box-shadow:var(--sh-soft); white-space:nowrap;
  font-weight:600; font-size:.9375rem; line-height:1.2; color:var(--c-violet); font-variant-numeric:lining-nums tabular-nums; }
.pastille .ic{ width:18px; height:18px; }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .hero__tag{ text-wrap:wrap; }   /* la tagline remplit la largeur : jamais plus étroite que les boutons */
  .pastille{ padding:6px 12px 6px 10px; font-size:.8125rem; gap:6px; }
  .pastille .ic{ width:16px; height:16px; }
}

/* ---------- Hero de page : même radial jaune clair (centre B) + motif nom, H1 + tagline seuls ; la section suivante démarre sur B ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(320px,calc((100svh - var(--stack-h)) * .62),520px); padding:96px var(--pad);
  background:radial-gradient(ellipse at center,var(--c-jaune-clair) 0%,var(--c-fond) 100%); }
.phero__bg{ position:absolute; inset:0; z-index:-1; container-type:inline-size; }
.phero__in{ width:fit-content; max-width:min(100%,var(--container)); min-width:min(100%,40rem); display:flex; flex-direction:column; align-items:center; gap:16px; }   /* plancher ~70 caractères sous un titre court */
.phero h1{ font-size:var(--t-h1-page); }
.phero__tag{ font-size:var(--t-chapo); line-height:1.55; color:var(--c-texte-2); align-self:stretch; contain:inline-size; text-wrap:balance; }
@media (max-width:767px){ .phero{ padding-block:64px; min-height:280px; } .phero__tag{ text-wrap:wrap; } }

/* ---------- Cartes ---------- */
.card{ background:var(--c-carte); color:var(--c-texte); border-radius:var(--r-carte); box-shadow:var(--sh-card); padding:48px; }
@media (max-width:767px){ .card{ padding:32px 24px; } }

/* ---------- S2 Mon histoire : split avec chevauchement, panneau texte à gauche qui mord sur la photo à droite ---------- */
/* panneau 520px (43 % du conteneur), photo 762px, recouvrement 130px = un quart du panneau */
.ovl{ display:grid; grid-template-columns:minmax(0,390fr) minmax(0,130fr) minmax(0,632fr); align-items:center; }
.ovl__img{ grid-column:2 / 4; grid-row:1; position:relative; align-self:stretch; min-height:560px; border-radius:var(--r-carte); overflow:hidden; box-shadow:var(--sh-card); }
.ovl__img .ph{ position:absolute; inset:0; }
.ovl__img .ph::before{ left:60%; }   /* le motif reste dans la partie visible de la photo, à droite du panneau */
.ovl__panel{ grid-column:1 / 3; grid-row:1; position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start;
  margin-block:48px; padding:48px; background:var(--c-carte); border-radius:var(--r-carte); box-shadow:var(--sh-card); }
.ovl__panel h2{ margin-top:16px; }
.ovl__panel p{ margin-top:24px; color:var(--c-texte-2); }
@media (max-width:1023px){
  .ovl{ display:block; }
  .ovl__img{ min-height:0; height:440px; }
  .ovl__img .ph::before{ left:50%; top:40%; }
  .ovl__img .ph__cap{ top:16px; bottom:auto; left:16px; }   /* le panneau recouvre le bas de la photo : la légende remonte */
  .ovl__panel{ margin:-96px 32px 0; }
}
@media (max-width:767px){
  .ovl__img{ height:320px; }
  .ovl__img .ph__cap{ top:12px; left:12px; }
  .ovl__panel{ margin:-48px 16px 0; padding:32px 24px; }   /* recouvrement réduit de moitié, marges négatives verticales seules */
}
/* Bande de stats en cellules : violet clair, chiffre Karla violet dominant, label #2B2621 sur une ligne, filets insérés */
.stats{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:64px;
  background:var(--c-violet-clair); border-radius:var(--r-carte); box-shadow:var(--sh-card); }
.stat{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:32px 16px; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:rgba(86,71,138,.22); }
.stat__n{ font-family:var(--f-texte); font-weight:700; font-size:var(--t-chiffre); line-height:1; letter-spacing:-.01em;
  color:var(--c-violet); font-variant-numeric:lining-nums tabular-nums; }
.stat__l{ font-weight:600; font-size:.9375rem; line-height:1.35; color:var(--c-texte); white-space:nowrap; }
@media (max-width:767px){ .stats{ margin-top:48px; } }
/* deux colonnes (quatre dès que le plus long label, 181px, tient dans sa cellule) : filet horizontal UNIQUE et continu
   entre les deux rangées, filet vertical inséré entre les colonnes */
@media (max-width:899px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats::after{ content:""; position:absolute; left:16px; right:16px; top:50%; height:1px; background:rgba(86,71,138,.22); }
  .stat + .stat::before{ display:none; }
  .stat:nth-child(2n)::before{ display:block; content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:rgba(86,71,138,.22); }
  .stat{ padding:24px 8px; }
}
@media (max-width:425px){ .stat{ padding:20px 4px; } .stat__l{ font-size:.8125rem; } }   /* 157px au plus : deux colonnes jusqu'à 340px */
@media (max-width:339px){
  .stat__l{ font-size:.9375rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stats::after{ display:none; }
  .stat:nth-child(2n)::before{ display:none; }
  .stat + .stat::before{ display:block; left:16px; right:16px; top:0; bottom:auto; width:auto; height:1px; }
}

/* ---------- S3 Produits : bento, bandeau pleine largeur en tête puis trois petites tuiles égales ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.tile{ display:flex; flex-direction:column; background:var(--c-carte); border-radius:var(--r-carte); box-shadow:var(--sh-card); overflow:hidden; }
/* zone image à hauteur FIXE : largeur de la petite tuile ÷ 1,5 (368 × 245px dans le conteneur de 1200px) */
.tile__img{ --img-h:calc((min(100vw, var(--container)) - 2 * var(--pad) - 48px) / 3 / 1.5); position:relative; height:var(--img-h); overflow:hidden; flex:0 0 auto; }
.tile__img .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.tile:hover .tile__img .ph{ transform:scale(1.04); }
.tile__body{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:32px; }
.tile__body p{ color:var(--c-texte-2); }
/* bandeau (ordinateur) : pleine largeur, image à gauche à la largeur exacte d'une petite tuile, texte à droite */
.tile--band{ grid-column:1 / -1; flex-direction:row; }
.tile--band .tile__img{ width:calc((100% - 48px) / 3); }
.tile--band .tile__body{ padding:32px 48px; }
@media (max-width:1023px){   /* tablette : 2 × 2, la dominante redevient une tuile comme les autres */
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile__img{ --img-h:calc((100vw - 2 * var(--pad) - 24px) / 2 / 1.5); }
  .tile--band{ grid-column:auto; flex-direction:column; }
  .tile--band .tile__img{ width:auto; }
  .tile--band .tile__body{ padding:32px; }
}
@media (max-width:599px){   /* une colonne : tuiles pleine largeur, zone image 3/2 */
  .bento{ grid-template-columns:minmax(0,1fr); }
  .tile__img{ --img-h:calc((100vw - 2 * var(--pad)) / 1.5); }
  .tile__body,.tile--band .tile__body{ padding:24px 24px 32px; }
}

/* ---------- S4 Raclette (saison) : split simple, photo à gauche ~55 %, texte ~45 %, items à icône en grille ---------- */
.rsplit{ display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); column-gap:64px; align-items:start; }
.rsplit > :not(.rsplit__img){ grid-column:2; }
.rsplit__head{ margin-bottom:32px; }
.rsplit__img{ grid-column:1; grid-row:1 / span 3; position:relative; align-self:stretch; min-height:480px; border-radius:var(--r-carte); overflow:hidden; box-shadow:var(--sh-card); }
.rsplit__img .ph{ position:absolute; inset:0; }
.items{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.item{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 16px; }
.item:first-child{ padding-left:0; }
.item:last-child{ padding-right:0; }
.item + .item::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--c-filet); }
.item__ic{ width:40px; height:40px; color:var(--c-violet); margin-bottom:8px; }
.item h3{ text-wrap:balance; }
.item p{ color:var(--c-texte-2); font-size:1rem; }
.rsplit__cta{ margin-top:40px; }
/* empilé sous 1180px : dans la colonne de 45 %, les trois items descendraient sous 140px de large (textes sur sept lignes) */
@media (max-width:1179px){
  .rsplit{ display:flex; flex-direction:column; align-items:stretch; }
  .rsplit__head{ margin-bottom:32px; }
  .rsplit__img{ align-self:stretch; min-height:0; height:auto; }
  .rsplit__img::before{ content:""; display:block; padding-top:50%; }
  .items{ margin-top:48px; }
}
@media (max-width:1023px){ .rsplit__img::before{ padding-top:62%; } }
@media (max-width:767px){
  .rsplit__img::before{ padding-top:75%; }
  .items{ margin-top:32px; }
  .rsplit__cta{ margin-top:32px; }
  .rsplit__cta .btn{ width:100%; }
}
@media (max-width:559px){   /* une colonne : items centrés, filets horizontaux insérés entre eux */
  .items{ grid-template-columns:minmax(0,1fr); }
  .item,.item:first-child,.item:last-child{ padding:24px 0; }
  .item:first-child{ padding-top:0; }
  .item:last-child{ padding-bottom:0; }
  .item + .item::before{ left:15%; right:15%; top:0; bottom:auto; width:auto; height:1px; }
}

/* ---------- S5 Les marchés : texte + liste ~45 % à gauche, carte ~55 % à droite ---------- */
.mk{ display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); grid-template-rows:1fr auto auto 1fr; column-gap:64px; }
.mk__head{ grid-column:1; grid-row:2; margin-bottom:40px; }
.mk__list{ grid-column:1; grid-row:3; }
.mk__map{ grid-column:2; grid-row:1 / -1; align-self:center; }
.mk__list h3{ margin-bottom:16px; }
.mrow{ position:relative; display:flex; align-items:center; gap:12px; min-height:48px; padding-block:12px; }
.mrow + .mrow::before{ content:""; position:absolute; top:0; left:36px; right:0; height:1px; background:var(--c-filet); }   /* à l'aplomb du texte */
.mrow__ic{ width:24px; height:24px; color:var(--c-violet); }
.mrow__t{ color:var(--c-texte-2); }
.mrow__t strong{ font-weight:600; color:var(--c-texte); }
@media (max-width:1023px){
  .mk{ display:block; }
  .mk__head{ margin-bottom:0; }
  .mk__map{ margin-block:48px; }
}
@media (max-width:767px){ .mk__map{ margin-block:32px; } }
/* carte : vrais contours, terre découpée par le trait de côte, frontières intérieures seulement, étiquettes HTML à l'échelle */
.zmap{ position:relative; border-radius:var(--r-carte); overflow:hidden; box-shadow:var(--sh-card); background:var(--c-violet-clair); container-type:inline-size; }
.zmap::before{ content:""; display:block; padding-top:80%; }   /* cadre 5:4 */
.zmap svg{ position:absolute; inset:0; width:100%; height:100%; }
.zmap .sea{ fill:var(--c-violet-clair); }
.zmap .land{ fill:var(--c-fond); }
.zmap .dep-l{ fill:none; stroke:rgba(43,38,33,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .coast{ fill:none; stroke:rgba(86,71,138,.4); stroke-width:1; vector-effect:non-scaling-stroke; }
/* les trois villes au même rang : même pin plein, même étiquette */
.mpt{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:1; font-size:clamp(10px,2.1cqw,14px); --pin:clamp(26px,5.6cqw,40px); }
/* pin : Phosphor map-pin-fill en violet, liseré clair, la pointe (128, 240 sur 256) sur l'ancre */
.mpt .pin{ position:absolute; width:var(--pin); height:var(--pin); left:calc(var(--pin) * -.5); top:calc(var(--pin) * -.9375);
  overflow:visible; color:var(--c-violet); filter:drop-shadow(0 3px 5px rgba(43,38,33,.28)); }
.mpt .pin path{ stroke:var(--c-fond); stroke-width:14; paint-order:stroke; stroke-linejoin:round; }
/* étiquette en gras violet AU-DESSUS du pin, centrée sur lui */
.lbl{ position:absolute; left:0; bottom:calc(var(--pin) + 6px); transform:translateX(-50%); white-space:nowrap; line-height:1;
  border-radius:var(--r-pilule); padding:.4286em .7143em; font-size:1.0769em; font-weight:700; color:var(--c-violet);
  background:rgba(250,247,240,.96); box-shadow:var(--sh-soft); }
@media (max-width:767px){
  .zmap::before{ padding-top:100%; }   /* carré, viewBox recadré par site.js (data-vbm) */
  .mpt{ left:var(--xm); top:var(--ym); font-size:clamp(10px,3.6cqw,13px); --pin:clamp(24px,8.4cqw,34px); }
}

/* ---------- S6 Galerie masonry : grille à rangées de 1px, span calculé en JS (ordre gauche-droite gardé) ---------- */
.gal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; align-items:start; }
.gal.is-masonry{ grid-auto-rows:1px; }   /* sans JS : rangées naturelles, rien ne se chevauche */
.gal__it{ position:relative; display:block; width:100%; border-radius:var(--r-carte); overflow:hidden; margin-bottom:24px; cursor:zoom-in; }
.gal__it .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.gal__it::before{ content:""; display:block; }
.gal__it--l::before{ padding-top:66.667%; }   /* paysage 3:2 */
.gal__it--p::before{ padding-top:125%; }      /* portrait 4:5 */
.gal__it--v::before{ padding-top:177.778%; }  /* vidéo de téléphone 9:16 */
.gal__it:hover .ph{ transform:scale(1.04); }
.gal__it:focus-visible{ outline-offset:3px; }
.gal__play{ position:absolute; left:50%; top:50%; z-index:1; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(250,247,240,.9); color:var(--c-violet);
  box-shadow:var(--sh-soft); transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.gal__play .ic{ width:28px; height:28px; margin-left:3px; }
.gal__it:hover .gal__play{ transform:scale(1.06); background:var(--c-fond); }
.gal__it--v .ph::before{ top:36%; }   /* le motif au-dessus du badge de lecture */
@media (max-width:1023px){ .gal{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* une colonne sous 480px : deux colonnes de moins de 218px ne laisseraient plus lire la légende des emplacements */
.gal__it{ min-width:218px; }
@media (max-width:767px){ .gal{ column-gap:12px; } .gal__it{ margin-bottom:12px; } }
@media (max-width:479px){ .gal{ grid-template-columns:minmax(0,1fr); column-gap:0; } .gal__it{ margin-bottom:16px; } }
/* ouverture en grand */
.lb{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:72px 88px;
  background:rgba(43,38,33,.88); }
.lb__stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.lb__fig{ position:relative; border-radius:var(--r-carte); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.lb__fig .ph{ position:absolute; inset:0; }
.lb__btn{ position:absolute; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(250,247,240,.12); color:var(--c-fond); border:1.5px solid rgba(250,247,240,.6);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.lb__btn:hover{ background:rgba(250,247,240,.24); border-color:var(--c-fond); }
.lb__btn .ic{ width:24px; height:24px; }
.lb__btn:focus-visible{ outline-color:var(--c-fond); }
.lb__x{ top:16px; right:16px; }
.lb__prev{ left:20px; top:50%; margin-top:-24px; }
.lb__next{ right:20px; top:50%; margin-top:-24px; }
@media (max-width:767px){
  .lb{ padding:72px 16px 88px; }
  .lb__prev,.lb__next{ top:auto; bottom:20px; margin-top:0; }
  .lb__prev{ left:calc(50% - 64px); }
  .lb__next{ right:calc(50% - 64px); }
}

/* ---------- S7 Mon engagement : bandeau de confiance, format item, trois logos calés sur la même hauteur optique ---------- */
.labels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.label{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 32px; }
.label + .label::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--c-filet); }
/* boîte commune : les titres s'alignent d'une colonne à l'autre, chaque logo centré dans sa boîte à sa hauteur optique */
.label__box{ height:112px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.label__logo{ height:96px; width:auto; }
.label__logo--ab{ height:92px; }            /* portrait, plein : un peu plus bas pour la même présence */
.label__logo--aop{ height:108px; }          /* rond : compensé à l'œil */
.label__logo--label-rouge{ height:100px; }
.label p{ color:var(--c-texte-2); font-size:1rem; max-width:30ch; }
@media (max-width:767px){ .label{ padding:0 12px; } .label__box{ height:92px; } .label__logo{ height:80px; } .label__logo--aop{ height:90px; } .label__logo--label-rouge{ height:84px; } .label__logo--ab{ height:76px; } }
@media (max-width:599px){
  .labels{ grid-template-columns:minmax(0,1fr); }
  .label{ padding:32px 0; }
  .label:first-child{ padding-top:0; }
  .label:last-child{ padding-bottom:0; }
  .label + .label::before{ left:15%; right:15%; top:0; bottom:auto; width:auto; height:1px; }
}

/* ---------- S8 Carte CTA (saison) : radial #F2DA70 → #E5C437, texte #2B2621, centrée, six jetons cliquables entre deux filets ---------- */
.ctac{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px; border-radius:var(--r-carte);
  background:radial-gradient(ellipse at center,#F2DA70 0%,var(--c-jaune) 100%); color:var(--c-texte); box-shadow:var(--sh-card); }
.ctac .eyebrow{ color:var(--c-texte); }
.ctac h2{ margin-top:16px; color:var(--c-texte); text-wrap:balance; }
.ctac__lead{ margin-top:16px; font-size:var(--t-chapo); line-height:1.55; text-wrap:balance; }
.ctac__items{ position:relative; align-self:stretch; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px;
  margin-top:40px; padding-block:40px; }
.ctac__items::before,.ctac__items::after{ content:""; position:absolute; left:0; right:0; height:1px; background:rgba(43,38,33,.2); }
.ctac__items::before{ top:0; }
.ctac__items::after{ bottom:0; }
.jeton{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; min-height:44px; padding:8px 4px; border-radius:var(--r-petit);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease); }
a.jeton:hover{ transform:translateY(-3px); background:rgba(255,253,248,.22); }
.jeton__ph{ width:88px; height:88px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 3px rgba(250,247,240,.9),0 6px 16px rgba(43,38,33,.22);
  transition:box-shadow var(--dur) var(--ease); }
.jeton__ph::before{ font-size:10cqi; opacity:.3; }
a.jeton:hover .jeton__ph{ box-shadow:0 0 0 3px var(--c-fond),0 12px 24px rgba(43,38,33,.32); }
.jeton__n{ font-weight:600; font-size:.9375rem; line-height:1.3; text-wrap:balance; }
.jeton.is-soon .jeton__ph,.jeton.is-soon .jeton__n{ opacity:.6; }
.soon{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--r-pilule); background:var(--c-violet-clair);
  color:var(--c-violet); font-weight:600; font-size:.8125rem; line-height:1.2; white-space:nowrap; }
.jeton .soon{ position:absolute; top:0; left:50%; transform:translateX(-50%); }
.ctac__cta{ justify-content:center; margin-top:40px; }
@media (max-width:899px){ .ctac__items{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:24px; } }
@media (max-width:767px){
  .ctac{ padding:48px 32px; }
  .ctac__items{ margin-top:32px; padding-block:32px; gap:16px 8px; }
  .jeton__ph{ width:72px; height:72px; }
  .jeton__n{ font-size:.875rem; }
  .ctac__cta{ margin-top:32px; align-self:stretch; }
}

/* ---------- Formulaires en carte ---------- */
.form-body{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:600; font-size:1rem; line-height:1.4; color:var(--c-texte); }
.field .opt{ font-weight:400; color:var(--c-texte-2); margin-left:6px; }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 16px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--c-texte); background:var(--c-carte); border:1px solid rgba(43,38,33,.2); border-radius:var(--r-petit); margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.field textarea{ resize:vertical; min-height:150px; }
.field ::placeholder{ color:#776F66; opacity:1; }   /* gris lisible (4,7:1 sur la carte) */
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(43,38,33,.42); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--c-violet); outline-offset:3px; border-color:var(--c-violet); }
.sel{ position:relative; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:48px; cursor:pointer; }
.field select:invalid{ color:#776F66; }
.field select option{ color:var(--c-texte); }
.sel__chev{ position:absolute; right:16px; top:50%; width:20px; height:20px; margin-top:-10px; color:var(--c-violet); pointer-events:none; }
.err{ display:none; font-size:var(--t-label); font-weight:600; line-height:1.4; color:var(--c-erreur); }
.field.is-err .err,.err.is-on{ display:block; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:var(--c-erreur); border-width:2px; padding:11px 15px; }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn--primary{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:600; color:var(--c-erreur); }
.form-foot{ margin-top:16px; font-size:var(--t-label); line-height:1.5; color:var(--c-texte-2); }
.form-foot a{ color:var(--c-violet); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.form-foot a:hover{ color:var(--c-texte); }
.form-ok{ padding:24px; border-radius:var(--r-petit); background:var(--c-violet-clair); color:var(--c-texte); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.objet-rac{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:8px; }
.objet-rac p{ color:var(--c-texte-2); }
@media (max-width:767px){
  .form-send{ align-items:stretch; }
  .form-send .btn,.objet-rac .btn{ width:100%; }
  .objet-rac{ align-items:stretch; }
}
/* Contact, en saison : encart léger violet clair sous le chapô, texte et bouton sur une ligne, empilés en mobile */
.cencart{ align-self:stretch; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:8px;
  padding:20px 24px; border-radius:var(--r-carte); background:var(--c-violet-clair); }
.cencart__txt{ flex:1 1 20rem; min-width:0; display:flex; align-items:flex-start; gap:12px; color:var(--c-texte); }
.cencart__ic{ width:28px; height:28px; color:var(--c-violet); flex:0 0 auto; margin-top:-1px; }   /* icône nue, comme celles de l'encadré de /raclette */
.cencart .btn{ flex:0 0 auto; }
@media (max-width:767px){ .cencart{ flex-direction:column; align-items:stretch; padding:20px 16px; } .cencart__txt{ flex:0 0 auto; } .cencart .btn{ width:100%; } }
/* Contact : formulaire sur 7 colonnes, coordonnées sur 5 ; une colonne sous 1024px */
.cgrid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; align-items:start; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:40px; }
.icard h3{ margin-bottom:24px; }
.icard__rows{ display:flex; flex-direction:column; gap:16px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .row .ic{ width:22px; height:22px; color:var(--c-violet); margin-top:2px; }
.icard a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; overflow-wrap:anywhere;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease); }
.icard a:hover{ color:var(--c-violet); text-decoration-color:currentColor; }
@media (max-width:1023px){ .cgrid{ grid-template-columns:minmax(0,1fr); gap:24px; } }
@media (max-width:767px){ .icard{ padding:32px 24px; } }

/* ---------- Configurateur de commande (/raclette) : parcours en quatre écrans, composition centrée ---------- */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* en-tête centré ; dans l'encadré, les lignes restent alignées à gauche, icône devant */
.cfg-head .oinfo{ margin-inline:auto; text-align:left; }
/* barre de progression : « Étape 1 sur 4 », puis quatre pastilles numérotées reliées par un filet */
.wiz__top{ max-width:720px; margin:0 auto 48px; }
.wiz__count{ text-align:center; font-size:.9375rem; line-height:1.4; color:var(--c-texte-2); margin-bottom:16px; font-variant-numeric:lining-nums tabular-nums; }
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.steps__it{ position:relative; display:flex; justify-content:center; }
.steps__it + .steps__it::before{ content:""; position:absolute; top:19px; left:calc(-50% + 30px); right:calc(50% + 30px); height:2px; border-radius:2px;
  background:rgba(43,38,33,.14); transition:background-color var(--dur) var(--ease); }
.steps__it.is-link::before{ background:var(--c-violet); }   /* le filet entre deux étapes faites */
.steps__b{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:44px; padding:0 4px 4px; border-radius:var(--r-petit);
  color:rgba(43,38,33,.35); cursor:default; }
.steps__dot{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(43,38,33,.35);
  font-weight:700; font-size:1rem; line-height:1; font-variant-numeric:lining-nums tabular-nums;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.steps__ic{ display:none; width:20px; height:20px; }
.steps__name{ font-size:.9375rem; font-weight:600; line-height:1.3; white-space:nowrap; transition:color var(--dur) var(--ease); }
.steps__it.is-cur .steps__b{ color:var(--c-texte); }
.steps__it.is-cur .steps__dot{ background:var(--c-jaune); border-color:var(--c-jaune); }
.steps__it.is-done .steps__b{ color:var(--c-texte); cursor:pointer; }
.steps__it.is-done .steps__dot{ background:var(--c-violet-clair); border-color:var(--c-violet-clair); color:var(--c-violet); }
.steps__it.is-done .steps__n{ display:none; }
.steps__it.is-done .steps__ic{ display:block; }
.steps__it.is-done .steps__b:hover .steps__dot{ border-color:var(--c-violet); transform:translateY(-2px); }
.steps__it.is-done .steps__b:hover .steps__name{ color:var(--c-violet); }
/* les écrans, un seul visible : le sortant part en fondu, l'entrant arrive en fondu + 16px de montée, 0,4 s */
.wiz__screen.is-out{ opacity:0; transition:opacity var(--dur) var(--ease); }
.wiz__screen.is-in{ animation:wiz-in var(--dur) var(--ease); }
@keyframes wiz-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.wiz__col{ max-width:720px; margin-inline:auto; }
.wiz__h{ text-align:center; text-wrap:balance; margin-bottom:32px; }
.wiz__h:focus{ outline:none; }
.wiz__lead{ text-align:center; text-wrap:balance; color:var(--c-texte-2); margin:-16px auto 32px; }
.wiz__nav{ justify-content:center; margin-top:40px; }
.wiz__fields{ margin-top:32px; }
.wiz__card{ margin-top:24px; }
.wiz__ok{ max-width:720px; margin-inline:auto; text-align:center; }
.is-busy [data-next]{ opacity:.7; pointer-events:none; }
/* étape 2 : cartes + récap collant, centrés dans le conteneur */
.cfg{ display:grid; grid-template-columns:minmax(0,1fr) 360px; column-gap:48px; align-items:start; }
.cfg__main{ min-width:0; }
.cfg__recap{ align-self:stretch; }
.cfg__recap .recap{ position:sticky; top:calc(var(--hdr-h) + 32px); }
.cfg__sub{ margin:48px 0 24px; }
.err--form{ margin-top:24px; }
/* étape 3 : six cartes à choix unique (boutons radio), carte choisie bordée du dégradé signature avec la coche */
.rcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.rcard{ position:relative; display:block; cursor:pointer; font-weight:400; }   /* la carte est un label : pas le gras des libellés de champ */
.rcard .rcard__in{ position:absolute; top:20px; left:20px; width:1px; height:1px; min-height:0; margin:0; padding:0; border:0; opacity:0; }   /* jamais la largeur des champs */
.rcard__box{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; height:100%; padding:20px;
  background:var(--c-carte); border-radius:var(--r-carte); box-shadow:var(--sh-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.rcard__box::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:var(--grad-signature); pointer-events:none; opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); transition:opacity var(--dur) var(--ease); }
.rcard:hover .rcard__box{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(86,71,138,.12),0 10px 24px rgba(86,71,138,.18),0 20px 40px rgba(86,71,138,.08),inset 0 1px 0 rgba(255,252,247,.7); }
.rcard__in:checked + .rcard__box::after{ opacity:1; }
.rcard__in:focus-visible + .rcard__box{ outline:2px solid var(--c-violet); outline-offset:3px; }
.rcard__ic{ width:28px; height:28px; color:var(--c-violet); margin-bottom:10px; }
.rcard__t{ font-weight:700; font-size:1.0625rem; line-height:1.35; color:var(--c-texte); padding-right:36px; }
.rcard__m{ color:var(--c-texte); line-height:1.45; }
.rcard__l{ font-size:.9375rem; line-height:1.45; color:var(--c-texte-2); }
.rcard__check{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--c-violet-clair); color:var(--c-violet); box-shadow:var(--sh-soft); opacity:0; transform:scale(.6);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
.rcard__check .ic{ width:18px; height:18px; }
.rcard__in:checked + .rcard__box .rcard__check{ opacity:1; transform:none; }
.field--rad.is-err .rcard__box{ box-shadow:0 0 0 2px var(--c-erreur),var(--sh-card); }
.field--rad .err{ margin-top:12px; }
/* étape 4 : récap final en trois blocs, chacun avec son « Modifier » */
.fin{ padding:32px; }
.fin__b + .fin__b{ position:relative; margin-top:24px; padding-top:24px; }
.fin__b + .fin__b::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--c-filet); }
.fin__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.fin__head h4{ font-size:var(--t-h4); }
.fin__ret{ display:flex; flex-direction:column; gap:4px; }
.btn--sm{ min-height:40px; padding:8px 14px; font-size:.9375rem; gap:8px; }
.btn--sm .ic{ width:18px; height:18px; }
/* sélecteur − / + : vrais boutons de 44px */
.qty{ display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:var(--r-pilule); background:var(--c-jaune-clair); }
.qty__b{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--c-texte);
  background:var(--c-carte); box-shadow:0 1px 2px rgba(86,71,138,.16);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease),opacity var(--dur) var(--ease); }
.qty__b .ic{ width:20px; height:20px; }
.qty__b:hover:not(:disabled){ background:var(--c-jaune); color:var(--c-texte); transform:scale(1.05); }
.qty__b:active:not(:disabled){ transform:scale(.96); }
.qty__b:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.qty__n{ min-width:2.25em; text-align:center; font-weight:700; font-size:1.125rem; font-variant-numeric:lining-nums tabular-nums; color:var(--c-texte); }
/* temps 1 */
/* temps 1 : la phrase à droite du sélecteur, centrée sur lui, sur la même rangée à toutes les largeurs (jamais dessous) */
.t1{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:32px; padding:32px; }   /* le couple centré dans la colonne */
.t1 .qty{ flex:0 0 auto; }
.qty--lg .qty__n{ font-size:1.5rem; min-width:2.5em; }
.t1__adv{ flex:0 1 auto; min-width:0; color:var(--c-texte-2); font-variant-numeric:lining-nums tabular-nums; }
/* temps 2 : cartes produit, image au format fixe 3/2 */
.fgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
/* à côté du récap collant, trois cartes ne tiennent qu'à partir de 1180px (225px chacune, comme à 1440) ; en dessous, deux */
@media (min-width:1024px) and (max-width:1179px){ .fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.fcard{ position:relative; display:flex; flex-direction:column; background:var(--c-carte); border-radius:var(--r-carte); box-shadow:var(--sh-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
/* carte choisie : bordure au dégradé signature (jaune → violet) */
.fcard::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:var(--grad-signature); pointer-events:none; opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); transition:opacity var(--dur) var(--ease); }
.fcard.is-on::after{ opacity:1; }
.fcard:not(.is-soon):hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(86,71,138,.12),0 10px 24px rgba(86,71,138,.18),0 20px 40px rgba(86,71,138,.08),inset 0 1px 0 rgba(255,252,247,.7); }
.fcard__img{ position:relative; border-radius:var(--r-carte) var(--r-carte) 0 0; overflow:hidden; }
.fcard__img::before{ content:""; display:block; padding-top:66.667%; }
.fcard__img .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.fcard:not(.is-soon):hover .fcard__img .ph{ transform:scale(1.04); }
.fcard__check{ position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--c-violet-clair); color:var(--c-violet); box-shadow:var(--sh-soft); opacity:0; transform:scale(.6);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
.fcard__check .ic{ width:20px; height:20px; }
.fcard.is-on .fcard__check{ opacity:1; transform:none; }
.fcard__soon{ position:absolute; top:12px; right:12px; z-index:2; }
.fcard__body{ flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px; }
.fcard__t{ font-size:var(--t-h4); line-height:1.3; }
/* indicateur du lait sous le titre : pastille de repère, violet sur violet clair (6,54:1) */
.lait{ display:inline-flex; align-self:flex-start; padding:3px 10px; border-radius:var(--r-pilule); background:var(--c-violet-clair);
  color:var(--c-violet); font-weight:600; font-size:.8125rem; line-height:1.3; white-space:nowrap; }
.xrow__txt .lait{ margin-block:2px; }
.fcard__d{ color:var(--c-texte-2); font-size:1rem; line-height:1.5; }
.fcard__info{ font-size:var(--t-label); line-height:1.45; color:var(--c-texte-2); font-variant-numeric:lining-nums tabular-nums; }
.fcard .qty{ margin-top:auto; align-self:flex-start; }
.fcard__body .fcard__info{ margin-bottom:8px; }
.fcard.is-soon{ box-shadow:var(--sh-soft); }
.fcard.is-soon .fcard__img,.fcard.is-soon .fcard__t,.fcard.is-soon .lait,.fcard.is-soon .fcard__d,.fcard.is-soon .fcard__info{ opacity:.55; filter:grayscale(.6); }
/* extras : liste en rangées, plus discrète que les cartes, même sélecteur */
.xrows{ padding:8px 32px; }
.xrow{ position:relative; display:flex; align-items:center; gap:24px; padding-block:24px; }
.xrow + .xrow::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--c-filet); }
/* vignette carrée à gauche : 80px (64px en mobile), coins 12px, même radial et même motif, sans légende */
.xrow__ph{ flex:0 0 auto; width:80px; height:80px; border-radius:var(--r-petit); }
.xrow__ph::before{ font-size:10cqi; opacity:.16; }
.xrow__main{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:16px 24px; }
.xrow__main .qty{ flex:0 0 auto; }
.xrow__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.xrow__t{ font-size:var(--t-h4); }
.xrow__d{ color:var(--c-texte-2); font-size:1rem; line-height:1.5; }
.xrow.is-on .xrow__t{ color:var(--c-violet); }
/* jauge : en tête du récap (sous « Ma commande »), barre au dégradé signature sur un rail jaune clair, jamais bloquante ;
   au-dessus, la phrase qui suit l'avancement (en violet, sans pastille) sur toute la ligne, puis le poids, à droite */
.gauge{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.gauge__top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.gauge__msg{ flex:1 1 100%; color:var(--c-violet); font-weight:600; font-size:1rem; line-height:1.4; }
.gauge__msg.is-new{ animation:gauge-msg var(--dur) var(--ease); }   /* chaque nouvelle étape arrive en fondu */
@keyframes gauge-msg{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.gauge__v{ margin-left:auto; font-weight:600; font-variant-numeric:lining-nums tabular-nums; color:var(--c-texte); white-space:nowrap; }
.gauge__rail{ position:relative; height:10px; border-radius:var(--r-pilule); background:var(--c-jaune-clair); overflow:hidden; }
.gauge__bar{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:var(--grad-signature);
  transition:width var(--dur) var(--ease); }
/* encadré des trois infos, sous le chapô en haut de la page : item à icône en rangée, icône nue violette, texte à la taille du corps */
.oinfo{ display:flex; flex-direction:column; gap:12px; width:fit-content; max-width:100%; margin-top:8px; padding:24px; border-radius:var(--r-carte); background:var(--c-violet-clair); }
.oinfo li{ display:flex; align-items:flex-start; gap:12px; color:var(--c-texte); font-size:var(--t-corps); line-height:1.5; }
.oinfo__ic{ width:24px; height:24px; color:var(--c-violet); margin-top:1px; }
/* temps 3 : récap (collant sur ordinateur) */
.recap{ padding:32px; }
.recap h3{ margin-bottom:16px; }
.recap__lines{ display:flex; flex-direction:column; }
.rline{ position:relative; display:flex; align-items:center; gap:12px; padding-block:12px; }
.rline + .rline::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--c-filet); }
.rline__txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rline__n{ font-weight:600; line-height:1.35; }
.rline__d{ font-size:var(--t-label); line-height:1.4; color:var(--c-texte-2); font-variant-numeric:lining-nums tabular-nums; }
.rline__x{ flex:0 0 auto; width:44px; height:44px; margin-right:-10px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-texte-2); transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.rline__x:hover{ background:var(--c-violet-clair); color:var(--c-violet); }
.rline__x .ic{ width:18px; height:18px; }
.recap__total{ position:relative; margin-top:12px; padding-top:16px; font-weight:700; line-height:1.45; font-variant-numeric:lining-nums tabular-nums; }
.recap__total::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:rgba(43,38,33,.28); }
.recap__note{ margin-top:8px; font-size:var(--t-label); line-height:1.45; color:var(--c-texte-2); }
/* iPad et mobile : la barre fixe du bas porte le total (dès l'étape 2), la jauge en fin trait sur son bord haut et les deux boutons ;
   le padding bas de la page vaut sa hauteur (site.js) : elle ne couvre jamais un champ ni le bouton d'envoi */
.cbar{ display:none; }
@media (max-width:1023px){
  .cfg{ display:block; }
  .cfg__recap{ display:none; }
  .fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rcards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wiz__nav{ display:none; }
  .cbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; align-items:center; justify-content:space-between; gap:12px 24px;
    padding:16px max(var(--pad),calc((100% - var(--container)) / 2 + var(--pad))) calc(16px + env(safe-area-inset-bottom));
    background:rgba(250,247,240,.97); box-shadow:0 -1px 2px rgba(86,71,138,.08),0 -8px 24px rgba(86,71,138,.14); }
  .cbar__txt{ min-width:0; }
  .cbar__total{ font-weight:700; line-height:1.4; font-variant-numeric:lining-nums tabular-nums; }
  .cbar__note{ font-size:.8125rem; line-height:1.4; color:var(--c-texte-2); }
  .cbar__nav{ margin-left:auto; }
  .cbar__for{ flex-wrap:nowrap; gap:12px; }
  .cbar__gauge{ position:absolute; left:0; right:0; top:0; height:4px; background:var(--c-jaune-clair); overflow:hidden; }
  .cbar__gauge .gauge__bar{ border-radius:0; }
}
/* en colonne jusqu'à 767px : le total garde sa ligne, les deux boutons dessous */
@media (max-width:767px){
  .cbar{ flex-direction:column; align-items:stretch; gap:12px; padding-top:14px; }
  .cbar__nav{ margin-left:0; }
  .cbar__for{ flex-wrap:wrap; gap:8px; }
  .cbar__for .btn{ padding-inline:14px; gap:8px; font-size:.9375rem; }
  .cbar__for .btn--primary{ flex:1 1 auto; }
}
@media (max-width:374px){ .cbar__for .btn{ padding-inline:12px; font-size:.875rem; } }   /* « Retour » et l'avance sur une ligne dès 360px */
@media (max-width:599px){ .rcards{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:767px){
  .fcard__body{ padding:20px 16px 16px; }
  .t1{ gap:16px; padding:24px 16px; }
  .t1 .qty--lg .qty__n{ font-size:1.25rem; min-width:1.75em; }
  .xrows{ padding:0 24px; }
  .xrow{ align-items:flex-start; gap:16px; }
  .xrow__ph{ width:64px; height:64px; }
  .xrow__main{ flex-direction:column; align-items:flex-start; gap:12px; }
  .oinfo{ padding:20px 16px; }
  .recap{ padding:32px 24px; }
  .wiz__top{ margin-bottom:32px; }
  .steps__dot{ width:36px; height:36px; font-size:.9375rem; }
  .steps__it + .steps__it::before{ top:17px; left:calc(-50% + 26px); right:calc(50% + 26px); }
  .steps__name{ font-size:.8125rem; }
  .wiz__h{ margin-bottom:24px; }
  .fin{ padding:24px; }
  .btn--sm{ min-height:44px; }
}
@media (max-width:479px){ .fgrid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:359px){ .t1{ gap:12px; padding:20px 12px; } .steps__it:not(.is-cur) .steps__name{ visibility:hidden; } }   /* sous 360px, seul le nom de l'étape en cours */   /* la phrase garde sa place à droite du sélecteur (zones de 44px) */

/* ---------- Footer : crème unie, identité en trois colonnes (largeur mesurée), sans Google Maps ---------- */
.foot{ background:var(--c-fond); color:var(--c-texte); font-size:1rem; }
.foot > .container{ padding-top:48px; }
.foot__grid > *{ min-width:0; }
.foot__logo{ margin-bottom:12px; }
.foot__name{ font-size:1.375rem; line-height:1.25; letter-spacing:-.01em; color:var(--c-texte); }
.foot__pos{ display:block; font-family:var(--f-texte); font-size:1.0625rem; font-weight:600; letter-spacing:0; color:var(--c-violet); margin-top:4px; }
.foot__tag{ color:var(--c-texte-2); margin-top:16px; }
.foot__h{ font-family:var(--f-texte); font-weight:600; font-size:var(--t-surtitre); line-height:1.4; letter-spacing:.06em;
  text-transform:uppercase; color:var(--c-violet); margin-bottom:12px; }
.foot__h--legal{ margin-top:32px; }
.foot__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot__links a,.foot__info a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--c-violet); text-decoration-color:currentColor; transform:translateX(3px); }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:10px; }
.foot__info .ic{ width:20px; height:20px; margin-top:3px; color:var(--c-texte-2); }
.foot__social{ margin-top:32px; }
.foot__sep{ height:1px; background:var(--c-filet); margin-top:32px; }
.foot__sep--m{ display:none; }
.foot__bar{ display:flex; justify-content:space-between; gap:16px; padding-block:32px; font-size:var(--t-label); color:var(--c-texte-2); }
/* Configuration mobile, sous la largeur mesurée où les trois colonnes tiennent avec 64px d'air sur les lettres
   (572 + 97 + 316 + 2 × 64 + marges 2 × 24 + barre de défilement 15 = 1176px) : une colonne, tablette comprise */
@media (max-width:1179px){
  .foot > .container{ padding-top:44px; }
  .foot__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  .foot__ident{ display:flex; flex-direction:column; align-items:flex-start; }
  .foot__col + .foot__col{ margin-top:32px; }
  .foot__sep--m{ display:block; margin-block:32px 0; }
  .foot__sep--m + .foot__col{ padding-top:32px; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
@media (max-width:767px){ .foot > .container{ padding-top:32px; } }
/* trois colonnes serrées sur leur texte, même air entre elles ; tagline sur ses deux lignes choisies */
@media (min-width:1180px){
  .foot > .container{ max-width:var(--container-header); }
  .foot__grid{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:48px; }
  .foot__col{ padding-top:56px; }   /* première ligne au niveau du nom, pas du logo */
  .foot__tag > span{ display:block; }
}

/* ==========================================================================
   Effets : Phase finale
   ========================================================================== */
/* 1. Hero d'accueil pinné, effet rideau : le hero reste figé (z bas), le corps de page remonte par-dessus d'un seul bloc opaque */
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--c-fond); }
.is-home .hero--pin + .page-flow{ box-shadow:0 -10px 28px rgba(86,71,138,.10),0 -1px 2px rgba(86,71,138,.06); }   /* le rideau se lit en remontant */

/* 2. Entrée au chargement (accueil) : barre d'annonce et header descendent EN BLOC, fond compris, puis le hero apparaît en fondu
   (un transform sur le hero pinné casserait le sticky), puis l'indicateur de scroll. Remplissage backwards seul : le transform
   du header disparaît de lui-même à sa fin et le sticky revient ; html.fx-in est retirée à la fin de la DERNIÈRE animation. */
@keyframes in-down{ from{ transform:translateY(-100%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes in-fade{ from{ opacity:0; } to{ opacity:1; } }
html.fx-in .annonce{ animation:in-down .7s var(--ease) backwards; }
html.fx-in .hdr{ animation:in-down .7s var(--ease) .12s backwards; }
html.fx-in .hero{ animation:in-fade .9s var(--ease) .3s backwards; }
html.fx-in .scroll-ind{ animation:in-fade .9s var(--ease) .75s backwards; }

/* 4. Reveal au scroll, au niveau du composant, en cascade (état masqué posé sans transition, transitions allumées ensuite) */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px); }
html.fx-on [data-reveal]{ transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .tk.run{ animation:none !important; }
  .scroll-ind__line::after{ animation:none !important; transform:translateY(75%); }   /* la lueur figée au milieu de la ligne */
  html.js-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  html.fx-in .annonce,html.fx-in .hdr,html.fx-in .hero,html.fx-in .scroll-ind{ animation:none !important; }
  .annonce__in{ overflow-x:auto; -webkit-mask-image:none !important; mask-image:none !important; }
  .annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  .annonce__set{ padding-left:0 !important; }
  .tile:hover .tile__img .ph,.gal__it:hover .ph,.fcard:hover .fcard__img .ph{ transform:none !important; }
}