:root{
 --ink:#14181d;
 --ink-soft:#2b323b;
 --muted:#5f6873;
 --paper:#faf8f5;
 --paper-2:#f2eee8;
 --card:#ffffff;
 --line:#e4ded5;
 --accent:#ef6a4d;          /* aplats, boutons, bandes */
 --accent-ink:#c8452a;      /* texte sur fond clair - contraste AA */
 --accent-soft:#fdece7;
 --halo:#e6ece4;
 --ok:#1f6b52;
 --maxw:1120px;
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:17px;line-height:1.65;
 -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;margin:0}
  h1{font-size:clamp(2.6rem,6vw,4.1rem);line-height:1.05}
  h2{font-size:clamp(1.85rem,3.6vw,2.6rem);line-height:1.15}
  h3{font-size:1.12rem;line-height:1.35;font-family:var(--sans);font-weight:650;letter-spacing:-.01em}
  p{margin:0 0 1.1em}
  a{color:inherit}
  section{padding:88px 0;border-top:1px solid var(--line)}
  .eyebrow{
    font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-ink);margin:0 0 18px
  }
  .eyebrow.neutral{color:var(--muted)}
  .lede{font-size:1.22rem;line-height:1.6;color:var(--ink-soft);max-width:44ch}
  .muted{color:var(--muted)}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(250,248,245,.92);
    backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)
  }
  .navbar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
  .wordmark{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.05;text-decoration:none}
  .wordmark small{display:block;font-family:var(--sans);font-size:.66rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  nav{display:flex;align-items:center;gap:30px}
  nav a{font-size:.95rem;text-decoration:none;color:var(--ink-soft)}
  /* ne cible que les liens texte : sinon la règle écrase la couleur du bouton
     par spécificité et donne du corail sur corail au survol */
  nav a.navlink:hover{color:var(--accent-ink)}
  @media(max-width:860px){nav .navlink{display:none}}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block;padding:14px 24px;border-radius:6px;text-decoration:none;
    font-weight:600;font-size:1rem;line-height:1.2;border:1.5px solid transparent;transition:.15s
  }
  .btn-primary,.btn-primary:hover,.btn-primary:focus{color:#26140f}
  .btn-primary{background:var(--accent)}
  /* assombri juste ce qu'il faut pour marquer le survol sans passer sous 4.5:1 */
  .btn-primary:hover{background:#dd5734}
  .btn-ghost{border-color:var(--ink);color:var(--ink)}
  .btn-ghost:hover{background:var(--ink);color:var(--paper)}
  .btn-sm{padding:10px 18px;font-size:.92rem}
  .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
  .note{font-size:.92rem;color:var(--muted);margin-top:16px}

  /* ---------- hero ---------- */
  .hero{padding:76px 0 72px;border-top:0}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
  @media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
  .hero p.lede{margin-top:26px}

  /* --- visuel du hero : la fiche de rôle + annotations --- */
  .hero-visual{position:relative;padding:26px 0}
  .halo{
    position:absolute;inset:-10% -6% -4% 4%;background:var(--halo);border-radius:50%;
    z-index:0;pointer-events:none
  }
  .rolecard{
    position:relative;z-index:2;
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;
    box-shadow:0 22px 50px -26px rgba(20,24,29,.4);transform:rotate(-1.1deg)
  }
  .rolecard-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
  .rolecard-head b{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted);font-weight:700}
  .rolecard-head span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ok);font-weight:700;white-space:nowrap}
  .rolecard h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:14px}
  .rolerow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;font-size:.96rem}
  .rolerow + .rolerow{border-top:1px solid var(--paper-2)}
  .rolerow b{font-weight:550;color:var(--ink-soft)}
  .rolerow span{color:var(--muted);text-align:right;white-space:nowrap;font-size:.86rem}
  .rolecard-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
    font-size:.86rem;color:var(--muted)}

  /* Par défaut les annotations sont EMPILÉES sous la fiche : aucune
     collision possible. Elles ne passent en flottant que si la colonne
     est assez large pour qu'elles tiennent hors de la carte. */
  .pins{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
  .pin{
    background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 14px
  }
  .pin span{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);font-weight:700;margin-bottom:3px}
  .pin b{font-size:.92rem;font-weight:600;line-height:1.3}
  .pin-2{border-left:3px solid var(--accent)}
  @media(max-width:620px){.pins{grid-template-columns:1fr}}

  @media(min-width:1280px){
    /* Réserve verticale : les annotations se placent au-dessus et en dessous
       de la fiche, jamais par-dessus son contenu. */
    .hero-visual{padding:82px 0}
    .pins{display:block;margin:0}
    .pin{
      position:absolute;z-index:3;width:186px;
      box-shadow:0 14px 30px -16px rgba(20,24,29,.45)
    }
    .pin-1{top:2px;left:-34px;transform:rotate(-3deg)}
    .pin-3{bottom:2px;left:-34px;transform:rotate(1.5deg)}
    .pin-2{bottom:2px;right:-22px;transform:rotate(2.5deg)}
  }
  @media(max-width:940px){.halo{display:none}.rolecard{transform:none}}

  /* --- bande de capacités (séparateur) --- */
  .capband{background:var(--accent);border:0;padding:0}
  .capband ul{list-style:none;margin:0;padding:16px 0;display:flex;flex-wrap:wrap;
    justify-content:space-between;gap:10px 20px}
  .capband li{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#2a1109}
  @media(max-width:760px){.capband ul{justify-content:flex-start}}

  /* ---------- declaration sur fond sombre ---------- */
  .statement{background:var(--ink);color:var(--paper);border:0;padding:64px 0}
  .statement h2{color:var(--paper);max-width:19ch}
  .statement .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:end}
  .statement p{color:#c9cdd3;font-size:1.14rem;line-height:1.55;margin:0 0 26px;
    padding-left:18px;border-left:2px solid var(--accent)}
  .statement p.last{margin:0;padding:26px 0 0;border-left:0;
    border-top:1px solid rgba(250,248,245,.14);
    font-family:var(--serif);font-size:1.4rem;line-height:1.4;color:var(--paper)}
  @media(max-width:820px){.statement .cols{grid-template-columns:1fr;gap:30px;align-items:start}}

  /* ---------- generic layout ---------- */
  .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
  @media(max-width:940px){.split{grid-template-columns:1fr;gap:32px}}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  @media(max-width:940px){.grid-3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:680px){.grid-3,.grid-2{grid-template-columns:1fr}}

  /* ---------- symptoms ---------- */
  .symptoms{list-style:none;margin:0;padding:0}
  .symptoms li{
    padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative;
    font-size:1.06rem;color:var(--ink-soft)
  }
  .symptoms li::before{
    content:"";position:absolute;left:0;top:26px;width:14px;height:2px;background:var(--accent)
  }
  .closing{margin-top:30px;font-family:var(--serif);font-size:1.4rem;line-height:1.4}
  .closing span{display:block;color:var(--muted);font-size:1.12rem;margin-top:8px}

  /* ---------- capability cards ---------- */
  .card{
    background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px;
    display:flex;flex-direction:column;gap:10px
  }
  .tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
  .card p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}

  /* ---------- profile ---------- */
  .profile{
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px;
    box-shadow:0 18px 46px -30px rgba(20,24,29,.3)
  }
  .profile h3{font-size:1.28rem;font-family:var(--serif);font-weight:600}
  .profile .years{font-size:.9rem;color:var(--accent-ink);font-weight:650;margin-top:4px}
  .profile .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .profile .badge{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:#fff;background:var(--accent);
    border-radius:999px;padding:6px 12px;line-height:1}
  .profile .avail{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--paper-2);
    font-size:.95rem;font-weight:650;color:var(--ink)}
  .profile ul{list-style:none;margin:22px 0 0;padding:0}
  .profile li{padding:12px 0 12px 26px;position:relative;border-top:1px solid var(--paper-2);
    font-size:1rem;color:var(--ink-soft)}
  .profile li::before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;
    border-radius:2px;background:var(--accent-soft);border:1.5px solid var(--accent)}

  /* ---------- managed blocks ---------- */
  .blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
  .blocks div{padding:26px 26px;border-bottom:1px solid var(--line)}
  .blocks div:nth-child(3n+1){padding-left:0}
  .blocks div:nth-child(3n){padding-right:0}
  .blocks div:not(:nth-child(3n)){border-right:1px solid var(--line)}
  .blocks h3{margin-bottom:8px}
  .blocks p{margin:0;font-size:.99rem;color:var(--ink-soft)}
  @media(max-width:900px){
    .blocks{grid-template-columns:1fr}
    .blocks div{padding:22px 0;border-right:0}
  }
  .callout{
    margin-top:44px;background:var(--paper-2);border-radius:12px;padding:32px;
    border-left:3px solid var(--accent)
  }
  .callout h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:16px}
  .callout ul{margin:0;padding-left:20px}
  .callout li{margin-bottom:8px;color:var(--ink-soft)}
  .honest{margin-top:34px;font-size:1.08rem;color:var(--ink-soft);max-width:60ch;
    padding-left:18px;border-left:2px solid var(--line)}
  .honest p{margin:0 0 14px;font-size:inherit;color:inherit}
  .honest p:last-child{margin-bottom:0}

  /* ---------- process ---------- */
  .steps{list-style:none;margin:36px 0 0;padding:0}
  /* '>' obligatoire : sinon les <li> de la checklist imbriquée héritent de la
     grille des étapes et leur texte se tasse dans la colonne de 64px */
  .steps > li{display:grid;grid-template-columns:64px 220px 1fr;gap:24px;align-items:start;
    padding:24px 0;border-top:1px solid var(--line)}
  .steps .num{font-family:var(--serif);font-size:1.5rem;color:var(--accent-ink)}
  .steps .ttl{font-weight:650;font-size:1.05rem}
  .steps .txt{color:var(--ink-soft);font-size:1rem}
  .checks{list-style:none;margin:14px 0 0;padding:0}
  .checks li{position:relative;padding:7px 0 7px 24px;font-size:.97rem;
    border-top:1px solid var(--paper-2)}
  .checks li::before{content:"";position:absolute;left:3px;top:15px;width:9px;height:5px;
    border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
    transform:rotate(-45deg)}
  @media(max-width:820px){
    .steps > li{grid-template-columns:44px 1fr;gap:14px}
    .steps .txt{grid-column:2}
  }

  /* ---------- pricing ---------- */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px;
    display:flex;flex-direction:column;gap:10px}
  .plan--mid{border-color:var(--accent);box-shadow:0 18px 42px -30px rgba(20,24,29,.45)}
  .plan h3{font-size:1.04rem}
  .plan .price{font-family:var(--serif);font-size:1.68rem;line-height:1.1;font-weight:600;margin:0}
  .plan .per{font-family:var(--sans);font-size:.84rem;color:var(--muted);font-weight:400}
  .plan .unit{margin:-4px 0 0;font-size:.86rem;font-weight:600;color:var(--ink-soft)}
  .plan p.desc{margin:0;font-size:1rem;color:var(--ink-soft)}
  @media(max-width:900px){.plans{grid-template-columns:1fr}}

  .included{margin-top:44px;background:var(--paper-2);border-radius:12px;padding:32px;
    border-left:3px solid var(--accent)}
  .included h3{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:20px}
  .included ul{list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,1fr);gap:11px 34px}
  .included li{position:relative;padding-left:24px;color:var(--ink-soft);font-size:1rem}
  .included li::before{content:"";position:absolute;left:3px;top:11px;width:9px;height:5px;
    border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
    transform:rotate(-45deg)}
  @media(max-width:760px){.included ul{grid-template-columns:1fr}}

  /* ---------- fit ---------- */
  .fit{border-radius:12px;padding:30px;border:1px solid var(--line);background:var(--card)}
  .fit h3{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
  .fit.yes h3{color:var(--ok)}
  .fit.no h3{color:var(--muted)}
  .fit ul{list-style:none;margin:0;padding:0}
  .fit li{padding:11px 0 11px 28px;position:relative;border-top:1px solid var(--paper-2);
    font-size:1rem;color:var(--ink-soft)}
  .fit li:first-child{border-top:0}
  .fit.yes li::before{content:"";position:absolute;left:4px;top:19px;width:10px;height:5px;
    border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
  .fit.no li::before{content:"";position:absolute;left:3px;top:21px;width:12px;height:2px;background:#b9b2a8}

  /* ---------- credibility ---------- */
  .cred{background:var(--ink);color:var(--paper);border:0}
  .cred h2{color:var(--paper)}
  .cred p{color:#c9cdd3;max-width:60ch}
  .cred .lnk{display:inline-block;margin-top:22px;color:var(--paper);text-decoration:none;
    font-weight:600;font-size:.95rem;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
  .cred .lnk:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .cred-grid{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:start;margin-top:28px}
  .cred-copy p:first-child{margin-top:0}
  .cred-copy p a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:rgba(255,255,255,.4);text-decoration-thickness:1px}
  .cred-copy p a:hover{color:var(--accent);text-decoration-color:var(--accent)}
  .founder{margin:0}
  .founder img{display:block;width:200px;height:200px;border-radius:50%;object-fit:cover}
  .founder figcaption{margin-top:18px}
  .founder figcaption b{display:block;font-weight:600;font-size:1rem;color:var(--paper)}
  .founder figcaption span{display:block;margin-top:4px;font-size:.9rem;color:#9aa2ac}
  @media(max-width:820px){
    .cred-grid{grid-template-columns:1fr;gap:30px}
    .founder img{width:128px;height:128px}
  }
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
    border-top:1px solid #2c333c;padding-top:32px}
  .stats b{display:block;font-family:var(--serif);font-size:2.6rem;line-height:1;color:#fff}
  .stats span{display:block;margin-top:10px;font-size:.95rem;color:#9aa2ac}
  @media(max-width:680px){.stats{grid-template-columns:1fr;gap:26px}}

  /* ---------- faq ---------- */
  details{border-bottom:1px solid var(--line);padding:4px 0}
  summary{cursor:pointer;list-style:none;padding:18px 30px 18px 0;font-weight:600;font-size:1.06rem;position:relative}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:1.4rem;
    color:var(--accent-ink);font-weight:400}
  details[open] summary::after{content:"-"}
  details p{margin:0 0 20px;color:var(--ink-soft);max-width:70ch}

  /* ---------- final cta ---------- */
  .final{background:var(--paper-2);border:0;text-align:center}
  .final h2{max-width:22ch;margin:0 auto}
  .final p{max-width:52ch;margin:22px auto 0;color:var(--ink-soft);font-size:1.1rem}
  .final .btn-row{justify-content:center}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#9aa2ac;padding:44px 0;font-size:.93rem}
  footer .wordmark{color:var(--paper)}
  footer .foot-grid{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-end}
  footer a{color:#c9cdd3}
  .footlinks{margin:10px 0 0}
  .footlinks a{margin-right:6px}

/* ---------- legal document ---------- */
.legal-page .doc{max-width:72ch}
.legal-page h1{font-size:clamp(2.1rem,4.4vw,3rem);line-height:1.1}
.legal-page h2{
  font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.2;margin-top:64px;
  padding-top:28px;border-top:1px solid var(--line)
}
.legal-page h3{
  font-family:var(--sans);font-size:1.05rem;font-weight:650;
  letter-spacing:-.01em;margin-top:34px
}
.legal-page ul{margin:0 0 1.1em;padding-left:20px}
.legal-page li{margin-bottom:.5em}
.legal-page main{padding:64px 0 88px}
.legal-page main a{color:var(--accent-ink)}
.legal-page dl{margin:0 0 1.1em}
.legal-page dt{font-weight:600;margin-top:14px}
.legal-page dd{margin:2px 0 0;color:var(--ink-soft)}
.legal-page .backlink{font-size:.95rem;text-decoration:none;color:var(--ink-soft)}
.legal-page .backlink:hover{color:var(--accent-ink)}
.legal-page .updated{font-size:.92rem;color:var(--muted);margin-top:18px}
.legal-page .toc{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:32px 0 0;
  padding:0;list-style:none;font-size:.95rem
}
.legal-page .toc a{color:var(--ink-soft)}