/* =========================================================================
 * AFGAP — design tokens (repris de la maquette Next v7 « bleu clair »)
 * ========================================================================= */
:root {
  --navy-900:#20406E; --navy-700:#3D6FB0; --navy-500:#34619B; --navy-300:#8AA4C8;
  --navy-1000:#163058;
  --signal:#5BB0F2; --signal-soft:#3A8FD8; --signal-text:#1565C0; --signal-tint:#E8F3FD;
  --alert:#FF1744;
  --ink:#1A1F26; --ink-soft:#4A5260; --ink-muted:#5A6473; --ink-faint:#8B96A6;
  --paper:#FFFFFF; --paper-warm:#FAF8F4; --paper-cream:#F5F0E6;
  --slate-300:#C7D1DD; --slate-100:#EEF2F7; --slate-50:#F7F9FC;
  --on-dark:#FFFFFF; --on-dark-muted:#C7D1DD;
  --border-on-dark:rgba(255,255,255,.14); --surface-on-dark:rgba(255,255,255,.06);

  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --font-serif:"Source Serif 4",Georgia,serif;
  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --container:1240px; --pad:24px; --radius:12px; --radius-card:16px;
}

/* ---- Base ---------------------------------------------------------------
   IMPORTANT : dans @layer base. app.css (Tailwind v4) met ses utilitaires en
   @layer utilities ; une règle d'élément HORS layer écraserait TOUS les
   utilitaires (ex. a{color} rendait « S'inscrire » bleu sur bleu). Dans le
   layer base, les utilitaires reprennent le dessus. */
@layer base {
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--paper);line-height:1.5;font-size:17px;}
  img{max-width:100%;height:auto;display:block;}
  a{color:var(--navy-700);text-decoration:none;}
  a:hover{color:var(--navy-900);}
  ::selection{background:var(--signal);color:var(--navy-900);}
  :focus-visible{outline:2px solid var(--navy-700);outline-offset:2px;}
  h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.015em;}
  p{margin:0 0 1em;}
}

.afgap-container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);}
.headline{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;}
.eyebrow{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600;color:var(--signal-text);}
.mono{font-family:var(--font-mono);}
.filet{display:inline-block;width:56px;height:3px;background:var(--signal);vertical-align:middle;}

/* ---- Header / masthead -------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:200;background:var(--paper);border-bottom:1px solid var(--slate-300);}
.masthead{position:relative;display:flex;align-items:center;min-height:64px;padding-block:20px;}
.masthead .ap-mark{position:absolute;left:var(--pad);display:grid;place-items:center;width:44px;height:44px;background:var(--navy-700);color:#fff;font-family:var(--font-serif);font-weight:600;font-size:18px;}
.masthead .brand{flex:1;text-align:center;}
.masthead .brand .wordmark{font-family:var(--font-display);font-weight:800;font-size:32px;color:var(--navy-900);line-height:1;}
.masthead .brand .sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-top:8px;}
.masthead .brand .tag{font-family:var(--font-serif);font-style:italic;font-size:13px;color:var(--ink-soft);margin-top:4px;}
.masthead .adhere{position:absolute;right:var(--pad);font-size:13px;color:var(--navy-700);white-space:nowrap;}
.primary-nav{border-top:1px solid var(--slate-300);}
.primary-nav ul{list-style:none;margin:0;padding:12px var(--pad);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;}
.primary-nav a{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:500;color:var(--ink);}
.primary-nav a:hover,.primary-nav .current-menu-item>a{color:var(--navy-900);font-weight:600;}
.primary-nav li+li::before{content:"·";color:var(--slate-300);margin-right:20px;}

/* ---- Edition bar -------------------------------------------------------- */
.edition-bar{background:var(--paper-cream);}
.edition-bar .row{display:flex;justify-content:space-between;gap:16px;padding-block:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);}
.edition-bar .row a{color:var(--navy-700);}

/* ---- Hero immersif ------------------------------------------------------ */
.hero{position:relative;isolation:isolate;background:var(--navy-900);
  background-image:radial-gradient(120% 90% at 18% 8%,var(--navy-900) 0%,var(--navy-1000) 78%);
  color:var(--on-dark);overflow:hidden;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}
.hero .inner{display:grid;grid-template-columns:1fr;gap:48px;padding-block:72px;}
@media(min-width:1024px){.hero .inner{grid-template-columns:7fr 5fr;align-items:center;padding-block:96px;min-height:78vh;}}
.hero .badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-on-dark);border-radius:9999px;padding:6px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;}
.hero .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);}
.hero .eyebrow{color:var(--signal);margin:24px 0 12px;}
.hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:#fff;
  font-size:clamp(40px,6vw,76px);line-height:1.04;margin:12px 0 0;}
.hero h1 .mark{background:var(--signal);color:var(--navy-900);padding:0 .08em;box-decoration-break:clone;}
.hero .chapo{color:var(--on-dark-muted);font-size:19px;line-height:1.6;max-width:640px;margin-top:28px;}
.hero .cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;}

/* ---- Agenda card (hero) ------------------------------------------------- */
.agenda{background:var(--surface-on-dark);border:1px solid var(--border-on-dark);border-radius:var(--radius);backdrop-filter:blur(8px);padding:24px;}
.agenda .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.agenda .head .t{font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;}
.agenda .head .r{font-family:var(--font-mono);font-size:11px;color:var(--on-dark-muted);}
.agenda ul{list-style:none;margin:0;padding:0;}
.agenda li{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--border-on-dark);}
.agenda li:first-child{border-top:0;}
.agenda .d{width:44px;text-align:right;flex:0 0 auto;}
.agenda .d .day{font-family:var(--font-serif);font-size:26px;line-height:1;}
.agenda .d .mon{font-family:var(--font-mono);font-size:11px;color:var(--signal);text-transform:uppercase;margin-top:4px;}
.agenda .m .fmt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark-muted);}
.agenda .m .ti{font-family:var(--font-serif);font-size:15px;color:#fff;margin-top:2px;line-height:1.25;}
.agenda .m .ve{font-size:12px;color:var(--on-dark-muted);margin-top:2px;}

/* ---- Buttons ------------------------------------------------------------ */
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--signal);color:var(--navy-900);font-weight:600;font-size:14px;padding:14px 24px;border-radius:var(--radius);}
.btn-primary:hover{background:var(--signal-soft);color:var(--navy-900);}
.btn-ghost{display:inline-flex;align-items:center;border:1px solid var(--border-on-dark);color:#fff;font-weight:500;font-size:14px;padding:14px 24px;border-radius:var(--radius);}
.btn-ghost:hover{background:var(--surface-on-dark);color:#fff;}

/* ---- Sections ----------------------------------------------------------- */
.section{padding-block:64px;}
.section .section-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(28px,4vw,40px);color:var(--ink);margin-top:8px;}
.grid{display:grid;gap:24px;}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr;}.grid-3{grid-template-columns:repeat(3,1fr);}}

/* ---- Cards -------------------------------------------------------------- */
.card{border:1px solid var(--slate-300);border-radius:var(--radius-card);background:var(--paper);padding:24px;display:flex;flex-direction:column;}
.card .kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--signal-text);font-weight:600;}
.card h3{font-family:var(--font-serif);font-weight:600;font-size:20px;line-height:1.25;margin:8px 0;color:var(--ink);}
.card .meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;}
.card .who{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.5;}
.badge-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--signal);color:var(--signal-text);border-radius:9999px;padding:3px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;align-self:flex-start;}

/* ---- Trombinoscope ------------------------------------------------------ */
.members{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 24px;}
@media(min-width:768px){.members{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.members{grid-template-columns:repeat(4,1fr);}}
.member .ph{aspect-ratio:1;background:var(--slate-100);border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;}
.member .ph img{width:100%;height:100%;object-fit:cover;}
.member .ph .ini{font-family:var(--font-serif);font-weight:600;font-size:40px;color:var(--navy-700);}
.member .nm{font-family:var(--font-serif);font-weight:600;font-size:18px;margin-top:12px;}
.member .ro{font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-top:4px;}
.member.bureau .ro{color:var(--navy-700);font-weight:600;}
.member .af{font-size:13px;color:var(--ink-soft);margin-top:2px;}

/* ---- Footer ------------------------------------------------------------- */
.site-footer{background:var(--navy-900);color:var(--on-dark-muted);margin-top:0;}
.site-footer .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;padding-block:48px;}
@media(min-width:900px){.site-footer .cols{grid-template-columns:repeat(4,1fr);}}
.site-footer h4{color:var(--signal);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;}
.site-footer a{color:var(--on-dark-muted);font-size:14px;display:block;padding:3px 0;}
.site-footer a:hover{color:#fff;}
.site-footer .legal{border-top:1px solid var(--border-on-dark);padding-block:20px;font-size:12px;color:var(--on-dark-muted);}

/* ---- Article (single) --------------------------------------------------- */
.article{max-width:760px;margin-inline:auto;padding-block:64px;}
.article h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(32px,5vw,48px);margin:16px 0;}
.article .lead{font-size:19px;color:var(--ink-soft);line-height:1.6;margin-top:24px;}
.article .backlink{font-size:13px;}

.gated{border:1px dashed var(--slate-300);border-radius:var(--radius);padding:16px;background:var(--slate-50);font-size:14px;color:var(--ink-muted);}

/* ---- Contraste AA — surcharges de tokens (mesurées par audit WCAG) -------
   Hors layer → priment sur les valeurs de app.css (@layer theme).
   - ink-faint #8B96A6 → #64707F : petites étiquettes mono 10-12px lisibles (≥4.5:1 sur papier)
   - accent-green #5BB0F2 → #79BFF5 (+soft) : 4.42:1 → ≥5:1 sur navy, et navy sur slab ≥5:1
   - alert #FF1744 → #E00030 : messages d'erreur ≥4.5:1 sur blanc */
:root{
  --color-ink-faint:#616D7C;
  --color-accent-green:#79BFF5;
  --color-accent-green-soft:#74B8F0;
  --color-accent-green-glow:rgba(121,191,245,.18);
  --color-alert:#E00030;
  --signal:#79BFF5;
  --ink-faint:#616D7C;
  --alert:#E00030;
}