:root{
  /* ---- Couleurs : Confiance clinique apaisée ---- */
  --bg:        #FBF8F1;   /* blanc chaud / ivoire */
  --bg-2:      #F3ECDC;   /* sable / lin */
  --surface:   #FFFFFF;
  --surface-2: #FDFAF3;
  --line:      #E7DECC;   /* séparateur fin */
  --line-2:    #EFE8DA;

  --ink:       #2C2822;   /* graphite chaud (texte principal) */
  --ink-soft:  #655E52;   /* gris pierre (texte secondaire) */
  --ink-faint: #928A7B;

  --sage:        #5F7D6E; /* accent principal — sauge/eucalyptus */
  --sage-strong: #4B6A5B; /* interactif (texte blanc AA) */
  --sage-soft:   #8AA795; /* réassurance */
  --sage-wash:   #EAF0EA; /* fond doux */

  --brume:        #5C8093; /* accent secondaire — bleu brume */
  --brume-strong: #47687A;
  --brume-wash:   #E7EEF1;

  --clay:      #B27C54;   /* information / alerte désaturée (jamais rouge) */
  --clay-wash: #F6ECE1;

  /* ---- Rayons ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Ombres très subtiles ---- */
  --e-1: 0 1px 2px rgba(44,40,34,.04), 0 1px 1px rgba(44,40,34,.03);
  --e-2: 0 4px 16px rgba(44,40,34,.05), 0 1px 3px rgba(44,40,34,.04);
  --e-3: 0 14px 40px rgba(44,40,34,.07), 0 3px 10px rgba(44,40,34,.04);

  /* ---- Espacements ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- Typo ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2.05rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.5vw, 4.1rem);

  --wrap: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--bg);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Atmosphère : chaleur minérale très légère + grain, pas de dégradé IA */
  background-image:
    radial-gradient(1100px 560px at 82% -8%, rgba(138,167,149,.05), transparent 62%),
    radial-gradient(880px 480px at -12% 18%, rgba(92,128,147,.035), transparent 58%);
}
@media (min-width:1024px){ body{background-attachment:fixed} }
/* Grain doux global */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.14;letter-spacing:-.01em;color:var(--ink);font-optical-sizing:auto}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
a{color:var(--brume-strong);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sage-strong);outline-offset:3px;border-radius:4px}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}

/* ============ LAYOUT UTILES ============ */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{padding-block:var(--s-9)}
.eyebrow{
  font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--sage-strong);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sage)}
.lead{font-size:var(--step-1);color:var(--ink-soft);max-width:56ch;line-height:1.55}
.muted{color:var(--ink-soft)}

/* ============ NAV DE LA PAGE DS ============ */
.ds-topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.ds-topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding-block:14px}
.ds-topbar nav{display:flex;gap:var(--s-5);flex-wrap:wrap}
.ds-topbar nav a{color:var(--ink-soft);text-decoration:none;font-size:var(--step--1);font-weight:600;letter-spacing:.02em}
.ds-topbar nav a:hover{color:var(--sage-strong)}
.ds-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.05rem}
.ds-brand img{height:38px;width:auto}

/* ============ INTRO ============ */
.intro{padding-top:var(--s-9);padding-bottom:var(--s-7)}
.intro h1{margin:var(--s-4) 0 var(--s-5);max-width:16ch}
.intro h1 em{font-style:italic;color:var(--sage-strong)}
.da-quote{
  margin-top:var(--s-6);padding:var(--s-5) var(--s-6);
  border-left:2px solid var(--sage);background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--font-display);font-style:italic;font-size:var(--step-1);color:var(--ink);max-width:60ch;
}

/* ============ TITRE DE SECTION ============ */
.sec-head{margin-bottom:var(--s-7);max-width:60ch}
.sec-head h2{margin:var(--s-3) 0 var(--s-3)}

/* ============ COULEURS ============ */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s-4)}
.swatch{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--e-1)}
.swatch .chip{height:96px;display:flex;align-items:flex-end;padding:10px;font-size:.72rem;font-weight:600}
.swatch .meta{padding:12px 14px}
.swatch .meta b{display:block;font-size:.92rem}
.swatch .meta code{font-size:.78rem;color:var(--ink-soft);font-family:var(--font-body)}
.swatch .role{display:block;font-size:.76rem;color:var(--ink-faint);margin-top:4px}
.wcag{display:inline-block;margin-top:6px;font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:var(--r-pill);background:var(--sage-wash);color:var(--sage-strong)}

/* ============ TYPO SPÉCIMEN ============ */
.type-grid{display:grid;gap:var(--s-6)}
.type-row{display:grid;grid-template-columns:130px 1fr;gap:var(--s-5);align-items:baseline;padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.type-row .tag{font-size:.74rem;color:var(--ink-faint);font-weight:600;letter-spacing:.04em;line-height:1.5}
.font-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-bottom:var(--s-7)}
@media(max-width:640px){.font-cards{grid-template-columns:1fr}.type-row{grid-template-columns:1fr}}
.font-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6)}
.font-card .big{font-size:3.2rem;line-height:1;margin-bottom:var(--s-4)}
.font-card .fd{font-family:var(--font-display)}
.font-card .fb{font-family:var(--font-body)}
.font-card .set{font-size:.8rem;color:var(--ink-soft);letter-spacing:.02em}

/* ============ BOUTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;justify-content:center;
  font-family:var(--font-body);font-weight:600;font-size:var(--step-0);
  padding:.85em 1.5em;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
  line-height:1;
}
.btn svg{width:1.15em;height:1.15em}
.btn-primary{background:var(--sage-strong);color:#fff;box-shadow:var(--e-1)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--e-2);background:#3f5b4d}
.btn-secondary{background:transparent;color:var(--sage-strong);border-color:var(--sage)}
.btn-secondary:hover{background:var(--sage-wash)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-soft);background:var(--surface-2)}
.btn-phone{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--e-1)}
.btn-phone b{color:var(--sage-strong)}
.btn-row{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}

/* ============ TAGS / PILULES ============ */
.pill{display:inline-flex;align-items:center;gap:.6em;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.5em .85em;border-radius:var(--r-sm);background:transparent;border:1px solid var(--line);color:var(--ink-soft)}
.pill.sage{color:var(--sage-strong);border-color:#CFE0D2}
.pill.clay{color:#8f6238;border-color:#E8D5C0}
.pill.dot::before{content:"";width:6px;height:6px;background:currentColor;transform:rotate(45deg);opacity:.85}

/* ============ CARTES ============ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
@media(max-width:860px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-6);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--e-1);border-color:var(--line-2)}
.card h3{font-size:var(--step-1);margin-bottom:var(--s-3)}
.card p{color:var(--ink-soft);font-size:.98rem}

/* Surtitre éditorial — remplace les pills-catégorie et le liseré coloré */
.overline{display:inline-flex;align-items:center;gap:.6em;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-strong)}
.overline::before{content:"";width:20px;height:1px;background:currentColor}
.overline.brume{color:var(--brume-strong)}

/* Carte traitement éditoriale : surtitre + icône à nu + filet animé sous le titre */
.t-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-6);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.t-card:hover{transform:translateY(-4px);box-shadow:var(--e-2);border-color:#D8CDB6}
.t-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-5)}
.t-icon{width:30px;height:30px;color:var(--sage-strong);opacity:.85;flex:none;stroke-width:1.4}
.t-icon.brume{color:var(--brume-strong)}
.t-card h3{font-size:var(--step-1);margin-bottom:0}
.t-rule{display:block;height:2px;width:34px;background:var(--sage);border-radius:2px;margin:var(--s-3) 0 var(--s-4);transition:width .4s var(--ease)}
.t-rule.brume{background:var(--brume)}
.t-card:hover .t-rule{width:66px}
.t-card p{color:var(--ink-soft);font-size:.98rem}
.more{margin-top:var(--s-4);display:inline-flex;align-items:center;gap:.4em;color:var(--sage-strong);font-weight:600;text-decoration:none;font-size:.95rem}
.more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.t-card:hover .more svg,.card:hover .more svg{transform:translateX(4px)}

/* Encart réassurance */
.reassure{background:var(--sage-wash);border:1px solid #d8e4d9;border-radius:var(--r-lg);padding:var(--s-6);display:flex;gap:var(--s-4)}
.reassure .ic{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--sage-strong)}
.reassure h3{font-size:var(--step-1);margin-bottom:6px}
.reassure p{color:var(--ink-soft);margin:0}

/* Encart information (clay) */
.note{background:var(--clay-wash);border:1px solid #ecd9c5;border-radius:var(--r-md);padding:var(--s-5);color:#7c5836}
.note b{color:#6b4a2c}

/* ============ TIMELINE PARCOURS ============ */
.timeline{position:relative;margin-top:var(--s-6);padding-left:var(--s-6)}
.timeline::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--sage),var(--brume))}
.tl-step{position:relative;padding:0 0 var(--s-6) var(--s-6)}
.tl-step::before{content:"";position:absolute;left:-9px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--sage);box-shadow:0 0 0 4px var(--bg)}
.tl-step .n{font-family:var(--font-display);color:var(--sage-strong);font-size:.9rem;font-weight:600;letter-spacing:.05em}
.tl-step h4,.tl-step h3{font-size:var(--step-1);margin:2px 0 4px}
.tl-step p{color:var(--ink-soft);font-size:.96rem;max-width:60ch}

/* ============ FAQ ============ */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:var(--s-4) 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s-4);align-items:center;
  font-family:var(--font-display);font-size:var(--step-1);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--sage);color:var(--sage-strong);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.faq details[open] summary .plus{transform:rotate(45deg);background:var(--sage-wash)}
.faq .ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s;opacity:0}
.faq details[open] .ans{max-height:800px;opacity:1;padding-top:var(--s-3)}
.faq .ans p{color:var(--ink-soft)}

/* ============ FORMULAIRE ============ */
.form{max-width:620px;display:grid;gap:var(--s-4)}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:600;color:var(--ink)}
.field input,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  padding:.8em 1em;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 4px var(--sage-wash)}
.field .hint{font-size:.8rem;color:var(--ink-faint)}

/* ============ BREADCRUMB ============ */
.crumb{display:flex;gap:.6em;align-items:center;font-size:var(--step--1);color:var(--ink-soft);flex-wrap:wrap}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--sage-strong)}
.crumb .sep{color:var(--ink-faint)}
.crumb [aria-current]{color:var(--ink)}

/* ============ ICONOGRAPHIE ============ */
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.icons .i{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s-5) var(--s-4);display:grid;gap:10px;place-items:center;text-align:center;transition:background .3s var(--ease)}
.icons .i:hover{background:var(--sage-wash)}
.icons .i svg{width:26px;height:26px;color:var(--sage-strong);stroke-width:1.5;transition:transform .3s var(--ease)}
.icons .i:hover svg{transform:translateY(-2px)}
.icons .i span{font-size:.73rem;color:var(--ink-soft);letter-spacing:.01em}

/* ============ HERO PREVIEW ============ */
.hero-preview{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e-3)}
.hp-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.hp-url{font-size:.76rem;color:var(--ink-faint);letter-spacing:.03em;display:inline-flex;align-items:center;gap:.55em;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 13px}
.hp-url::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--sage)}
.hp-body{padding:clamp(28px,5vw,64px);background-image:radial-gradient(700px 320px at 88% -10%,rgba(138,167,149,.07),transparent 60%)}
.hp-body .crumb{margin-bottom:var(--s-5)}
.hp-body h2{font-size:var(--step-3);max-width:18ch;margin-bottom:var(--s-4)}
.hp-body h2 em{font-style:italic;color:var(--sage-strong)}
.hp-body .lead{margin-bottom:var(--s-6)}
.hp-tags{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-6)}

/* ============ STICKY MOBILE CTA (démo) ============ */
.phone{max-width:340px;margin-inline:auto;border:10px solid #14110d;border-radius:44px;overflow:hidden;box-shadow:var(--e-3);background:var(--bg)}
.phone .screen{height:430px;position:relative;overflow:hidden;padding:22px 18px}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#14110d;border-radius:0 0 14px 14px;z-index:3}
.phone h4{font-size:1.4rem;margin:26px 0 10px}
.phone p{font-size:.86rem;color:var(--ink-soft)}
.sticky-cta{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(8px);
  padding:10px;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--e-2)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.4em;font-weight:600;font-size:.9rem;padding:.75em;border-radius:var(--r-md);text-decoration:none}
.sticky-cta .call{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.sticky-cta .rdv{background:var(--sage-strong);color:#fff}
.sticky-cta svg{width:16px;height:16px}

/* ============ FOOTER NAP ============ */
.site-footer{background:#252119;color:#d9d1c2;margin-top:var(--s-10);padding-block:var(--s-8) var(--s-6)}
.site-footer a{color:#d9d1c2;text-decoration:none}
.site-footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-6)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.site-footer img{height:64px;margin-bottom:var(--s-4)}
.site-footer h5{font-family:var(--font-display);font-weight:400;font-size:1.1rem;color:#fff;margin-bottom:var(--s-3)}
.site-footer p,.site-footer li{font-size:.9rem;line-height:1.9;color:#b7ad9c;list-style:none}
.site-footer .legal{border-top:1px solid #3a352b;margin-top:var(--s-6);padding-top:var(--s-5);font-size:.78rem;color:#8f8676}

/* ============ MOTION ============ */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none}

/* Le filet du surtitre se trace à l'apparition */
.js .eyebrow::before{width:0;transition:width .7s var(--ease) .15s}
.js .reveal.in .eyebrow::before,.js .stagger.in .eyebrow::before{width:26px}

/* Cascade d'apparition (stagger) — pour les grilles et listes */
.js .stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .stagger.in > *{opacity:1;transform:none}
.js .stagger.in > *:nth-child(1){transition-delay:.04s}
.js .stagger.in > *:nth-child(2){transition-delay:.10s}
.js .stagger.in > *:nth-child(3){transition-delay:.16s}
.js .stagger.in > *:nth-child(4){transition-delay:.22s}
.js .stagger.in > *:nth-child(5){transition-delay:.28s}
.js .stagger.in > *:nth-child(6){transition-delay:.34s}
.js .stagger.in > *:nth-child(7){transition-delay:.40s}
.js .stagger.in > *:nth-child(8){transition-delay:.46s}
.js .stagger.in > *:nth-child(9){transition-delay:.52s}
.js .stagger.in > *:nth-child(10){transition-delay:.58s}
.js .stagger.in > *:nth-child(11){transition-delay:.64s}
.js .stagger.in > *:nth-child(12){transition-delay:.70s}
.js .stagger.in > *:nth-child(13){transition-delay:.76s}
.js .stagger.in > *:nth-child(14){transition-delay:.82s}

/* Variante directionnelle (glissé latéral) — usage parcimonieux */
.js .reveal .anim-right{opacity:0;transform:translateX(30px);transition:opacity .8s var(--ease) .12s,transform .8s var(--ease) .12s}
.js .reveal.in .anim-right{opacity:1;transform:none}

/* La timeline se dessine de haut en bas */
.js .timeline::before{transform:scaleY(0);transform-origin:top;transition:transform .9s var(--ease) .1s}
.js .timeline.in::before{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .stagger>*,.js .reveal .anim-right{opacity:1!important;transform:none!important}
  .js .timeline::before{transform:none!important}
  .js .eyebrow::before{width:26px!important}
}

/* ---- Grille traitements asymétrique (carte mise en avant) ---- */
.t-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s-5);align-items:stretch}
.t-card.feature{grid-row:1 / span 2;display:flex;flex-direction:column}
.t-card.feature .more{margin-top:auto}
.t-list{list-style:none;margin:var(--s-4) 0 0;display:grid;gap:.55em}
.t-list li{position:relative;padding-left:1.5em;color:var(--ink-soft);font-size:.94rem}
.t-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border:1.5px solid var(--sage);border-radius:50%}
@media(max-width:760px){.t-grid{grid-template-columns:1fr}.t-card.feature{grid-row:auto}}

.callout-principles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:640px){.callout-principles{grid-template-columns:1fr}}
.principle{display:flex;gap:var(--s-3);padding:var(--s-4);border:1px dashed var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.principle .y{color:var(--sage-strong);font-weight:700}
.principle .n{color:var(--clay);font-weight:700}
.divider{height:1px;background:var(--line);margin-block:var(--s-8)}

/* ---- Schémas pédagogiques redessinés ---- */
.figures{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:820px){.figures{grid-template-columns:1fr}}
.figure{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--e-1)}
.figure h4{font-size:var(--step-1);margin-bottom:2px}
.figure .fk{display:block;font-size:.8rem;color:var(--sage-strong);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s-4)}
.figure svg{width:100%;height:auto;display:block;background:var(--surface-2);border-radius:var(--r-md)}
.figure text{font-family:var(--font-body);fill:var(--ink)}
.figure figcaption{margin-top:var(--s-4);font-size:.88rem;color:var(--ink-soft)}
.before{margin-top:var(--s-5);display:flex;gap:var(--s-3);align-items:flex-start;font-size:.86rem;color:var(--ink-soft)}
.before .x{flex:none;width:26px;height:26px;border-radius:50%;background:var(--clay-wash);color:#8f6238;display:grid;place-items:center;font-weight:700}

/* ---- Cartes praticien ---- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:680px){.team{grid-template-columns:1fr}}
.member{display:flex;gap:var(--s-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--e-1);align-items:flex-start;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.member:hover{transform:translateY(-3px);box-shadow:var(--e-2)}
.member img{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:top;flex:none;border:3px solid var(--sage-wash);background:var(--bg-2)}
.member h4{font-size:var(--step-1);line-height:1.1}
.member .role{color:var(--sage-strong);font-weight:600;font-size:.9rem;margin:3px 0 8px}
.member p{color:var(--ink-soft);font-size:.92rem;margin-bottom:12px}
.member .dl{display:inline-flex;align-items:center;gap:.45em;font-size:.86rem;font-weight:600;color:var(--brume-strong);text-decoration:none}
.member .dl svg{width:15px;height:15px}
.member .dl:hover{text-decoration:underline}

/* ---- Échelles (espace / rayon / élévation) ---- */
.scales{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-7)}
@media(max-width:820px){.scales{grid-template-columns:1fr}}
.scale h4{font-size:1.05rem;margin-bottom:var(--s-4)}
.sp-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.sp-row code{font-size:.72rem;color:var(--ink-faint);width:34px;flex:none;font-family:var(--font-body)}
.sp-bar{height:12px;background:var(--sage-soft);border-radius:3px}
.rad-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rad-box{width:46px;height:46px;background:var(--sage-wash);border:1px solid #cfe0d2;flex:none}
.rad-row span{font-size:.85rem;color:var(--ink)}
.rad-row code{font-size:.72rem;color:var(--ink-faint);font-family:var(--font-body)}
.elev-box{height:56px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);display:grid;place-items:center;font-size:.76rem;color:var(--ink-soft);margin-bottom:14px}

/* ---- Variantes d'encart ---- */
.note.info{background:var(--brume-wash);border-color:#cddbe1;color:#3c5866}
.note.info b{color:#2f4a57}
.note.ok{background:var(--sage-wash);border-color:#d4e2d6;color:#3f5b4d}
.note.ok b{color:#33503f}
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media(max-width:820px){.notes-grid{grid-template-columns:1fr}}

/* ---- États de formulaire ---- */
.field .req{color:var(--clay)}
.field select{font-family:var(--font-body);font-size:1rem;color:var(--ink);padding:.8em 1em;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23655E52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field select:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 4px var(--sage-wash)}
.field.error input,.field.error textarea{border-color:var(--clay);box-shadow:0 0 0 4px var(--clay-wash)}
.field .err{font-size:.8rem;color:#8f6238;display:flex;align-items:center;gap:.4em}
.consent{display:flex;gap:.7em;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.consent input{width:18px;height:18px;accent-color:var(--sage-strong);margin-top:2px;flex:none}