/* ========= TOKENS ========= */
  :root{
    /* Palette "ink" (default) */
    --bg: #F6F3EE;
    --bg-soft: #EFEBE3;
    --bg-card: #FFFFFF;
    --ink: #0B1B2B;
    --ink-2: #1F2B3C;
    --muted: #5A6473;
    --line: #D9D3C7;
    --line-strong: #0B1B2B;
    --accent: #FFD23F;       /* jaune accessibilité */
    --accent-ink: #0B1B2B;
    --signal-ok: #0F7A4F;
    --signal-warn: #B26B00;

    --font-serif: "Instrument Serif", "Times New Roman", serif;
    --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius-sm: 6px;
    --radius: 14px;
    --radius-lg: 22px;

    --max: 1240px;
    --pad-section: clamp(64px, 9vw, 120px);
  }
  [data-palette="slate"]{
    --bg:#F3F4F6; --bg-soft:#E7EAEE; --bg-card:#FFFFFF;
    --ink:#0F172A; --ink-2:#1E293B; --muted:#64748B;
    --line:#D5D9DF; --accent:#F97316; --accent-ink:#0B1B2B;
  }
  [data-palette="ivory"]{
    --bg:#EFE9DD; --bg-soft:#E6DFCF; --bg-card:#FBF8F1;
    --ink:#1B1B1B; --ink-2:#2A2A2A; --muted:#6B655A;
    --line:#CFC6B2; --accent:#0B1B2B; --accent-ink:#FFD23F;
  }
  [data-density="compact"]{ --pad-section: clamp(48px, 6vw, 84px); }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img{max-width:100%;display:block}
  a{color:inherit}

  .container{max-width: var(--max); margin: 0 auto; padding: 0 28px;}
  .section{padding: var(--pad-section) 0;}
  .section + .section{border-top: 1px solid var(--line);}

  /* ========= TYPE ========= */
  .eyebrow{
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before{
    content:""; width:22px; height:1px; background: currentColor; display:inline-block;
  }
  /* Bloc titre + eyebrow : dans le code le titre vient en premier (pour
     l'ordre du document et le SEO), mais visuellement l'eyebrow s'affiche
     au-dessus via flex column-reverse. */
  .title-stack{
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  h1,h2,h3,h4{font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; color: var(--ink); margin:0;}
  /* Italic accents: guaranteed 4.5:1 contrast everywhere.
     em on light bg gets a yellow highlight with dark ink (11:1).
     em on dark bg keeps yellow color on dark ink (10:1). */
  h1 em, h2 em, h3 em, h4 em{
    font-style: italic;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 0 0.18em;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  /* Opt-out when parent forces dark background (handled case-by-case) */
  .em-inverse em, [data-em="inverse"] em{
    background: transparent;
    padding: 0;
    color: var(--accent);
  }
  h1{font-size: clamp(48px, 7vw, 104px); line-height: 0.96; letter-spacing: -0.03em;}
  h2{font-size: clamp(34px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -0.02em;}
  h3{font-size: 24px; line-height: 1.2;}
  .serif-italic{font-style: italic;}
  .lead{font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); max-width: 58ch;}
  p{margin:0 0 1em;}
  .mono{font-family: var(--font-mono);}
  .u-muted{color: var(--muted);}

  /* ========= BUTTONS ========= */
  .btn{
    --_bg: var(--ink);
    --_fg: var(--bg);
    display: inline-flex; align-items:center; gap:10px;
    font-family: var(--font-sans);
    font-size: 14.5px; font-weight: 500;
    padding: 14px 22px;
    border-radius: 999px;
    background: var(--_bg);
    color: var(--_fg);
    text-decoration: none;
    border: 1px solid var(--_bg);
    transition: transform .2s ease, background .2s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn-ghost{ --_bg: transparent; --_fg: var(--ink); border-color: var(--ink); }
  .btn-ghost:hover{ background: var(--ink); color: var(--bg); }
  .btn-accent{ --_bg: var(--accent); --_fg: var(--accent-ink); border-color: var(--accent); }
  .btn-sm{ padding: 10px 16px; font-size: 13.5px; }

  .arrow-link{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-mono); font-size: 12.5px;
    text-transform: uppercase; letter-spacing: 0.04em;
    text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
  }
  .arrow-link:hover{ color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  /* Variante inversée pour fonds sombres : texte clair par défaut, bascule sur
     texte ink (noir) au survol pour garder le contraste sur fond jaune. */
  .arrow-link-inverse{ color: var(--bg); border-bottom-color: var(--bg); }
  .arrow-link-inverse:hover{ color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

  /* ========= HEADER ========= */
  .site-header{
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner{
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; color: var(--ink);
    font-family: var(--font-serif);
    font-size: 30px; line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .brand .b-dash{
    display: inline;
    color: var(--ink);
    margin: 0 -0.12em;
  }
  .brand .b-dot{
    display: none;
  }
  [data-logo="mono"] .brand .b-dash,
  [data-logo="mono"] .brand .b-dot{ background: var(--ink); }
  [data-logo="mark"] .brand{ gap: 10px; align-items: center; }
  [data-logo="mark"] .brand::before{
    content: "";
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 50%;
    background:
      conic-gradient(from -90deg, var(--ink) 0 75%, var(--accent) 75% 100%);
  }

  /* Logo avec coche (signature) */
  .brand-check{
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    flex-shrink: 0;
    margin-right: 2px;
  }
  .brand-check svg{
    width: 30px; height: 30px;
    stroke: var(--ink);
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  [data-logo="check"] .brand{ gap: 10px; align-items: center; }
  [data-logo="check-accent"] .brand{ gap: 10px; align-items: center; }
  [data-logo="check-accent"] .brand .brand-check svg{ stroke: var(--accent-ink); background: var(--accent); border-radius: 50%; padding: 3px; box-sizing: content-box; width: 16px; height: 16px;}
  [data-logo="accent"] .brand-check,
  [data-logo="mono"] .brand-check,
  [data-logo="mark"] .brand-check{ display: none; }
  .brand .brand-mark{
    width: 30px; height: 30px; border-radius: 6px;
    background: var(--ink); color: var(--bg);
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 14px; font-weight:500;
  }
  .brand span.dot{ color: var(--accent-ink); background: var(--accent); padding: 0 4px; border-radius: 3px; font-family: var(--font-sans); font-size: 16px; margin-left: 2px;}
  nav.primary ul{
    display: flex; gap: 28px; list-style: none; padding: 0; margin: 0;
  }
  nav.primary a{
    text-decoration: none; color: var(--ink);
    font-size: 14.5px; font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
  }
  nav.primary a:hover{ border-bottom-color: var(--ink); }
  .header-right{ display:flex; align-items:center; gap: 14px; }
  .header-right .mono-cta{ font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); text-decoration:none;}
  .header-right .mono-cta:hover{ color: var(--ink);}
  @media (max-width: 860px){
    nav.primary{display:none}
  }

  /* ========= HERO ========= */
  .hero{
    padding: clamp(60px, 9vw, 120px) 0 clamp(48px, 7vw, 96px);
    position: relative;
  }
  .hero-grid{
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
  }
  @media (max-width: 960px){ .hero-grid{ grid-template-columns: 1fr; } }

  .hero-meta{
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 10px 0;
    margin-bottom: clamp(36px, 5vw, 72px);
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
  }
  .hero-meta .loc{ color: var(--muted);}
  .hero-meta .sep{ color: var(--muted); padding: 0 10px;}

  .hero h1 .accent-dot{
    display:inline-block;
    width: 0.18em; height: 0.18em;
    background: var(--accent);
    border-radius: 50%;
    vertical-align: baseline;
    margin-left: 0.06em;
    position: relative;
    top: -0.04em;
  }
  .hero h1 .highlight{
    background: var(--accent); color: var(--accent-ink);
    padding: 0 .15em; border-radius: 4px;
    font-style: normal;
  }
  .hero h1 .serif-italic{ color: var(--ink-2); }
  .hero .hero-lead{
    margin-top: 28px;
    font-size: clamp(17px, 1.3vw, 20px);
    max-width: 46ch; color: var(--ink-2);
  }
  .hero .cta-row{
    margin-top: 36px;
    display:flex; gap: 14px; flex-wrap: wrap;
  }

  /* Dossier conformité (panneau droit) */
  .dossier{
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    padding: 22px 24px 18px;
    font-family: var(--font-mono);
    box-shadow: 8px 8px 0 var(--ink);
    position: relative;
  }
  .dossier-title{
    position: absolute; top: 0; left: 18px; transform: translateY(-50%);
    margin: 0;
    background: var(--bg);
    padding: 0 8px;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 10.5px; line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .dossier-head{
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px; margin-bottom: 10px;
    font-size: 11px; color: var(--muted);
    letter-spacing: 0.04em;
  }
  .dossier-head p{ margin: 0;}
  .dossier-row{
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px dotted var(--line);
    font-size: 13px;
  }
  .dossier-row:last-child{border-bottom:none}
  .dossier-row .ref{ color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em;}
  .dossier-row .name{ font-family: var(--font-sans); font-weight: 500; color: var(--ink); font-size: 15px; letter-spacing: -0.005em;}
  .dossier-row .name small{ display:block; font-weight: 400; color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); margin-top: 2px; letter-spacing: 0.02em;}
  .chip{
    display: inline-flex; align-items:center; gap:6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 10.5px; letter-spacing: 0.06em;
    border: 1px solid var(--line);
  }
  .chip.ok{ background: color-mix(in oklab, var(--signal-ok) 10%, white); color: var(--signal-ok); border-color: color-mix(in oklab, var(--signal-ok) 25%, white); }
  .chip.accent{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent);}
  .chip::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor;}
  .dossier-foot{
    padding-top: 12px; margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: 11px; color: var(--muted);
    border-top: 1px solid var(--line);
  }

  /* Hero deco */
  .hero-deco{
    position: absolute;
    right: 0; top: 40%;
    font-family: var(--font-mono);
    font-size: 10.5px; color: var(--muted);
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    display: none;
  }
  @media (min-width: 1280px){ .hero-deco{display:block} }

  /* ========= CHIFFRES ========= */
  .stats{
    background: var(--ink);
    color: var(--bg);
    padding: clamp(48px, 6vw, 80px) 0;
  }
  .stats .container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
  @media (max-width: 860px){ .stats .container{ grid-template-columns: repeat(2, 1fr); } }
  .stat{
    border-top: 1px solid color-mix(in oklab, var(--bg) 20%, transparent);
    padding-top: 20px;
  }
  .stat .num{
    font-family: var(--font-serif);
    font-size: clamp(56px, 7vw, 88px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--bg);
    display: flex; align-items: baseline; gap: 4px;
  }
  .stat .num sup{
    font-size: 0.4em; color: var(--accent);
    font-family: var(--font-mono); font-weight: 500;
    position: relative; top: -0.4em;
  }
  .stat .lbl{
    margin-top: 14px;
    font-family: var(--font-mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: color-mix(in oklab, var(--bg) 70%, transparent);
  }

  /* ========= LOGOS ========= */
  .logos .container{ display: grid; grid-template-columns: 1fr 3fr; gap: 48px; align-items: center;}
  @media (max-width: 860px){ .logos .container{ grid-template-columns: 1fr; gap: 24px; } }
  .logos-track{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
  }
  .logo-cell{
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 22px 16px;
    display: grid; place-items: center;
    min-height: 76px;
    font-family: var(--font-serif);
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink-2);
    text-align: center;
  }
  .logo-cell small{
    display: block;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--muted); letter-spacing: 0.06em;
    margin-top: 2px; text-transform: uppercase;
    font-weight: 400;
  }

  /* ========= SECTION HEADER ========= */
  .section-head{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    margin-bottom: clamp(40px, 5vw, 72px);
  }
  @media (max-width: 860px){ .section-head{ grid-template-columns: 1fr; } }
  .section-head .lead{ font-size: 18px;}

  /* ========= AUDITS ========= */
  .audits-list{
    border-top: 1px solid var(--ink);
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .audit-row{
    display: grid;
    grid-template-columns: 80px 1fr 1.4fr 240px auto;
    gap: 32px;
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    transition: background .2s;
  }
  .audit-row:hover{ background: var(--bg-soft);}
  .audit-row .num{ font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em;}
  .audit-row h3{ font-family: var(--font-serif); font-size: 32px; line-height: 1.05; font-weight: 400;}
  .audit-row p{ margin: 0; color: var(--muted); font-size: 15px;}
  .audit-row .meta{
    display: flex; flex-direction: column; gap: 6px;
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--muted); letter-spacing: 0.04em;
  }
  .audit-row .meta .val{ color: var(--ink); font-size: 12.5px;}
  .audit-row .go{
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--ink);
    display: grid; place-items: center;
    text-decoration: none; color: var(--ink);
    transition: all .2s;
  }
  .audit-row .go:hover{ background: var(--ink); color: var(--bg); transform: rotate(-45deg); }
  @media (max-width: 1060px){
    .audit-row{ grid-template-columns: 60px 1fr auto; grid-template-rows: auto auto; row-gap: 12px;}
    .audit-row p{ grid-column: 2 / 3;}
    .audit-row .meta{ display: none;}
  }

  /* ========= ACCOMPAGNEMENT (grille documentaire) ========= */
  .accomp-wrap{
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: clamp(32px, 5vw, 80px);
  }
  @media (max-width: 960px){ .accomp-wrap{ grid-template-columns: 1fr; } }
  .accomp-side h2{ margin-bottom: 18px;}
  .accomp-side .lead{ margin-bottom: 28px;}
  .accomp-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
  }
  @media (max-width: 720px){ .accomp-grid{ grid-template-columns: repeat(2, 1fr);} }
  @media (max-width: 460px){ .accomp-grid{ grid-template-columns: 1fr;} }
  /* Les <li> ne perturbent pas la grille : display: contents laisse leurs enfants
     (les .accomp-item) devenir les items de grille directement. */
  .accomp-grid > li{ display: contents;}
  .accomp-item{
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 22px 20px;
    min-height: 170px;
    display: flex; flex-direction: column; justify-content: space-between;
    text-decoration: none; color: var(--ink);
    background: var(--bg-card);
    position: relative;
    transition: background .2s;
  }
  .accomp-item:hover{ background: var(--accent); color: var(--accent-ink);}
  .accomp-item .idx{
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: 0.06em;
  }
  .accomp-item:hover .idx{ color: var(--accent-ink);}
  .accomp-item h4{
    font-family: var(--font-serif); font-weight: 400;
    font-size: 22px; line-height: 1.15;
    margin: 10px 0 12px; letter-spacing: -0.01em;
  }
  .accomp-item .go-sm{
    font-family: var(--font-mono); font-size: 11.5px;
    letter-spacing: 0.06em; text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
  }

  /* ========= MÉTHODOLOGIE (process) ========= */
  .method{ background: var(--bg-soft); }
  .method-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  @media (max-width: 860px){ .method-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 540px){ .method-grid{ grid-template-columns: 1fr;} }
  .method-step{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 24px 22px;
    display: flex; flex-direction: column; gap: 14px;
    min-height: 220px;
    position: relative;
  }
  .method-step .step-num{
    font-family: var(--font-serif);
    font-size: 56px;
    line-height: 0.9;
    color: var(--ink);
  }
  .method-step .step-num::after{
    content: "";
    display: block;
    width: 30px; height: 2px; background: var(--accent);
    margin-top: 8px;
  }
  .method-step h4{
    font-family: var(--font-sans);
    font-weight: 600; font-size: 15px;
    letter-spacing: -0.005em;
    margin: 0;
  }
  .method-step p{ font-size: 14px; color: var(--muted); margin: 0;}
  .method-step .tag{
    position: absolute; top: 18px; right: 18px;
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--muted); letter-spacing: 0.06em;
  }

  /* ========= FORMATIONS ========= */
  .formations{ background: var(--bg); }
  .form-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    margin-top: 48px;
  }
  @media (max-width: 860px){ .form-grid{ grid-template-columns: 1fr;} }
  .form-card{
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 36px 32px 28px;
    background: var(--bg-card);
    display: flex; flex-direction: column; gap: 18px;
    position: relative;
    overflow: hidden;
  }
  .form-card .days{
    position: absolute;
    top: 20px; right: 24px;
    margin: 0;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: 0.06em;
  }
  .form-card .role{
    margin: 0;
    font-family: var(--font-mono); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted);
  }
  .form-card h3{
    font-family: var(--font-serif);
    font-size: 40px; line-height: 0.98; letter-spacing: -0.02em;
    font-weight: 400;
  }
  .form-card .points{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px dashed var(--line);
    padding-top: 16px;
    font-size: 13.5px; color: var(--ink-2);
  }
  .form-card .points li{
    display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  }
  .form-card .points li::before{
    content: "→"; color: var(--accent-ink); background: var(--accent);
    width: 16px; height: 16px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10px; margin-top: 2px;
  }
  .form-card .foot{
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .form-card .foot .pax{ margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);}
  .form-card.feature{ background: var(--ink); color: var(--bg); border-color: var(--ink);}
  .form-card.feature h3{ color: var(--bg);}
  .form-card.feature .role{ color: color-mix(in oklab, var(--bg) 60%, transparent);}
  .form-card.feature .points{ color: color-mix(in oklab, var(--bg) 80%, transparent); border-color: color-mix(in oklab, var(--bg) 20%, transparent);}
  .form-card.feature .foot{ border-color: color-mix(in oklab, var(--bg) 20%, transparent);}
  .form-card.feature .foot .pax{ color: color-mix(in oklab, var(--bg) 60%, transparent);}
  .form-card.feature::before{ color: color-mix(in oklab, var(--bg) 70%, transparent);}

  /* ========= ÉCOSYSTÈME audit-web.ai ========= */
  .ecosystem{ background: var(--bg-soft);}
  .eco-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  @media (max-width: 860px){ .eco-wrap{ grid-template-columns: 1fr;}}
  .eco-panel{
    background: #0A1620;
    color: #EFE9DD;
    border-radius: var(--radius);
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
  }
  .eco-panel .eyebrow{ color: color-mix(in oklab, #EFE9DD 60%, transparent);}
  .eco-panel .eyebrow::before{ background: color-mix(in oklab, #EFE9DD 40%, transparent);}
  .eco-panel h3{
    color: #EFE9DD;
    font-family: var(--font-serif);
    font-size: clamp(32px, 3.5vw, 46px);
    line-height: 1.02;
    font-style: italic;
    margin: 20px 0 18px;
    font-weight: 400;
  }
  .eco-panel h3 em{
    font-style: normal;
    color: #5EAD8A;
    background: transparent;
    padding: 0;
  }
  .eco-panel p{ color: color-mix(in oklab, #EFE9DD 80%, transparent); font-size: 15px; max-width: 48ch;}
  .eco-list{
    list-style: none; padding: 0; margin: 28px 0 24px;
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid color-mix(in oklab, #EFE9DD 15%, transparent);
  }
  .eco-list li{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in oklab, #EFE9DD 15%, transparent);
    font-size: 14px;
  }
  .eco-list .k{ font-family: var(--font-mono); font-size: 11px; color: #5EAD8A; letter-spacing: 0.06em;}
  .eco-list .v{ color: #EFE9DD;}
  .eco-list .arr{ color: color-mix(in oklab, #EFE9DD 60%, transparent); font-family: var(--font-mono);}
  .eco-cta{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-radius: 999px;
    background: #EFE9DD; color: #0A1620;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    text-decoration: none;
  }

  /* ========= ARTICLES ========= */
  .articles-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
  @media (max-width: 860px){ .articles-grid{ grid-template-columns: 1fr; }}
  .article{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    text-decoration: none; color: var(--ink);
    transition: transform .25s ease;
  }
  .article:hover{ transform: translateY(-3px);}
  .article-thumb{
    aspect-ratio: 16/10;
    background: var(--bg-soft);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .article-thumb .thumb-label{
    position: absolute; bottom: 12px; left: 12px;
    font-family: var(--font-mono); font-size: 10.5px;
    padding: 4px 8px; background: var(--bg-card);
    border: 1px solid var(--line);
    letter-spacing: 0.06em;
  }
  .article-body{ padding: 22px 22px 24px;}
  .article-body .date{
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--muted); letter-spacing: 0.04em;
  }
  .article-body h3{
    font-family: var(--font-serif); font-weight: 400;
    font-size: 26px; line-height: 1.1; letter-spacing: -0.015em;
    margin: 12px 0 10px;
  }
  .article-body p{ color: var(--muted); font-size: 14px; margin: 0;}
  .article-body .read{
    margin-top: 16px;
    font-family: var(--font-mono); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink);
  }

  /* Thumb motifs CSS (pas d'images plates génériques) */
  .thumb-grid{
    background:
      repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 32px),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
    opacity: 1;
  }
  .thumb-grid::after{
    content:""; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 40%, transparent 0, color-mix(in oklab, var(--bg) 80%, transparent) 70%);
  }
  .thumb-focus{
    background: var(--ink);
    display: grid; place-items: center;
  }
  .thumb-focus svg{ width: 60%; height: auto;}

  .thumb-modal{
    background: var(--bg-soft);
    display: grid; place-items: center;
    padding: 24px;
  }

  /* ========= CTA FINAL ========= */
  .final-cta{
    background: var(--ink);
    color: var(--bg);
  }
  .final-cta .container{
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding-top: clamp(72px, 10vw, 128px);
    padding-bottom: clamp(72px, 10vw, 128px);
  }
  @media (max-width: 860px){ .final-cta .container{ grid-template-columns: 1fr;} }
  .final-cta h2{ color: var(--bg); font-size: clamp(42px, 5.5vw, 72px);}
  .final-cta h2 em{ color: var(--accent); font-style: italic; background: transparent; padding: 0;}
  .final-cta p{ color: color-mix(in oklab, var(--bg) 75%, transparent); max-width: 42ch;}
  .final-cta .panel{
    border: 1px solid color-mix(in oklab, var(--bg) 20%, transparent);
    border-radius: var(--radius-sm);
    padding: 28px;
  }
  .final-cta .panel .label{ font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in oklab, var(--bg) 60%, transparent); letter-spacing: 0.06em; text-transform: uppercase;}
  .final-cta .panel .line{
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--bg) 15%, transparent);
  }
  .final-cta .panel .line:last-child{ border-bottom: none;}
  .final-cta .panel .line a{ color: var(--bg); text-decoration: none; font-size: 17px; font-weight: 500;}
  .final-cta .panel .line .k{ font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in oklab, var(--bg) 60%, transparent); letter-spacing: 0.06em;}

  /* ========= FOOTER ========= */
  .site-footer{
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 64px 0 32px;
  }
  .footer-top{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--line);
  }
  @media (max-width: 860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
  .footer-top h4,
  .footer-top .col-title{
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted); font-weight: 500; margin: 0 0 16px;
  }
  .footer-top ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;}
  .footer-top a{ color: var(--ink); text-decoration: none; font-size: 14.5px;}
  .footer-top a:hover{ border-bottom: 1px solid var(--ink); }
  .footer-brand .wordmark{
    font-family: var(--font-serif); font-size: 64px; line-height: 0.9;
    letter-spacing: -0.03em; color: var(--ink);
    margin-bottom: 12px;
    display: block; white-space: nowrap;
  }
  .footer-brand .wm-check{
    width: 64px; height: 64px;
    display: inline-grid; place-items: center;
    margin-right: 12px;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .footer-brand .wm-check svg{
    width: 58px; height: 58px;
    stroke: var(--ink);
    stroke-width: 2.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  [data-logo="accent"] .footer-brand .wm-check,
  [data-logo="mono"] .footer-brand .wm-check,
  [data-logo="mark"] .footer-brand .wm-check{ display: none; }
  [data-logo="check"] .footer-brand .wm-dash,
  [data-logo="check-accent"] .footer-brand .wm-dash{ background: transparent; }
  .footer-brand .wm-dash{
    display: inline;
    color: var(--ink);
    background: transparent;
    margin: 0 -0.08em;
    width: auto; height: auto;
    top: 0;
  }
  .footer-brand .wm-dot{
    display: none;
  }
  [data-logo="mono"] .footer-brand .wm-dash,
  [data-logo="mono"] .footer-brand .wm-dot{ background: var(--ink); }
  .footer-brand .wm-tld{
    font-family: var(--font-mono);
    font-size: 11.5px; color: var(--muted);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 0 0 20px;
  }
  .footer-brand p{ color: var(--muted); font-size: 14px; max-width: 36ch;}
  .footer-bottom{
    display: flex; justify-content: space-between;
    padding-top: 28px;
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .footer-bottom p{ margin: 0;}

  /* ========= TWEAKS PANEL ========= */
  #tweaks-panel{
    position: fixed; bottom: 20px; right: 20px;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: 6px 6px 0 var(--ink);
    z-index: 100;
    display: none;
    font-family: var(--font-sans);
  }
  #tweaks-panel.active{ display: block;}
  #tweaks-panel h4{
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 0 0 14px; color: var(--muted); font-weight: 500;
    display: flex; justify-content: space-between; align-items: center;
  }
  #tweaks-panel .tweak-group{
    margin-bottom: 14px;
  }
  #tweaks-panel .tweak-label{
    font-size: 11px; color: var(--muted);
    font-family: var(--font-mono); letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px; display: block;
  }
  #tweaks-panel .pills{
    display: flex; gap: 4px; flex-wrap: wrap;
  }
  #tweaks-panel .pill{
    font-size: 12px; padding: 6px 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    cursor: pointer;
    border-radius: 3px;
    font-family: var(--font-sans);
  }
  #tweaks-panel .pill.on{
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
  }
  #tweaks-panel .close-x{
    background: none; border: none; cursor: pointer; font-size: 16px; color: var(--muted);
  }

  /* sr-only */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .sr-only-focusable:focus,.sr-only-focusable:focus-visible{position:fixed;top:12px;left:12px;width:auto;height:auto;margin:0;padding:12px 18px;clip:auto;overflow:visible;white-space:normal;background:var(--accent,#FFD23F);color:var(--ink,#111);border:2px solid var(--ink,#111);border-radius:3px;font-family:var(--font-sans,Inter Tight,sans-serif);font-weight:600;z-index:9999;text-decoration:none;box-shadow:4px 4px 0 var(--ink,#111)}

  /* ================================================================
     ============ RESPONSIVE GLOBAL — tablette & mobile =============
     ================================================================ */

  /* Burger button (injecté dynamiquement — voir shared-responsive.js) */
  .site-header .burger{
    display: none !important;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .burger svg{ width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round;}
  /* Bouton de fermeture du menu mobile (injecté dynamiquement) */
  .site-header nav.primary .menu-close{
    display: none;
    position: absolute;
    top: 20px; right: 20px;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 2px;
    cursor: pointer;
    font-size: 20px;
    font-family: var(--font-serif);
    line-height: 1;
    color: var(--ink);
    padding: 0;
  }
  body.menu-open{ overflow: hidden;}
  .menu-backdrop{
    display: none;
    position: fixed; inset: 0;
    background: color-mix(in oklab, var(--ink) 60%, transparent);
    backdrop-filter: blur(4px);
    z-index: 90;
  }
  body.menu-open .menu-backdrop{ display: block;}

  /* ===== ≤ 1024px : tablette ===== */
  @media (max-width: 1024px){
    .container{ padding: 0 20px;}
    .header-right .mono-cta{ display: none;}
  }

  /* ===== ≤ 860px : mobile — le plus important ===== */
  @media (max-width: 860px){
    /* Header : afficher le burger, cacher la nav desktop */
    .site-header .burger{ display: inline-flex !important;}
    .site-header nav.primary{
      display: none;
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: min(320px, 85vw);
      background: var(--bg);
      border-left: 1px solid var(--ink);
      z-index: 100;
      padding: 80px 32px 32px;
      overflow-y: auto;
    }
    body.menu-open .site-header nav.primary{ display: block;}
    body.menu-open .site-header nav.primary .menu-close{ display: inline-flex; align-items: center; justify-content: center;}
    /* Menu mobile : le header doit remonter au-dessus d'un éventuel backdrop,
       ET le backdrop-filter du header crée un containing block pour les
       descendants position:fixed — ce qui tronque le nav à la hauteur du
       header. On le neutralise tant que le menu est ouvert. */
    body.menu-open .site-header{
      z-index: 150;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    /* Pas de backdrop : le menu est un dépliant latéral, pas une modale. */
    body.menu-open .menu-backdrop{ display: none;}
    /* Les stickers titres d'asides doivent garder leur petite taille même quand
       la règle globale mobile `h2 !important` les surclasse. */
    .dossier-title, .hac-title, .ab-title, .ps-title, .sh-title,
    .pb-title-sticker, .ide-title, .mc-title-sticker, .sc-title,
    .cc-title-sticker, .ss-title-sticker{
      font-size: 10.5px !important;
      line-height: 1 !important;
    }
    .site-header nav.primary ul{
      flex-direction: column;
      gap: 0;
      align-items: stretch;
    }
    .site-header nav.primary li{
      border-bottom: 1px solid var(--line);
    }
    .site-header nav.primary a{
      display: block;
      padding: 18px 0;
      font-size: 18px;
      font-family: var(--font-serif);
      font-weight: 400;
      letter-spacing: -0.01em;
      border-bottom: none;
    }
    .brand{ font-size: 24px;}
    .brand-check{ width: 28px; height: 28px;}
    .brand-check svg{ width: 26px; height: 26px;}
    .header-right .btn-sm{ padding: 8px 12px; font-size: 12.5px;}

    /* Hero génériques */
    h1{ font-size: clamp(40px, 10vw, 64px) !important; line-height: 0.98 !important;}
    h2{ font-size: clamp(28px, 7vw, 44px) !important; line-height: 1.05 !important;}
    h3{ font-size: 20px !important;}

    /* Tout grid 2+ colonnes passe en 1 col sur mobile (sauf exceptions) */
    .hero-grid,
    .accomp-wrap,
    .section-head,
    .final-cta .container,
    .footer-top{
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
    .footer-top{ gap: 40px !important;}

    /* Audit rows — simplifier */
    .audit-row{
      grid-template-columns: auto 1fr !important;
      gap: 16px !important;
      padding: 20px 0 !important;
    }
    .audit-row h3{ font-size: 22px !important;}
    .audit-row p, .audit-row .meta, .audit-row .go{ grid-column: 1 / -1 !important;}
    .audit-row .go{ justify-self: start;}

    /* Footer bottom */
    .footer-bottom{
      flex-direction: column;
      gap: 8px;
      align-items: flex-start !important;
    }
    .footer-brand .wordmark{ font-size: 44px;}
    .footer-brand .wm-check{ width: 44px; height: 44px;}
    .footer-brand .wm-check svg{ width: 40px; height: 40px;}

    /* Dossier panel : réduire */
    .dossier{ padding: 18px 20px 14px;}
    .dossier-row{ grid-template-columns: 60px 1fr auto; gap: 8px;}

    /* Stats */
    .stats .container{ gap: 20px !important;}

    /* Logos cells */
    .logos-track{ grid-template-columns: repeat(2, 1fr);}

    /* Panneau Tweaks : hauteur limitée + scroll */
    #tweaks-panel{
      bottom: 10px; right: 10px; left: 10px;
      width: auto;
      max-height: 60vh;
      overflow-y: auto;
    }

    /* Boutons dans .cta-row : pleine largeur */
    .hero .cta-row .btn,
    .cta-row .btn{
      flex: 1 1 auto;
      justify-content: center;
    }

    /* Images & documents mockups : éviter débordement */
    .sd-doc, .dossier{ max-width: 100%;}

    /* Breadcrumbs : wrap au lieu de couper */
    .breadcrumb .container{ white-space: normal; word-break: break-word;}

    /* Hero-meta : empile */
    .hero-meta{
      flex-direction: column;
      align-items: flex-start !important;
      gap: 6px;
    }
    .hero-meta .sep{ display: none;}

    /* CTA final panel */
    .final-cta .panel{ padding: 20px;}
  }

  /* ===== ≤ 560px : smartphone étroit ===== */
  @media (max-width: 560px){
    .container{ padding: 0 16px;}
    h1{ font-size: clamp(34px, 11vw, 52px) !important;}
    h2{ font-size: clamp(26px, 8vw, 38px) !important;}
    .footer-top{ grid-template-columns: 1fr !important;}
    .logos-track{ grid-template-columns: 1fr;}
    .stats .container{ grid-template-columns: 1fr !important;}
    .header-inner{ padding: 12px 0;}
    .header-right{ gap: 8px;}
    .brand{ font-size: 22px;}
  }