/* =========================================================================
   lumitherapie.eu — feuille de style maison
   Parti pris : « chambre de lumière ». Le site alterne des sections NUIT
   (la lumière ne se voit que sur le sombre) et des sections JOUR (ivoire,
   pour la lecture longue). Chaque section porte une longueur d'onde qui
   teinte son halo : --onde. Aucune librairie, aucun appel tiers.
   ========================================================================= */

/* ---------- 1. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--onde);outline-offset:3px;border-radius:4px}

/* ---------- 2. Palette ---------- */
:root{
  /* Jour : ivoire chaud, pas de blanc pur (le blanc pur durcit la lumière) */
  --fond:#fbf8f4; --fond-2:#f4efe8; --encre:#191220; --doux:#6b6076;
  --trait:rgba(25,18,32,.12); --carte:#fffdfa; --carte-bord:rgba(25,18,32,.09);
  /* Nuit */
  --nuit:#0b0810; --nuit-2:#140f1c; --nuit-3:#1d1626;
  /* Spectre visible → invisible. Ce sont les vraies couleurs du métier. */
  --bleu:#4d7cff;    /* 450 nm */
  --cyan:#2fd4e0;    /* 490 nm */
  --vert:#35d68a;    /* 520 nm */
  --jaune:#ffc93c;   /* 580 nm */
  --ambre:#ff9636;   /* 610 nm */
  --rouge:#ff4d42;   /* 660 nm */
  --nir:#b44dff;     /* 850 nm — invisible à l'œil, figuré en pourpre */
  --ir-loin:#7a4dff; /* > 3000 nm */
  --onde:var(--rouge);          /* longueur d'onde courante de la section (décor) */
  --onde-2:var(--ambre);
  /* --onde-txt : la même teinte, mais garantie lisible. Sur fond nuit, une onde
     sombre (infrarouge) doit être remontée sinon le texte d'accent passe sous le
     seuil de contraste AA. Recalculée dans le contexte de chaque section. */
  --onde-txt:var(--onde);
  --r:18px; --r-lg:28px; --r-pill:999px;
  --ombre:0 1px 2px rgba(25,18,32,.05),0 12px 34px -14px rgba(25,18,32,.22);
  --ombre-h:0 2px 6px rgba(25,18,32,.07),0 26px 60px -20px rgba(25,18,32,.3);
  --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}

.band-nuit,.page-head,.cta-final,.hero{--onde-txt:color-mix(in oklab,var(--onde) 86%,white)}

/* ---------- 3. Typographie ---------- */
h1,h2,h3,h4{font-family:'Bricolage Grotesque','Instrument Sans',sans-serif;
  font-weight:800;line-height:1.03;letter-spacing:-.035em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6.2vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3.3rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
h4{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.55;color:var(--doux);max-width:62ch}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.serif-it{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  letter-spacing:-.005em;color:var(--onde-txt)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.735rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--onde-txt);margin:0 0 1.1rem}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--onde));flex:none}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mut{color:var(--doux)}
.tiny{font-size:.85rem;line-height:1.5}

/* ---------- 4. Structure ---------- */
.wrap{width:min(100% - 2.6rem,var(--max));margin-inline:auto}
.narrow{width:min(100%,780px);margin-inline:auto}
.mid{width:min(100%,980px);margin-inline:auto}
section{position:relative;padding:clamp(4rem,8vw,7.5rem) 0}
section.tight{padding:clamp(2.5rem,4vw,4rem) 0}
.band-jour{background:var(--fond-2)}
.band-nuit{--fond:var(--nuit);--fond-2:var(--nuit-2);--encre:#f6f2fa;--doux:#a79dba;
  --trait:rgba(255,255,255,.13);--carte:rgba(255,255,255,.045);--carte-bord:rgba(255,255,255,.11);
  --ombre:0 20px 50px -24px #000;--ombre-h:0 30px 70px -26px #000;
  background:var(--nuit);color:var(--encre);isolation:isolate;
  /* clip (et non hidden) : confine le halo débordant sans créer de conteneur
     de défilement — sinon le document s'élargit de 10 % à droite. */
  overflow:clip}
/* Halo : la signature visuelle. Une nappe de lumière derrière le contenu. */
.band-nuit::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-1;
  background:radial-gradient(60% 55% at 50% 0%,color-mix(in oklab,var(--onde) 26%,transparent),transparent 70%);
  pointer-events:none}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E")}

/* ---------- 5. Grilles ---------- */
.grid{display:grid;gap:clamp(1rem,1.8vw,1.6rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,4rem);align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}
.split img,.split video{border-radius:var(--r-lg);box-shadow:var(--ombre)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.g2,.g3,.g4,.split,.split.wide-left,.split.wide-right{grid-template-columns:1fr}}

/* ---------- 6. Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.85em 1.5em;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:600;font-size:.97rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-glow{background:linear-gradient(105deg,var(--onde),var(--onde-2));color:#fff;
  box-shadow:0 8px 30px -8px color-mix(in oklab,var(--onde) 65%,transparent)}
.btn-glow:hover{box-shadow:0 14px 42px -10px color-mix(in oklab,var(--onde) 80%,transparent)}
.btn-solid{background:var(--encre);color:var(--fond)}
.btn-ghost{border-color:var(--trait);background:transparent;color:var(--encre)}
.btn-ghost:hover{border-color:var(--onde);color:var(--onde-txt)}
.btn-sm{padding:.6em 1.05em;font-size:.88rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- 7. Pastilles ---------- */
.pill{display:inline-flex;align-items:center;gap:.45em;padding:.34em .8em;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  background:color-mix(in oklab,var(--onde) 13%,transparent);
  color:color-mix(in oklab,var(--onde-txt) 82%,var(--encre));
  border:1px solid color-mix(in oklab,var(--onde) 26%,transparent)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--onde);flex:none;
  box-shadow:0 0 9px var(--onde)}
.pill.nm{font-variant-numeric:tabular-nums}

/* ---------- 8. Cartes ---------- */
.card{position:relative;background:var(--carte);border:1px solid var(--carte-bord);
  border-radius:var(--r-lg);padding:clamp(1.35rem,2vw,1.9rem);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
  backdrop-filter:blur(6px)}
.card:hover{transform:translateY(-4px);box-shadow:var(--ombre-h);
  border-color:color-mix(in oklab,var(--onde) 40%,var(--carte-bord))}
.card h3{margin-bottom:.45rem}
.card p:last-child{margin-bottom:0}
.card .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:color-mix(in oklab,var(--onde) 14%,transparent);color:var(--onde-txt);
  border:1px solid color-mix(in oklab,var(--onde) 24%,transparent)}
.card .ic svg{width:24px;height:24px}
/* Filet lumineux en haut de carte, révélé au survol */
.card.lit::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,transparent,var(--onde),transparent);opacity:0;transition:opacity .4s}
.card.lit:hover::before{opacity:1}

/* ---------- 9. Le spectre : composant signature ---------- */
/* Dégradé calé sur l'échelle RÉELLE 400 → 1000 nm (position = (nm-400)/6 %).
   La moitié droite s'éteint : au-delà de 780 nm, l'œil ne voit plus rien. */
.spectre{position:relative;height:12px;border-radius:var(--r-pill);overflow:hidden;
  background:linear-gradient(90deg,
    #6a2bff 0%,    /* 400 violet */
    #4d5cff 6.7%,  /* 440 */
    #2f8cff 11.7%, /* 470 bleu */
    #2fd4e0 15%,   /* 490 cyan */
    #35d68a 20%,   /* 520 vert */
    #b9e04a 25.8%, /* 555 */
    #ffc93c 30%,   /* 580 jaune */
    #ff9636 35%,   /* 610 ambre */
    #ff4d42 43.3%, /* 660 rouge profond */
    #e0332c 50%,   /* 700 */
    #a82a3a 58.3%, /* 750 */
    #6e2a55 63.3%, /* 780 limite du visible */
    #7a3ccc 75%,   /* 850 proche infrarouge (figuré) */
    #5a2f9e 90%,   /* 940 */
    #3d2470 100%)} /* 1000 */
.spectre.tall{height:22px}
.spectre-legende{display:flex;justify-content:space-between;font-size:.74rem;color:var(--doux);
  margin-top:.5rem;font-variant-numeric:tabular-nums}
.onde-curseur{position:absolute;top:-6px;width:3px;height:24px;border-radius:2px;background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.9);transform:translateX(-50%);transition:left .35s var(--ease)}

/* ---------- 10. Étapes, stats, accordéon ---------- */
.steps{display:grid;gap:1.5rem;counter-reset:etape}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start}
.step-n{counter-increment:etape;width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-weight:700;font-size:.95rem;
  background:color-mix(in oklab,var(--onde) 15%,transparent);color:var(--onde-txt);
  border:1px solid color-mix(in oklab,var(--onde) 30%,transparent)}
.step-n::before{content:counter(etape,decimal-leading-zero)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem}
.stat{padding:1.2rem 0;border-top:1px solid var(--trait)}
.stat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(2rem,3.4vw,2.9rem);
  font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--onde-txt);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.9rem;color:var(--doux);margin-top:.45rem}
.acc{border-bottom:1px solid var(--trait)}
.acc summary{cursor:pointer;padding:1.15rem 0;font-weight:600;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .25s}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--onde);
  border-bottom:2px solid var(--onde);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.acc[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.acc summary:hover{color:var(--onde-txt)}
.acc-body{padding:0 0 1.35rem;color:var(--doux);max-width:75ch}
.acc-body :last-child{margin-bottom:0}

/* ---------- 11. En-tête de page & fil d'Ariane ---------- */
.page-head{position:relative;padding:clamp(7rem,11vw,9.5rem) 0 clamp(2.5rem,5vw,4rem);
  background:var(--nuit);color:#f6f2fa;--encre:#f6f2fa;--doux:#a79dba;--trait:rgba(255,255,255,.13);
  isolation:isolate;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:-60% -20% auto -20%;height:190%;z-index:-1;
  background:radial-gradient(50% 50% at 30% 10%,color-mix(in oklab,var(--onde) 30%,transparent),transparent 72%)}
.page-head h1{margin-bottom:.35em}
.breadcrumb{font-size:.84rem;color:var(--doux);margin-bottom:1.2rem;display:flex;gap:.5em;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--onde-txt)}

/* ---------- 12. En-tête du site (injecté par site.js) ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:900;transition:background .35s,backdrop-filter .35s,border-color .35s}
.hd-in{display:flex;align-items:center;gap:1.6rem;padding:.85rem 0;
  width:min(100% - 2.6rem,var(--max));margin-inline:auto}
.hd.sticky{background:color-mix(in oklab,var(--nuit) 82%,transparent);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.1)}
.hd .logo{display:flex;align-items:center;gap:.65rem;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:1.16rem;letter-spacing:-.035em;color:#f6f2fa;flex:none}
.hd .logo svg{width:34px;height:34px;flex:none}
.hd nav{display:flex;gap:.25rem;margin-left:auto;align-items:center}
.hd nav a{padding:.5rem .85rem;border-radius:var(--r-pill);font-size:.94rem;font-weight:500;
  color:rgba(246,242,250,.82);transition:color .25s,background .25s}
.hd nav a:hover,.hd nav a.on{color:#fff;background:rgba(255,255,255,.1)}
.hd .hd-act{display:flex;align-items:center;gap:.5rem;flex:none}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:transparent;cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px;color:#f6f2fa}
@media (max-width:1080px){
  .hd nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;padding:1rem 1.3rem 1.6rem;
    background:color-mix(in oklab,var(--nuit) 96%,transparent);backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.12);display:none}
  .hd nav.open{display:flex}
  .hd nav a{width:100%;padding:.85rem .4rem;border-radius:10px;font-size:1.05rem}
  .burger{display:grid}
  .hd .hd-act .btn:not(.burger){display:none}
}

/* ---------- 13. Pied de page ---------- */
.ft{background:var(--nuit);color:#cfc7dd;padding:clamp(3.5rem,6vw,5rem) 0 2rem;position:relative;isolation:isolate}
.ft::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rouge),var(--nir),transparent);opacity:.65}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft h4{color:#fff;font-size:.79rem;letter-spacing:.17em;text-transform:uppercase;margin-bottom:1.1rem;
  font-family:'Instrument Sans',sans-serif;font-weight:600}
.ft a{color:#cfc7dd;font-size:.95rem;transition:color .25s}
.ft a:hover{color:var(--rouge)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ft-bas{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.84rem;color:#8d84a0}
.nl-form{display:flex;gap:.5rem;margin-top:1rem}
.nl-form input{flex:1;min-width:0;padding:.72em 1em;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:.92rem}
.nl-form input::placeholder{color:#8d84a0}

/* ---------- 14. Formulaires ---------- */
.champ{display:block;margin-bottom:1.05rem}
.champ>span{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem;color:var(--encre)}
.champ input,.champ select,.champ textarea{width:100%;padding:.8em 1em;border-radius:14px;
  border:1px solid var(--trait);background:var(--carte);color:var(--encre);
  transition:border-color .25s,box-shadow .25s}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--onde);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--onde) 15%,transparent)}
.champ .aide{font-size:.8rem;color:var(--doux);margin-top:.35rem;display:block}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:600px){.champs-2{grid-template-columns:1fr}}
.coche{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--doux);margin-bottom:1rem}
.coche input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--onde)}
.msg{padding:.9em 1.15em;border-radius:14px;font-size:.92rem;margin-bottom:1rem;display:none}
.msg.ok{display:block;background:color-mix(in oklab,var(--vert) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--vert) 35%,transparent);color:color-mix(in oklab,var(--vert) 70%,var(--encre))}
.msg.err{display:block;background:color-mix(in oklab,var(--rouge) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--rouge) 32%,transparent);color:color-mix(in oklab,var(--rouge) 72%,var(--encre))}

/* ---------- 15. Appel à l'action final ---------- */
.cta-final{background:var(--nuit);color:#f6f2fa;--encre:#f6f2fa;--doux:#a79dba;--trait:rgba(255,255,255,.14);
  position:relative;isolation:isolate;overflow:hidden;text-align:center}
.cta-final::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:150%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 100%,color-mix(in oklab,var(--onde) 32%,transparent),transparent 70%)}
.cta-final .btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ---------- 16. Divers ---------- */
.hr-spectre{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--trait),transparent);margin:0}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem}
.tbl th,.tbl td{text-align:left;padding:.8em .9em;border-bottom:1px solid var(--trait)}
.tbl th{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);font-weight:600}
.tbl tr:hover td{background:color-mix(in oklab,var(--onde) 5%,transparent)}
.note{border-left:3px solid var(--onde);padding:.2rem 0 .2rem 1.15rem;color:var(--doux);
  font-size:.94rem;margin:1.5rem 0}
.badge-src{display:inline-block;font-size:.74rem;color:var(--doux);border:1px solid var(--trait);
  border-radius:var(--r-pill);padding:.15em .7em;margin-left:.4em;vertical-align:middle}
/* Masquage accessible : lisible par les lecteurs d'écran, sans déborder la page
   (un left:-9999px élargit le document et crée un défilement horizontal). */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;margin:0;clip-path:none;
  z-index:999;background:var(--nuit);color:#fff;padding:.7em 1.2em;border-radius:10px}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.vu{opacity:1;transform:none}

/* ---------- 17. Composants injectés par site.js ---------- */
.mob-only{display:none}
@media (max-width:1080px){.mob-only{display:block}}

/* Fenêtres flottantes (fiche produit, demande de prix) */
.fen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.2rem;
  opacity:0;transition:opacity .3s var(--ease)}
.fen.vu{opacity:1}
.fen-fond{position:absolute;inset:0;background:rgba(11,8,16,.62);backdrop-filter:blur(6px)}
.fen-boite{position:relative;width:min(100%,600px);max-height:88vh;display:flex;flex-direction:column;
  background:var(--fond);color:var(--encre);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(11,8,16,.7);transform:translateY(14px) scale(.985);
  transition:transform .35s var(--ease)}
.fen.vu .fen-boite{transform:none}
.fen-lg .fen-boite{width:min(100%,1060px)}
.fen-barre{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;
  border-bottom:1px solid var(--trait);background:var(--fond-2);position:sticky;top:0;z-index:2}
.fen-barre b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;letter-spacing:-.02em}
.fen-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--trait);background:transparent;
  display:grid;place-items:center;cursor:pointer;flex:none;transition:background .25s,color .25s}
.fen-x svg{width:17px;height:17px;pointer-events:none}
.fen-x:hover{background:var(--onde);border-color:var(--onde);color:#fff}
.fen-corps{padding:1.5rem;overflow-y:auto;overscroll-behavior:contain}

/* Fiche produit */
.fp{display:grid;grid-template-columns:.95fr 1.05fr;gap:1.8rem}
@media (max-width:820px){.fp{grid-template-columns:1fr}}
.fp-img img{width:100%;border-radius:var(--r);background:var(--fond-2);aspect-ratio:1;object-fit:contain}
.fp-vign{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap}
.fp-vign button{width:60px;height:60px;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;
  border:1px solid var(--trait);background:var(--fond-2);transition:border-color .25s}
.fp-vign button.on{border-color:var(--onde)}
.fp-vign img{width:100%;height:100%;object-fit:cover}
.fp-prix{font-family:'Bricolage Grotesque',sans-serif;font-size:1.9rem;font-weight:800;
  letter-spacing:-.03em;color:var(--onde-txt);margin:.6rem 0 0}
.fp-txt h3{font-size:1.6rem}

/* Widget de conseil */
.chat-bulle{position:fixed;right:20px;bottom:20px;z-index:880;width:58px;height:58px;border-radius:50%;
  border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--rouge),var(--nir));
  box-shadow:0 10px 34px -8px rgba(255,77,66,.6);transition:transform .35s var(--ease)}
.chat-bulle:hover{transform:translateY(-3px) scale(1.05)}
.chat-bulle svg{width:25px;height:25px}
.chat-pan{position:fixed;right:20px;bottom:20px;z-index:890;width:min(calc(100vw - 2.4rem),390px);
  height:min(72vh,580px);display:flex;flex-direction:column;background:var(--fond);
  border:1px solid var(--trait);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 70px -22px rgba(11,8,16,.55);opacity:0;transform:translateY(16px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.chat-pan.vu{opacity:1;transform:none}
.chat-hd{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;
  background:var(--nuit);color:#f6f2fa;flex:none}
.chat-hd b{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.chat-hd .fen-x{border-color:rgba(255,255,255,.22);color:#f6f2fa;width:32px;height:32px}
.chat-corps{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.75rem;
  background:var(--fond-2);overscroll-behavior:contain}
.chat-msg{max-width:88%;padding:.75em 1em;border-radius:16px;font-size:.94rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word}
.chat-msg.bot{background:var(--carte);border:1px solid var(--carte-bord);border-bottom-left-radius:5px;align-self:flex-start}
.chat-msg.moi{background:linear-gradient(120deg,var(--rouge),var(--ambre));color:#fff;
  border-bottom-right-radius:5px;align-self:flex-end}
.chat-msg.attente{color:var(--doux);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.chat-form{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--trait);flex:none;background:var(--fond)}
.chat-form input{flex:1;min-width:0;padding:.7em 1em;border-radius:var(--r-pill);
  border:1px solid var(--trait);background:var(--fond-2)}
.chat-form input:focus{outline:none;border-color:var(--onde)}

/* ---------- 18. Sélecteur de langue ---------- */
.lang{position:relative;flex:none}
.lang-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);background:transparent;color:#f6f2fa;cursor:pointer;
  font-size:.85rem;font-weight:600;letter-spacing:.02em;transition:background .25s,border-color .25s}
.lang-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.lang-btn svg{width:16px;height:16px;flex:none}
.lang-menu{position:absolute;top:calc(100% + .5rem);right:0;min-width:184px;padding:.4rem;
  border-radius:16px;background:color-mix(in oklab,var(--nuit) 96%,transparent);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7);display:none;z-index:20}
.lang-menu.open{display:block}
.lang-menu a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:10px;
  font-size:.92rem;color:rgba(246,242,250,.85);transition:background .2s,color .2s}
.lang-menu a:hover{background:rgba(255,255,255,.09);color:#fff}
.lang-menu a.on{color:var(--rouge);font-weight:600}
@media (max-width:1080px){.lang-btn{padding:.45rem .65rem}.lang-btn span{display:none}}

/* ═══════════════════ Boutique : fiche produit enrichie ═══════════════════ */
.fp-sansprix{font-size:.95rem;color:var(--doux);margin:.2rem 0 0}
.fp-atouts{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.fp-atouts li{position:relative;padding-left:1.6rem;font-size:.95rem;line-height:1.5}
.fp-atouts li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--onde);box-shadow:0 0 0 4px color-mix(in oklab,var(--onde) 18%,transparent)}
.fp-pourqui{margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:14px;background:var(--fond-2);
  font-size:.93rem;line-height:1.55}
.fp-pourqui strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--doux);margin-bottom:.25rem}
/* un tableau de 20 lignes de specs doit pouvoir défiler seul sur un téléphone */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══════════════════ Façade vidéo (aucune requête avant le clic) ═══════════════════ */
.ytf{position:relative;margin:1.5rem 0;border-radius:var(--r);overflow:hidden;cursor:pointer;
  aspect-ratio:16/9;display:grid;place-items:center;border:1px solid var(--carte-bord);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in oklab,var(--onde) 26%,var(--nuit-2)) 0%,var(--nuit) 70%)}
.ytf-play{width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--nuit);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 10px 40px -8px rgba(0,0,0,.5)}
.ytf-play svg{width:30px;height:30px;margin-left:3px}
.ytf:hover .ytf-play{transform:scale(1.08);box-shadow:0 14px 50px -8px color-mix(in oklab,var(--onde) 60%,transparent)}
.ytf-txt{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.72));text-align:left}
.ytf-txt strong{display:block;font-size:.98rem}
.ytf-txt span{font-size:.78rem;opacity:.75}
.ytf-cadre{position:relative;aspect-ratio:16/9;margin:1.5rem 0;border-radius:var(--r);overflow:hidden;
  background:var(--nuit)}
.ytf-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ═══════════════════ Grille boutique ═══════════════════ */
.pr-vign{position:relative;border-radius:16px;overflow:hidden;background:var(--fond-2);
  aspect-ratio:4/3;margin-bottom:1.1rem}
.pr-vign img{width:100%;height:100%;object-fit:contain;padding:.6rem;
  transition:transform .5s var(--ease)}
.card:hover .pr-vign img{transform:scale(1.045)}
.pr-ref{position:absolute;top:.6rem;left:.6rem;padding:.24em .7em;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--nuit) 78%,transparent);color:#fff;font-size:.72rem;
  font-weight:700;letter-spacing:.04em;backdrop-filter:blur(6px)}
/* Cartes de famille illustrées par une photo réelle : les pictogrammes ne disaient
   rien de la différence entre un panneau et un masque. */
.fam{position:relative;overflow:hidden;padding:0;cursor:pointer;display:block;border-radius:var(--r)}
.fam img{width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--fond-2);
  transition:transform .6s var(--ease)}
.fam:hover img{transform:scale(1.06)}
.fam-txt{position:absolute;inset:auto 0 0 0;padding:1.4rem 1.3rem 1.2rem;color:#fff;
  background:linear-gradient(transparent,rgba(11,8,16,.55) 42%,rgba(11,8,16,.9))}
.fam-txt h3{margin:0 0 .2rem;font-size:1.12rem;color:#fff}
.fam-txt p{margin:0;font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.8)}
.fam-txt .n{display:inline-block;margin-top:.5rem;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--onde-txt);font-weight:700}
@media (max-width:520px){
  .fp-vign button{width:52px;height:52px}
  .ytf-play{width:58px;height:58px}.ytf-play svg{width:24px;height:24px}
}

/* ═══════════════════ Confort mobile / tablette ═══════════════════ */
/* Un tableau de politique de confidentialité ou de fiche technique est plus large
   qu'un écran de téléphone : il défile dans son propre cadre au lieu d'élargir la page. */
@media (max-width:760px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .tbl td,.tbl th{white-space:normal;min-width:9rem}
  .breadcrumb{font-size:.82rem}
}
/* Palier tactile : le même seuil que la bascule du menu (1080 px) couvre les tablettes
   Android et l'iPad, où le doigt reste le moyen de navigation. */
@media (max-width:1080px) and (pointer:coarse),(max-width:1080px){
  .ft-grid ul a{display:inline-block;padding:.42rem 0}
}