/* Evolve — site public. Charte « nuit » : fond #010526, surfaces #0D1330,
   texte givre #A6B0D4, filets #1E2547, accents cyan / bleu / violet et leur
   dégradé. Satoshi partout. Les visuels sont des maquettes SVG animées à
   l'entrée de leur section ; la chouette se cale sur un côté par section et
   traverse au changement. */

@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;src:url('/fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:700;font-style:normal;font-display:swap;src:url('/fonts/satoshi-700.woff2') format('woff2')}

:root{
  --nuit:#010526;--deep:#0D1330;--surface:#111838;--filet:#1E2547;
  --givre:#A6B0D4;--blanc:#F4F6FF;--muet:#7E88B3;
  --cyan:#3ECFE0;--bleu:#2E8BF0;--violet:#7A5CF5;
  --grad:linear-gradient(90deg,#3ECFE0,#2E8BF0,#7A5CF5);
  --sans:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --marge:clamp(20px,5vw,64px);--section:clamp(72px,9vw,128px);
  --ease:cubic-bezier(.2,.75,.25,1);
  --nav-fond:rgba(1,5,38,.78);--halo-1:rgba(46,139,240,.16);--halo-2:rgba(122,92,245,.12);
  --ombre-vis:0 30px 70px -20px rgba(1,5,38,.9),0 0 0 1px rgba(30,37,71,.5);
  --ombre-chouette:0 18px 30px rgba(1,5,38,.75);
  --puce-fond:rgba(13,19,48,.7);--fantome:rgba(166,176,212,.06);
  --v-nuit:#010526;--v-fond:#0A0F2A;--v-deep:#0D1330;--v-surface:#111838;--v-filet:#1E2547;--v-givre:#A6B0D4;--v-blanc:#E8ECFF;
}
/* Thème clair : mêmes accents, surfaces inversées. Les visuels SVG lisent les
   variables --v-* et suivent sans être redessinés. */
html[data-theme="light"]{
  --nuit:#F4F6FC;--deep:#FFFFFF;--surface:#FFFFFF;--filet:#DEE3F0;
  --givre:#4F5878;--blanc:#0E1330;--muet:#5A6384;
  --cyan:#077384;--bleu:#2266C8;--violet:#5B3ED4;
  --nav-fond:rgba(244,246,252,.82);--halo-1:rgba(46,139,240,.10);--halo-2:rgba(122,92,245,.08);
  --ombre-vis:0 24px 60px -24px rgba(14,19,48,.35),0 0 0 1px rgba(222,227,240,.9);
  --ombre-chouette:0 14px 26px rgba(14,19,48,.22);
  --puce-fond:rgba(255,255,255,.7);--fantome:rgba(14,19,48,.05);
  --v-nuit:#FFFFFF;--v-fond:#EDF0F9;--v-deep:#FFFFFF;--v-surface:#F4F6FC;--v-filet:#DEE3F0;--v-givre:#7E88B3;--v-blanc:#1E2A4E;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;background:var(--nuit)}
body{margin:0;background:var(--nuit);color:var(--givre);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Surfaces du navigateur */
::selection{background:var(--bleu);color:#fff}
:root{accent-color:var(--bleu);caret-color:var(--cyan);color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--nuit)}
::-webkit-scrollbar-thumb{background:var(--filet);border:3px solid var(--nuit);border-radius:99px}
*{scrollbar-color:var(--filet) var(--nuit);scrollbar-width:thin}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
a{color:var(--blanc);text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:rgba(166,176,212,.4)}
a:hover{text-decoration-color:var(--cyan)}

h1,h2,h3{color:var(--blanc);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.08}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.015em}
p{margin:0}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.5;max-width:40ch;color:var(--givre)}
.muted{color:var(--muet)}
.wrap{width:min(1180px,100% - var(--marge)*2);margin-inline:auto}

/* ------------------------------------------------ Barre haute */
nav{position:sticky;top:0;z-index:40;background:var(--nav-fond);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--filet)}
.nav-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);min-height:66px}
.logo{display:flex;line-height:0;margin-right:auto}.logo img{height:19px;width:auto}
.logo .wm-light{display:none}html[data-theme="light"] .logo .wm-dark{display:none}html[data-theme="light"] .logo .wm-light{display:block}
.theme{width:36px;height:36px;border-radius:10px;border:1px solid var(--filet);background:transparent;color:var(--givre);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s}
.theme:hover{color:var(--blanc);border-color:var(--givre)}.theme svg{width:17px;height:17px}
.theme .lune{display:none}html[data-theme="light"] .theme .lune{display:block}html[data-theme="light"] .theme .soleil{display:none}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.nav-links a:not(.btn):not(.flag){font-size:14.5px;font-weight:500;color:var(--givre);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:not(.btn):not(.flag):hover{color:var(--blanc);border-bottom-color:var(--cyan)}
.flags{display:flex;gap:3px}.flag{font-size:16px;line-height:1;padding:4px 3px;opacity:.42;text-decoration:none;border-radius:4px}
.flag.on,.flag:hover{opacity:1}
@media(max-width:760px){.nav-links a:not(.btn):not(.flag){display:none}.nav-links{gap:8px}.nav-links .btn{padding:11px 14px;font-size:13.5px;white-space:nowrap}.logo img{height:16px}.flag{font-size:14px;padding:4px 2px}}
@media(max-width:350px){.nav-links .btn{padding:10px 11px;font-size:12.5px}}

/* ------------------------------------------------ Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sans);font-weight:700;font-size:15.5px;line-height:1;
  padding:15px 26px;border:0;border-radius:10px;cursor:pointer;text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s,filter .18s}
.btn-grad{background:linear-gradient(90deg,#3ECFE0,#2E8BF0 55%,#8B78F7);color:#010526;box-shadow:0 8px 24px -8px rgba(46,139,240,.6)}
.btn-grad:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 12px 28px -8px rgba(46,139,240,.75)}
.btn-grad:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--blanc);border:1px solid var(--filet)}
.btn-ghost:hover{border-color:var(--givre);background:var(--fantome)}
.btn svg{width:16px;height:16px}

/* ------------------------------------------------ Sections */
section{position:relative;padding-block:var(--section)}
section + section{border-top:1px solid var(--filet)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.deux{grid-template-columns:1fr;gap:40px}}

.hero{padding-top:clamp(56px,7vw,92px)}
.hero h1{max-width:13ch}
.hero .lede{margin-top:22px}
.cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{font-size:13px;font-weight:500;color:var(--givre);border:1px solid var(--filet);border-radius:99px;padding:7px 13px;background:var(--puce-fond)}
.chip::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grad);margin-right:8px;vertical-align:1px}

/* Les visuels : une maquette dans un cadre lumineux. */
.vis{width:100%;height:auto;display:block}
.cadre-vis{position:relative;border-radius:18px;padding:2px;
  background:linear-gradient(135deg,rgba(62,207,224,.45),rgba(122,92,245,.2) 60%,rgba(30,37,71,.6));
  box-shadow:var(--ombre-vis)}
.cadre-vis>*{border-radius:16px;background:var(--nuit)}

/* Trois lignes de lecture, pas trois cartes. */
.lignes{border-top:1px solid var(--filet);margin-top:34px}
.ligne{display:grid;grid-template-columns:minmax(140px,24%) 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--filet);align-items:baseline}
.ligne dt{color:var(--blanc);font-weight:700;font-size:1.15rem;margin:0}
.ligne dd{margin:0;max-width:58ch}
@media(max-width:640px){.ligne{grid-template-columns:1fr;gap:6px}}

/* Les métiers : visuel d'un côté, contenu de l'autre, et on alterne. */
.cas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(36px,4.5vw,60px)}
.cas + .cas{border-top:1px solid var(--filet)}
.cas:nth-child(even) .cadre-vis{order:2}
.cas-metier{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.cas h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:12px}
.cas-avant{color:var(--muet);font-size:15px;margin-bottom:18px;max-width:44ch}
.cas ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cas li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;max-width:52ch}
.cas li svg{width:16px;height:16px;margin-top:4px;color:var(--cyan);flex:none}
@media(max-width:900px){.cas{grid-template-columns:1fr;gap:28px}.cas:nth-child(even) .cadre-vis{order:0}}

.fait{margin-top:clamp(40px,5vw,64px)}
.fait-liste{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 28px;max-width:900px}
.fait-liste li{padding:10px 0 10px 18px;position:relative;border-bottom:1px solid var(--filet)}
.fait-liste li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:var(--grad)}

.etapes{margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.etape{padding-top:22px;border-top:2px solid var(--filet);position:relative}
.etape::before{content:'';position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--grad);transition:width .9s var(--ease) calc(var(--i)*.15s)}
.vu .etape::before{width:100%}
.etape-n{display:block;font-size:12.5px;font-weight:700;color:var(--cyan);margin-bottom:10px;font-variant-numeric:tabular-nums}
.etape h3{font-size:1.15rem;margin-bottom:8px}
.etape p{font-size:15px}
@media(max-width:900px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.etapes{grid-template-columns:1fr}}

.engagements{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,56px)}
.eng{padding:24px 0;border-top:1px solid var(--filet);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.eng h3{font-size:1.12rem;margin:6px 0 6px}
.eng p{font-size:15px;max-width:48ch}
/* Le pictogramme : un disque nuit cerclé du dégradé, le trait en cyan. */
.eng-ic{position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--deep);color:var(--cyan);flex:none;isolation:isolate}
.eng-ic::before{content:'';position:absolute;inset:0;border-radius:13px;padding:1.5px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.eng-ic svg{width:22px;height:22px}
.eng-ic svg path,.eng-ic svg circle,.eng-ic svg rect,.eng-ic svg ellipse{stroke-dasharray:80;stroke-dashoffset:0}
.js .eng{opacity:0;transform:translateY(10px)}
.js .eng .eng-ic svg *{stroke-dashoffset:80}
.vu .eng{animation:eng-app .55s var(--ease) calc(var(--i)*.09s) forwards}
.vu .eng .eng-ic svg *{animation:trace-ic .9s var(--ease) calc(.25s + var(--i)*.09s) forwards}
@keyframes eng-app{to{opacity:1;transform:none}}
@keyframes trace-ic{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.js .eng{opacity:1;transform:none;animation:none}.js .eng .eng-ic svg *{stroke-dashoffset:0;animation:none}}
@media(max-width:700px){.engagements{grid-template-columns:1fr}}

/* Contact : une surface, le dégradé en filet au-dessus. */
.contact-bloc{background:var(--deep);border:1px solid var(--filet);border-radius:22px;padding:clamp(28px,4vw,56px);position:relative;overflow:hidden}
.contact-bloc::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.contact-in{display:grid;grid-template-columns:minmax(260px,38%) 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:860px){.contact-in{grid-template-columns:1fr}}

.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.champ{display:grid;gap:6px}.champ.large{grid-column:1/-1}
label{font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--givre)}
input,textarea,select{font-family:var(--sans);font-size:16px;color:var(--blanc);background:var(--nuit);border:1px solid var(--filet);border-radius:10px;padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px;resize:vertical;line-height:1.5}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--muet) 50%),linear-gradient(135deg,var(--muet) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=checkbox]{width:auto;padding:0;accent-color:var(--bleu)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(46,139,240,.22)}
input::placeholder,textarea::placeholder{color:var(--muet)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){.champs{grid-template-columns:1fr}}
.avis{border:1px solid var(--violet);background:rgba(122,92,245,.12);color:var(--blanc);padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:15px}
.avis.ok{border-color:var(--cyan);background:rgba(62,207,224,.1)}

footer{border-top:1px solid var(--filet);padding-block:36px;background:var(--deep)}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:14px;color:var(--muet)}
.foot-in a{color:var(--givre)}.foot-in .sep{margin-left:auto}
@media(max-width:760px){.foot-in .sep{margin-left:0}}

/* Rendez-vous, onboarding, légal */
.rdv-grid{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(28px,4vw,56px);align-items:start;margin-top:36px}
.jour{margin-bottom:24px}.jour-t{font-size:13px;font-weight:700;color:var(--blanc);padding-bottom:8px;border-bottom:1px solid var(--filet);margin-bottom:12px}
.creneaux{display:flex;flex-wrap:wrap;gap:8px}
.jours-nav{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.jours{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1;min-width:0;padding:2px}
.jours::-webkit-scrollbar{display:none}
.jour-c{flex:0 0 68px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;background:var(--deep);color:var(--blanc);border:1px solid var(--filet);border-radius:10px;cursor:pointer;font-family:var(--sans);transition:.15s}
.jour-c:hover{border-color:var(--cyan)}
.jour-c .jw,.jour-c .jm{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.jour-c .jn{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.jour-c.on{background:linear-gradient(160deg,#3ECFE0,#2E8BF0 55%,#8B78F7);border-color:transparent;color:#010526}
.jour-c.on .jw,.jour-c.on .jm{opacity:.85}
.jours-fl{flex:0 0 36px;height:36px;border-radius:50%;border:1px solid var(--filet);background:transparent;color:var(--blanc);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px}
.jours-fl:hover:not(:disabled){border-color:var(--cyan)}.jours-fl:disabled{opacity:.25;cursor:default}
.rdv-pick .jour-t{font-size:15px}
.rdv-grid>*{min-width:0}
.creneau{font-family:var(--sans);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;background:var(--deep);color:var(--blanc);border:1px solid var(--filet);border-radius:8px;padding:9px 13px;cursor:pointer;transition:.15s}
.creneau:hover{border-color:var(--cyan)}.creneau.on{background:linear-gradient(90deg,#3ECFE0,#2E8BF0 55%,#8B78F7);border-color:transparent;color:#010526;font-weight:700}
.rdv-form{position:sticky;top:88px;background:var(--deep);border:1px solid var(--filet);border-radius:16px;padding:clamp(20px,2.4vw,28px)}
@media(max-width:860px){.rdv-grid{grid-template-columns:1fr}.rdv-form{position:static}}
.legal-body h3{margin-top:clamp(30px,4vw,44px)}.legal-body p{margin-top:14px;max-width:72ch}
.onb{max-width:680px;margin-inline:auto}

/* ================================================= La chouette
   Elle se cale sur un côté pour toute la durée d'une section. Au passage à la
   section suivante, elle traverse — devant le texte, un instant — et se cale de
   l'autre côté. Le côté est déclaré par chaque section, le script ne fait que
   le recopier sur <body>. */
.chouette{position:fixed;top:56%;left:50%;z-index:1;pointer-events:none;
  width:clamp(84px,9.5vw,136px);
  transform:translate(var(--cx,min(36vw,560px)),-50%) rotate(var(--rot,5deg));
  transition:transform .95s var(--ease);
  filter:drop-shadow(var(--ombre-chouette))}
.chouette img{width:100%;height:auto;display:block}
/* Posée dans la marge, au bord de l'écran : elle frôle le bloc de contenu sans
   jamais s'y superposer au repos. */
body[data-cote="gauche"] .chouette{--cx:calc(-50vw + 14px);--rot:-5deg}
body[data-cote="droite"] .chouette{--cx:calc(50vw - 100% - 14px);--rot:5deg}
.chouette.traverse{z-index:50}
nav,main,footer{position:relative;z-index:2}
@media(max-width:860px){
  .chouette{width:clamp(58px,14vw,84px);top:auto;bottom:18px;transform:translate(var(--cx,38vw),0) rotate(var(--rot,5deg))}
  body[data-cote="gauche"] .chouette{--cx:-38vw}body[data-cote="droite"] .chouette{--cx:38vw}
}
@media(prefers-reduced-motion:reduce){.chouette{transition:none}}

/* ================================================= Animations des visuels
   États initiaux seulement quand le script est là (html.js) : sans lui, tout
   s'affiche fini. `.vu` sur la section lance la séquence, une seule fois. */
.js .vis .barre,.js .vis .carte,.js .vis .badge,.js .vis .aire,.js .vis .chiffre,
.js .vis .source,.js .vis .cible,.js .vis .creneau,.js .vis .choisi,.js .vis .rappel,
.js .vis .etape,.js .vis .stock,.js .vis .encaisse,.js .vis .noeud .halo{opacity:0}
.js .vis .trace,.js .vis .fil,.js .vis .progres{stroke-dasharray:1000;stroke-dashoffset:1000}
.js .vis .barre{transform-origin:center bottom;transform:scaleY(0)}
.js .vis .stock{transform-origin:left center;transform:scaleX(0)}

.vu .vis .trace,.vu .vis .fil{animation:trace 1.6s var(--ease) .3s forwards}
.vu .vis .progres{animation:trace 2.2s var(--ease) .4s forwards}
.vu .vis .aire{animation:app .8s ease 1.2s forwards}
.vu .vis .barre{animation:monte .7s var(--ease) calc(.25s + var(--i)*.08s) forwards}
.vu .vis .carte{animation:glisse .6s var(--ease) calc(.2s + var(--i)*.14s) forwards}
.vu .vis .chiffre{animation:app .6s ease .6s forwards}
.vu .vis .badge{animation:pop .5s var(--ease) 1.4s forwards}
.vu .vis .source{animation:glisse .6s var(--ease) calc(var(--i)*.15s) forwards}
.vu .vis .cible{animation:pop .7s var(--ease) 1.1s forwards}
.vu .vis .creneau{animation:app .35s ease calc(.2s + var(--i)*.09s) forwards}
.vu .vis .choisi{animation:pop .5s var(--ease) 1s forwards}
.vu .vis .rappel{animation:glisse .5s var(--ease) 1.5s forwards}
.vu .vis .etape{animation:pop .5s var(--ease) calc(.5s + var(--i)*.4s) forwards}
.vu .vis .stock{animation:etire 1s var(--ease) 1.3s forwards}
.vu .vis .encaisse{animation:app .5s ease 2.2s forwards}
.vu .vis .noeud .halo{animation:pop .6s var(--ease) calc(.4s + var(--i)*.45s) forwards}
.js .vis .impulsion{opacity:0}.vu .vis .impulsion{opacity:1;transition:opacity .4s 1.8s}

@keyframes trace{to{stroke-dashoffset:0}}
@keyframes app{to{opacity:1}}
@keyframes monte{to{opacity:1;transform:scaleY(1)}}
@keyframes etire{to{opacity:1;transform:scaleX(1)}}
@keyframes glisse{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.vis .carte,.vis .cible,.vis .choisi,.vis .badge,.vis .etape,.vis .noeud .halo,.vis .barre,.vis .stock,.vis .source{transform-box:fill-box}
.vis .carte,.vis .cible,.vis .choisi,.vis .badge,.vis .etape,.vis .noeud .halo{transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .js .vis *{opacity:1!important;transform:none!important;animation:none!important;stroke-dashoffset:0!important}
  .etape::before{transition:none;width:100%}
}


/* ================================================= Le fond
   Quatre orbes de lumière aux couleurs de marque, très floues, qui dérivent
   lentement derrière la page, et une trame de points fine comme un grain.
   Tout en transform : rien à repeindre, rien qui ne coûte à la lecture. */
.fond{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(circle at 1px 1px,var(--grain) 1px,transparent 1.6px) 0 0/28px 28px,
    linear-gradient(180deg,var(--nuit),var(--nuit))}
.fond::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 0%,transparent 40%,var(--nuit) 100%);opacity:.4}
.orbe{position:absolute;border-radius:50%;filter:blur(76px);opacity:var(--orbe-op,.55);will-change:transform;mix-blend-mode:screen}
.o1{width:60vw;height:60vw;max-width:900px;max-height:900px;left:-14vw;top:-22vw;background:radial-gradient(circle,#2E8BF0,transparent 62%);animation:derive1 34s ease-in-out infinite alternate}
.o2{width:52vw;height:52vw;max-width:780px;max-height:780px;right:-16vw;top:6vh;background:radial-gradient(circle,#7A5CF5,transparent 62%);animation:derive2 41s ease-in-out infinite alternate}
.o3{width:44vw;height:44vw;max-width:640px;max-height:640px;left:24vw;bottom:-22vw;background:radial-gradient(circle,#3ECFE0,transparent 62%);animation:derive3 47s ease-in-out infinite alternate}
.o4{width:30vw;height:30vw;max-width:440px;max-height:440px;right:18vw;bottom:8vh;background:radial-gradient(circle,#2E8BF0,transparent 60%);animation:derive1 29s ease-in-out infinite alternate-reverse}
@keyframes derive1{from{transform:translate(0,0) scale(1)}to{transform:translate(18vw,14vh) scale(1.18)}}
@keyframes derive2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-16vw,22vh) scale(.92)}}
@keyframes derive3{from{transform:translate(0,0) scale(.95)}to{transform:translate(-20vw,-16vh) scale(1.15)}}
:root{--grain:rgba(166,176,212,.13);--orbe-op:.72}
html[data-theme="light"]{--grain:rgba(30,42,78,.13);--orbe-op:.5}
html[data-theme="light"] .orbe{mix-blend-mode:multiply;filter:blur(110px)}
html[data-theme="light"] .o1{background:radial-gradient(circle,#9CC4FF,transparent 62%)}
html[data-theme="light"] .o2{background:radial-gradient(circle,#C9BBFF,transparent 62%)}
html[data-theme="light"] .o3{background:radial-gradient(circle,#A9EEF5,transparent 62%)}
html[data-theme="light"] .o4{background:radial-gradient(circle,#B4D2FF,transparent 60%)}
html[data-theme="light"] .fond::after{opacity:.35}
@media(prefers-reduced-motion:reduce){.orbe{animation:none}}
@media(max-width:860px){.orbe{filter:blur(64px)}.o1{width:110vw;height:110vw;left:-40vw;top:-50vw}.o2{width:90vw;height:90vw;right:-40vw}.o3{width:80vw;height:80vw}.o4{display:none}}
/* Les sections ne portent plus de fond opaque : le fond vivant passe dessous. */
.chouette{z-index:1}