/* ============================================================================
   ELYSIUM — feuille de style PARTAGÉE de toutes les pages (l'accueil la charge aussi).
   Identité CLAIRE « beige » validée par les coachs le 27/09 : voir site/CLAUDE.md.
   Tokens en tête (--fond = LA variable de fond ; --titre / --texte = les 2 polices), puis
   les règles historiques, puis la « COUCHE CRÈME » qui neutralise l'ancien thème sombre.
   Ancien thème : tag git site-sombre-27-09.
   ========================================================================== */

:root{
  /* ═══ LE FOND DU SITE — UNE SEULE LIGNE À RÉGLER ═══
     Beige très très clair (retours Damien & Yoann, 27/09 16 h 10). Plus clair / plus
     blanc : rapprocher de #FFFFFF ; plus chaud : ajouter un soupçon de jaune.
     Surfaces, filets et sections alternées en sont DÉRIVÉS automatiquement. */
  --fond:#F6F3EE;

  --void2:color-mix(in srgb,var(--fond) 50%,#fffdf9);    /* surfaces / cartes, un cran plus clair */
  --cream2:color-mix(in srgb,var(--fond) 93%,#8a7a60);   /* sections alternées, un cran plus soutenu */
  --line:color-mix(in srgb,var(--fond) 85%,#8a7a60);     /* filets et séparateurs, neutres chauds */
  --void:var(--fond);                                    /* ancien nom, gardé : toutes les pages s'en servent */
  --voile:color-mix(in srgb,var(--fond) 92%,transparent);/* bandeaux fixes semi-transparents */

  /* textes (AA vérifié sur le fond et les sections alternées) */
  --ice:#111111; --gris:#4d463c; --steel:#6b6358;
  /* bleu Elysium : --brand pour les fonds / boutons, --blue (foncé) pour le texte et les filets */
  --brand:#2E9BFF; --blue:#1466b8; --blue-d:#0f4f8f;
  /* pastels : les couleurs des repas de leurs diètes, adoucies */
  --p-jaune:#F8EBC4; --p-vert:#DDE8D2; --p-violet:#E2DCEA; --p-bleu:#DCE8F4;
  --b-jaune:#ffd966; --b-vert:#93c47d; --b-violet:#8e7cc3; --b-bleu:#6fa8dc;

  /* ═══ DEUX POLICES, PAS UNE DE PLUS (Damien : « une police plus classique ») ═══
     --titre : Georgia, pour TOUS les titres — celle des noms clients sur leurs fiches PDF.
     --texte : Arial, pour tout le reste — celle du corps de leurs fiches PDF.
     Toutes deux installées d'origine sur iPhone, Mac, Windows et Android : rien à
     télécharger, et le même rendu chez les coachs (Safari iPhone) que chez les clients.
     Seule exception : le logo ELYSIUM (Cormorant, --wordmark). */
  --titre:Georgia,"Times New Roman",serif;
  --texte:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --disp:var(--texte); --mono:var(--texte); --serif:var(--texte);   /* anciens noms -> texte courant */
  --wordmark:"Cormorant Garamond",Georgia,serif;
  --edge:clamp(18px,4vw,54px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--gris);font-family:var(--disp);font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
/* « caché » veut dire caché : aucune règle display:flex/grid ne doit l'emporter sur hidden
   (bug 27/09 : bandeau de messages vide affiché dans l'espace client) */
[hidden]{display:none!important}
/* appli MyEly (classe « appli » posée par app/appli.js) : ni prix ni paiement dans l'appli (règles des stores) */
html.appli .hors-appli{display:none!important}
/* l'inverse (demande de l'appli, 03/10) : visible SEULEMENT dans l'appli MyEly ; [hidden] reste prioritaire */
.seulement-appli{display:none!important}
html.appli .seulement-appli:not([hidden]){display:block!important}
::selection{background:var(--brand);color:#111}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.skip{position:fixed;top:-64px;left:var(--edge);z-index:120;background:var(--void2);color:var(--ice);
  border:1px solid var(--blue);padding:10px 18px;font-family:var(--disp);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;transition:top .2s ease}
.skip:focus{top:14px}

/* ---------- curseur instrument (viseur carré) ---------- */
@media (hover:hover) and (pointer:fine){
  /* (ancien curseur « viseur » retiré avec le thème sombre : le navigateur gère le curseur) */
  .cur{position:fixed;left:0;top:0;z-index:100;pointer-events:none;width:26px;height:26px;margin:-13px 0 0 -13px;
    border:1px solid rgba(46,155,255,.75);will-change:transform;
    transition:width .22s ease,height .22s ease,margin .22s ease,background .22s ease,border-color .22s ease}
  .curdot{position:fixed;left:0;top:0;z-index:100;pointer-events:none;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
    background:var(--blue);box-shadow:0 0 7px var(--blue);will-change:transform}
  .cur.hot{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(46,155,255,.08);border-color:var(--blue)}
}
@media (hover:none){.cur,.curdot{display:none}}

/* ---------- cadre + grain + scan ambiant (le châssis de l'instrument) ---------- */
.frame{position:fixed;inset:0;z-index:60;pointer-events:none}
.frame .cnr{position:absolute;width:26px;height:26px;border:1px solid var(--blue);opacity:.55}
.frame .tl{top:var(--edge);left:var(--edge);border-right:0;border-bottom:0}
.frame .tr{top:var(--edge);right:var(--edge);border-left:0;border-bottom:0}
.frame .bl{bottom:var(--edge);left:var(--edge);border-right:0;border-top:0}
.frame .br{bottom:var(--edge);right:var(--edge);border-left:0;border-top:0}
.frame .tl,.frame .tr{display:none}   /* coins du haut retirés : ils chevauchaient le logo + le bouton CTA de la nav */
@media(max-width:760px){.frame{display:none}}

.grain{position:fixed;inset:-120px;z-index:41;pointer-events:none;opacity:.055;mix-blend-mode:overlay;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(2%,4%)}}

.ambscan{position:fixed;left:0;right:0;top:0;height:180px;z-index:40;pointer-events:none;opacity:.28;
  background:linear-gradient(180deg,transparent,rgba(46,155,255,.04) 44%,rgba(46,155,255,.12) 50%,rgba(46,155,255,.04) 56%,transparent);
  animation:ambscan 9s linear infinite;will-change:transform}
@keyframes ambscan{0%{transform:translateY(-180px)}100%{transform:translateY(100vh)}}

/* ---------- barre de statut + nav (chrome commun à toutes les pages) ---------- */
.status{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;align-items:flex-start;justify-content:space-between;
  padding:16px var(--edge);font-family:var(--disp);font-size:12px;letter-spacing:.14em;color:var(--steel);
  text-transform:uppercase;background:linear-gradient(180deg,rgba(4,6,10,.86),transparent)}
.status .brand{font-family:var(--serif);font-style:italic;font-size:20px;letter-spacing:.18em;color:var(--ice);text-transform:none}
.status .mid{display:none}
.status .rt{display:flex;gap:8px;align-items:center;color:var(--gris)}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue);animation:blink 2.4s steps(1) infinite}
@keyframes blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
@media(min-width:900px){.status .mid{display:block}}

/* ---------- LOGO officiel Elysium (wordmark serif + « NUTRITION & PERFORMANCE » entre traits bleus) ---------- */
.logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
/* ===== LOGO ELYSIUM — vectoriel + animé, net à toute taille, piloté par --h ===== */
.logo .elg{--h:96px}                              /* même taille que l'accueil, sur toutes les pages */
.logo.big .elg{--h:104px}
@media(max-width:900px){.logo .elg{--h:60px}}
.elg{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:var(--h);line-height:1;padding:0 calc(var(--h)*.1)}
.elg-ring{position:absolute;left:50%;top:50%;width:var(--h);height:var(--h);overflow:visible;pointer-events:none;transform:translate(-50%,-50%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.elg-ring path{stroke-dasharray:335;stroke-dashoffset:0;filter:drop-shadow(0 0 2px rgba(46,155,255,.5)) drop-shadow(0 0 5px rgba(46,155,255,.28)) drop-shadow(0 0 0 rgba(46,155,255,0));transition:filter .3s,stroke-width .3s;animation:elgDraw 1.25s cubic-bezier(.6,.05,.15,1) .15s backwards}   /* halo de base en TRIPLE couche (faible) -> la transition vers le halo :hover monte proprement en puissance ; backwards = ne fige pas le filtre au repos */
@keyframes elgDraw{0%{stroke-dashoffset:335;filter:drop-shadow(0 0 0 rgba(46,155,255,0)) drop-shadow(0 0 0 rgba(46,155,255,0)) drop-shadow(0 0 0 rgba(46,155,255,0))}55%{filter:drop-shadow(0 0 3px #2E9BFF) drop-shadow(0 0 13px #2E9BFF) drop-shadow(0 0 28px rgba(46,155,255,.75))}100%{stroke-dashoffset:0;filter:drop-shadow(0 0 2px rgba(46,155,255,.5)) drop-shadow(0 0 5px rgba(46,155,255,.28)) drop-shadow(0 0 0 rgba(46,155,255,0))}}
.elg-name{position:relative;z-index:1;font-family:var(--serif);font-weight:500;font-size:calc(var(--h)*.315);letter-spacing:.17em;padding-left:.17em;color:#fff;text-transform:uppercase;transition:text-shadow .45s;opacity:0;animation:elgFade .6s ease .35s forwards}
.elg-sub{position:relative;z-index:1;display:flex;align-items:center;gap:.55em;margin-top:calc(var(--h)*.035);font-family:var(--disp);font-weight:500;font-size:calc(var(--h)*.086);letter-spacing:.24em;padding-left:.24em;color:#eaf0fb;text-transform:uppercase;white-space:nowrap;opacity:0;animation:elgFade .7s ease .7s forwards}
@keyframes elgFade{to{opacity:1}}
.elg-sub b{color:var(--blue);font-weight:600;text-shadow:0 0 8px rgba(46,155,255,.55)}
.elg-sub i{width:calc(var(--h)*.13);height:1px;background:var(--blue);position:relative;flex:none;box-shadow:0 0 6px rgba(46,155,255,.6)}
.elg-sub i::before{content:"";position:absolute;top:50%;width:3px;height:3px;background:var(--blue);transform:translateY(-50%) rotate(45deg)}
.elg-sub i.l::before{left:-1px}.elg-sub i.r::before{right:-1px}
/* survol : halo néon soutenu sur les arcs + ELYSIUM/accents qui s'illuminent (le re-tracé est piloté en JS, mouseenter) */
.logo:hover .elg-ring path{stroke-width:3.3;filter:drop-shadow(0 0 3px #2E9BFF) drop-shadow(0 0 12px #2E9BFF) drop-shadow(0 0 26px rgba(46,155,255,.8))}
.logo:hover .elg-name{text-shadow:0 0 4px rgba(46,155,255,.7),0 0 13px rgba(46,155,255,.85),0 0 28px rgba(46,155,255,.5)}   /* voile bleu VISIBLE (couche serrée qui colle aux lettres) mais ELYSIUM reste blanc */
.logo:hover .elg-sub b{color:#5db4ff;text-shadow:0 0 14px rgba(46,155,255,1)}
.logo:hover .elg-sub i{background:#5db4ff;box-shadow:0 0 13px rgba(46,155,255,1)}
.elg{transition:transform .22s cubic-bezier(.2,.7,.2,1)}          /* retour au clic (press) */
.logo:active .elg{transform:scale(.94)}
/* le re-tracé des arcs (survol + clic) est joué en JS via Web Animations API -> repart neuf à chaque fois */
@media(prefers-reduced-motion:reduce){.elg-ring path{stroke-dashoffset:0;animation:none}.elg-name,.elg-sub{opacity:1;animation:none}.logo:active .elg{transform:none}}

nav.menu{position:fixed;top:58px;right:var(--edge);z-index:55;display:flex;gap:26px;align-items:center}
nav.menu a{font-family:var(--disp);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);transition:color .3s}
nav.menu a:hover{color:var(--blue)}
nav.menu a[aria-current="page"]{color:var(--ice)}
nav.menu a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--blue);margin-top:4px}
nav.menu a.go{color:var(--ice);border:1px solid var(--line);padding:8px 16px}
nav.menu a.go:hover{border-color:var(--blue);background:rgba(46,155,255,.08);color:#fff}
nav.menu a.go[aria-current="page"]::after{display:none}

/* ---------- menu MOBILE (hamburger instrument + panneau plein écran) ---------- */
.burger{display:none;position:fixed;top:36px;right:var(--edge);z-index:70;width:36px;height:26px;
  background:none;border:0;padding:0;cursor:pointer}
.burger::after{content:"";position:absolute;inset:-11px -9px}/* zone tactile ~54x48 (>=44px) sans déplacer les barres */
.burger span{position:absolute;left:4px;right:4px;height:1.5px;background:var(--ice);
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s ease}
.burger span:nth-child(1){top:5px}.burger span:nth-child(2){top:12px}.burger span:nth-child(3){top:19px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.msheet{position:fixed;inset:0;z-index:65;background:rgba(4,6,10,.975);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--edge);
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s ease}
.msheet.open{opacity:1;visibility:visible}
.msheet a{display:flex;align-items:baseline;gap:16px;font-family:var(--disp);font-weight:600;
  font-size:clamp(30px,9vw,54px);color:var(--ice);text-transform:uppercase;letter-spacing:.01em;
  padding:15px 0;border-bottom:1px solid var(--line);transition:color .3s ease,padding-left .3s ease}
.msheet a:hover,.msheet a[aria-current="page"]{color:var(--blue);padding-left:10px}
.msheet a .mnum{font-family:var(--disp);font-weight:400;font-size:12px;color:var(--steel);letter-spacing:.1em}
.msheet a.go-m{color:var(--blue);border-bottom:0;margin-top:20px}
@media(max-width:900px){nav.menu{display:none}.burger{display:block}.status .rt{display:none}}
@media(prefers-reduced-motion:reduce){.msheet,.burger span{transition:none}}

/* ---------- typographie & utilitaires ---------- */
h1,h2,h3{font-family:var(--disp);font-weight:600;color:var(--ice);text-transform:uppercase;line-height:.92;letter-spacing:.005em;text-wrap:balance}
.mono{font-family:var(--disp)}
.serif{font-family:var(--serif);font-style:italic;color:var(--gris)}
.kick{font-family:var(--disp);font-size:12px;letter-spacing:.24em;color:var(--blue);text-transform:uppercase;display:inline-flex;gap:10px;align-items:center}
.kick::before{content:"";width:22px;height:1px;background:var(--blue)}
.chapno{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--steel)}
.b{color:var(--blue)}

.btn{font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);
  background:transparent;cursor:pointer;/* explicite : un <button class="btn"> hérite sinon du fond blanc du navigateur */
  border:1px solid var(--blue);padding:15px 32px;display:inline-block;position:relative;will-change:transform;
  transition:background .35s ease,box-shadow .35s ease,color .35s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:rgba(46,155,255,.12);color:#fff;
  box-shadow:0 0 0 1px rgba(46,155,255,.55),0 0 14px rgba(46,155,255,.34),0 0 46px rgba(46,155,255,.20),inset 0 0 22px rgba(46,155,255,.10)}
.link{font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
  border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .3s ease,border-color .3s ease}
.link:hover{color:var(--blue);border-color:var(--blue)}

/* ---------- structure de page contenu ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--edge)}
main{position:relative;z-index:2}

/* mini-hero de page (plus court que la landing) */
.phead{position:relative;min-height:60vh;display:flex;align-items:flex-end;padding:22vh var(--edge) 8vh;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(900px 520px at 78% 6%,rgba(46,155,255,.10),transparent 62%),
             linear-gradient(0deg,var(--void),transparent 60%)}
/* champ de télémétrie (signature instrument) : n'ajoute QUE de la lumière -> ne mange pas le texte */
.phead .pfield{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;mix-blend-mode:screen}
.phead::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,var(--void),transparent 42%)}   /* fond dégradé -> lisibilité du titre */
.phead-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%}
.phead .kick{margin-bottom:22px}
.phead h1{font-size:clamp(36px,10vw,132px)}   /* min 36 (pas 52) : le mot le plus long "ACCOMPAGNEMENT" tient avec marge même sur écran 360px (le T ne sort plus) */
.phead h1 .l2{display:block;color:var(--blue)}
.phead .sub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.1vw,26px);color:#cdd6e4;margin-top:24px;max-width:44ch}

/* section générique */
.sec{position:relative;padding:9vh 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:38px;flex-wrap:wrap}
.sec-head .no{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5vw,72px);color:transparent;
  -webkit-text-stroke:1px rgba(46,155,255,.32);line-height:.8}
.sec-head h2{font-size:clamp(30px,4.4vw,56px)}
.sec-head .lbl{font-family:var(--disp);font-size:12px;letter-spacing:.18em;color:var(--blue);text-transform:uppercase}
/* trait néon qui se trace (signature Elysium, injecté par site.js) — se dessine à la révélation */
.trace{display:block;width:170px;height:20px;overflow:visible;margin-top:14px}
.trace path{stroke:var(--blue);stroke-width:1.4;fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(46,155,255,.7));stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .25s}
.trace .tnode{fill:#eaf4ff;opacity:0;filter:drop-shadow(0 0 6px var(--blue));transition:opacity .3s ease .35s}
html.reveal-ready .sec-head.in .trace path{stroke-dashoffset:0}
html.reveal-ready .sec-head.in .trace .tnode{opacity:1}
.trace.on path{stroke-dashoffset:0}.trace.on .tnode{opacity:1}   /* accueil : posé par son script */
@media(prefers-reduced-motion:reduce){
  .trace path{stroke-dashoffset:0;transition:none}.trace .tnode{opacity:1;transition:none}
}
.sec p.lead{font-size:clamp(19px,1rem + 0.8vw,23px);line-height:1.7;color:var(--gris);max-width:62ch}
.sec p.lead b{color:var(--ice);font-weight:500}

/* ---------- ÉQUIPE (coachs) ---------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.coach{border:1px solid var(--line);background:linear-gradient(180deg,rgba(11,15,22,.7),rgba(3,5,10,.5));
  padding:0;overflow:hidden;transition:border-color .35s ease,transform .35s ease}
.coach:hover{border-color:rgba(46,155,255,.4);transform:translateY(-3px)}
.coach .ph{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:#0a0e15 center/cover no-repeat,
    radial-gradient(120% 90% at 50% 0%,rgba(46,155,255,.10),transparent 60%);
  background-blend-mode:normal}
/* fine grille d'instrument dans la vignette photo */
.coach .ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(46,155,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(46,155,255,.06) 1px,transparent 1px);
  background-size:26px 26px;-webkit-mask:radial-gradient(120% 100% at 50% 0%,#000,transparent 72%);mask:radial-gradient(120% 100% at 50% 0%,#000,transparent 72%)}
.coach .ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(3,5,10,.9),transparent 55%)}
.coach .ph .ghost{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:88px;color:rgba(46,155,255,.13);letter-spacing:.05em;
  transition:color .5s ease,text-shadow .5s ease}
.coach:hover .ph .ghost{color:rgba(46,155,255,.30);text-shadow:0 0 34px rgba(46,155,255,.35)}
.coach .ph .tagph{position:absolute;left:14px;bottom:12px;z-index:3;font-family:var(--disp);font-size:11px;
  letter-spacing:.16em;color:var(--steel);text-transform:uppercase;border:1px solid var(--line);padding:4px 8px;background:rgba(3,5,10,.5)}
/* équerres d'instrument (coins) */
.coach .ph .fr{position:absolute;z-index:3;width:15px;height:15px;border:1px solid rgba(46,155,255,.55);opacity:.75;transition:opacity .4s ease}
.coach .ph .fr.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.coach .ph .fr.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.coach:hover .ph .fr{opacity:1}
/* ligne de scan qui balaie la vignette au survol (« lecture » de la carte) */
.coach .ph .scanline{position:absolute;left:0;right:0;top:0;z-index:2;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--blue) 50%,transparent);box-shadow:0 0 16px 2px rgba(46,155,255,.6)}
.coach:hover .ph .scanline{animation:cardscan 1.5s cubic-bezier(.5,0,.2,1)}
@keyframes cardscan{0%{top:0;opacity:0}8%{opacity:.95}92%{opacity:.95}100%{top:100%;opacity:0}}
.coach:hover{border-color:rgba(46,155,255,.45);box-shadow:0 26px 60px -34px rgba(46,155,255,.4)}
.coach .body{padding:22px 24px 26px}
.coach .role{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--blue);text-transform:uppercase}
.coach h3{font-size:34px;margin:6px 0 12px}
.coach p{font-size:17px;line-height:1.7;color:var(--gris)}
.coach .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:20px 0 16px;border-top:1px solid var(--line);padding-top:16px}
.coach .stats .v{font-family:var(--disp);font-weight:600;font-size:26px;color:var(--ice)}
.coach .stats .v small{font-family:var(--disp);font-size:12px;color:var(--blue);margin-left:5px}
.coach .stats .k{font-family:var(--disp);font-size:10.5px;letter-spacing:.12em;color:var(--steel);text-transform:uppercase;margin-top:2px}

/* ---------- bande « la méthode en chiffres » (Coachs) : vrais chiffres du des diètes ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:40px 0 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.figures .fg{position:relative}
.figures .v{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4vw,46px);color:var(--ice);line-height:1;letter-spacing:.01em}
.figures .v small{font-family:var(--disp);font-weight:400;font-size:13px;color:var(--blue);margin-left:6px}
.figures .k{font-family:var(--disp);font-size:11px;letter-spacing:.08em;color:var(--steel);text-transform:uppercase;margin-top:12px;line-height:1.45;max-width:20ch}
@media(max-width:640px){.figures{grid-template-columns:1fr 1fr;gap:26px 18px;padding:24px 0}}

/* ---------- page Contact : formulaire (Netlify) + infos ---------- */
.contact-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:44px}}
.cform{display:flex;flex-direction:column;gap:18px}
.cform label{display:flex;flex-direction:column;gap:8px;font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:520px){.cform .frow{grid-template-columns:1fr}}
/* 16px mini : en-dessous, iOS Safari ZOOME automatiquement au focus du champ (bug mobile). */
.cform input,.cform select,.cform textarea{font-family:var(--disp);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ice);background:var(--void2);border:1px solid var(--line);padding:13px 14px;width:100%;transition:border-color .3s ease}
.cform input::placeholder,.cform textarea::placeholder{color:var(--steel)}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--blue)}
.cform textarea{resize:vertical;min-height:130px}
.cform select{appearance:none;-webkit-appearance:none;cursor:pointer}
.cform .btn{margin-top:6px;align-self:flex-start;cursor:pointer;background:transparent}
.cform .hp{position:absolute!important;left:-9999px}
.cok{border:1px solid var(--blue);background:rgba(46,155,255,.06);padding:30px;font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.6;color:var(--gris)}
.cok b{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--blue);text-transform:uppercase;display:inline-block;margin-bottom:6px}
.cinfo{display:flex;flex-direction:column;gap:26px;padding-top:4px}
.cinfo .ci{display:flex;flex-direction:column;gap:6px}
.cinfo .ci .k{font-family:var(--disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.cinfo .ci a,.cinfo .ci .v{font-family:var(--disp);font-weight:500;font-size:clamp(16px,1.5vw,19px);color:var(--ice);text-decoration:none;word-break:break-word;line-height:1.2}
.cinfo .ci a{transition:color .3s ease}
.cinfo .ci a:hover{color:var(--blue)}
.cinfo .ci p{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--gris);line-height:1.5;margin-top:2px}

/* ---------- page Méthode : les 4 étapes ---------- */
.steps{display:flex;flex-direction:column;margin-top:24px}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,52px);padding:clamp(28px,4vw,38px) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .sn{font-family:var(--disp);font-weight:600;font-size:clamp(40px,6vw,68px);color:var(--blue);line-height:.85}
.step .st h3{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.4vw,28px);color:var(--ice);text-transform:uppercase;letter-spacing:.005em;margin-bottom:13px}
.step .st p{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.65;color:var(--gris);max-width:62ch}
.step .st p b{color:var(--ice);font-weight:500}
@media(max-width:600px){.step{grid-template-columns:1fr;gap:6px;padding:26px 0}.step .sn{font-size:34px}}

/* ---------- Espace membre (MAQUETTE) : bandeau démo, auth, dashboard ---------- */
.demo-banner{position:fixed;bottom:0;left:0;right:0;z-index:70;background:rgba(232,176,75,.13);border-top:1px solid rgba(232,176,75,.38);color:#e8c56b;font-family:var(--disp);font-size:12px;letter-spacing:.03em;text-align:center;padding:8px 16px}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px var(--edge) 90px}
.auth-card{width:100%;max-width:420px}
.auth-card .kick{margin-bottom:18px}
.auth-card h1{font-family:var(--disp);font-weight:600;font-size:clamp(30px,5vw,44px);color:var(--ice);text-transform:uppercase;line-height:1;letter-spacing:.005em;margin-bottom:10px}
.auth-card h1 .l2{display:block;color:var(--blue)}
.auth-card .sub{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--steel);margin-bottom:30px;line-height:1.55}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form label{display:flex;flex-direction:column;gap:8px;font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.auth-form input{font-family:var(--disp);font-size:16px;color:var(--ice);background:var(--void2);border:1px solid var(--line);padding:13px 14px;transition:border-color .3s;width:100%}/* 16px = pas de zoom auto iOS au focus */
.auth-form input:focus{outline:none;border-color:var(--blue)}
.auth-form .btn{margin-top:8px;cursor:pointer;background:transparent;justify-content:center;text-align:center}
.auth-alt{font-family:var(--serif);font-weight:500;font-size:14.5px;color:var(--steel);margin-top:24px;text-align:center}
/* messages d'authentification (erreur serveur / confirmation) — sobres, jamais criards */
.auth-msg{display:none;font-family:var(--disp);font-size:13.5px;line-height:1.55;margin-top:18px;padding:12px 14px;border:1px solid}
.auth-msg.on{display:block}
.auth-msg.err{color:#f0b9b9;border-color:rgba(214,120,120,.5);background:rgba(214,120,120,.08)}
.auth-msg.ok{color:#c3daf7;border-color:rgba(46,155,255,.5);background:rgba(46,155,255,.08)}
.auth-alt a{color:var(--blue);text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
.dash{max-width:1100px;margin:0 auto;padding:110px var(--edge) 90px}
.dash-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
.dash-hd h1{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4.6vw,52px);color:var(--ice);text-transform:uppercase;line-height:1;letter-spacing:.005em}
.dash-hd h1 span{color:var(--blue)}
.dash-hd .out{font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);background:none;border:1px solid var(--line);padding:9px 15px;cursor:pointer;transition:border-color .3s,color .3s}
.dash-hd .out:hover{border-color:var(--blue);color:var(--blue)}
.dash-sub{font-family:var(--serif);font-weight:500;font-size:16px;color:var(--gris);margin-bottom:32px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}/* minmax(0,..) : la colonne peut rétrécir sous la largeur d'un enfant large (graphe) -> pas de débordement */
@media(max-width:760px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
.card{border:1px solid var(--line);background:var(--void2);padding:26px 24px;position:relative}
.card.wide{grid-column:1/-1}
.card .ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card .ch h3{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ice);text-transform:uppercase;letter-spacing:.01em}
.card .ch .tag{font-family:var(--disp);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);border:1px solid var(--line);padding:3px 9px}
.card>p{font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.55;color:var(--gris)}
.wrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}/* mobile étroit : les boutons passent sous l'input au lieu de déborder */
.wrow input{flex:1;font-family:var(--disp);font-size:16px;color:var(--ice);background:var(--void);border:1px solid var(--line);padding:11px 12px}/* 16px = pas de zoom auto iOS au focus */
.wrow input:focus{outline:none;border-color:var(--blue)}
.wrow button{font-family:var(--disp);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#04060a;background:var(--blue);border:0;padding:0 16px;cursor:pointer;font-weight:500}
.wlog{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:0;max-height:160px;overflow:auto}
.wlog li{display:flex;justify-content:space-between;font-family:var(--disp);font-size:12.5px;color:var(--gris);border-bottom:1px solid var(--line);padding:9px 0}
.wlog li b{color:var(--ice);font-weight:500}
.wlog .empty{color:var(--steel);border:0;justify-content:flex-start}
.drop{display:block;margin-top:14px;border:1px dashed var(--line);padding:24px;text-align:center;font-family:var(--disp);font-size:12px;color:var(--steel);cursor:pointer;transition:border-color .3s,color .3s}
.drop:hover{border-color:var(--blue);color:var(--gris)}
.locked{border-color:rgba(46,155,255,.32)}
.locked .lockicon{font-size:20px;color:var(--blue);margin-bottom:6px}
.locked .btn{margin-top:16px;cursor:pointer;background:transparent}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--line)}
.pill.free{color:var(--steel)}
.pill.paid{color:var(--blue);border-color:var(--blue)}
.dashcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.demolink{font-family:var(--disp);font-size:12px;color:var(--steel);text-decoration:underline;cursor:pointer;background:none;border:0;padding:0}
.tags-l{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.tags-l span{font-family:var(--disp);font-size:11px;letter-spacing:.06em;color:var(--gris);
  border:1px solid var(--line);border-radius:20px;padding:5px 11px}
@media(max-width:760px){.team{grid-template-columns:1fr}}

/* citation */
.quote{border-left:2px solid var(--blue);padding:6px 0 6px 22px;margin:30px 0}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,34px);color:var(--ice);line-height:1.3}
.quote figcaption{font-family:var(--disp);font-size:12px;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;margin-top:14px}

/* ---------- FORMULES (pricing) ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);background:rgba(9,13,20,.55);padding:30px 26px 28px;
  display:flex;flex-direction:column;transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease}
.plan:hover{border-color:rgba(46,155,255,.42);transform:translateY(-4px)}
.plan.feat{border-color:var(--blue);box-shadow:0 0 0 1px rgba(46,155,255,.35),0 30px 70px -40px rgba(46,155,255,.5)}
.plan.feat::before{content:"Recommandé";position:absolute;top:-1px;right:20px;transform:translateY(-50%) scale(.4);
  transform-origin:center;opacity:0;
  font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#04060a;
  background:var(--blue);padding:4px 12px;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) .55s,opacity .4s ease .55s}
/* la formule recommandée « s'allume » quand elle arrive à l'écran (lueur qui monte + badge qui pop) */
html.reveal-ready .plan.feat{box-shadow:0 0 0 1px rgba(46,155,255,.12);
  transition:border-color .35s ease,transform .35s ease,box-shadow 1s ease .35s}
html.reveal-ready .plan.feat.in{box-shadow:0 0 0 1px rgba(46,155,255,.4),0 30px 70px -38px rgba(46,155,255,.55),0 0 46px -12px rgba(46,155,255,.42)}
html.reveal-ready .plan.feat.in::before{transform:translateY(-50%) scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){
  html.reveal-ready .plan.feat,html.reveal-ready .plan.feat.in::before{transition:none}
  .plan.feat::before{transform:translateY(-50%) scale(1);opacity:1}
}
.plan h3{font-size:30px;margin:0 0 6px}
.plan .price{font-family:var(--disp);font-weight:600;font-size:52px;color:var(--ice);line-height:1;margin:18px 0 2px}
.plan .price small{font-family:var(--disp);font-size:12px;color:var(--steel);letter-spacing:.06em;margin-left:4px}
.plan .per{font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--steel);text-transform:uppercase;margin-bottom:22px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0 0 26px;flex:1}
.plan li{font-size:16px;line-height:1.5;color:var(--gris);padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-left:1px solid var(--blue);border-bottom:1px solid var(--blue);transform:rotate(-45deg)}
.plan li.off{color:var(--steel);opacity:.6}
.plan li.off::before{border-color:var(--steel);transform:none;top:9px;width:9px;height:1px;border-left:0;border-bottom:1px solid var(--steel)}
.plan .btn{width:100%;text-align:center}
@media(max-width:900px){.plans{grid-template-columns:1fr}}   /* ordre 1, 2, 3 aussi sur mobile (demande Dimitri 27/09) */

/* comparatif / faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border-top:1px solid var(--line);padding:2px 0}
.faq details[open]{padding-bottom:14px}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--disp);font-weight:500;font-size:19px;color:var(--ice);text-transform:uppercase;letter-spacing:.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-size:22px;color:var(--blue);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-size:17px;line-height:1.75;color:var(--gris);max-width:70ch}

/* bandeau CTA de bas de page */
.cta{position:relative;text-align:center;padding:16vh var(--edge);overflow:hidden;border-top:1px solid var(--line)}
.cta::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 42%,#0b1322,#05070c 74%)}
.cta-in{position:relative;z-index:2;max-width:760px;margin:0 auto}
.cta h2{font-size:clamp(40px,6vw,88px)}
.cta .sub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,25px);color:#cdd6e4;margin:20px 0 40px}

/* ---------- footer ---------- */
.site-foot{position:relative;z-index:2;text-align:center;padding:64px var(--edge) 48px;border-top:1px solid var(--line)}
.site-foot .logo{margin-bottom:24px}
.site-foot .foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-bottom:22px;
  font-family:var(--disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.site-foot .foot-links a{color:var(--steel);transition:color .3s ease}
.site-foot .foot-links a:hover{color:var(--blue)}
.site-foot .foot-legal{font-family:var(--disp);font-size:11px;letter-spacing:.12em;color:#4a5364;text-transform:uppercase}

/* ---------- mention partenaire discrète (Prozis) — bas de Méthode & Formules ---------- */
.partner-strip{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:48px;padding:22px 0;background:var(--void);isolation:isolate}   /* fond noir isolé -> le mix-blend-mode du logo Prozis se cale toujours sur du sombre (plus de boîte pâle selon l'endroit) */
.partner-strip .pk{font-family:var(--disp);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}
.partner-strip .pn-logo{height:27px;width:auto;mix-blend-mode:screen}
.partner-strip .promo{font-family:var(--disp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.partner-strip .promo b{color:var(--blue);font-weight:600;letter-spacing:.13em}
/* mobile : empilage centré (le libellé + le logo côte à côte se décalaient et rendaient mal) */
@media(max-width:600px){.partner-strip{flex-direction:column;gap:13px;text-align:center}.partner-strip .pn-logo{height:30px}}

/* ---------- pages légales / documents : colonne de lecture confortable ---------- */
.legal{max-width:820px;margin:0 auto}
.legal .intro{font-size:16px;line-height:1.8;color:var(--gris);margin-bottom:10px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.legal h3{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.6vw,23px);color:var(--ice);text-transform:uppercase;letter-spacing:.005em;margin:40px 0 12px;display:flex;align-items:baseline;gap:12px}
.legal h3 .num{font-family:var(--disp);font-weight:400;font-size:13px;color:var(--blue)}
.legal p{font-size:15px;line-height:1.8;color:var(--gris);margin-bottom:12px;max-width:70ch}
.legal p b{color:var(--ice);font-weight:500}
.legal ul{list-style:none;margin:0 0 14px;padding:0;max-width:70ch}
.legal li{font-size:15px;line-height:1.75;color:var(--gris);padding-left:18px;position:relative;margin-bottom:8px}
.legal li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--blue);transform:rotate(45deg)}
.legal a{color:var(--blue);border-bottom:1px solid var(--line);transition:border-color .3s}
.legal a:hover{border-color:var(--blue)}
/* champ à compléter par les coachs -> visuellement identifiable */
.fill{color:var(--blue);background:rgba(46,155,255,.08);border:1px dashed rgba(46,155,255,.45);border-radius:4px;
  padding:1px 8px;font-family:var(--disp);font-size:12px;white-space:nowrap}
.legal .upd{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--disp);font-size:12px;letter-spacing:.1em;color:var(--steel);text-transform:uppercase}

/* ---------- révélation au scroll ----------
   Le masquage est conditionné à `html.reveal-ready`, classe posée PAR site.js.
   Si le JS ne tourne pas (échec, 404, désactivé), la classe n'est jamais posée
   -> le contenu reste VISIBLE. Jamais de page blanche à cause d'un script. */
html.reveal-ready .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
/* .in DOIT battre la règle de masquage (qui inclut le type `html`) -> même préfixe */
html.reveal-ready .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .grain,.ambscan,.status .dot{animation:none!important}
  html.reveal-ready .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}


/* ============================================================================
   COUCHE CRÈME (27/09) — neutralise ce qui n'existait que pour le noir :
   curseur viseur, grain, balayage, cadre, néons, dégradés sombres, capitales
   condensées. Placée en fin de fichier pour gagner sur les règles ci-dessus.
   ========================================================================== */
.cur,.curdot,.grain,.ambscan,.frame,.phead .pfield{display:none!important}

/* titres : Georgia, casse normale (comme leurs fiches) — même dans les styles propres aux pages */
h1,h2:not(.intitule),h3:not(.intitule){font-family:var(--titre)!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.01em!important;line-height:1.12!important;color:var(--ice)}
/* même taille par niveau sur TOUTES les pages (les styles propres aux pages ne décident plus) */
h1{font-size:clamp(34px,5.4vw,60px)!important}
h2:not(.intitule){font-size:clamp(26px,3.4vw,40px)!important}
h3:not(.intitule){font-size:clamp(19px,1.8vw,23px)!important}
/* .intitule = étiquette de panneau (espace coachs), en texte courant : hors de l'échelle des titres */
/* plus d'italique d'appoint : une seule graisse / un seul style de texte courant */
body *:not(h1):not(h1 *):not(h2):not(h2 *){font-style:normal!important}
body{font-family:var(--texte);overflow-wrap:break-word}   /* filet : un mot sans espace (réponse client, e-mail) ne sort jamais de sa carte */
input,select,textarea,button{font-family:var(--texte)}

/* en-tête : bande crème, marque ELYSIUM en Cormorant, menu aligné dessus */
.status{align-items:center;height:64px;padding:0 var(--edge);background:var(--voile);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.status .mid,.status .rt{display:none!important}
nav.menu{top:0;height:64px}
nav.menu a{font-size:14px;letter-spacing:0;text-transform:none;color:var(--gris)}
nav.menu a:hover{color:var(--ice)}
nav.menu a[aria-current="page"]{color:var(--ice)}   /* pas de gras : il élargit le mot et décale le menu d'une page à l'autre */
nav.menu a[aria-current="page"]::after{background:var(--brand);height:2px;border-radius:2px}
nav.menu a.go{color:var(--ice);border:1px solid var(--ice);border-radius:999px;padding:8px 16px}
nav.menu a.go:hover{background:var(--ice);color:#fff}
.burger{top:19px}
.msheet{background:var(--fond)}
.msheet a{font-family:var(--texte);font-weight:600;text-transform:none}
.msheet a .mnum{font-family:var(--disp)}
.logo .elg,.logo.big .elg,.elg{--h:auto;height:auto;padding:0}
.elg-ring,.elg-sub{display:none!important}
.elg-name{font-family:var(--wordmark);font-weight:500;font-size:25px;letter-spacing:.42em;padding-left:.42em;color:var(--ice);opacity:1;animation:none;text-shadow:none!important}
.logo:hover .elg-name{color:var(--blue)}

/* boutons : pilule bleu Elysium, texte noir (6,5:1) */
.btn{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:#111;background:var(--brand);border:1px solid var(--brand);border-radius:999px;padding:14px 28px}
.btn:hover{background:#5ab1ff;border-color:#5ab1ff;color:#111;box-shadow:0 10px 24px -14px rgba(20,102,184,.6)}
.link{letter-spacing:.06em;color:var(--blue);border-color:currentColor}
.kick::before{height:2px;border-radius:2px;background:var(--brand)}
.kick{letter-spacing:.14em;font-weight:600}

/* en-tête de page : un voile pastel au lieu du halo sombre */
.phead::before{background:radial-gradient(700px 420px at 82% 10%,var(--p-bleu),transparent 65%),radial-gradient(520px 360px at 12% 90%,var(--p-jaune),transparent 70%)}
.phead::after{display:none}
.phead h1 .l2,.auth-card h1 .l2,.dash-hd h1 span{color:var(--brand)}
.phead .sub,.cta .sub{font-family:var(--texte);color:var(--gris)}
.sec-head .no{-webkit-text-stroke:1px rgba(46,155,255,.55)}
.trace path{stroke:var(--brand);filter:none}
.trace .tnode{fill:var(--brand);filter:none}

/* cartes et surfaces */
.coach{background:var(--void2)}
.coach .ph::before{display:none}
.coach .ph::after{background:linear-gradient(0deg,color-mix(in srgb,var(--fond) 55%,transparent),transparent 45%)}
.coach .ph .tagph{background:rgba(251,248,242,.85);color:var(--gris)}
.coach .ph .scanline{display:none}
.coach:hover,.plan:hover{box-shadow:0 20px 44px -30px rgba(60,45,20,.45)}
.card,.plan{background:var(--void2);border-radius:14px}
.plan.feat{border-color:var(--brand)}
html.reveal-ready .plan.feat.in,.plan.feat{box-shadow:0 0 0 1px rgba(46,155,255,.35),0 24px 50px -34px rgba(20,102,184,.55)}
.plan.feat::before{color:#111;background:var(--brand);border-radius:999px}
.plan li::before{border-color:var(--brand)}
.card .ch .tag,.pill{border-radius:999px}
.wrow button{background:var(--brand);color:#111;border-radius:8px}
.cform input,.cform select,.cform textarea,.auth-form input,.wrow input{background:#fff;border-radius:8px}
.faq details{border-color:var(--line)}
.faq summary{font-family:var(--texte);font-weight:600;text-transform:none;font-size:17px;letter-spacing:0}
.quote{border-left-color:var(--brand)}
.fill{background:var(--p-bleu)}

/* bandeau d'appel de fin de page : bleu pastel */
.cta::before{background:#E3EEF8}
.site-foot .foot-links{letter-spacing:.04em;text-transform:none;font-size:14px}
.site-foot .foot-legal{color:var(--steel);letter-spacing:.04em;text-transform:none}
.site-foot .logo{margin-bottom:18px}

/* partenaire : logo posé tel quel (plus de fusion « écran » pensée pour le noir) */
.partner-strip{background:transparent}
.partner-strip .pn-logo{mix-blend-mode:normal;border-radius:4px}
.partner-strip .promo b{color:var(--blue)}

/* messages */
.demo-banner{background:#FCF1D3;border-top:1px solid var(--b-jaune);color:#5a4a10}
.auth-msg{border-radius:8px}
.auth-msg.err{color:#8a1c1c;border-color:#e3a3a3;background:#f9e3e3}
.auth-msg.ok{color:#0f4f8f;border-color:#9cc3ea;background:#E3EEF8}
.cok{background:var(--p-bleu);border-radius:12px}
/* ces règles de l'ancien thème forçaient un fond transparent (bouton contour) : plus précises, on les suit */
.cform .btn,.auth-form .btn,.locked .btn{background:var(--brand)}
.coach .ph{background-color:var(--cream2)}

/* pied de page : le VRAI logo (PNG détouré, 10 Ko), même taille et même place sur toutes les pages.
   L'en-tête garde « Elysium » en texte (décision des coachs, 27/09 16 h 15). */
.site-foot{text-align:center}
.site-foot .foot-logo{display:block;width:200px;max-width:60%;height:auto;margin:0 auto 26px}

/* ── TRANSITIONS ENTRE PAGES : le RIDEAU (choisi par Yoann le 27/09, « en plus lent ») ──
   Un rideau beige balaie l'écran de gauche à droite : ~0,75 s pour couvrir au clic (la page
   change une fois le rideau fermé, site.js), puis ~0,75 s pour dévoiler la nouvelle page quand
   elle est réellement affichée (classe `arrive`, voir le <head>). Le petit trait bleu Elysium au
   bord du rideau est voulu (« c'est pas mal »). L'en-tête passe AU-DESSUS (il ne bouge jamais).
   Filet : `arrive` est posée au plus tard à 1,5 s par le <head>. Rien si « réduire les animations ». */
@view-transition{navigation:none}
html::before{content:"";position:fixed;inset:0;z-index:19;pointer-events:none;background:var(--cream2);
  box-shadow:2px 0 0 rgba(46,155,255,.6),-2px 0 0 rgba(46,155,255,.6);transform:translateX(101%)}
/* au centre du rideau : le mot « ELYSIUM » de l'en-tête (même police, noir), en GRAND comme dans
   l'intro de l'accueil (Yoann 27/09 : « l'Elysium en haut à gauche, en plus grand »). Pas de tracé :
   il est PORTÉ par le rideau (Yoann 18:25 : « comme un film ») : il entre par la gauche
   avec lui et sort par la droite avec lui, sans fondu. ~13vw = presque toute la largeur, iPhone compris. */
html::after{content:"";position:fixed;inset:0;z-index:19;pointer-events:none;transform:translateX(101%);
  background:url(/assets/myely-clair.svg) center/min(62vw,760px) auto no-repeat}   /* MyEly (23/10) : le logo, porté par le rideau */
html[data-theme="obscur"]::after{background-image:url(/assets/myely-sombre.svg)}
html.arrivee::before,html.arrivee::after{transform:translateX(0)}
html.arrivee.arrive::before,html.arrivee.arrive::after{animation:rideau-part .75s ease-in-out forwards}
html.page-sort::before,html.page-sort::after{animation:rideau-vient .75s ease-in-out forwards!important}
@keyframes rideau-part{from{transform:translateX(0)}to{transform:translateX(101%)}}
@keyframes rideau-vient{from{transform:translateX(-101%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){html::before,html::after{display:none}}

/* photos des coachs (qui-sommes-nous) : même cadrage portrait 2:3 pour les deux (tête entière, air au-dessus, haut des épaules). Le cadre
   « Photo à venir » reste dans la page : retirer la classe `photo` et l'<img> pour y revenir. */
.coach .ph.photo{aspect-ratio:2/3}
.coach .ph.photo > span{display:none}
.coach .ph.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.coach .ph.photo::after{display:none}



/* pastille « messages non lus » sur Mon espace (et sur le menu mobile) */
.pastille{display:inline-block;min-width:18px;height:18px;margin-left:7px;padding:0 5px;border-radius:9px;background:var(--brand);
  color:#111;font:700 11px/18px var(--texte);text-align:center;vertical-align:1px;letter-spacing:0}
.burger .pastille{position:absolute;top:-4px;right:-6px;margin:0}

/* ═══════════ CARTES DE FORMULE (formules.html + choisir.html) ═══════════ */
  /* e-book offert avec la Formule Elysium (Yoann 28/09) : un cadeau, pas une ligne « comprise » */
  .plan li.offert .badge-offert{display:inline-block;font:700 10.5px/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--b-violet);border-radius:999px;padding:4px 8px;margin:0 2px 4px 0;vertical-align:1px}
  .plan li.offert .valeur-ebook:not(:empty){display:block;font-size:12.5px;color:var(--steel);margin-top:2px}
  .plan .price01{margin:14px 0 0;line-height:1}
  .plan .now{display:flex;align-items:flex-start;font-family:var(--disp);color:var(--ice)}
  .plan .now .n1{font-size:58px;font-weight:700;letter-spacing:-.015em;line-height:.85;
    text-shadow:0 0 24px rgba(46,155,255,.16)}
  .plan .now .eur{font-size:29px;font-weight:700;margin:3px 1px 0 3px;color:inherit}
  .plan .now .n2{font-size:23px;font-weight:700;margin:4px 0 0 1px;letter-spacing:.01em}
  .plan .pterm{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--blue);margin-top:12px}
  .plan .sans-eng{font:600 13.5px/1.4 var(--texte);color:var(--ice);margin:8px 0 6px;width:fit-content;padding:5px 11px;border:1px solid var(--line);border-radius:999px;display:inline-block}   /* Damien 29/09 : « sans engagement » visible sur chaque carte (CGV : aucune durée minimale) */
  .plan .pfine{font-family:var(--disp);font-size:12.5px;line-height:1.5;color:var(--steel);margin:6px 0 20px}
  /* PACK : total des deux prestations barré + pastille de remise */
  .plan .packold{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--steel);
    text-decoration:line-through;text-decoration-color:#c8d0dc;text-decoration-thickness:2px}
  .plan .packsave{display:inline-block;margin-left:9px;font-family:var(--disp);font-size:11px;
    font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
    border:1px solid rgba(46,155,255,.45);padding:3px 8px;vertical-align:2px}
  /* bandeau « durée recommandée » sous la carte prix (Dimitri 26/07) */
  .plan .reco{margin:2px 0 20px;padding:12px 14px;border:1px solid rgba(46,155,255,.28);
    border-radius:12px;background:rgba(46,155,255,.06)}
  .plan .reco b{font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--ice)}
  .plan .reco span{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--steel)}
  .plan ul li b{color:var(--ice);font-weight:600}
  .plan li.opt-reco{color:var(--blue)}
  .plan li.opt-reco b{color:var(--blue)}
  .plan.feat::before{content:"La plus choisie"}
  /* Damien (27/09) : « des notions de couleur dans les avantages, pour pousser à prendre celle à 25
     ou 29 ». Un avantage EN PLUS = une pastille de couleur, la même d'une formule à l'autre
     (pastels des repas) ; la formule 1 garde des puces neutres. */
  .plan li.plus{padding-left:30px}
  .plan li.plus::before{left:0;top:1px;width:20px;height:20px;border:0;border-radius:50%;background:var(--pc);transform:none}
  .plan li.plus::after{content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;border-left:2px solid #111;border-bottom:2px solid #111;transform:rotate(-45deg)}
  .plan li.vert{--pc:var(--b-vert)} .plan li.bleu{--pc:var(--b-bleu)} .plan li.jaune{--pc:var(--b-jaune)} .plan li.violet{--pc:var(--b-violet)}
  /* formule 3 : bleu PROFOND (le haut de la gamme), touche violette = son avantage propre (les recettes) */
  .plan.feat.complet{border-color:var(--blue-d);box-shadow:0 0 0 1px rgba(15,79,143,.3),0 34px 60px -30px rgba(15,79,143,.6)}
  html.reveal-ready .plan.feat.complet.in{box-shadow:0 0 0 1px rgba(15,79,143,.35),0 34px 60px -30px rgba(15,79,143,.65)}
  .plan.feat.complet::before{content:"La plus complète";background:var(--b-violet);color:#111}

  /* ═══ MONTÉE EN GAMME Odyssée → Olympe → Elysium (Damien 28/09 : « comprendre les différences
     sans avoir besoin de lire toute la description ») ═══
     1. un MÊME bleu qui s'intensifie : liseré du haut de plus en plus épais et foncé (pastel →
        bleu Elysium → bleu profond), fond de plus en plus teinté, relief croissant ;
     2. une jauge de niveau 1 / 2 / 3 en tête de carte ;
     3. « + » devant chaque avantage NOUVEAU par rapport à la formule du dessous (pastille de
        couleur = un avantage en plus d'Odyssée, la même d'une formule à l'autre) ;
     4. les mots qui font la différence en gras, plus grands, en bleu ; les deux atouts propres à
        Elysium en encadré. */
  .plan{--tier:var(--b-bleu);--vio:#55439a;border-top:3px solid var(--tier)}
  .plan.niv2{--tier:var(--brand);border-top-width:4px;background:color-mix(in srgb,var(--void2) 80%,var(--p-bleu))}
  .plan.niv3{--tier:var(--blue-d);border-top-width:6px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--void2) 45%,var(--p-bleu)),color-mix(in srgb,var(--void2) 72%,var(--p-violet)))}
  .plan.niv2::before{top:-2px} .plan.niv3::before{top:-3px}   /* badge centré sur le liseré épaissi */
  html[data-theme="obscur"] .plan{--vio:#bcaef2}
  html[data-theme="obscur"] .plan.feat.complet,html[data-theme="obscur"].reveal-ready .plan.feat.complet.in{box-shadow:0 0 0 1px rgba(93,180,255,.3),0 34px 60px -30px rgba(46,155,255,.45)}
  .plan .niv{display:flex;gap:5px;margin-bottom:16px}
  .plan .niv i{width:28px;height:5px;border-radius:3px;background:var(--line)}
  .plan.niv1 .niv i:first-child,.plan.niv2 .niv i:nth-child(-n+2),.plan.niv3 .niv i{background:var(--tier)}
  .plan.niv3 .niv i:last-child{background:var(--b-violet)}
  .plan .fsous{font-size:15.5px;line-height:1.45;color:var(--gris);margin:0}
  .plan .fsous b{color:var(--blue);font-weight:700}
  .plan.niv3 .fsous b{color:var(--blue-d)}
  @media(min-width:901px){ .plan .fsous{min-height:45px} }   /* prix alignés d'une carte à l'autre */
  .plan li .cle{font-weight:700;font-size:1.12em;color:var(--blue)}
  .plan.niv3 li .cle{color:var(--blue-d)}
  .plan li.neuf::after{content:"+";left:0;top:1px;width:20px;height:20px;border:0;transform:none;
    font:700 17px/20px var(--texte);text-align:center;color:#111}
  .plan li.fort{padding:11px 12px 11px 44px;border:1px solid var(--pc);border-radius:10px;background:var(--p-bleu);color:var(--ice)}
  .plan li.fort.violet{background:var(--p-violet)}
  .plan li.fort::before,.plan li.fort::after{left:13px;top:13px}
  .plan li.fort .cle{font-size:1.18em}
  .plan li.fort.violet .cle{color:var(--vio)}
  .plan .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  @media(max-width:900px){ .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto} }

/* ═══════════════════ VERSION OBSCURE (Dimitri 27/09) ═══════════════════
   Même identité, de nuit : fond brun très sombre et chaud (pas le noir/néon rejeté), texte crème,
   même bleu Elysium, mêmes polices. Posée par html[data-theme="obscur"] (bouton du menu, choix
   retenu dans le navigateur). html[data-theme] (0,1,1) passe devant les :root des pages. */
html[data-theme="obscur"]{
  /* palette de la fiche PDF « obscure » (_mock_full.py, V2) : Dimitri 27/09 « ça me plaisait mieux » */
  color-scheme:dark;
  --fond:#06080C;
  --void2:color-mix(in srgb,#06080C 90%,#2E9BFF);     /* cartes : rgba(46,155,255,.05-.1) sur le fond */
  --cream2:#0A0E16;                                    /* sections alternées : rgba(10,14,22) de la fiche */
  --line:color-mix(in srgb,#06080C 80%,#2E9BFF);       /* filets : rgba(46,155,255,.16-.2) */
  --voile:color-mix(in srgb,#06080C 90%,transparent);
  --ice:#EAF2FF; --gris:#AEB6C4; --steel:#8A94A8;
  --blue:#2E9BFF; --blue-d:#5DB4FF;
  --p-jaune:color-mix(in srgb,#06080C 84%,#ffd966); --p-vert:color-mix(in srgb,#06080C 84%,#93c47d);
  --p-violet:color-mix(in srgb,#06080C 82%,#8e7cc3); --p-bleu:color-mix(in srgb,#06080C 84%,#6fa8dc);
  /* accueil (ses propres noms) */
  --ink:#EAF2FF; --ink2:#AEB6C4; --mute:#8A94A8; --blue-ink:#2E9BFF;
  --pdj-bg:var(--p-jaune); --dej-bg:var(--p-vert); --col-bg:var(--p-violet); --din-bg:var(--p-bleu);
}
/* les halos bleus de la fiche */
html[data-theme="obscur"] body{background:radial-gradient(900px 520px at 85% 0%,rgba(46,155,255,.10),transparent 60%),
  radial-gradient(760px 600px at 5% 100%,rgba(46,155,255,.06),transparent 62%) fixed,var(--fond)}
html[data-theme="obscur"] h1,html[data-theme="obscur"] h2{color:#fff}
/* espace client / coachs : onglet actif et bulles de messages */
html[data-theme="obscur"] .tab.on{background:#1466b8;border-color:#1466b8}
html[data-theme="obscur"] .b.lui,html[data-theme="obscur"] .b.coach,html[data-theme="obscur"] .b.eq{background:var(--void2)}
html[data-theme="obscur"] .msgs textarea,html[data-theme="obscur"] #msg-form textarea{background:var(--void2)}
/* ce qui était écrit en dur pour le fond clair */
html[data-theme="obscur"] .cform input,html[data-theme="obscur"] .cform select,html[data-theme="obscur"] .cform textarea,
html[data-theme="obscur"] .auth-form input,html[data-theme="obscur"] .wrow input,
html[data-theme="obscur"] input,html[data-theme="obscur"] select,html[data-theme="obscur"] textarea{background:var(--void2);color:var(--ice)}
html[data-theme="obscur"] nav.menu a.go:hover{color:var(--fond)}
html[data-theme="obscur"] .cta::before{background:var(--p-bleu)}
html[data-theme="obscur"] .demo-banner{background:var(--p-jaune);color:#F3DB8C}
html[data-theme="obscur"] .auth-msg.err{color:#F3B4B4;border-color:#7a3a3a;background:#2e1a1a}
html[data-theme="obscur"] .auth-msg.ok{color:#BFDDFB;border-color:#2d5a86;background:#1D2A38}
html[data-theme="obscur"] .foot-logo{filter:invert(1) hue-rotate(180deg)}          /* logo noir -> clair, le bleu reste bleu */
/* logo Prozis : jamais modifié, c'est le logo officiel (Dimitri 27/09) */

/* bouton clair / obscur (injecté par site.js dans le menu et les en-têtes) */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:none;color:var(--ice);cursor:pointer;flex:none;transition:border-color .2s}
.theme-btn:hover{border-color:var(--blue)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.msheet .theme-btn{margin-top:18px;width:auto;height:auto;border-radius:999px;padding:10px 16px;gap:10px;font:15px/1 var(--texte)}
/* accueil en version obscure : les blocs pastel écrits en dur dans index.html */
html[data-theme="obscur"] .day .meal{background:var(--void2)}
html[data-theme="obscur"] .day-hd{background:#000}
html[data-theme="obscur"] .myths details[open]{background:var(--p-jaune)}
html[data-theme="obscur"] .faux{background:#2a0d12;color:#f3a9a9} html[data-theme="obscur"] .vrai{color:#b6dea2}
html[data-theme="obscur"] .two > blockquote{background:var(--void2)}   /* la citation de l'accueil seulement */
html[data-theme="obscur"] .evo{background:var(--p-vert)}
html[data-theme="obscur"] .end{background:var(--p-bleu)}
html[data-theme="obscur"] .btn.line:hover{color:var(--fond)}
/* en-tête des pages membres (espace, connexion, inscription…) : même barre que le menu vitrine,
   avec son filet de séparation (Yoann 27/09) ; collée en haut pendant le défilement, comme la vitrine et l'espace coachs. */
.qtop{height:64px;padding:0 var(--edge)!important;align-items:center!important;background:var(--voile)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}

/* ===== CARTES DE FORMULE : survol / toucher (Yoann 28/09) =====
   F1 : pas de néon, la carte se soulève simplement. F2 et F3 : leur néon s'amplifie. */
.plan{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease}
.plan:not(.feat):hover,.plan:not(.feat):active,html.reveal-ready .plan.reveal.in:not(.feat):hover,html.reveal-ready .plan.reveal.in:not(.feat):active{border-color:var(--line);border-top-color:var(--tier);transform:translateY(-6px);box-shadow:0 22px 40px -28px rgba(60,45,20,.45)}
html .plan.feat:hover,html .plan.feat:active,html.reveal-ready .plan.feat.in:hover{transform:translateY(-6px);
  box-shadow:0 0 0 2px rgba(46,155,255,.65),0 0 64px -4px rgba(46,155,255,.7),0 34px 70px -34px rgba(20,102,184,.75)}
html .plan.feat.complet:hover,html .plan.feat.complet:active,html.reveal-ready .plan.feat.complet.in:hover{
  box-shadow:0 0 0 2px rgba(142,124,195,.75),0 0 64px -4px rgba(142,124,195,.75),0 34px 70px -34px rgba(90,70,150,.75)}
@media(prefers-reduced-motion:reduce){.plan:hover,.plan:active{transform:none}}

/* mode nuit : le halo du bas des titres passe du jaune au VIOLET (Yoann 28/09 : le jaune jure la nuit) */
html[data-theme="obscur"] .phead::before{background:radial-gradient(700px 420px at 82% 10%,var(--p-bleu),transparent 65%),radial-gradient(520px 360px at 12% 90%,var(--p-violet),transparent 70%)}

/* ═══════════════════ FINITIONS VITRINE (29/09, « glow up » demandé par Dimitri) ═══════════════════
   Présentation seulement (aucun texte changé). Clair ET obscur passent par les tokens.
   Portée volontairement étroite : `.team .coach` (et pas `.coach`, qui est aussi une bulle de
   message côté espaces), `.sec .figures` (l'accueil garde sa bande), `.faq` = faq.html seule. */

/* ---- FAQ : une carte par question, pastille numérotée aux couleurs du repas de la catégorie,
   « + » qui pivote en « × », réponse dans une zone légèrement teintée ---- */
.faq{display:flex;flex-direction:column;gap:12px;counter-reset:q}
.faq details{counter-increment:q;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--void2);
  transition:border-color .25s ease,box-shadow .25s ease}
.faq details:hover{border-color:color-mix(in srgb,var(--line) 55%,var(--brand))}
.faq details[open]{padding:0;border-color:color-mix(in srgb,var(--line) 40%,var(--brand));box-shadow:0 18px 40px -30px rgba(60,45,20,.45)}
.faq summary{justify-content:flex-start;gap:16px;padding:18px 18px 18px 20px;border-radius:16px;
  font-family:var(--titre);font-weight:400;font-size:clamp(17px,1rem + .35vw,20px);line-height:1.35;color:var(--ice)}
.faq summary::before{content:counter(q,decimal-leading-zero);flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--pt,var(--p-bleu));border:1px solid var(--pc,var(--b-bleu));font:700 12px/1 var(--texte);color:var(--ice)}
.faq summary::after{content:"";flex:none;margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--blue);
  background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .25s ease,border-color .25s ease,color .25s ease}
.faq summary:hover::after{border-color:var(--brand)}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--brand);border-color:var(--brand);color:#111}
.faq summary:focus-visible{outline-offset:-3px}
.faq details>p{margin:0 18px 18px;padding:16px 20px;max-width:none;border-radius:12px;border-left:3px solid var(--pc,var(--b-bleu));
  background:color-mix(in srgb,var(--pt,var(--p-bleu)) 55%,var(--void2));font-size:16.5px;line-height:1.75;color:var(--gris)}
.faq details>p b{color:var(--ice);font-weight:600}
.faq details[open]>p{animation:faq-in .35s cubic-bezier(.2,.7,.2,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}
@media(max-width:600px){
  .faq summary{gap:12px;padding:15px 14px}
  .faq summary::before{width:28px;height:28px;font-size:11px}
  .faq summary::after{width:30px;height:30px}
  .faq details>p{margin:0 12px 12px;padding:14px 15px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.faq details[open]>p{animation:none}.faq summary::after,.faq details{transition:none}}

/* catégories : sur grand écran, le titre (« 01 » compris) reste collé à gauche pendant qu'on lit ses questions */
.faq-sec{scroll-margin-top:64px}
/* téléphone : le grand numéro au-dessus du titre, toujours (avant : à côté ou au-dessus selon la longueur du titre) */
@media(max-width:600px){.sec-head{flex-direction:column;align-items:flex-start;gap:10px}}
@media(min-width:1000px){
  .faq-sec .wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:start}
  .faq-sec .sec-head{position:sticky;top:104px;flex-direction:column;align-items:flex-start;gap:12px;margin:0}
  .faq-sec .faq{max-width:none;margin:0}
}
/* sommaire des catégories (en-tête de la FAQ) */
.faq-toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.faq-toc a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--void2);color:var(--ice);font-size:15px;line-height:1.2;transition:border-color .2s ease,transform .2s ease}
.faq-toc a:hover{border-color:var(--brand);transform:translateY(-1px)}
.faq-toc i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--pc)}
.faq-toc span{font-size:12.5px;color:var(--steel)}

/* ---- grands numéros de section : un peu plus présents de nuit ---- */
html[data-theme="obscur"] .sec-head .no{-webkit-text-stroke:1px rgba(93,180,255,.7)}

/* ---- bandeau d'appel de fin de page : une grande carte arrondie, pastels de leurs fiches ---- */
.cta{border-top:0;padding:clamp(80px,13vh,140px) var(--edge)}
.cta::before{inset:0 clamp(10px,2.4vw,32px) clamp(10px,2.4vw,32px);border-radius:clamp(22px,3vw,34px);
  background:radial-gradient(560px 320px at 6% 100%,var(--p-jaune),transparent 70%),
             radial-gradient(560px 340px at 96% 0%,var(--p-violet),transparent 72%),#E3EEF8}
html[data-theme="obscur"] .cta::before{border:1px solid var(--line);
  background:radial-gradient(560px 320px at 6% 100%,var(--p-violet),transparent 70%),radial-gradient(560px 340px at 96% 0%,var(--p-bleu),transparent 72%),var(--cream2)}
.cta-in .btn{font-size:16px;padding:16px 34px}   /* .cta-in : bienvenue.html a aussi une .cta (rangée de boutons), non concernée */
@media(max-width:600px){.cta{padding:72px calc(var(--edge) + 14px)}}

/* ---- chiffres (méthode, coachs) : des cartes, un liseré aux couleurs des repas ---- */
.sec .figures{border:0;padding:0;gap:14px;margin:36px 0 10px}
.sec .figures .fg{padding:22px 20px 20px;border:1px solid var(--line);border-top:3px solid var(--fc,var(--b-bleu));border-radius:16px;background:var(--void2)}
.sec .figures .fg:nth-child(1){--fc:var(--b-jaune)} .sec .figures .fg:nth-child(2){--fc:var(--b-vert)}
.sec .figures .fg:nth-child(3){--fc:var(--b-violet)} .sec .figures .fg:nth-child(4){--fc:var(--b-bleu)}
@media(max-width:640px){.sec .figures{gap:10px}.sec .figures .fg{padding:18px 15px 16px}}

/* ---- citation : un encart posé, en Georgia ---- */
.sec .quote{margin:34px 0;padding:26px 30px;border-left:3px solid var(--brand);border-radius:0 16px 16px 0;background:var(--void2)}
.sec .quote blockquote{font-family:var(--titre);font-size:clamp(21px,2.4vw,30px);line-height:1.35}
@media(max-width:600px){.sec .quote{padding:20px}}

/* ---- coachs : cartes arrondies comme le reste du site ---- */
.team .coach{border-radius:18px}

/* ---- contact : les coordonnées dans une carte, séparées par des filets ---- */
.cinfo{gap:0;padding:8px 26px;border:1px solid var(--line);border-radius:18px;background:var(--void2)}
.cinfo .ci{padding:20px 0;border-top:1px solid var(--line)}
.cinfo .ci:first-child{border-top:0}

/* ---- pages légales : colonne de lecture, intertitres à pastille, sommaire ancré ---- */
.legal{max-width:760px}
.legal .intro{font-size:16.5px;padding:22px 24px;margin-bottom:6px;border:1px solid var(--line);border-radius:16px;background:var(--void2)}
.legal h3{align-items:center;scroll-margin-top:88px;margin:44px 0 14px;padding-top:28px;border-top:1px solid var(--line)}
.legal .toc + h3,.legal .intro + h3{border-top:0;padding-top:4px}
.legal h3 .num{flex:none;display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 8px;border-radius:999px;
  background:var(--p-bleu);font:700 13px/1 var(--texte);color:var(--blue)}
.legal p,.legal li{font-size:16px}
.legal .toc{margin:26px 0 10px;padding:22px 24px 16px;border:1px solid var(--line);border-radius:16px;background:var(--void2)}
.legal .toc .toc-k{margin:0 0 10px;font:700 12px/1.2 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.legal .toc ol{list-style:none;margin:0;padding:0;columns:2 250px;column-gap:34px;max-width:none}
.legal .toc li{break-inside:avoid;margin:0;padding:0;font-size:15px;line-height:1.4}
.legal .toc li::before{display:none}
.legal .toc a{display:flex;gap:10px;padding:6px 0;border:0;color:var(--gris)}
.legal .toc a:hover{color:var(--ice)}
.legal .toc a b{flex:none;min-width:22px;color:var(--blue);font-weight:700}
@media(max-width:600px){.legal .intro,.legal .toc{padding:18px 18px 14px}}
/* survol / toucher des formules : effet IMMÉDIAT (Damien 28/09 « il y a un délai avant le néon »).
   Les délais de l'apparition au défilement (.35 s, .d1/.d2) ne s'appliquent plus au survol. */
html .plan:hover,html .plan:active,html.reveal-ready .plan.reveal.in:hover,html.reveal-ready .plan.reveal.in:active,
html.reveal-ready .plan.feat.in:hover,html.reveal-ready .plan.feat.in:active{
  transition:transform .18s ease-out,box-shadow .12s ease-out,border-color .12s ease-out;transition-delay:0s}

/* ===================== STYLE « COMME UNE APPLI CONNUE » (Damien 03/10, go Dimitri 04/10) =====================
   Même style que l'appli MyEly (app/maquette/planches.html?style=appli). Lot 1 : pages membres et espace coachs,
   avec <body class="membre">. La vitrine garde Georgia tant que le lot 2 n'est pas validé.
   Restent : beige, bleu Elysium, couleurs des repas et des macros, ELYSIUM en Cormorant, version obscure. */
:root{--carte:#fff;--ombre:0 2px 10px rgba(60,45,20,.06);--pilule:#EFEAE2;--actif:#111;--actif-t:#fff;--filet-doux:#EEE8DF}
html[data-theme="obscur"]{--carte:#0d131c;--ombre:0 2px 14px rgba(0,0,0,.35);--pilule:#162130;--actif:#EAF2FF;--actif-t:#06080C;--filet-doux:#162130}
body.membre{--titre:Arial,Helvetica,sans-serif}
body.membre h1,body.membre h2,body.membre h3{font-family:Arial,Helvetica,sans-serif!important;font-weight:800!important;letter-spacing:-.03em!important;text-transform:none!important}
body.membre .card,body.membre .carte{background:var(--carte);border-color:transparent;box-shadow:var(--ombre);border-radius:18px}
body.membre .card .ch .tag,body.membre .pill{border:0;background:var(--pilule);color:var(--gris);font:700 11.5px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;padding:5px 11px;border-radius:999px}
body.membre .btn{border-radius:999px}
body.membre .kpi{background:var(--carte);border-color:transparent;box-shadow:var(--ombre);border-radius:18px}
body.membre .kpi .v{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:-.04em}

/* maquette du style sur la vitrine (?style=appli) : bandeau discret en bas d'écran */
.apercu-bandeau{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9999;max-width:calc(100% - 24px);
  padding:9px 16px;border-radius:999px;background:var(--actif);color:var(--actif-t);font:600 13px/1.3 Arial,Helvetica,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:center}
.apercu-bandeau a{color:inherit;text-decoration:underline;margin-left:6px}
body.apercu-appli .plan{background:var(--carte);box-shadow:var(--ombre)}
/* texte provisoire [à compléter] : passe à la ligne (débordait sur téléphone, page Supprimer mon compte) */
.fill{white-space:normal!important;overflow-wrap:anywhere;display:inline}
.apercu-bandeau .ab-court{display:none}
@media(max-width:760px){.apercu-bandeau .ab-court{display:inline}}
/* médailles de profil (v3, 04/10, comme l'appli) : pastille teintée à la couleur du rang, fin cercle, dessin plein (game-icons.net, CC BY 3.0) */
.av.md{box-shadow:none!important}
.av.md .md-fond{fill:color-mix(in srgb,var(--rang) 15%,var(--carte,#fff))}
.av.md .md-cercle{fill:none;stroke:color-mix(in srgb,var(--rang) 45%,transparent);stroke-width:1.6}
.av.md .md-dessin{fill:var(--rang)}
/* médaille « ultime » (admin seul) : la seule sombre, fond noir, dessin et cercle or */
.av.md.r-ultime .md-fond{fill:#111}
.av.md.r-ultime .md-cercle{stroke:#D9B24A;stroke-opacity:.8}

/* « L'ŒIL HUMAIN AVANT DE LIVRER » (règle de Dimitri, 13/10) : aucun mot seul en fin de ligne, des blocs courts équilibrés.
   pretty : le navigateur recoupe les dernières lignes d'un paragraphe pour ne jamais laisser un mot seul (Chrome, Edge, Safari 26).
   balance : titres, boutons, étiquettes et légendes coupés en lignes de longueur égale. Sans effet ailleurs (rien ne casse). */
p,li,dd,dt,td,th,figcaption,blockquote,label,small,.tx,.k,.foot-note,.qhint,.qwarn{text-wrap:pretty}
h1,h2,h3,h4,h5,h6,.btn,.lbl,.kick,.tag,.pill,figcaption,legend,summary{text-wrap:balance}
/* blocs courts (2 à 4 lignes) : lignes égales plutôt qu'un mot seul (chiffres clés, choix du questionnaire, listes des cartes de formule) */
.k,.tx,.qcard,.fsous~ul li{text-wrap:balance}
td,th{text-wrap:balance}   /* cellules étroites des tableaux (confidentialité) au téléphone */
/* grands titres de page coupés à la main (Formules, Inscription, FAQ) : un cran plus petits au téléphone, pour qu'aucun mot ne reste seul */
@media(max-width:420px){html body .phead h1.h1-serre{font-size:clamp(30px,9.2vw,48px)!important}}
@media(max-width:420px){html body h2.h2-serre{font-size:min(36px,7.9vw)!important}}   /* « Un accompagnement » : les deux mots tiennent ensemble au téléphone */
a[href^="mailto:"]{white-space:nowrap}   /* une adresse e-mail ne se coupe jamais (« contact@elysium- / nutrition.com ») */
/* ===== LOGO MyEly (23/10, chantier MyEly) : « MyEly » + « by Elysium », un seul fichier assets/myely.svg ; couleurs par
   variables (--mly-a = « My » bleu, --mly-b = « Ely » et « by Elysium »). Remplace le mot ELYSIUM de l'en-tête et le logo du pied. */
.mly{display:block;width:auto;aspect-ratio:684/334;overflow:visible;--mly-a:#1466b8;--mly-b:#111}
.logo .mly{height:50px}
@media(max-width:900px){.logo .mly{height:44px}}
.site-foot .foot-logo.mly{width:auto;height:96px;max-width:none;margin:0 auto 26px}
.logo:hover .mly{--mly-b:#1466b8}
html[data-theme="obscur"] .mly{--mly-a:#2E9BFF;--mly-b:#EAF2FF}
html[data-theme="obscur"] .foot-logo.mly{filter:none}
html[data-theme="obscur"] .logo:hover .mly{--mly-b:#2E9BFF}

/* ═══ LOGO D'EN-TÊTE D3 (No lImit, go de Dimitri 25/10) : MyEly, un filet bleu, « BY ELYSIUM » au trait ;
   l'écriture (.joue, posée par site.js) : à la fin de l'intro sur l'accueil, au premier affichage de la visite ailleurs (html.logo-play),
   puis à chaque survol ou toucher du logo ; jamais si l'on réduit les animations. Le pied de page garde .mly. */
.logo-d3{--h:38px;--fs:12px;--mly-a:#1466b8;--mly-b:#111;--gris:#4d463c;gap:13px;align-items:flex-start}
html[data-theme="obscur"] .logo-d3{--mly-a:#2E9BFF;--mly-b:#EAF2FF;--gris:#AEB6C4}
.logo-d3:hover{--mly-b:#1466b8}
html[data-theme="obscur"] .logo-d3:hover{--mly-b:#2E9BFF}
.logo-d3:focus-visible{outline:2px solid var(--mly-a);outline-offset:4px;border-radius:2px}
.logo-d3 .mk{display:block;height:var(--h);width:auto;overflow:visible;aspect-ratio:2.7150}
/* (25/10) un seul dessin : « BY ELYSIUM » à sa taille d'origine, descendu pour que le haut du B touche le haut des minuscules de MyEly ; filet centré dessus */
.logo-d3 .mk-d4{aspect-ratio:5.8629}.logo-d3 rect.filet{fill:var(--mly-a);opacity:.55;transform-box:fill-box;transform-origin:50% 0}
@media(max-width:560px){header.chead .logo-d3{--h:30px}}@media(max-width:380px){header.chead .logo-d3{--h:26px}}
.logo-d3 .L{stroke-width:3;stroke-linejoin:round;stroke-linecap:round;transition:fill .3s,stroke .3s}
.logo-d3 i.filet{display:block;width:1px;height:calc(var(--h)*.6);margin-top:calc(var(--h)*.07);background:var(--mly-a);opacity:.55;transform-origin:50% 0}
.logo-d3 .griffe-t{display:block;height:calc(var(--fs)*var(--vbh));width:auto;overflow:visible;margin-top:calc(var(--h)*.365 - var(--fs)*var(--vbh)/2)}
.logo-d3 .G{fill:var(--gris);stroke:var(--gris);stroke-width:10;stroke-linejoin:round;stroke-linecap:round;transition:fill .3s,stroke .3s}
@media(max-width:900px){.logo-d3{--h:34px;--fs:11.5px;gap:11px}}
/* (25/10, après la bascule) en-têtes des pages membres au téléphone : le lien « Choisir ma formule » laisse la place au logo */
@media(max-width:430px){.qtop .back{display:none!important}}   /* petits téléphones : la page a son propre lien vers les formules */
@media(prefers-reduced-motion:no-preference){
  html.logo-play a.logo-d3:not(.joue){visibility:hidden}   /* le logo attend son écriture (le <head> lève ce masque au bout de 9 s si besoin) */
  .logo-d3.joue .L{stroke-dasharray:1 1;animation:d3trace .6s cubic-bezier(.45,0,.25,1) calc(var(--i)*.1s) both,d3plein .4s ease-in-out calc(.55s + var(--i)*.08s) both}
  .logo-d3.joue .filet{animation:d3filet .35s cubic-bezier(.23,1,.32,1) 1s both}
  .logo-d3.joue .G{stroke-dasharray:1 1;animation:d3trace .45s cubic-bezier(.45,0,.25,1) calc(1.3s + var(--j)*.07s) both,d3pleinG .3s ease-in-out calc(1.6s + var(--j)*.07s) both}
}
@keyframes d3trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes d3plein{from{fill-opacity:0;stroke-width:12}to{fill-opacity:1;stroke-width:3}}
@keyframes d3pleinG{from{fill-opacity:0;stroke-width:36}to{fill-opacity:1;stroke-width:10}}
@keyframes d3filet{from{transform:scaleY(0)}}

/* (25/10, Dimitri : « trop collé au logo… l'inscription du pauvre ») en-tête des espaces : la date (client) ou « Espace coachs »
   centrée entre le logo et les boutons, en pastille, avec un point bleu */
@media(min-width:561px){header.chead .ctag{margin:0 auto;display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 14px;border-radius:999px;background:var(--carte);box-shadow:var(--ombre);font:800 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);white-space:nowrap}
header.chead .ctag::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--brand)}
header.chead .who,header.chead .cherche{margin-left:0}}
@media(min-width:561px) and (max-width:1180px){header.chead .ctag{font-size:10.5px;letter-spacing:.1em;padding:7px 12px 7px 10px;gap:7px}header.chead{gap:12px}}
@media(min-width:561px) and (max-width:1100px){header.chead:has(.cherche) .who b{display:none}header.chead .who .out{white-space:nowrap}}   /* espace coachs : le prénom est déjà sur la médaille */

/* (25/10, Yoann, validé par Dimitri) pied de page : le même logo que l'en-tête (D3), FIXE (jamais .joue), centré */
.site-foot .foot-d3{display:flex;width:fit-content;margin:0 auto 26px;--h:56px;--fs:17.5px;gap:18px;pointer-events:none}
@media(max-width:900px){.site-foot .foot-d3{--h:46px;--fs:14.5px;gap:14px}}