/* Cellulys, gabarit d'accueil. Direction "Profondeur teal". */

/* Les faces sont déclarées une seule fois, dans le style.css du thème. */

:root{
  --bg:#F5FAF9;
  --surface:#FFFFFF;
  --deep:#08201E;
  --ink:#10201F;
  --muted:#5C7472;
  --line:#DDEAE8;
  --line-strong:#B9D2CE;
  --accent:#17756E;
  --accent-hover:#0F5B55;
  --accent-muted:#6DBFB8;
  --ember:#E8A33D;
  --ivory:#EFF6F4;
  --radius:6px;
  --xs:8px; --sm:16px; --md:32px; --lg:64px; --xl:112px;
  --shell:1120px;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* Réinitialisations à spécificité nulle : elles neutralisent le navigateur
   sans jamais battre une règle de composant. */
:where(.cly h1,.cly h2,.cly h3,.cly h4,.cly p,.cly ul,.cly ol,.cly li,.cly figure,.cly blockquote,.cly dl,.cly dd){margin:0;padding:0;border:0}
:where(.cly ul,.cly ol){list-style:none}

/* Le reset margin:0 du body vit dans les styles globaux de WordPress, que ce
   gabarit ne charge pas. Sans cette regle, la marge par defaut du navigateur
   revient et dessine un liseré clair de 8px autour de toute la page. */
html{background:var(--bg)}
html,body.cly{margin:0;padding:0}

.cly{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.cly *,.cly *::before,.cly *::after{box-sizing:border-box}
.cly img{max-width:100%;height:auto;display:block}
.cly a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.cly a:focus-visible,.cly button:focus-visible,.cly summary:focus-visible,.cly input:focus-visible,.cly textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px}

.display{font-family:var(--display);font-weight:400;letter-spacing:-.012em;line-height:1.08;text-wrap:balance}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);
}
.lede{font-size:19px;line-height:1.62;color:var(--muted);max-width:62ch}

/* ============ EN-TETE ============ */
.top{position:absolute;top:0;left:0;right:0;z-index:6;padding:22px 0}
.top__row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:baseline;gap:2px;font-family:var(--display);font-size:25px;color:var(--ivory);letter-spacing:-.02em;text-decoration:none}
.brand i{font-style:normal;color:var(--ember)}
.top nav{display:flex;gap:26px;align-items:center}
.top nav a{color:rgba(239,246,244,.78);text-decoration:none;font-size:14.5px}
.top nav a:hover{color:var(--ivory)}
.top .btn{padding:9px 17px;font-size:14px}
@media (max-width:900px){.top nav{display:none}}

/* ============ BOUTONS ============ */
.btn{
  display:inline-block;font-family:var(--sans);font-size:15.5px;font-weight:500;
  padding:14px 26px;border-radius:var(--radius);border:1px solid transparent;
  background:var(--accent);color:#FFFFFF;text-decoration:none;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:rgba(23,117,110,.06)}
.btn--onDark{background:var(--accent);color:#FFFFFF}
.btn--ghostDark{background:transparent;border-color:rgba(239,246,244,.42);color:var(--ivory)}
.btn--ghostDark:hover{background:rgba(239,246,244,.10)}

/* ============ HEROS ============ */
.hero{position:relative;background:var(--deep)}
.hero__stage{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__layer{position:relative;z-index:3;width:100%}

.hero__intro{max-width:none}
.hero__intro .eyebrow{color:var(--accent-muted)}
.hero__intro h1{
  font-family:var(--display);font-weight:400;color:var(--ivory);
  font-size:clamp(38px,6.4vw,74px);line-height:1.04;letter-spacing:-.02em;
  margin:18px 0 0;max-width:15ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(6,24,23,.55);
}
.hero__sub{
  color:rgba(239,246,244,.80);font-size:18px;line-height:1.6;
  margin:20px 0 0;max-width:52ch;text-shadow:0 1px 18px rgba(6,24,23,.6);
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__legal{margin-top:26px;font-size:12.5px;color:rgba(239,246,244,.52);max-width:56ch}

/* Les bandes du voyage : une seule visible à la fois, posée sur un voile local. */
.hero__bands{position:absolute;inset:0;z-index:4;display:flex;align-items:center;pointer-events:none}
.band{
  position:absolute;inset:0;display:flex;align-items:center;
  opacity:0;will-change:opacity,transform;
}
.band__inner{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px}
.band p{
  font-family:var(--display);color:var(--ivory);
  font-size:clamp(26px,3.9vw,46px);line-height:1.14;letter-spacing:-.015em;
  max-width:19ch;text-wrap:balance;
  text-shadow:0 2px 26px rgba(6,24,23,.75),0 1px 3px rgba(6,24,23,.9);
}
.band em{font-style:normal;color:var(--ember)}
/* Voile local : il ne s'assombrit qu'autour de la bande active. */
.band::before{
  content:"";position:absolute;left:-10vw;right:-10vw;top:-14vh;bottom:-14vh;
  background:radial-gradient(60% 60% at 26% 50%,rgba(6,24,23,.72) 0%,rgba(6,24,23,.42) 45%,rgba(6,24,23,0) 78%);
  z-index:-1;
}

/* Sans JS, ou en mouvement réduit : tout est lisible en flux normal. */
.hero{height:auto}
.has-hero-js .hero{height:340vh}
.has-hero-js .hero__stage{position:sticky;top:0}
html:not(.has-hero-js) .hero__bands{position:static;display:block;padding:0 0 var(--lg)}
html:not(.has-hero-js) .band{position:static;opacity:1;margin-top:var(--md)}
html:not(.has-hero-js) .band::before{display:none}
html:not(.has-hero-js) .hero__stage{height:auto;padding:150px 0 var(--lg)}

@media (prefers-reduced-motion:reduce){
  .has-hero-js .hero{height:auto}
  .has-hero-js .hero__stage{position:relative;height:auto;padding:150px 0 72px}
  .hero__bands{position:static;display:block;padding-top:var(--md)}
  .band{position:static;opacity:1 !important;transform:none !important;margin-top:var(--md)}
  .band::before{display:none}
  .hero__intro{opacity:1 !important;transform:none !important}
}
@media (max-width:860px){
  .has-hero-js .hero{height:auto}
  .has-hero-js .hero__stage{position:relative;height:auto;min-height:92vh;padding:130px 0 64px}
  .hero__bands{position:static;display:block;padding-top:var(--md)}
  .band{position:static;opacity:1 !important;transform:none !important;margin-top:28px}
  .band::before{display:none}
  .band p{font-size:26px;max-width:24ch}
  .hero__intro{opacity:1 !important;transform:none !important}
}

/* ============ SECTIONS ============ */
.sec{padding:var(--xl) 0}
.sec--tight{padding:var(--lg) 0}
.sec--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec__head{max-width:62ch}
.sec__head h2{font-family:var(--display);font-size:clamp(28px,4vw,44px);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.sec__head .lede{margin-top:18px}

[data-reveal]{opacity:1}
.has-hero-js [data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.has-hero-js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.has-hero-js [data-reveal]{opacity:1;transform:none;transition:none}}

/* Gamme : un appareil dominant, puis les autres. Jamais trois cartes identiques. */
.range{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--md);margin-top:var(--lg);align-items:stretch}
.range__lead{
  position:relative;background:var(--deep);color:var(--ivory);border-radius:var(--radius);
  padding:44px 40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;overflow:hidden;
}
.range__lead::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(78% 58% at 74% 22%,rgba(232,163,61,.30) 0%,rgba(232,163,61,.07) 42%,rgba(8,32,30,0) 72%),
             radial-gradient(60% 50% at 18% 88%,rgba(109,191,184,.20) 0%,rgba(8,32,30,0) 70%);
}
.range__lead > *{position:relative;z-index:1}
.range__lead .eyebrow{color:var(--ember)}
.range__lead h3{font-family:var(--display);font-size:clamp(26px,3.1vw,38px);line-height:1.08;margin-top:14px}
.range__lead p{color:rgba(239,246,244,.78);margin-top:16px;max-width:38ch;font-size:16px}
.range__rest{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.range__item{background:var(--surface);padding:26px 24px;display:flex;flex-direction:column;gap:9px}
.range__item h3{font-family:var(--display);font-size:21px;line-height:1.15}
.range__item p{font-size:14.5px;color:var(--muted);line-height:1.55}
.range__item .spec{margin-top:auto;padding-top:14px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:500}
.range__note{margin-top:var(--md);font-size:15.5px;color:var(--muted);max-width:60ch}
@media (max-width:900px){.range{grid-template-columns:1fr}.range__lead{min-height:320px;padding:32px 26px}}
@media (max-width:560px){.range__rest{grid-template-columns:1fr}}

/* Ce que fait l'appareil : des grandeurs, pas des effets. */
.facts{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--lg);margin-top:var(--lg);align-items:start}
.facts__list{display:flex;flex-direction:column}
.facts__row{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line);align-items:baseline}
.facts__row:last-child{border-bottom:1px solid var(--line)}
.facts__row b{
  font-family:var(--display);font-size:30px;color:var(--accent);font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.facts__row span{font-size:15.5px;color:var(--muted);line-height:1.55}
.facts__row span strong{color:var(--ink);font-weight:500;display:block;font-size:16.5px;margin-bottom:3px}
@media (max-width:860px){.facts{grid-template-columns:1fr;gap:var(--md)}}

/* Sécurité : la section de confiance, traitée comme telle. */
.guard{background:var(--deep);color:var(--ivory);border-radius:var(--radius);padding:56px 52px;margin-top:var(--lg);position:relative;overflow:hidden}
.guard::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 88% 8%,rgba(109,191,184,.16) 0%,rgba(8,32,30,0) 68%)}
.guard > *{position:relative;z-index:1}
.guard h2{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);line-height:1.1;max-width:20ch}
.guard p{color:rgba(239,246,244,.80);margin-top:18px;max-width:62ch}
.guard ul{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.guard li{padding-left:20px;position:relative;color:rgba(239,246,244,.86);font-size:15.5px;line-height:1.5}
.guard li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--ember)}
@media (max-width:760px){.guard{padding:36px 26px}.guard ul{grid-template-columns:1fr}}

/* Démonstration : une vraie séquence, donc numérotée. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);margin-top:var(--lg);position:relative}
.step{display:flex;flex-direction:column;gap:10px;padding-top:26px;border-top:2px solid var(--accent-muted)}
.step b{font-family:var(--display);font-size:15px;color:var(--accent);font-weight:400;letter-spacing:.04em}
.step h3{font-family:var(--display);font-size:23px;line-height:1.15}
.step p{font-size:15.5px;color:var(--muted);line-height:1.6}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:26px}}

/* FAQ : les vraies objections, dans les mots des gens. */
.faq{margin-top:var(--lg);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-size:clamp(19px,2.2vw,24px);line-height:1.28;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__body{padding:0 6% 30px 0;color:var(--muted);font-size:16.5px;line-height:1.68;max-width:66ch}
.faq__body p + p{margin-top:14px}
.faq__body strong{color:var(--ink);font-weight:500}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg);align-items:start}
.form{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ink)}
.field input,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:13px 15px;width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:#8CA5A2}
.field textarea{min-height:120px;resize:vertical}
.form__note{font-size:13.5px;color:var(--muted);line-height:1.55}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:var(--md)}}

/* Pied de page */
.foot{background:var(--deep);color:rgba(239,246,244,.72);padding:var(--lg) 0 var(--md);font-size:14.5px;line-height:1.65}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--md)}
.foot h4{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent-muted);margin-bottom:14px}
.foot a{color:rgba(239,246,244,.72);text-decoration:none}
.foot a:hover{color:var(--ivory);text-decoration:underline}
.foot ul li + li{margin-top:8px}
.foot__legal{margin-top:var(--md);padding-top:22px;border-top:1px solid rgba(239,246,244,.14);font-size:13px;color:rgba(239,246,244,.55);display:flex;flex-direction:column;gap:9px}
.foot__legal b{color:rgba(239,246,244,.8);font-weight:500}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr;gap:28px}}

/* ---- Corrections de cascade ----
   `.cly a` (0,1,1) battait `.btn` (0,1,0) et repeignait le texte des boutons
   en teal sur un fond teal. On remonte la spécificité des composants. */
.cly .btn{color:#FFFFFF}
.cly .btn--ghost{color:var(--ink)}
.cly .btn--ghostDark{color:var(--ivory)}
.cly .brand{color:var(--ivory)}
.cly .foot a{color:rgba(239,246,244,.72)}
.cly .foot a:hover{color:var(--ivory)}
.cly .top nav a{color:rgba(239,246,244,.78)}
.cly .top nav a:hover{color:var(--ivory)}

/* Le titre doit tenir sur deux lignes, jamais quatre. */
.hero__intro h1{max-width:22ch}
.hero__stage{padding-top:92px}
@media (max-width:900px){.hero__intro h1{max-width:16ch}}

/* Bandeau permanent de conformité */
.warnbar{background:#061817;color:rgba(239,246,244,.62);font-size:12.5px;line-height:1.5;padding:12px 0;text-align:left;border-top:1px solid rgba(239,246,244,.10)}

/* ===================== BLOCS DE LA VERSION 2 ===================== */

.fine{font-size:14px;color:var(--muted);opacity:.85;margin-top:14px;border-left:2px solid var(--line-strong);padding-left:14px;max-width:56ch}

/* Bandeau de chiffres : une bande divisee, jamais trois cartes identiques. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--lg);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.stat{padding:30px 34px 32px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0;padding-right:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(34px,4.6vw,52px);line-height:1;color:var(--accent);font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--muted);max-width:34ch}
@media (max-width:820px){.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}.stat:last-child{border-bottom:0}}

/* Deux colonnes texte + visuel, asymetriques. */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--lg);margin-top:var(--xl);align-items:center}
.split--reverse{direction:rtl}
.split--reverse > *{direction:ltr}
.split__text h3{font-size:clamp(24px,3.2vw,34px);line-height:1.12;margin-bottom:18px}
.split__text p{color:var(--muted);font-size:16.5px;line-height:1.68;max-width:56ch}
.split__text p + p{margin-top:16px}
.split__art{background:var(--deep);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center}
.split__art svg{width:100%;max-width:300px;height:auto}
.split__art--flat{background:var(--surface);border:1px solid var(--line);padding:8px 26px;align-items:stretch}
.cap{font-size:13px;color:rgba(239,246,244,.6);text-align:center;line-height:1.5;max-width:34ch}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:var(--md);margin-top:var(--lg)}.split--reverse{direction:ltr}}

/* Tableau de valeurs de la fontaine. */
.gauge{display:flex;flex-direction:column;width:100%}
.gauge__row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.gauge__row:last-child{border-bottom:0}
.gauge__row span{font-size:15px;color:var(--muted)}
.gauge__row b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Citation d'ouverture de la section NASA. */
.quote{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg);align-items:start}
.quote__text{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);line-height:1.12;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.quote__body p{color:var(--muted);font-size:16.5px;line-height:1.68;max-width:54ch}
.quote__body p + p{margin-top:16px}
@media (max-width:880px){.quote{grid-template-columns:1fr;gap:var(--md)}}

/* La semaine d'entrainement : l'element central domine. */
.week{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:var(--md);margin-top:var(--lg);align-items:stretch}
.week__item{border-top:2px solid var(--line-strong);padding-top:24px;display:flex;flex-direction:column;gap:10px}
.week__item--lead{background:var(--deep);border-top:2px solid var(--ember);border-radius:var(--radius);padding:28px 30px 26px;color:var(--ivory)}
.week__item--lead p{color:rgba(239,246,244,.80)}
.week__item--lead .week__tag{color:var(--ember)}
.week__item--lead .week__dev{color:var(--accent-muted);border-top-color:rgba(239,246,244,.18)}
.week__tag{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.week__item h3{font-family:var(--display);font-size:23px;line-height:1.14}
.week__item p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.week__dev{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:500}
@media (max-width:900px){.week{grid-template-columns:1fr;gap:28px}}

/* Ce que les appareils ne font pas. */
.nots{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:var(--lg)}
.not{background:var(--bg);padding:30px 32px;display:flex;flex-direction:column;gap:11px}
.not h3{font-family:var(--display);font-size:22px;line-height:1.14;color:var(--ink)}
.not p{font-size:15.5px;line-height:1.62;color:var(--muted)}
@media (max-width:760px){.nots{grid-template-columns:1fr}}

.guard__rules{margin-top:26px;padding-top:22px;border-top:1px solid rgba(239,246,244,.18);font-size:15px;color:rgba(239,246,244,.72)}

/* Passerelle vers les autres profils. */
.bridge{display:grid;grid-template-columns:1fr 1fr;gap:var(--md) var(--lg);margin-top:var(--lg)}
.bridge__item{padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.bridge__item h3{font-family:var(--display);font-size:21px;line-height:1.16}
.bridge__item p{font-size:15.5px;line-height:1.62;color:var(--muted);max-width:46ch}
@media (max-width:760px){.bridge{grid-template-columns:1fr;gap:26px}}