/* ==========================================================================
   Rayoneo — feuille de style
   Monde visuel : « le prompteur » (voir contrat de direction en tête de index.html)
   ========================================================================== */

@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-var.woff2") format("woff2")}

:root{
  --violet:#9A00FF;
  --magenta:#FF2770;
  --orange:#FF8A00;
  --grad:linear-gradient(90deg,var(--violet) 0%,var(--magenta) 50%,var(--orange) 100%);
  --grad-45:linear-gradient(45deg,var(--violet) 0%,var(--magenta) 50%,var(--orange) 100%);
  --grad-cta:linear-gradient(120deg,#8A00E6 0%,var(--magenta) 100%);

  --ink:#141414;
  --ink-2:#4A4653;
  --ink-3:#6B6676;
  --paper:#FFFFFF;
  --paper-2:#F6F4F9;
  --rule-light:#DCD8E3;

  --studio:#131217;
  --studio-2:#1B1922;
  --studio-3:#242130;
  --light:#FFFFFF;
  --light-2:#BDB7CA;
  --light-3:#8F899C;
  --rule-dark:#2E2A3A;

  --display:"Poppins","Segoe UI",Arial,sans-serif;
  --body:"Inter","Segoe UI",Arial,sans-serif;

  --measure:66ch;
  --gutter:clamp(1.25rem,4vw,3rem);
  --wrap:1180px;
  --radius:14px;
  --radius-s:8px;
  --shadow:0 18px 40px -18px rgba(20,20,20,.35);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--light);
  background:var(--studio);
  font-feature-settings:"ss01","cv11";
}
::selection{background:var(--magenta);color:#fff}
img,video,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.015em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.75rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.25}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
strong{font-weight:600}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.on-light :focus-visible{outline-color:var(--violet)}

/* Lien d'évitement */
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--light);color:var(--ink);padding:.6rem 1rem;border-radius:var(--radius-s);font-weight:600;transition:top .15s}
.skip:focus{top:1rem}

/* --------------------------------------------------------------------------
   Grille et surfaces
   -------------------------------------------------------------------------- */
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.section{padding-block:clamp(4.5rem,10vw,8.5rem)}
.section--tight{padding-block:clamp(3rem,7vw,5.5rem)}
.on-dark{background:var(--studio);color:var(--light)}
.on-light{background:var(--paper);color:var(--ink)}
.on-light-2{background:var(--paper-2);color:var(--ink)}
.on-dark .muted{color:var(--light-2)}
.on-light .muted,.on-light-2 .muted{color:var(--ink-2)}
.lead{font-size:clamp(1.15rem,1.6vw,1.375rem);line-height:1.5;max-width:var(--measure)}
.prose{max-width:var(--measure)}
.intro{max-width:52rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.intro h2{margin-bottom:.5em}

/* Le « bord de glace » : le dégradé n'apparaît que comme une ligne */
.rule{height:2px;background:var(--grad);border:0;margin:0}
.rule--short{width:72px;height:3px;border-radius:3px;margin-bottom:1.5rem}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:3.25rem;padding:.8rem 1.5rem;border-radius:999px;
  font-family:var(--display);font-weight:600;font-size:1.1875rem;line-height:1.15;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background-color .25s,color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--primary{background:var(--grad-cta);color:#fff;box-shadow:0 12px 28px -12px rgba(255,39,112,.6)}
.btn--primary:hover{box-shadow:0 16px 32px -12px rgba(255,39,112,.75)}
.btn--ghost{border-color:currentColor;background:transparent}
.on-dark .btn--ghost:hover{background:rgba(255,255,255,.08)}
.on-light .btn--ghost:hover,.on-light-2 .btn--ghost:hover{background:rgba(20,20,20,.06)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--light{background:#fff;color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(19,18,23,.86);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule-dark);
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.brand img{width:40px;height:auto}
.nav{display:flex;align-items:center;gap:1.75rem}
.nav a{text-decoration:none;font-weight:500;color:var(--light-2);padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="true"]{color:#fff;border-bottom-color:var(--magenta)}
.nav .btn{margin-left:.5rem;min-height:2.75rem;font-size:1rem;padding:.55rem 1.15rem}
.nav .btn--primary,.nav .btn--primary:hover,html.a11y-clair .nav .btn--primary{color:#fff}
.nav-toggle{display:none;background:none;border:2px solid var(--rule-dark);border-radius:var(--radius-s);padding:.5rem .6rem;color:#fff;cursor:pointer}
.nav-toggle svg{width:24px;height:24px}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--studio);border-bottom:1px solid var(--rule-dark);
    padding:.5rem var(--gutter) 1.25rem;
  }
  .nav[hidden]{display:none}
  .nav a{padding:.9rem 0;border-bottom:1px solid var(--rule-dark);font-size:1.1rem}
  .nav .btn{margin:1rem 0 0;justify-content:center}
}

/* --------------------------------------------------------------------------
   Ligne de lecture (prompteur)
   -------------------------------------------------------------------------- */
.readline{
  position:fixed;left:0;top:42vh;z-index:5;pointer-events:none;
  width:calc(max(var(--gutter), (100vw - var(--wrap)) / 2) - 18px);
  height:2px;background:var(--grad);opacity:0;
  transition:opacity .5s var(--ease-out);
}
.readline::before{
  content:"";position:absolute;right:-12px;top:50%;
  width:0;height:0;transform:translateY(-50%);
  border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:12px solid var(--orange);
}
body.readline-on .readline{opacity:1}

.prompter{display:flex;flex-direction:column;gap:clamp(1.75rem,4vw,2.75rem);max-width:60rem}
.prompter .line{
  position:relative;z-index:6;
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.55rem,3.4vw,2.65rem);line-height:1.2;letter-spacing:-.02em;
  color:var(--light-3);margin:0;text-wrap:balance;
  transition:color .6s var(--ease-out),transform .6s var(--ease-out);
}
.prompter .line.is-next{color:var(--light-2)}
.prompter .line.is-now{color:#fff}
.prompter .line.is-past{color:var(--light-3)}
.prompter .line small{display:block;font-family:var(--body);font-weight:400;font-size:.95rem;letter-spacing:0;color:var(--light-3);margin-top:.5rem}
@media (prefers-reduced-motion:reduce){
  .prompter .line,.prompter .line.is-past,.prompter .line.is-next{color:#fff;transition:none}
  .readline{display:none}
}

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem) 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:end}
.hero__copy{padding-bottom:clamp(3rem,7vw,6rem)}
.hero__mark{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem;color:var(--light-2);font-weight:500}
.hero__mark::before{content:"";width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid var(--magenta)}
.hero h1{margin-bottom:.5em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{margin-bottom:1.75rem;color:var(--light-2)}
.hero__facts{display:grid;gap:.55rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule-dark);color:var(--light-2);font-size:.95rem}
.hero__facts li{display:flex;align-items:center;gap:.5rem;list-style:none}
.hero__facts svg{width:18px;height:18px;color:var(--orange);flex:none}
.hero__pane{
  position:relative;align-self:stretch;min-height:420px;
  border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
  background:#EFEDF3;
}
.hero__pane picture{position:absolute;inset:0}
.hero__pane img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hero__pane::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--grad)}
.hero__caption{
  position:absolute;left:1rem;bottom:1rem;right:1rem;
  display:flex;align-items:center;gap:.75rem;
  background:rgba(19,18,23,.82);color:#fff;border-radius:var(--radius-s);padding:.7rem .9rem;font-size:.9rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero__caption strong{display:block;font-weight:600}
.hero__caption svg{width:22px;height:22px;flex:none;color:var(--orange)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero__copy{padding-bottom:2.5rem}
  .hero__pane{min-height:0;aspect-ratio:4/5;border-radius:var(--radius)}
  .hero__pane img{object-position:50% 15%}
  .hero{padding-bottom:var(--gutter)}
}

/* --------------------------------------------------------------------------
   Trois leviers
   -------------------------------------------------------------------------- */
.levers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.lever{position:relative;padding-top:1.5rem;border-top:1px solid var(--rule-light)}
.lever::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:3px;background:var(--grad)}
.lever svg{width:40px;height:40px;color:var(--ink);margin-bottom:1rem}
.lever h3{margin-bottom:.4em}
.lever p{color:var(--ink-2)}
@media (max-width:820px){.levers{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Étapes (processus entreprise)
   -------------------------------------------------------------------------- */
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:1rem}
.step{position:relative;padding:1.5rem 0 0;border-top:1px solid var(--rule-dark)}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-1.1rem;left:0;
  font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1;
  background:var(--studio);padding-right:.6rem;color:var(--orange);
}
.step h3{margin:.6rem 0 .4em}
.step p{color:var(--light-2);font-size:1rem}
.step .dur{display:inline-block;font-size:.85rem;color:var(--light-3);margin-top:.5rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Vidéos (façade au clic, aucun cookie avant lecture)
   -------------------------------------------------------------------------- */
.videos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.video{
  position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--radius);overflow:hidden;
  background:var(--studio-2);box-shadow:var(--shadow);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__btn{
  position:absolute;inset:0;width:100%;border:0;padding:0;cursor:pointer;
  background:none;color:#fff;text-align:left;
}
.video__btn picture{position:absolute;inset:0}
.video__btn img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.video__btn:hover img{transform:scale(1.03)}
.video__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(19,18,23,.85))}
.video__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:rgba(19,18,23,.7);
  display:grid;place-items:center;z-index:1;
  transition:transform .35s var(--ease-out),background-color .25s;
  outline:2px solid rgba(255,255,255,.35);outline-offset:-2px;
}
.video__btn:hover .video__play{transform:translate(-50%,-50%) scale(1.06);background:rgba(19,18,23,.9)}
.video__play::before{content:"";width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:24px solid var(--orange);margin-left:6px}
.video__label{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:1;font-family:var(--display);font-weight:600;font-size:1.05rem}
.video__label small{display:block;font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--light-2)}
.video--poster-light .video__btn{background:#fff}
.quote{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.3;letter-spacing:-.015em;margin:0}
.quote::before{content:"«\00a0"}
.quote::after{content:"\00a0»"}
.quote + p{margin-top:1.25rem}
.quote-block{position:relative;padding-left:1.6rem}
.quote-block::before{content:"";position:absolute;left:0;top:.55em;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid var(--magenta)}
@media (max-width:820px){.videos{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Parcours candidat (timeline)
   -------------------------------------------------------------------------- */
.timeline{position:relative;margin-top:2.5rem;padding-top:2rem}
.timeline__list{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}
.timeline::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule-dark)}
.timeline__progress{position:absolute;left:0;top:0;height:2px;width:0;background:var(--grad);transition:width .9s var(--ease-out)}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:0;top:calc(-2rem - 6px);width:14px;height:14px;border-radius:50%;background:var(--studio);border:2px solid var(--light-3);transition:border-color .5s,background-color .5s}
.tl.is-on::before{border-color:var(--orange);background:var(--orange)}
.tl h3{font-size:1.1rem;margin-bottom:.3em}
.tl p{font-size:.98rem;color:var(--light-2)}
.tl .n{font-family:var(--display);font-weight:700;color:var(--light-3);font-size:.9rem;display:block;margin-bottom:.4rem}
@media (prefers-reduced-motion:reduce){.timeline__progress{width:100%!important}.tl::before{border-color:var(--orange);background:var(--orange)}}
@media (max-width:900px){
  .timeline{padding-top:0;padding-left:2rem}
  .timeline__list{grid-template-columns:1fr;gap:1.75rem}
  .timeline::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline__progress{left:6px;width:2px!important;height:0;transition:height .9s var(--ease-out)}
  .tl::before{left:-2rem;top:.3rem}
  @media (prefers-reduced-motion:reduce){.timeline__progress{height:100%!important}}
}
.callout{
  margin-top:3rem;padding:1.5rem 1.75rem;border-radius:var(--radius);
  background:var(--studio-2);border:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
}
.callout p{margin:0;max-width:52rem}

/* --------------------------------------------------------------------------
   Offres
   -------------------------------------------------------------------------- */
.included{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2rem;margin:1.5rem 0 3rem;padding:1.5rem 0;border-top:1px solid var(--rule-light);border-bottom:1px solid var(--rule-light)}
.included li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;color:var(--ink-2)}
.included svg{width:22px;height:22px;flex:none;color:var(--magenta);margin-top:.1rem}
.included strong{color:var(--ink)}
@media (max-width:900px){.included{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.included{grid-template-columns:1fr}}

.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.pack{
  position:relative;display:flex;flex-direction:column;
  padding:1.9rem 1.75rem 1.75rem;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--rule-light);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.pack:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pack h3{font-size:1.15rem;margin-bottom:.25em}
.pack .for{color:var(--ink-3);font-size:.92rem;margin-bottom:1.25rem}
.pack .price{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;letter-spacing:-.03em;margin-bottom:.15rem}
.pack .price small{font-family:var(--body);font-weight:500;font-size:.95rem;letter-spacing:0;color:var(--ink-3);margin-left:.25rem}
.pack .unit{color:var(--ink-3);font-size:.9rem;margin-bottom:1.25rem}
.pack ul{list-style:none;margin:0 0 1.5rem;padding:1.25rem 0 0;border-top:1px solid var(--rule-light);display:grid;gap:.6rem;font-size:.97rem;color:var(--ink-2)}
.pack li{display:flex;gap:.6rem;align-items:flex-start}
.pack li svg{width:18px;height:18px;flex:none;color:var(--violet);margin-top:.2rem}
.pack .btn{margin-top:auto;justify-content:center;font-size:1.05rem}
.pack--featured{border-color:transparent;background:
  linear-gradient(var(--paper),var(--paper)) padding-box,
  var(--grad-45) border-box;border-width:2px}
.pack--featured .tag{position:absolute;top:-.85rem;left:1.5rem;background:var(--ink);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:.35rem .7rem;border-radius:999px}
@media (max-width:900px){.packs{grid-template-columns:1fr;max-width:34rem}}

.extras{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem 3rem;margin-top:3rem;align-items:start}
.extras h3{font-size:1.1rem}
.extras p{color:var(--ink-2)}
.credits{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}
.credits li{list-style:none;padding:.9rem 1rem;border:1px solid var(--rule-light);border-radius:var(--radius-s);background:var(--paper)}
.credits b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em}
.credits span{font-size:.85rem;color:var(--ink-3)}
@media (max-width:820px){.extras{grid-template-columns:1fr}}
@media (max-width:480px){.credits{grid-template-columns:1fr}}

/* Bandeau Offre Fondateurs : le dégradé devient le bord du verre */
.founders{padding:3px;border-radius:calc(var(--radius) + 3px);background:var(--grad-45);margin-top:3rem}
.founders__in{background:var(--studio);color:#fff;border-radius:var(--radius);padding:clamp(1.75rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:1.5rem 3rem;align-items:center}
.founders h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-bottom:.4em}
.founders p{color:var(--light-2);max-width:48rem}
.founders .price{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4vw,3rem);line-height:1;letter-spacing:-.03em}
.founders .price s{color:var(--light-3);font-size:.5em;font-weight:500;letter-spacing:0;margin-left:.5rem}
.founders .price small{display:block;font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--light-2);letter-spacing:0;margin-top:.4rem}
@media (max-width:820px){.founders__in{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Simulateur ROI
   -------------------------------------------------------------------------- */
.roi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.roi__form{display:grid;gap:1.25rem}
.field{display:grid;gap:.4rem}
.field label{font-weight:600}
.field .hint{font-size:.88rem;color:var(--light-3)}
.field input,.field select,.field textarea{
  width:100%;min-height:3.1rem;padding:.7rem .9rem;border-radius:var(--radius-s);
  border:1.5px solid var(--rule-dark);background:var(--studio-2);color:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--light-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,39,112,.25)}
.field input[type=number]{font-variant-numeric:tabular-nums}
.roi__out{
  border-radius:var(--radius);background:var(--studio-2);border:1px solid var(--rule-dark);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.roi__out .big{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em;margin:.2rem 0 .3rem}
.roi__out .big.zero{color:var(--light-2)}
.roi__out dl{display:grid;grid-template-columns:1fr auto;gap:.55rem 1.5rem;margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--rule-dark);font-size:.98rem}
.roi__out dt{color:var(--light-2)}
.roi__out dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.roi__out dd.pos{color:var(--orange)}
.roi__note{font-size:.85rem;color:var(--light-3);margin-top:1.25rem;line-height:1.5}
@media (max-width:820px){.roi{grid-template-columns:1fr}.roi__out dl{grid-template-columns:1fr;gap:.2rem 0}.roi__out dd{text-align:left;margin-bottom:.6rem}}

/* --------------------------------------------------------------------------
   Réassurance
   -------------------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,4rem)}
.pillar{padding-top:1.25rem;border-top:1px solid var(--rule-light)}
.pillar h3{display:flex;align-items:center;gap:.7rem;margin-bottom:.5em}
.pillar h3 svg{width:28px;height:28px;color:var(--magenta);flex:none}
.pillar p,.pillar li{color:var(--ink-2)}
.pillar ul{list-style:none;display:grid;gap:.35rem;font-size:.97rem}
.pillar li::before{content:"—";color:var(--magenta);margin-right:.5rem}
.mission{margin:0 0 1rem;padding:1rem 1.25rem;background:var(--paper-2);border-radius:var(--radius-s);font-size:.97rem;color:var(--ink-2);font-style:italic}
.pillar ul.partners{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.partners li{list-style:none;padding:.45rem .85rem;border:1px solid var(--rule-light);border-radius:999px;font-weight:500;font-size:.92rem;color:var(--ink)}
.partners li::before{content:none}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Équipe
   -------------------------------------------------------------------------- */
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.team figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--studio-2)}
.team figure picture{display:block}
.team figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.team figcaption{font-size:.85rem;color:var(--light-3);padding:.6rem .9rem}
.founders-list{list-style:none;display:grid;gap:1.1rem;margin-top:1.5rem}
.founders-list li{position:relative;padding-left:1.4rem}
.founders-list li::before{content:"";position:absolute;left:0;top:.5em;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--orange)}
.founders-list b{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem}
.founders-list span{color:var(--light-2);font-size:.97rem}
@media (max-width:820px){.team{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:52rem}
.faq details{border-top:1px solid var(--rule-light)}
.faq details:last-child{border-bottom:1px solid var(--rule-light)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.1rem 0;font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--magenta);border-bottom:2px solid var(--magenta);
  transform:rotate(45deg);transition:transform .3s var(--ease-out);margin-right:.3rem;
}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{color:var(--ink-2);padding-bottom:1.25rem;max-width:var(--measure)}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.contact__aside p{color:var(--light-2)}
.contact__aside a.mail{font-family:var(--display);font-weight:600;font-size:1.25rem;display:inline-block;margin:.25rem 0 1rem}
.contact__aside ul{list-style:none;display:grid;gap:.5rem;color:var(--light-2);font-size:.97rem}
.contact__aside li::before{content:"—";color:var(--magenta);margin-right:.5rem}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem}
.form .field--full{grid-column:1/-1}
.form textarea{min-height:9rem;resize:vertical}
.form .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.form .consent{font-size:.88rem;color:var(--light-3);max-width:34rem}
.form .consent input{margin-right:.5rem;accent-color:var(--magenta)}
.form-status{grid-column:1/-1;padding:.9rem 1rem;border-radius:var(--radius-s);font-size:.97rem;display:none}
.form-status.ok{display:block;background:rgba(255,138,0,.12);border:1px solid rgba(255,138,0,.5)}
.form-status.err{display:block;background:rgba(255,39,112,.12);border:1px solid rgba(255,39,112,.5)}
.field .error{display:none;font-size:.85rem;color:#FFB4CC}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:var(--magenta)}
.field.is-invalid .error{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:820px){.contact,.form{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--rule-dark);padding-block:3rem 2rem;font-size:.93rem;color:var(--light-2)}
.footer__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer h2{font-size:1rem;margin-bottom:.6em;color:#fff}
.footer ul{list-style:none;display:grid;gap:.4rem}
.footer a{color:var(--light-2)}
.footer a:hover{color:#fff}
.footer .brand{color:#fff;margin-bottom:.75rem}
.footer__legal{border-top:1px solid var(--rule-dark);padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;color:var(--light-3);font-size:.85rem}
.legal{max-width:60rem}
.legal details{border-top:1px solid var(--rule-dark)}
.legal details:last-of-type{border-bottom:1px solid var(--rule-dark)}
.legal summary{cursor:pointer;padding:1rem 0;font-weight:600;color:#fff;list-style:none;display:flex;align-items:center;gap:.6rem}
.legal summary::-webkit-details-marker{display:none}
.legal summary::before{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--magenta);transition:transform .3s var(--ease-out)}
.legal details[open] summary::before{transform:rotate(90deg)}
.legal .body{padding-bottom:1.25rem;color:var(--light-2);font-size:.95rem}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.5rem;margin:0}
.legal dt{color:var(--light-3)}
.legal dd{margin:0}
@media (max-width:820px){.footer__top{grid-template-columns:1fr}.legal dl{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Apparitions (une seule grammaire de mouvement)
   -------------------------------------------------------------------------- */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .js .reveal.is-in{opacity:1;transform:none}
}
@media print{
  .header,.readline,.video__btn,.skip,.nav-toggle{display:none!important}
  body{background:#fff;color:#000}
  .on-dark{background:#fff;color:#000}
}

/* ==========================================================================
   Réglages d'accessibilité (module partagé avec dna-formations.fr, adapté)
   ========================================================================== */
@font-face{font-family:"OpenDyslexic";src:url("../fonts/OpenDyslexic-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"OpenDyslexic";src:url("../fonts/OpenDyslexic-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../fonts/atkinson-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

html[data-taille="1"]{font-size:112.5%}
html[data-taille="2"]{font-size:125%}
html[data-taille="3"]{font-size:145%}

.a11y-fab{position:fixed;right:22px;bottom:22px;z-index:250;display:flex;align-items:center;gap:.6rem;min-height:56px;padding:0 1.1rem 0 .85rem;border-radius:999px;background:var(--studio-2);color:#fff;border:2px solid var(--magenta);cursor:pointer;box-shadow:0 14px 34px -10px rgba(0,0,0,.6);transition:transform .25s var(--ease-out);font-family:var(--display);font-weight:600;font-size:.95rem}
.a11y-fab:hover{transform:translateY(-2px)}
.a11y-fab svg{width:28px;height:28px;flex:none;color:var(--orange)}
@media (max-width:600px){.a11y-fab{right:14px;bottom:14px;padding:0;width:56px;justify-content:center}.a11y-fab .fab-lib{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}
.a11y-panneau{position:fixed;right:22px;bottom:92px;z-index:250;width:min(400px,calc(100vw - 28px));max-height:min(74vh,660px);overflow:auto;background:var(--studio-2);color:#fff;border:1px solid var(--rule-dark);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.6);padding:1.5rem;display:none}
.a11y-panneau.ouvert{display:block}
.a11y-panneau h2{font-size:1.15rem;margin:0 2.5rem .3rem 0}
.a11y-panneau .sous{font-size:.85rem;color:var(--light-2);margin-bottom:1.1rem}
.a11y-groupe{margin-bottom:1.1rem}
.a11y-groupe .etiq{display:block;font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--light-2);margin-bottom:.55rem}
.a11y-options{display:flex;flex-wrap:wrap;gap:.5rem}
.a11y-opt{font-family:var(--display);font-weight:600;font-size:.88rem;line-height:1.25;color:#fff;background:var(--studio-3);border:2px solid var(--rule-dark);border-radius:10px;padding:.6rem .85rem;cursor:pointer;min-height:44px;text-align:left;transition:border-color .2s,background-color .2s}
.a11y-opt:hover{border-color:var(--magenta)}
.a11y-opt[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:var(--orange)}
.a11y-opt[data-bascule][aria-pressed="true"]::before,.a11y-opt[data-raccourci][aria-pressed="true"]::before{content:"\2713\00a0";color:var(--violet);font-weight:800}
.a11y-opt small{display:block;font-family:var(--body);font-weight:400;font-size:.76rem;color:var(--light-2);margin-top:.15rem}
.a11y-opt[aria-pressed="true"] small{color:var(--ink-2)}
.a11y-val{cursor:default;border-style:dashed}
.a11y-vocal select{appearance:auto;background:var(--studio-3)}
.a11y-reset{width:100%;margin-top:.25rem;font-family:var(--display);font-weight:600;font-size:.88rem;background:none;border:2px solid var(--rule-dark);border-radius:10px;padding:.7rem;cursor:pointer;color:var(--light-2);transition:border-color .2s,color .2s}
.a11y-reset:hover{border-color:#fff;color:#fff}
.a11y-fermer{position:absolute;top:.9rem;right:.9rem;background:var(--studio-3);border:none;border-radius:50%;width:38px;height:38px;font-size:1.05rem;cursor:pointer;color:#fff}
.a11y-note{font-size:.76rem;color:var(--light-3);margin-top:.9rem;line-height:1.5}
.a11y-note a{color:var(--light-2)}
.guide-lecture{position:fixed;left:0;top:38vh;width:100vw;height:22vh;min-height:150px;border-top:3px solid var(--orange);border-bottom:3px solid var(--orange);box-shadow:0 0 0 200vh rgba(0,0,0,.72);z-index:240;pointer-events:none;display:none}
html.a11y-masque .guide-lecture{display:block}
.ligne-lecture{position:fixed;left:0;width:100vw;height:4px;background:var(--orange);z-index:240;pointer-events:none;display:none;top:50vh}
html.a11y-ligne .ligne-lecture{display:block}

/* Polices */
html.a11y-police body,html.a11y-police .btn,html.a11y-police .a11y-opt,html.a11y-police h1,html.a11y-police h2,html.a11y-police h3,html.a11y-police .prompter .line,html.a11y-police .quote{font-family:"Atkinson Hyperlegible",Verdana,sans-serif!important;letter-spacing:0!important}
html.a11y-dyspolice body,html.a11y-dyspolice .btn,html.a11y-dyspolice .a11y-opt,html.a11y-dyspolice h1,html.a11y-dyspolice h2,html.a11y-dyspolice h3,html.a11y-dyspolice .prompter .line,html.a11y-dyspolice .quote{font-family:"OpenDyslexic",Verdana,sans-serif!important;letter-spacing:0!important}
html.a11y-dyspolice body{line-height:1.8}
html.a11y-dyspolice h1{font-size:clamp(2rem,5vw,3.6rem)}
html.a11y-espace body{line-height:2;letter-spacing:.06em;word-spacing:.14em}
html.a11y-etroit .wrap{max-width:820px}
html.a11y-etroit .hero .wrap,html.a11y-etroit .videos,html.a11y-etroit .team,html.a11y-etroit .contact,html.a11y-etroit .roi{grid-template-columns:1fr}
html.a11y-liens a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px}

/* Animations coupées */
html.a11y-fixe *,html.a11y-fixe *::before,html.a11y-fixe *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-fixe .reveal{opacity:1!important;transform:none!important}
html.a11y-fixe .readline{display:none}
html.a11y-fixe .prompter .line{color:#fff!important}
html.a11y-fixe .timeline__progress{width:100%!important}
html.a11y-fixe .tl::before{border-color:var(--orange);background:var(--orange)}
html.a11y-curseur,html.a11y-curseur *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 11h-7l4 8-3.5 1.6-4-8L4 20z' fill='%23141414' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E") 4 2,auto!important}

/* Fond clair : le studio passe au cyclo blanc */
html.a11y-clair{--studio:#FFFFFF;--studio-2:#F6F4F9;--studio-3:#ECE9F2;--light:#141414;--light-2:#4A4653;--light-3:#6B6676;--rule-dark:#DCD8E3}
html.a11y-clair .header{background:rgba(255,255,255,.9)}
html.a11y-clair .brand,html.a11y-clair .nav a:hover,html.a11y-clair .nav a[aria-current="true"],html.a11y-clair .nav-toggle,html.a11y-clair .prompter .line.is-now,html.a11y-clair .founders__in,html.a11y-clair .field input,html.a11y-clair .field select,html.a11y-clair .field textarea,html.a11y-clair .footer h2,html.a11y-clair .footer .brand,html.a11y-clair .footer a:hover,html.a11y-clair .legal summary,html.a11y-clair .a11y-fab,html.a11y-clair .a11y-panneau,html.a11y-clair .a11y-opt,html.a11y-clair .a11y-fermer,html.a11y-clair .a11y-reset:hover,html.a11y-clair .callout,html.a11y-clair .roi__out{color:var(--ink)}
html.a11y-clair .founders__in{color:var(--ink)}
html.a11y-clair .hero__pane{outline:1px solid var(--rule-light)}
html.a11y-clair .field .error{color:#B3123F}
html.a11y-clair .form-status.ok{background:rgba(255,138,0,.15)}
html.a11y-clair .on-light-2{background:#FFFFFF}
html.a11y-clair .a11y-opt[aria-pressed="true"]{background:var(--ink);color:#fff}
html.a11y-clair .a11y-opt[aria-pressed="true"] small{color:#ddd}
html.a11y-clair .guide-lecture{box-shadow:0 0 0 200vh rgba(255,255,255,.78)}
html.a11y-clair .hero h1 em{color:#B85F00}
html.a11y-clair .step::before,html.a11y-clair .roi__out dd.pos{color:#B85F00}
html.a11y-clair .footer__legal,html.a11y-clair .a11y-note{color:var(--ink-3)}

/* Contraste renforcé : noir pur, blanc pur, accents jaunes */
html.a11y-contraste{--studio:#000;--studio-2:#000;--studio-3:#111;--light:#fff;--light-2:#fff;--light-3:#E6E6E6;--rule-dark:#8A8A8A;--paper:#fff;--paper-2:#fff;--ink:#000;--ink-2:#000;--ink-3:#000;--rule-light:#555;--magenta:#FF5C96;--orange:#FFC233;--violet:#C77DFF}
html.a11y-contraste .header{background:#000}
html.a11y-contraste .btn--primary{background:#fff;color:#000;box-shadow:none;border-color:#000}
html.a11y-contraste .btn--dark{outline:2px solid #000}
html.a11y-contraste .pack,html.a11y-contraste .credits li,html.a11y-contraste .faq details,html.a11y-contraste .field input,html.a11y-contraste .field select,html.a11y-contraste .field textarea{border-color:#000}
html.a11y-contraste .on-dark .field input,html.a11y-contraste .on-dark .field select,html.a11y-contraste .on-dark .field textarea{border-color:#fff}
html.a11y-contraste .prompter .line,html.a11y-contraste .prompter .line.is-past,html.a11y-contraste .prompter .line.is-next{color:#fff}
html.a11y-contraste .hero h1 em{color:#FFC233}
html.a11y-contraste a{text-decoration:underline}
html.a11y-contraste .a11y-opt[aria-pressed="true"]{background:#FFC233;color:#000;border-color:#fff}
html.a11y-contraste .a11y-opt[aria-pressed="true"] small{color:#000}
html.a11y-contraste .team figure img{filter:grayscale(1) contrast(1.3)}