/*
Theme Name: APE Maroc
Theme URI: https://apemaroc.ma
Author: VELIX Digital
Author URI: https://velixdigital.com
Description: Thème sur mesure de l'Association Marocaine des Entreprises faisant Appel Public à l'Épargne (APE). Direction artistique validée V3 — bleu APE, accents rouge action, or institutionnel et vert fonctionnel.
Version: 1.15.16
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: ape-maroc
*/

/* Typographie de marque — Inter variable auto-hébergée (latin ~48 Ko préchargé) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #17385f;
  --navy-900: #061a2d;
  --navy-800: #0e2b48;
  --blue: #2f74a6;
  --red: #bd2438;
  --green: #12795d;
  --gold: #c19b57;
  --paper: #f4f7fa;
  --mist: #e8eff5;
  --white: #ffffff;
  --ink: #121f2f;
  --muted: #5b6b7c; /* assombri : 4,9:1 sur --paper (l'ancien #657483 tombait à ~4,3:1) */
  --line: #dbe4ed;
  --max: 1180px;
  --section-y: clamp(72px, 8vw, 124px); /* rythme vertical fluide des sections */
  --radius: 8px;
}
/* RÈGLE COULEUR DES ACCENTS (labels, kickers, filets, métadonnées) — validée le 9 sept. 2026
   - Fond clair (blanc / --paper)   : ROUGE --red  → 6,0:1 sur blanc, 5,6:1 sur --paper (WCAG AA texte 12 px gras)
   - Fond bleu (--navy / --navy-900): DORÉ  --gold → 4,6:1 sur --navy, 6,8:1 sur --navy-900 (WCAG AA)
   Jamais l'inverse : doré sur blanc = 2,6:1, rouge sur bleu = 2,0 à 2,9:1 (non conformes).
   - UN SEUL ACCENT PAR BLOC : un bloc bleu qui porte le CTA rouge (hero, panneau Adhésion) n'utilise pas de doré ;
     un bloc clair n'utilise jamais de doré, même en filet (numéros de la méthode, citations). */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus clavier visible sur tous les fonds */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hero :focus-visible, .feature :focus-visible, .footer :focus-visible,
.split-panel :focus-visible, .proof-card.big :focus-visible, .topbar :focus-visible { outline-color: var(--gold); }

/* Ancres de sections : compensation du header sticky */
section[id], footer[id] { scroll-margin-top: 140px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.wrap, .topbar-inner, .nav, .footer-inner { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }
.topbar { background: var(--navy-900); color: rgba(255,255,255,.84); font-size: 12px; font-weight: 500; } /* 1.13.0 : plus de gras (retour gérant) */
.topbar-inner { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.topbar p { margin: 0; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(23,56,95,.12); box-shadow: 0 10px 30px rgba(8,28,48,.06); backdrop-filter: blur(16px); }
.admin-bar .site-header { top: 32px; }
.nav { min-height: 106px; display: grid; grid-template-columns: 250px 1fr auto; align-items: center; gap: 24px; }
.brand img { width: 218px; height: auto; }
.menu { display: flex; justify-content: center; align-items: center; gap: 12px; color: #203850; font-size: 14px; font-weight: 800; margin: 0; padding: 0; list-style: none; }
.menu-item { position: relative; }
.menu-link, .submenu a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 6px; }
.menu-link.active, .menu-link:hover { color: var(--red); background: rgba(189,36,56,.08); }
.menu-item.has-submenu > .menu-link::after { content: "▾"; margin-left: 7px; color: var(--red); font-size: 10px; }
.submenu { position: absolute; top: calc(100% + 16px); left: 0; width: 318px; display: grid; gap: 2px; padding: 12px; background: var(--white); border: 1px solid rgba(23,56,95,.12); border-radius: 8px; box-shadow: 0 24px 70px rgba(7,27,49,.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: 180ms ease; }
.menu-item:hover .submenu, .menu-item:focus-within .submenu, .menu-item.submenu-open .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { justify-content: space-between; color: #263d53; }
.submenu a:hover { color: var(--red); background: var(--paper); }
.submenu a::after { content: "→"; color: var(--red); }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; cursor: pointer; }
.nav-cta, .button.primary { background: var(--red); color: var(--white); box-shadow: 0 8px 22px rgba(189,36,56,.22); }
.nav-cta:hover, .button.primary:hover { background: #a71f31; box-shadow: 0 12px 30px rgba(189,36,56,.30); }
.button.secondary { background: var(--white); border-color: rgba(23,56,95,.24); color: var(--navy); }
.button.secondary:hover { border-color: var(--navy); }
.button.light { background: var(--white); color: var(--navy); }
.button.gold { background: var(--gold); color: var(--navy-900); }
.nav-cta:hover, .button:hover { transform: translateY(-2px); }
.nav-cta:active, .button:active { transform: translateY(0); }
.menu-toggle { display: none; border: 1px solid var(--line); background: var(--white); color: var(--navy); border-radius: 5px; padding: 10px 13px; font-size: 13px; font-weight: 850; }
.hero { position: relative; min-height: 600px; overflow: hidden; background: var(--navy-900); color: var(--white); }
.hero.small { min-height: 480px; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,26,45,.91), rgba(6,26,45,.64) 45%, rgba(6,26,45,.12)), linear-gradient(0deg, rgba(6,26,45,.38), transparent 42%); }
.hero-content { position: relative; z-index: 1; width: min(var(--max), calc(100% - 44px)); min-height: inherit; margin: 0 auto; padding: 84px 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow, .section-label, .kicker { color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.section-label { display: inline-flex; align-items: center; gap: 10px; }
.section-label::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.88); }
.hero .eyebrow::before { content: ""; width: 34px; height: 2px; background: rgba(255,255,255,.6); } /* hero = CTA rouge, donc pas de doré */
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 880px; margin: 18px 0 26px; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.hero.small h1 { font-size: clamp(32px, 3.8vw, 50px); }
.hero p { max-width: 640px; color: rgba(255,255,255,.82); font-size: 17px; }
.hero-actions, .action-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 22px; }
.section { padding: var(--section-y) 0; }
.section.white, .band.white { background: var(--white); }
.section-head { max-width: 900px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head-main { min-width: 0; }
/* Tête de section éditoriale : titre à gauche, chapeau calé en bas à droite (≥ 1081 px) */
.section-head.split-head { max-width: none; }
.section-head.split-head .lead { max-width: 62ch; margin: 26px 0 0; }
.section-head.compact h2 { font-size: clamp(22px, 2vw, 30px); }
.subsection { margin-top: clamp(48px, 5vw, 72px); }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2, .split-copy h2, .feature-copy h2, .contact-card h2 { margin: 16px 0 0; color: var(--navy); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; }
.lead { color: var(--muted); font-size: 17px; }
/* Espace titre → sous-titre agrandi (remarque client) */
.section-head h2 + .lead, .section-head h2 + p, .feature-copy h2 + p, .split-panel h2 + p, .split-copy h2 + p { margin-top: 26px; }
.split-panel h2, .proof-card h2 { margin-top: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card, .metric, .person, .article-card, .step-card, .content-block, .proof-card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.card { padding: 30px; min-height: 245px; position: relative; overflow: hidden; }
.card-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; background: var(--mist); color: var(--navy); border-radius: 10px; }
.block-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; background: var(--mist); color: var(--navy); border-radius: 9px; }
.content-block { display: flex; gap: 18px; align-items: flex-start; background: transparent; border: 0; border-radius: 0; padding: 26px 0; }
.content-block + .content-block { border-top: 1px solid var(--line); }
.content-block p { margin-bottom: 0; }

/* Colonnes éditoriales (Vision) : filets verticaux, pas de boîtes */
.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.edit-item { padding: 6px 40px 6px 0; }
.edit-item + .edit-item { border-left: 1px solid var(--line); padding-left: 40px; }
.edit-item strong { display: block; margin: 12px 0 12px; color: var(--navy); font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.edit-item p { color: var(--muted); margin-bottom: 0; }
.edit-item .number { display: block; }

/* Bande de chiffres sur fond navy */
.section.dark { background: var(--navy-900); color: var(--white); }
.section.dark .section-head h2 { color: var(--white); }
.section.dark .section-label { color: var(--gold); }
.section.dark .lead { color: rgba(255,255,255,.7); }
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); }
.stat { padding: 40px 36px 8px 0; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.14); padding-left: 36px; }
.stat strong { display: block; color: var(--white); font-size: clamp(38px, 3.2vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat strong::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 18px; background: var(--gold); }
.stat span { display: block; margin-top: 14px; color: rgba(255,255,255,.68); font-size: 15px; font-weight: 600; line-height: 1.5; }

/* Timeline de processus (Méthode) */
.process { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px; }
.process::before { content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 1px; background: var(--line); }
.process-step { position: relative; }
.process-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--white); border: 1px solid var(--navy); color: var(--navy); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.process-step strong { display: block; margin: 20px 0 8px; color: var(--navy); font-size: 19px; letter-spacing: -.02em; }
.process-step p { color: var(--muted); font-size: 15.5px; margin: 0; }
.card strong { display: block; color: var(--navy); font-size: 23px; line-height: 1.14; }
.card p, .metric span, .person p, .article-card p, .step-card p, .content-block p, .proof-card p { color: var(--muted); }
.number, .article-meta { color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

/* Chiffres clés : valeur en grand corps, règle or, libellé en dessous */
.metric { padding: 32px 28px 30px; }
.metric strong { display: block; color: var(--navy); font-size: clamp(40px, 3.6vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.metric strong::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 16px; background: var(--red); }
.metric span { display: block; margin-top: 13px; font-size: 15px; font-weight: 600; line-height: 1.45; }

/* Micro-interactions — cartes (annulées par prefers-reduced-motion plus bas) */
.card, .article-card, .step-card, .flow-step, .content-block, .metric { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
@media (hover: hover) {
  .card:hover, .article-card:hover, .step-card:hover, .flow-step:hover, .metric:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(12,35,58,.10); border-color: rgba(23,56,95,.22); }
}
.feature { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 610px; background: var(--navy-900); color: var(--white); border-top: 1px solid rgba(255,255,255,.14); }
.feature-media { min-height: 460px; overflow: hidden; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy { padding: 72px max(22px, calc((100vw - var(--max)) / 2)) 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.feature-copy h2 { color: var(--white); }
.feature-copy p { color: rgba(255,255,255,.76); }
/* Fonds bleus : accents dorés (voir règle en tête de fichier) */
.feature-copy .section-label, .proof-card.big .kicker { color: var(--gold); }
.split-panel .kicker { color: rgba(255,255,255,.88); } /* panneau Adhésion = CTA rouge, donc pas de doré */
.feature-note { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--gold); background: rgba(255,255,255,.06); border-radius: 0 6px 6px 0; }
.feature-note p { margin: 0; color: rgba(255,255,255,.86); font-size: 15px; }
.split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 58px; align-items: center; }
.split-panel { background: var(--navy); color: var(--white); padding: 44px; border-radius: 8px; box-shadow: 0 28px 80px rgba(12,35,58,.18); }
.split-panel h2 { color: var(--white); }
.split-panel p { color: rgba(255,255,255,.76); }
.image-card { position: relative; min-height: 430px; overflow: hidden; border-radius: 8px; background: var(--navy-900); }
.image-card img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.image-card figcaption { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 18px; border-radius: 6px; background: rgba(6,26,45,.82); color: white; backdrop-filter: blur(12px); }
.side-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.side-nav { position: sticky; top: 132px; display: grid; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.side-nav a { padding: 15px 18px; border-bottom: 1px solid var(--line); color: #31495f; font-size: 14px; font-weight: 800; }
.side-nav a:last-child { border-bottom: 0; }
.side-nav a:hover { color: var(--red); background: var(--paper); }
.content-stack { display: grid; gap: 24px; }
.content-block { padding: 34px; }
.content-block h2 { margin-bottom: 12px; color: var(--navy); font-size: 28px; letter-spacing: -.03em; }
.policy-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.flow-step { padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.flow-step strong { display: block; color: var(--navy); margin: 14px 0 8px; }
.proof-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }
.proof-card { padding: 32px; }
.proof-title { display: block; color: var(--navy); font-size: 21px; line-height: 1.2; margin: 14px 0 16px; }
.proof-card.big { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.proof-card.big::before { content: "«"; position: absolute; top: -34px; right: 14px; font-family: Georgia, "Times New Roman", serif; font-size: 230px; line-height: 1; color: rgba(193,155,87,.15); pointer-events: none; }
.proof-card.big p, .proof-card.big .lead { color: rgba(255,255,255,.78); }
.proof-card.big h2 { color: var(--white); font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.proof-card.big blockquote { margin: 16px 0 24px; padding: 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.32; letter-spacing: -.02em; color: var(--white); font-style: italic; }
.proof-author { display: block; color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.proof-author small { display: block; margin-top: 4px; color: rgba(255,255,255,.62); font-weight: 700; letter-spacing: .02em; text-transform: none; font-size: 13px; }
.article-card { overflow: hidden; }
.article-card { display: flex; flex-direction: column; }
.article-media { position: relative; overflow: hidden; }
.article-media a { display: block; }
.article-card img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform 400ms ease; }
@media (hover: hover) { .article-card:hover img { transform: scale(1.035); } }
.article-body { padding: 24px; }
.article-body h3 { margin: 10px 0 12px; color: var(--navy); font-size: 20px; line-height: 1.22; }
.article-body h3 a:hover { color: var(--red); }
.article-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card { padding: 28px; }
.step-card h3 { color: var(--navy); margin: 34px 0 12px; font-size: 24px; }
/* Mur de logos : grille à filets (une bordure extérieure, cellules séparées par 1 px), logos en couleur */
.logo-wall { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.logo-wall.institutions-wall { max-width: 860px; }
.partner-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.partner-strip.members { grid-template-columns: repeat(4, 1fr); }
.partner-strip.institutions { grid-template-columns: repeat(3, 1fr); }
.partner { min-height: 128px; display: grid; place-items: center; padding: 22px 26px; background: var(--white); color: var(--navy); font-weight: 900; text-align: center; transition: background 220ms ease; }
.partner img { max-height: 56px; width: auto; max-width: min(74%, 200px); object-fit: contain; }
.partner-strip.institutions .partner { min-height: 150px; }
.partner-strip.institutions .partner img { max-height: 78px; }
@media (hover: hover) { .partner:hover { background: var(--paper); } }
.form-shell { display: grid; grid-template-columns: 1fr .75fr; gap: 28px; align-items: start; }
.form-card, .contact-card { padding: 34px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 22px 60px rgba(12,35,58,.08); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--navy); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 13px; background: var(--paper); color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.form-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.contact-list { display: grid; gap: 12px; }
.contact-list a, .contact-list span { padding: 16px; background: var(--paper); border-radius: 6px; color: var(--navy); font-weight: 800; }
.footer { background: var(--navy-900); color: rgba(255,255,255,.72); }
.footer h4 { margin: 0 0 14px; color: var(--white); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.footer a, .footer p { color: rgba(255,255,255,.72); }
.footer a:hover { color: var(--white); }
.footer-links { display: grid; gap: 8px; font-size: 14px; }
.copyright { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: 12px; }
.copyright .credit { color: rgba(255,255,255,.5); }
.copyright .credit strong { color: rgba(255,255,255,.78); font-weight: 800; }
.copyright .credit:hover strong { color: var(--gold); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.show { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; }
.stagger.show > * { opacity: 1; transform: translateY(0); }
.stagger.show > *:nth-child(2) { transition-delay: 80ms; }
.stagger.show > *:nth-child(3) { transition-delay: 160ms; }
.stagger.show > *:nth-child(4) { transition-delay: 240ms; }
.stagger.show > *:nth-child(5) { transition-delay: 320ms; }

/* Contenu éditorial (pages / articles) */
.entry-content { max-width: 820px; }
.entry-content h2 { color: var(--navy); font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; margin: 38px 0 14px; }
.entry-content h3 { color: var(--navy); font-size: 23px; margin: 30px 0 10px; }
.entry-content p, .entry-content li { color: #3a4a5c; font-size: 17px; }
.entry-content ul { padding-left: 22px; }
.entry-content blockquote { margin: 26px 0; padding: 20px 26px; border-left: 3px solid var(--navy); background: var(--white); border-radius: 0 8px 8px 0; font-style: italic; color: var(--navy); }
.entry-content img { border-radius: 8px; }
.entry-content .chapo { margin: 0 0 30px; color: var(--navy); font-size: 20px; font-weight: 500; line-height: 1.55; }
.entry-content ul li { margin: 6px 0; }
.entry-content a:not(.button) { color: var(--red); font-weight: 600; text-decoration: none; }
.entry-content a:not(.button):hover { text-decoration: underline; }
/* Chiffres clés d'une actualité (rouge sur fond clair, cf. règle en tête de fichier) */
.entry-content .fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 22px 0 34px; padding: 0; list-style: none; }
.entry-content .fact-grid li { margin: 0; padding: 20px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; line-height: 1.45; }
.entry-content .fact-grid strong { display: block; margin-bottom: 8px; color: var(--red); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
/* Photos d'une actualité */
.actu-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 36px 0 8px; }
.actu-gallery.cols-1 { grid-template-columns: 1fr; }
.actu-gallery figure { margin: 0; }
.actu-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.actu-gallery figcaption { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.related-head { margin-bottom: 26px; }
.entry-meta { color: var(--muted); font-size: 14px; margin-bottom: 26px; }

/* Accessibilité */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); word-wrap: normal !important; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 18px; background: var(--navy); color: var(--white); font-weight: 800; }
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .reveal, .stagger > * { opacity: 1; transform: none; } }
@media (max-width: 1080px) {
  .nav { min-height: 78px; grid-template-columns: auto auto; }
  .brand img { width: 168px; }
  .menu-toggle { display: inline-flex; justify-self: end; }
  .nav-cta { display: none; }
  .menu { grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 0 18px; border-top: 1px solid var(--line); }
  .menu.open { display: flex; }
  .menu-link { width: 100%; }
  .menu-item.has-submenu .submenu { display: none; }
  .menu-item.has-submenu.submenu-open .submenu { display: grid; }
  .submenu { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 10px 16px; }
  .grid-4, .steps, .partner-strip, .policy-flow { grid-template-columns: 1fr 1fr; }
  .partner-strip.members { grid-template-columns: repeat(4, 1fr); } /* 16 logos = 4 rangées pleines */
  .partner { min-height: 104px; padding: 18px 18px; }
  .partner img { max-height: 46px; max-width: 80%; }
  /* Actualités : cartes horizontales pour éviter la carte orpheline (2 + 1) ; l'image remplit la hauteur du texte */
  .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .article-card { display: grid; grid-template-columns: minmax(220px, 38%) 1fr; min-height: 236px; }
  .article-media { min-height: 100%; }
  .article-media a, .article-card img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .article-body { padding: 26px 28px; align-self: center; }
  .feature, .split, .side-layout, .proof-grid, .form-shell { grid-template-columns: 1fr; }
  .edit-grid { grid-template-columns: 1fr; }
  .edit-item { padding: 0 0 24px; }
  .edit-item strong { margin: 8px 0 8px; }
  .edit-item + .edit-item { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat { padding: 28px 22px 12px 0; }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); padding-left: 26px; }
  .process { grid-template-columns: 1fr; gap: 0; }
  .process::before { top: 0; bottom: 0; left: 21px; right: auto; width: 1px; height: auto; }
  .process-step { padding-left: 66px; padding-bottom: 34px; }
  .process-step:last-child { padding-bottom: 0; }
  .process-num { position: absolute; left: 0; top: 0; }
  .process-step strong { margin-top: 8px; }
  .side-nav { position: static; }
  .feature-copy { padding: 56px 22px; }
}
@media (max-width: 680px) {
  .topbar { display: none; }
  .brand img { width: 150px; }
  .hero, .hero.small { min-height: 680px; }
  .hero::after { background: linear-gradient(180deg, rgba(6,26,45,.78), rgba(6,26,45,.52), rgba(6,26,45,.88)); }
  h1 { font-size: clamp(32px, 10vw, 40px); }
  .grid-2, .grid-3, .grid-4, .steps, .footer-inner, .policy-flow, .form-grid { grid-template-columns: 1fr; }
  .entry-content .fact-grid, .actu-gallery { grid-template-columns: 1fr; }
  .entry-content .chapo { font-size: 18px; }
  .article-card { display: flex; flex-direction: column; min-height: 0; }
  .article-media { min-height: 0; }
  .article-media a, .article-card img { position: static; height: auto; aspect-ratio: 16 / 10; }
  .article-body { padding: 22px; }
  /* Logos : 2 colonnes (membres), 3 sur une rangée (institutionnels), cellules compactes */
  .partner-strip, .partner-strip.members { grid-template-columns: 1fr 1fr; }
  .partner-strip.institutions { grid-template-columns: repeat(3, 1fr); }
  .partner, .partner-strip.institutions .partner { min-height: 88px; padding: 14px 16px; }
  .partner img { max-height: 40px; max-width: 82%; }
  .partner-strip.institutions .partner img { max-height: 48px; }
  /* Chiffres clés : 2 × 2 (hérité de la règle 1080 px) */
  .stat { padding: 24px 14px 10px 0; }
  .stat:nth-child(even) { padding-left: 18px; }
  .stat strong { font-size: clamp(36px, 11vw, 44px); }
  .stat span { font-size: 14px; }
  .feature-media { min-height: 360px; }
  .content-block, .contact-card, .split-panel, .form-card, .proof-card { padding: 26px; }
}

/* Header responsive — réglages validés V3 */
:root { --max: 1560px; }
.topbar-inner { min-height: 38px; gap: 24px; }
.topbar-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.social-icons { display: flex; align-items: center; gap: 7px; }
.social-icons a { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.86); line-height: 0; transition: 160ms ease; }
.social-icons svg { display: block; }
.social-icons a:hover { background: rgba(255,255,255,.14); color: #fff; transform: translateY(-1px); }
a[aria-disabled="true"] { cursor: default; }
.nav { min-height: 76px; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 2vw, 34px); padding: 8px 0; }
.brand { display: flex; align-items: center; align-self: stretch; padding: 12px 0; }
.brand img { width: auto; height: clamp(36px, 2.9vw, 44px); object-fit: contain; }
.menu { justify-content: center; gap: clamp(4px, .75vw, 12px); min-width: 0; }
.menu-link { min-height: 44px; padding: 0 clamp(9px, .75vw, 14px); white-space: nowrap; font-size: clamp(12px, .82vw, 14px); }
.nav-cta { min-width: 172px; white-space: nowrap; }
.hero-content { width: min(var(--max), calc(100% - 44px)); }
@media (min-width: 1600px) {
  :root { --max: 1680px; }
  .nav { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) auto; }
  .brand img { height: 46px; width: auto; }
  .menu-link { font-size: 15px; padding: 0 16px; }
}
@media (max-width: 1320px) {
  :root { --max: 1180px; }
  .nav { min-height: 70px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .brand img { height: 36px; width: auto; }
  .menu { gap: 2px; }
  .menu-link { font-size: 12px; padding: 0 9px; }
  .nav-cta { min-width: 150px; padding-inline: 14px; }
}
@media (max-width: 1180px) {
  .nav { min-height: 62px; grid-template-columns: auto auto; padding: 8px 0; }
  .brand { padding: 8px 0; }
  .brand img { height: 32px; width: auto; }
  .menu-toggle { display: inline-flex; justify-self: end; align-items: center; gap: 8px; }
  .menu-toggle::before { content: "☰"; font-size: 16px; line-height: 1; }
  .nav-cta { display: none; }
  .menu { grid-column: 1 / -1; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 0 18px; border-top: 1px solid var(--line); }
  .menu.open { display: flex; }
  .menu-link { width: 100%; min-height: 46px; justify-content: space-between; padding: 0 14px; font-size: 14px; white-space: normal; }
  .submenu { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 4px 0 10px 16px; display: none; }
  .menu-item.has-submenu.submenu-open .submenu { display: grid; }
  .submenu a { min-height: 42px; }
}
@media (max-width: 820px) {
  .topbar-inner { min-height: auto; padding: 8px 0; align-items: flex-start; }
  .topbar-inner p { max-width: 56ch; font-size: 11px; line-height: 1.35; }
  .topbar-actions { gap: 10px; }
  .topbar-actions > a { display: none; }
  .nav, .wrap, .footer-inner { width: min(var(--max), calc(100% - 28px)); }
  .hero-content { width: min(100% - 28px, 100%); }
}
@media (max-width: 680px) {
  .topbar { display: block; }
  .topbar-inner { justify-content: center; text-align: center; }
  .topbar-inner p { display: none; }
  .social-icons a { width: 28px; height: 28px; }
  .nav { min-height: 78px; padding: 8px 0; }
  .brand img { height: 28px; width: auto; }
  .menu-toggle { padding: 9px 11px; font-size: 12px; }
  h1 { font-size: clamp(32px, 10vw, 40px); }
  .hero p { font-size: 16px; }
  .hero-actions .button { width: 100%; }
}
@media (max-width: 420px) {
  .brand img { height: 26px; }
  .menu-toggle { min-height: 40px; }
}

/* Têtes de section éditoriales — desktop : le label occupe une colonne de marge, le titre la colonne principale,
   le chapeau (s'il existe) une troisième colonne. Plus de moitié droite vide sous les titres. */
@media (min-width: 1081px) {
  .section-head:not(.center) { display: grid; grid-template-columns: 224px minmax(0, 1fr); column-gap: 40px; align-items: start; max-width: none; }
  .section-head:not(.center) .section-label { grid-column: 1; grid-row: 1; align-self: start; align-items: flex-start; padding-top: 9px; line-height: 1.35; }
  .section-head:not(.center) .section-label::before { flex-shrink: 0; margin-top: 7px; } /* filet calé sur la première ligne, même si le label en fait deux */
  .section-head:not(.center) h2 { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 24ch; }
  .section-head:not(.center).compact h2 { max-width: 34ch; }
  .section-head:not(.center) .lead { grid-column: 2; }
  .section-head.split-head { grid-template-columns: 224px minmax(0, 1.05fr) minmax(0, .95fr); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .section-head.split-head .section-head-main { display: contents; }
  .section-head.split-head .lead { grid-column: 3; grid-row: 1; margin-top: 0; padding-top: 10px; } /* label, titre et chapeau partent de la même ligne */
}

/* =========================================================================
 * Pages intérieures (v1.5) — composants complémentaires aux blocs de la Home
 * ====================================================================== */

/* Mise en page latérale : la colonne de contenu peut rétrécir (tableaux à défilement horizontal) */
.side-layout > * { min-width: 0; }

/* Navigation latérale de rubrique */
.side-nav-head { color: var(--navy) !important; background: var(--paper); font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; }
.side-nav a.active { color: var(--red); box-shadow: inset 3px 0 0 var(--red); }

/* Blocs éditoriaux longs (sans icône) */
.content-block.editorial { display: block; padding: 30px 0; }
.content-block.editorial h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 12px 0 16px; }
.content-block.editorial p { margin-bottom: 14px; color: #3a4a5c; font-size: 17px; }
.content-block.editorial p:last-child { margin-bottom: 0; }
.pull-quote { margin: 14px 0 0; padding: 0 0 0 22px; border-left: 3px solid var(--red); color: var(--navy); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; font-style: italic; letter-spacing: -.01em; }

/* Cartes-liens (rubrique Qui sommes-nous) */
.link-card { display: flex; flex-direction: column; color: inherit; }
.link-card strong { margin: 12px 0 10px; }
.link-card p { flex: 1; }
.link-card:hover strong { color: var(--red); }

/* Mot du Président : lettre */
.letter { max-width: 760px; }
.letter p { color: #3a4a5c; font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
.letter .letter-open { color: var(--navy); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.45; font-weight: 600; letter-spacing: -.015em; margin-bottom: 26px; }
.letter-signature { margin: 34px 0 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.letter-signature strong { display: block; color: var(--navy); font-size: 19px; }
.letter-signature span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 700; }

/* Conseil d'Administration : tableau */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.board-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.board-table th { padding: 14px 18px; text-align: left; background: var(--navy); color: var(--white); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.board-table td { padding: 13px 18px; border-top: 1px solid var(--line); color: #3a4a5c; vertical-align: top; }
.board-table td strong { color: var(--navy); }
.board-table tbody tr:nth-child(even) td { background: var(--paper); }
.table-note { margin: 14px 0 0; color: var(--muted); font-size: 14px; }

/* Partenaires : liste institutionnelle */
.institution-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.institution-list li { position: relative; padding-left: 30px; color: var(--navy); font-weight: 700; }
.institution-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 2px; background: var(--red); }

/* Actions & valeurs : blocs iconés en cartes */
.actions-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.actions-grid .content-block { background: var(--white); padding: 28px; margin: 0; border: 0; }
.actions-grid .content-block + .content-block { border-top: 0; }
.actions-grid .number { display: block; margin-bottom: 10px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--navy); font-weight: 800; line-height: 1.3; }
.values-list .number { display: block; margin-bottom: 6px; }

/* Bandeau d'adhésion (bas de page) */
.cta-band { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.cta-band h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 12px; }
.cta-band p { margin-bottom: 0; max-width: 62ch; }
.cta-band .action-row { margin-top: 0; }

/* Revue de presse */
.press-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.press-item { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.press-date { color: var(--navy); font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding-top: 4px; }
.press-source { display: inline-block; margin-bottom: 8px; color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.press-body h3 { margin: 0 0 10px; color: var(--navy); font-size: 19px; line-height: 1.3; }
.press-body h3 a:hover { color: var(--red); }

/* Publications */
.publication-list { display: grid; gap: 18px; }
.publication { display: grid; grid-template-columns: 220px 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.publication:not(:has(.publication-cover)) { grid-template-columns: 1fr; }
.publication-cover img { width: 100%; height: 100%; object-fit: cover; }
.publication-body { padding: 28px; }
.publication-body h3 { margin: 10px 0 12px; color: var(--navy); font-size: 22px; line-height: 1.22; }
.publication-text p { color: var(--muted); }
.publication-body .action-row { margin-top: 16px; }

/* Formulaires : retour et champ piège */
.form-notice { margin: 0 0 18px; padding: 14px 16px; border-radius: 6px; font-weight: 700; }
.form-notice.ok { background: #e8f3ec; color: #1f6b3a; border: 1px solid #bfe0cb; }
.form-notice.ko { background: #fbeaea; color: #8f1d1d; border: 1px solid #f0c4c4; }
.field.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card { position: relative; }
.pagination { gap: 6px; }
.pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--navy); font-weight: 800; }
.pagination .page-numbers.current { background: var(--navy); color: var(--white); border-color: var(--navy); }

@media (max-width: 1080px) {
  .actions-grid { grid-template-columns: 1fr 1fr; }
  .cta-band { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .actions-grid { grid-template-columns: 1fr; }
  .press-item { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .press-date:empty { display: none; }
  .publication { grid-template-columns: 1fr; }
  .publication-cover img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
 * Accueil v1.7 — structure éditoriale calée sur l'identité du client
 * (signature en H1, chiffres clés dockés au hero, raison d'être en citation,
 * quatre piliers sur fond nuit, six actions en colonnes à filets, bénéfices membres).
 * Accent : serif système (Georgia) réservé aux citations institutionnelles.
 * ====================================================================== */
:root { --serif: Georgia, "Times New Roman", "Iowan Old Style", serif; }

/* Hero : contenu centré verticalement, bande de chiffres clés en pied */
.home-hero { display: flex; flex-direction: column; min-height: 680px; }
.home-hero .hero-content { flex: 1; min-height: 0; padding: 96px 0 64px; }
.home-hero .eyebrow { font-size: 11px; letter-spacing: .14em; }
.home-hero h1 { max-width: 13ch; margin: 22px 0 24px; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.035em; }
.home-hero p { max-width: 58ch; font-size: 18px; }

/* Raison d'être : colonne de marge (label, titre, lien) + citation serif + deux colonnes de texte */
.statement { display: grid; grid-template-columns: 224px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.statement-side h2 { margin: 14px 0 18px; color: var(--navy); font-size: 22px; line-height: 1.15; letter-spacing: -.02em; }
.statement-side .section-label { align-items: flex-start; line-height: 1.35; }
/* Labels-questions (« Pourquoi existe-t-elle ? ») : coupure équilibrée, jamais un « ? » orphelin */
.section-head .section-label, .statement-side .section-label { text-wrap: balance; }
.statement-side .section-label::before { flex-shrink: 0; margin-top: 7px; }
.statement-quote { max-width: 30ch; margin: 0 0 clamp(28px, 3vw, 40px); font-family: var(--serif); font-size: clamp(24px, 2.5vw, 38px); line-height: 1.22; letter-spacing: -.01em; color: var(--navy); }
.statement-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 900px; padding-top: 26px; border-top: 1px solid var(--line); }
.statement-cols p { margin: 0; color: var(--muted); font-size: 16.5px; }

/* Quatre piliers sur fond nuit : numéros dorés, filets, pas de boîtes */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.14); }
.pillar { padding: 36px 32px 10px 0; }
.pillar + .pillar { border-left: 1px solid rgba(255,255,255,.14); padding-left: 32px; }
.pillar-num { display: block; color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.pillar h3 { margin: 48px 0 12px; color: var(--white); font-size: clamp(22px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.02em; }
.pillar p { margin: 0; color: rgba(255,255,255,.7); font-size: 15.5px; }

/* Six actions : grille à filets horizontaux, numéro rouge (fond clair). Préfixe home- : .actions-grid existe déjà (page Présentation). */
.home-actions { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.home-action { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.home-action-num { display: block; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.home-action strong { display: block; margin: 14px 0 10px; color: var(--navy); font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.home-action p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Photo réelle de la bande « Agir ensemble » : légende en surimpression */
.feature-media { position: relative; margin: 0; }
.feature-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 24px 18px; background: linear-gradient(0deg, rgba(6,26,45,.78), transparent); color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.feature-copy p { font-size: 16.5px; }

/* Mot du Président : citation en serif */
.proof-card.big blockquote { font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.28; letter-spacing: 0; }

/* Bénéfices membres (six, en deux colonnes à filets) */
.benefits { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.benefit { padding: 20px 0 22px; border-top: 1px solid var(--line); }
.benefit strong { display: block; margin-bottom: 6px; color: var(--navy); font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.benefit p { margin: 0; color: var(--muted); font-size: 15px; }
.actions-after { margin-top: 34px; }

@media (max-width: 1080px) {
  .statement { grid-template-columns: 1fr; row-gap: 22px; }
  .statement-side h2 { margin-bottom: 10px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar { padding: 28px 24px 22px 0; }
  .pillar + .pillar { border-left: 0; padding-left: 0; }
  .pillar:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); padding-left: 24px; }
  .pillar:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .pillar h3 { margin-top: 28px; }
  .home-actions { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .facts-strip li { padding: 20px 20px 20px 0; }
}
@media (max-width: 680px) {
  .home-hero { min-height: 0; }
  .home-hero .hero-content { padding: 64px 0 48px; }
  .home-hero h1 { font-size: clamp(34px, 10.5vw, 44px); }
  .home-hero p { font-size: 16px; }
  .facts-strip { width: min(100% - 28px, 100%); grid-template-columns: 1fr 1fr; }
  .facts-strip li { padding: 18px 14px 18px 0; }
  .facts-strip li + li { border-left: 0; padding-left: 0; }
  .facts-strip li:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); padding-left: 16px; }
  .facts-strip li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .facts-strip strong { font-size: 26px; }
  .facts-strip span { font-size: 12.5px; }
  .statement-quote { font-size: 23px; }
  .statement-cols { grid-template-columns: 1fr; gap: 18px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar:nth-child(even) { border-left: 0; padding-left: 0; }
  .pillar + .pillar { border-top: 1px solid rgba(255,255,255,.14); }
  .home-actions { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
}

/* =========================================================================
 * 1.7.1 — Rythme d'espacement, tailles de texte et d'icônes, espaces vides desktop
 * (retours du gérant sur captures annotées, 13 sept. 2026)
 * Échelle : label → titre 16 px · titre → texte 14-16 px · texte → bouton 32 px · champs → bouton 30 px
 * ====================================================================== */
:root { --gap-cta: 32px; --gap-fields: 30px; }

/* Texte → bouton : une seule valeur partout */
.hero-actions, .action-row { margin-top: var(--gap-cta); }
.actions-after { margin-top: 40px; }
.feature-note + .action-row, .proof-card .action-row, .split-panel .action-row { margin-top: var(--gap-cta); }
.form-grid { margin-bottom: var(--gap-fields); }
.form-note { margin-top: 18px; }
.form-card h2 + .lead, .form-card h2 + p { margin-top: 18px; }
.form-card .form-grid, .form-card .form-notice { margin-top: 28px; }
.form-card .lead + .form-grid, .form-card .form-notice + .form-grid { margin-top: 0; }
.field { gap: 8px; }

/* Titre → texte dans les blocs */
.edit-item strong, .action-item strong, .home-action strong { margin: 14px 0 12px; }
.article-body h3 { margin: 12px 0 12px; }
.proof-title { margin: 14px 0 14px; }
.card strong { margin-bottom: 12px; }
.pillar { padding-top: 26px; }
.pillar h3 { margin: 22px 0 12px; }

/* Corps de texte : 16 px minimum, chapeaux 18 px en desktop */
.pillar p, .home-action p, .process-step p, .edit-item p, .card p, .step-card p, .flow-step p,
.benefit p, .stat span, .proof-card p, .article-body p, .content-block p, .metric span { font-size: 16px; }
.feature-note p { font-size: 16px; }
.footer-links { font-size: 15px; gap: 10px; }
.footer p { font-size: 15px; }
.copyright { font-size: 13px; }
.form-note, .table-note { font-size: 14px; }
@media (min-width: 1081px) { .lead, .hero p { font-size: 18px; } .feature-copy p { font-size: 17px; } }

/* Icônes : 48 px de boîte, 24 px de tracé ; réseaux sociaux 30 px */
.block-icon { width: 48px; height: 48px; border-radius: 10px; }
.block-icon svg, .card-icon svg { width: 24px; height: 24px; }
.card-icon { width: 52px; height: 52px; }
.social-icons { gap: 8px; }
.social-icons a { width: 30px; height: 30px; }
.social-icons svg { width: 14px; height: 14px; }

/* Tête de section avec action à droite (bouton « Toutes les actualités ») : plus de moitié droite vide */
.head-action { margin-top: 22px; }
@media (min-width: 1081px) {
  .section-head.with-action { grid-template-columns: 224px minmax(0, 1fr) auto; }
  .section-head.with-action .head-action { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; margin: 0 0 6px; }
}

/* Raison d'être : citation et texte côte à côte, toute la largeur utilisée */
@media (min-width: 1081px) {
  .statement-body { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: clamp(48px, 5vw, 80px); align-items: start; }
  .statement-quote { max-width: none; margin: 0; }
  .statement-cols { grid-template-columns: 1fr; gap: 22px; max-width: none; padding: 14px 0 0 0; border-top: 0; border-left: 1px solid var(--line); padding-left: clamp(28px, 3vw, 44px); }
}

/* Partenaires institutionnels : grille pleine largeur, logo + nom dans la même cellule */
.institution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.institution { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 28px 30px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; text-align: center; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.institution img { height: 84px; width: auto; max-width: 72%; object-fit: contain; margin-bottom: 26px; }
.institution strong { display: block; max-width: 26ch; color: var(--navy); font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
@media (hover: hover) { .institution:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(12,35,58,.10); border-color: rgba(23,56,95,.22); } }
@media (max-width: 1080px) { .institution-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .institution { padding: 30px 18px 24px; } .institution img { height: 64px; } .institution strong { font-size: 15px; } }
@media (max-width: 680px) { .institution-grid { grid-template-columns: 1fr; } .institution { flex-direction: row; text-align: left; gap: 20px; padding: 20px; } .institution img { height: 52px; max-width: 120px; margin: 0; } }

/* =========================================================================
 * 1.11.0 — Pied de page en trois temps (référence fournie par le gérant) :
 * bandeau d'identité (logo · contact direct · réseaux), corps (inscription aux
 * actualités + trois colonnes de liens), barre légale avec retour en haut.
 * Bloc bleu : accent doré uniquement (règle couleur), filets, aucune boîte.
 * ====================================================================== */
.footer { background: var(--navy-900); color: rgba(255,255,255,.72); }
.footer-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(40px, 4.5vw, 56px) 0 clamp(28px, 3vw, 40px); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-logo img { width: 150px; height: auto; margin: 0; }
.footer-coord { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 48px; font-size: 16px; }
.footer-coord a { color: var(--white); font-weight: 700; transition: color 160ms ease; }
.footer-coord a:hover { color: var(--gold); }
.footer-coord span { color: rgba(255,255,255,.62); }
.footer-social { gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); }
.footer-social a:hover { border-color: var(--gold); color: var(--gold); background: none; transform: none; }
.footer-social a[aria-disabled="true"] { cursor: default; }
.footer-body { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 72px); padding: clamp(48px, 5vw, 72px) 0 clamp(48px, 5vw, 64px); }
.footer-brand p { max-width: 40ch; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; }
.footer-news { max-width: 420px; margin-top: 30px; scroll-margin-top: 140px; }
.footer-news-title { margin: 0 0 18px; max-width: 30ch; color: var(--white); font-size: 17px; font-weight: 700; line-height: 1.4; }
.footer-news-field { position: relative; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.28); transition: border-color 160ms ease; }
.footer-news-field:focus-within { border-color: var(--gold); }
.footer-news label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer-news input { flex: 1; min-width: 0; min-height: 52px; padding: 0 56px 0 0; border: 0; border-radius: 0; background: none; color: var(--white); font-size: 15px; }
.footer-news input::placeholder { color: rgba(255,255,255,.5); }
.footer-news input:focus { outline: none; } /* le filet doré du champ porte le focus */
.footer-news button { position: absolute; right: 0; top: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--gold); color: var(--navy-900); cursor: pointer; transform: translateY(-50%); transition: background 160ms ease; }
.footer-news button:hover { background: var(--white); }
.footer-news button svg { width: 18px; height: 18px; }
.footer-news-note { margin: 12px 0 0; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.5; }
.footer-news-note a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 3px; }
.footer-news-note a:hover { color: var(--white); }
.footer-news-note.ok { color: var(--gold); font-weight: 600; }
.footer-news-note.ko { color: #f1b3ba; font-weight: 600; }
.footer h4 { margin: 0 0 20px; color: var(--white); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.footer-col { padding-top: 0; }
.footer-links { display: grid; gap: 13px; font-size: 15px; }
.footer-links a { justify-self: start; color: rgba(255,255,255,.74); line-height: 1.4; transition: color 160ms ease; }
.footer-links a:hover { color: var(--white); }
.footer-cta { margin-top: 26px; min-height: 42px; padding: 0 18px; font-size: 11px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 28px; padding: 20px 0; font-size: 13px; }
.footer-legal { display: flex; align-items: center; }
.footer-legal a { padding: 0 16px; border-left: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); font-weight: 600; line-height: 1.2; }
.footer-legal a:first-child { padding-left: 0; border-left: 0; }
.footer-legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { color: rgba(255,255,255,.6); text-align: center; white-space: nowrap; }
.credit { display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.credit:hover { color: rgba(255,255,255,.8); }
.footer-top { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.82); transition: border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.footer-top:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.footer-top svg { width: 18px; height: 18px; }
.copyright { display: none; }
@media (max-width: 1080px) {
  .footer-head { grid-template-columns: 1fr auto; gap: 24px 32px; }
  .footer-coord { grid-column: 1 / -1; justify-content: flex-start; }
  .footer-social { grid-row: 1; grid-column: 2; justify-self: end; }
  .footer-body { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer-brand { grid-column: 1 / -1; max-width: 560px; }
  .footer-bottom-inner { grid-template-columns: 1fr auto; grid-template-areas: "legal top" "copy credit"; gap: 12px 24px; }
  .footer-legal { grid-area: legal; }
  .footer-top { grid-area: top; justify-self: end; }
  .footer-copy { grid-area: copy; text-align: left; }
  .credit { grid-area: credit; justify-self: end; }
}
@media (max-width: 680px) {
  .footer-head { grid-template-columns: 1fr; gap: 22px; padding: 44px 0 28px; }
  .footer-coord { justify-content: flex-start; gap: 6px 28px; }
  .footer-social { grid-row: auto; grid-column: auto; justify-self: start; }
  .footer-body { grid-template-columns: 1fr; gap: 34px; padding: 40px 0; }
  .footer-news { margin-top: 26px; }
  .footer-bottom-inner { grid-template-columns: 1fr; grid-template-areas: "legal" "copy" "credit" "top"; justify-items: center; text-align: center; gap: 14px; padding: 24px 0; }
  .footer-legal { justify-content: center; }
  .footer-copy { white-space: normal; text-align: center; }
  .footer-top, .credit { justify-self: center; }
}


/* =========================================================================
 * 1.8.0 — Carte contact (icônes Lucide), en-tête plus bas, animations de menu
 * ====================================================================== */
.contact-card h2 { margin-bottom: 0; }
.contact-list { gap: 12px; margin-top: 28px; }
.contact-list > * { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.contact-ico { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; color: var(--navy); }
.contact-list small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-list a:hover { color: var(--red); }
.contact-list a:hover .contact-ico { border-color: rgba(189,36,56,.4); color: var(--red); }

/* En-tête : hauteur réduite, lien actif souligné par un filet animé, sous-menu en fondu-glissé */
.nav { min-height: 66px; padding: 6px 0; }
.brand { padding: 8px 0; }
.brand img { height: clamp(34px, 2.6vw, 40px); }
.menu-link { position: relative; min-height: 42px; transition: color 180ms ease, background 180ms ease; }
.menu-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform 240ms cubic-bezier(.2,.7,.2,1); }
.menu-link:hover, .menu-link.active { background: transparent; }
.menu-link:hover::after, .menu-link.active::after { transform: scaleX(1); }
.menu-item.has-submenu > .menu-link::after { right: 30px; }
.menu-item.has-submenu > .menu-link .caret, .menu-item.has-submenu > .menu-link::before { content: none; }
.submenu { top: calc(100% + 10px); transform: translateY(10px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity 200ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 220ms; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* pont invisible entre le lien et le sous-menu */
.menu-item:hover .submenu, .menu-item:focus-within .submenu, .menu-item.submenu-open .submenu { pointer-events: auto; transition: opacity 200ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), visibility 0s; }
.submenu a { opacity: 0; transform: translateX(-6px); transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), color 160ms ease, background 160ms ease; }
.menu-item:hover .submenu a, .menu-item:focus-within .submenu a, .menu-item.submenu-open .submenu a { opacity: 1; transform: translateX(0); }
.menu-item:hover .submenu a:nth-child(2), .menu-item:focus-within .submenu a:nth-child(2) { transition-delay: 40ms; }
.menu-item:hover .submenu a:nth-child(3), .menu-item:focus-within .submenu a:nth-child(3) { transition-delay: 80ms; }
.menu-item:hover .submenu a:nth-child(4), .menu-item:focus-within .submenu a:nth-child(4) { transition-delay: 120ms; }
.menu-item:hover .submenu a:nth-child(5), .menu-item:focus-within .submenu a:nth-child(5) { transition-delay: 160ms; }
@media (min-width: 1600px) { .brand img { height: 42px; } }
@media (max-width: 1320px) { .nav { min-height: 60px; } .brand img { height: 32px; } }
@media (max-width: 1180px) {
  .nav { min-height: 58px; }
  .menu-toggle { transition: background 160ms ease, border-color 160ms ease; }
  .menu-toggle::before { transition: transform 200ms ease; display: inline-block; }
  .menu-toggle[aria-expanded="true"]::before { content: "✕"; }
  .menu-toggle[aria-expanded="true"] { background: var(--paper); border-color: rgba(23,56,95,.3); }
  /* Menu mobile : ouverture en fondu + hauteur animée (plus de display:none brutal) */
  .menu { display: flex; max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; transition: max-height 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease, padding 320ms ease, border-color 320ms ease; }
  .menu.open { max-height: 720px; opacity: 1; padding: 14px 0 18px; border-top-color: var(--line); }
  .menu-link::after { display: none; }
  .menu-link.active { background: rgba(189,36,56,.08); }
  .menu-link:hover { background: var(--paper); }
  .menu-item.has-submenu > .menu-link::after { display: inline; position: static; transform: none; background: none; height: auto; transition: transform 220ms ease; }
  .menu-item.has-submenu.submenu-open > .menu-link::after { transform: rotate(180deg); }
  .submenu, .menu-item.has-submenu .submenu { display: grid; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: none; transition: max-height 280ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease, padding 280ms ease; padding-top: 0; padding-bottom: 0; }
  .menu-item.has-submenu.submenu-open .submenu { max-height: 320px; opacity: 1; pointer-events: auto; padding: 4px 0 10px 16px; }
  .submenu a { opacity: 1; transform: none; }
}
@media (max-width: 680px) { .nav { min-height: 64px; } .brand img { height: 28px; } }

/* =========================================================================
 * 1.8.1 — Sous-menu minimaliste : chevron fin dans le lien, panneau épuré sans flèches,
 * survol par indentation, ouverture en fondu-glissé avec apparition décalée des liens
 * ====================================================================== */
.menu-item.has-submenu > .menu-link::before { content: none; }
.menu-item.has-submenu > .menu-link::after { content: ""; right: 12px; } /* même filet animé que les autres liens */
.menu-item.has-submenu > .menu-link { gap: 6px; }
.menu-chevron { flex-shrink: 0; margin-top: 1px; color: currentColor; opacity: .6; transition: transform 260ms cubic-bezier(.2,.7,.2,1), opacity 160ms ease; }
.menu-item:hover > .menu-link .menu-chevron, .menu-item:focus-within > .menu-link .menu-chevron, .menu-item.submenu-open > .menu-link .menu-chevron { transform: rotate(180deg); opacity: 1; }
.submenu { width: 268px; padding: 8px; gap: 0; border: 1px solid rgba(23,56,95,.10); border-radius: 12px; box-shadow: 0 18px 50px rgba(7,27,49,.14), 0 2px 6px rgba(7,27,49,.06); }
.submenu a { position: relative; justify-content: flex-start; min-height: 40px; padding: 0 14px 0 16px; border-radius: 8px; color: var(--navy); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.submenu a::after { content: none; }
.submenu a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--red); transform: translateY(-50%); transition: height 200ms cubic-bezier(.2,.7,.2,1); }
.submenu a:hover, .submenu a:focus-visible { color: var(--red); background: var(--paper); padding-left: 22px; transition-property: opacity, transform, color, background, padding; }
.submenu a:hover::before, .submenu a:focus-visible::before { height: 18px; }
@media (max-width: 1180px) {
  .menu-item.has-submenu > .menu-link::after { display: none; }
  .menu-item.has-submenu.submenu-open > .menu-link .menu-chevron { transform: rotate(180deg); }
  .submenu { width: 100%; padding: 4px 0 10px 16px; border: 0; border-radius: 0; box-shadow: none; }
  .submenu a { padding-left: 12px; }
  .submenu a::before { display: none; }
  .submenu a:hover { padding-left: 12px; }
}
/* CLIENT-01 — « Qui sommes-nous » est un bouton : styles natifs neutralisés (spécificité nulle,
   les règles .menu-link ci-dessus s'appliquent à l'identique) ; « submenu-closed » reproduit l'état fermé
   quand le bouton referme le sous-menu alors que le pointeur ou le focus est encore dessus. */
:where(button.menu-link) { appearance: none; margin: 0; border: 0; background: transparent; color: inherit; letter-spacing: inherit; word-spacing: inherit; text-transform: inherit; text-indent: inherit; text-shadow: inherit; text-align: inherit; text-rendering: inherit; cursor: pointer; }
.menu-item.submenu-closed > .menu-link .menu-chevron { transform: none; opacity: .6; }
@media (min-width: 1181px) {
  .menu-item.submenu-closed .submenu { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity 200ms ease, transform 260ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 220ms; }
  .menu-item.submenu-closed .submenu a:nth-child(n) { opacity: 0; transform: translateX(-6px); transition-delay: 0s; }
}
/* Carte contact : les spans internes héritaient du padding/fond de .contact-list span → icône décalée, ligne trop haute */
.contact-list > * { min-height: 72px; padding: 12px 16px; }
.contact-list > * > span { padding: 0; background: none; border-radius: 0; line-height: 1.3; }
.contact-list > * > span:not(.contact-ico) { display: block; }
.contact-ico { padding: 0; }
.contact-ico svg { display: block; }
.contact-list small { line-height: 1.2; margin-bottom: 4px; }

/* =========================================================================
 * 1.9.0 — Actualités : page liste et page article
 * (analyse UI/UX du 13 sept. 2026, vague 5 : colonne de lecture 700 px ≈ 72 caractères,
 * rail de partage, navigation précédente / suivante, chiffres clés à filets ;
 * liste calée sur les pages sœurs de la rubrique : hero photo, navigation latérale,
 * dernière actualité à la une, bandeau d'adhésion)
 * ====================================================================== */

/* --- Article : colonne de lecture --- */
.article-layout { display: grid; gap: 36px; }
.article-main { min-width: 0; }
.entry-content { max-width: 700px; }
.entry-content p, .entry-content li { font-size: 17px; line-height: 1.65; }
.entry-content p { margin-bottom: 20px; }
.entry-content h2 { margin: 44px 0 14px; font-size: clamp(23px, 2.2vw, 29px); line-height: 1.2; }
.entry-content h3 { margin: 32px 0 10px; font-size: 21px; }
.entry-content .chapo { margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 20px; line-height: 1.5; }
.entry-content ul { padding-left: 20px; margin: 0 0 22px; }
.entry-content ul li { margin: 8px 0; }
.entry-content ul li::marker { color: var(--red); }
.entry-content a:not(.button) { text-decoration: underline; text-decoration-color: rgba(189,36,56,.35); text-underline-offset: 3px; }
.entry-content a:not(.button):hover { text-decoration-color: currentColor; }

/* Chiffres clés : filets au lieu de boîtes (même logique que les grilles de la home) */
.entry-content .fact-grid { grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 0; margin: 26px 0 38px; }
.entry-content .fact-grid li { margin: 0; padding: 18px 0 20px; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.entry-content .fact-grid strong { margin-bottom: 8px; font-size: 34px; }
.actu-gallery { margin: 40px 0 8px; }
.actu-gallery figcaption { font-size: 13.5px; }

/* Précédente / suivante */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; max-width: 700px; margin-top: 48px; border-top: 1px solid var(--line); }
.post-nav-item { display: block; padding: 22px 0 4px; }
.post-nav-item.next { text-align: right; }
.post-nav-label { display: block; margin-bottom: 8px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.post-nav-title { display: block; color: var(--navy); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; transition: color 180ms ease; }
.post-nav-item:hover .post-nav-title { color: var(--red); }

/* Partager + retour : rangée sous l'article en mobile, rail sticky à droite en desktop */
.article-aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.article-share { display: flex; align-items: center; gap: 14px; }
.article-share-label { color: var(--navy); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-share-list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.article-share-list a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(23,56,95,.24); border-radius: 6px; color: var(--navy); transition: transform 180ms ease, border-color 180ms ease, color 180ms ease; }
.article-share-list a:hover { border-color: var(--navy); color: var(--red); transform: translateY(-2px); }
.article-back { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.article-back:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 481px) { .entry-content .fact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-item { padding: 18px 0; }
  .post-nav-item + .post-nav-item { border-top: 1px solid var(--line); }
  .post-nav-item.next { text-align: left; }
  .post-nav-item.empty { display: none; }
  .entry-content .chapo { font-size: 18px; }
}
@media (min-width: 1081px) {
  .article-layout { grid-template-columns: minmax(0, 700px) 224px; justify-content: space-between; column-gap: 48px; }
  .entry-content p, .entry-content li { font-size: 18px; }
  .entry-content .fact-grid li { font-size: 15.5px; }
  .article-aside { position: sticky; top: 96px; display: block; padding: 0; border: 0; }
  .article-share { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .article-back { margin-top: 22px; }
}

/* --- Liste des actualités : à la une + grille deux colonnes --- */
.news-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); margin-bottom: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.news-featured-media { position: relative; overflow: hidden; }
.news-featured-media a { display: block; height: 100%; }
.news-featured-media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms ease; }
@media (hover: hover) { .news-featured:hover .news-featured-media img { transform: scale(1.035); } }
.news-featured-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 36px 40px; }
.news-featured-body .section-label { margin-bottom: 20px; }
.news-featured-body h2 { margin: 12px 0 14px; color: var(--navy); font-size: clamp(22px, 2vw, 28px); line-height: 1.18; letter-spacing: -.02em; }
.news-featured-body h2 a:hover { color: var(--red); }
.news-featured-body p { margin: 0; color: var(--muted); font-size: 16px; }
.news-featured-body .article-link { margin-top: 16px; }
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Carte orpheline en fin de grille : pleine largeur, image à gauche */
.news-grid > .article-card:nth-child(odd):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 40%) 1fr; min-height: 236px; }
.news-grid > .article-card:nth-child(odd):last-child .article-media { min-height: 100%; }
.news-grid > .article-card:nth-child(odd):last-child .article-media a,
.news-grid > .article-card:nth-child(odd):last-child img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.news-grid > .article-card:nth-child(odd):last-child .article-body { padding: 26px 28px; align-self: center; }
@media (max-width: 1080px) {
  .news-grid > .article-card { display: flex; flex-direction: column; min-height: 0; } /* la règle tablette des cartes horizontales ne s'applique pas ici : deux colonnes suffisent */
  .news-grid > .article-card .article-media { min-height: 0; }
  .news-grid > .article-card .article-media a, .news-grid > .article-card img { position: static; height: auto; aspect-ratio: 3 / 2; }
  .news-grid > .article-card .article-body { padding: 24px; align-self: auto; }
}
@media (max-width: 680px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-featured-media img { aspect-ratio: 16 / 10; }
  .news-featured-body { padding: 24px 22px 26px; }
  .news-grid { grid-template-columns: 1fr; gap: 16px; }
  .news-grid > .article-card:nth-child(odd):last-child { grid-column: auto; display: flex; flex-direction: column; min-height: 0; }
  .news-grid > .article-card:nth-child(odd):last-child .article-media { min-height: 0; }
  .news-grid > .article-card:nth-child(odd):last-child .article-media a,
  .news-grid > .article-card:nth-child(odd):last-child img { position: static; height: auto; aspect-ratio: 16 / 10; }
  .news-grid > .article-card:nth-child(odd):last-child .article-body { padding: 22px; }
}
/* Signature en texte (plus de logo) */
.credit { gap: 6px; color: rgba(255,255,255,.55); }
.credit strong { color: rgba(255,255,255,.85); font-weight: 800; letter-spacing: .01em; transition: color 160ms ease; }
.credit:hover strong { color: var(--gold); }

/* =========================================================================
 * 1.9.1 — Grilles à filets et numéros éditoriaux (retour du gérant, 13 sept. 2026)
 * Les « cartes » bordées (contour gris, coins arrondis, ombre au survol) deviennent des cellules
 * à filet supérieur, comme les six actions et les six bénéfices de la home. Les numéros « 01 »
 * en 11 px rouge deviennent des numéros en grand corps, sans zéro, navy sur clair / doré sur bleu.
 * ====================================================================== */
.filets { gap: 0 40px; background: none; border: 0; border-radius: 0; }
.filets > .card { padding: 26px 0 30px; min-height: 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.filets > .card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.filets > .card strong { font-size: 22px; }
.filets > .link-card { padding-bottom: 28px; }
.filets > .link-card:hover { border-top-color: var(--navy); }
.filets > .link-card:hover .article-link { text-decoration: underline; text-underline-offset: 4px; }
.filets > .link-card p { margin-bottom: 22px; }

.num, .number.num, .pillar-num, .home-action-num { display: block; color: var(--navy); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -.02em; text-transform: none; font-variant-numeric: tabular-nums; }
.pillar-num { color: var(--gold); }
.filets > .card .number.num + strong, .edit-item .number.num + strong, .home-action-num + strong { margin-top: 18px; }
.pillar-num + h3 { margin-top: 18px; }
.filets > .card .number:not(.num) + strong { margin-top: 14px; }

@media (max-width: 1080px) {
  .filets { gap: 0 32px; }
}
@media (max-width: 680px) {
  .filets > .card { padding: 22px 0 24px; }
  .num, .number.num, .pillar-num, .home-action-num { font-size: 30px; }
}

/* Même traitement pour les deux derniers restes du patron « boîtes » (page Présentation) */
.actions-grid { gap: 0 40px; background: none; border: 0; border-radius: 0; overflow: visible; }
.actions-grid .content-block, .actions-grid .content-block + .content-block { padding: 26px 0 28px; border-top: 1px solid var(--line); }
.process { gap: 0 34px; border-top: 1px solid var(--line); }
.process::before { display: none; }
.process-step { padding-top: 24px; }
.process-num { position: static; display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--navy); font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.process-step strong { margin-top: 18px; }
@media (max-width: 1080px) {
  .actions-grid { gap: 0 32px; }
  .process { border-top: 0; }
  .process-step { padding: 22px 0 24px; border-top: 1px solid var(--line); }
  .process-step:last-child { padding-bottom: 24px; }
  .process-num { position: static; font-size: 30px; }
  .process-step strong { margin-top: 16px; }
}

/* =========================================================================
 * 1.9.2 — Valeurs en grille éditoriale (Engagements) + filet du menu calé sur le texte
 * ====================================================================== */
/* Cinq valeurs + le titre dans une grille 3 × 2 : la tête de section occupe la première cellule,
 * chaque valeur porte son nom en serif (l'accent typographique du site) et un court filet rouge. */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; }
.values-intro { padding: 0 40px 44px 0; }
.values-intro h2 { margin: 16px 0 0; color: var(--navy); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; }
.values-intro .lead { max-width: 38ch; margin: 22px 0 0; }
.value { padding: 34px 40px 40px 0; border-top: 1px solid var(--line); }
.values-grid > :not(:nth-child(3n+1)) { border-left: 1px solid var(--line); padding-left: 40px; }
.value-icon { display: block; color: var(--navy); line-height: 0; }
.value-icon svg { width: 26px; height: 26px; }
.value-name { margin: 26px 0 0; color: var(--navy); font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
.value-name::after { content: ""; display: block; width: 28px; height: 2px; margin: 16px 0 18px; background: var(--red); }
.value p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 1080px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
  .values-grid > :not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; }
  .values-grid > :nth-child(even) { border-left: 1px solid var(--line); padding-left: 32px; }
  .values-intro, .value { padding-right: 32px; }
  .values-intro { padding-bottom: 36px; }
}
@media (max-width: 680px) {
  .values-grid { grid-template-columns: 1fr; }
  .values-grid > :nth-child(even) { border-left: 0; padding-left: 0; }
  .values-intro { padding: 0 0 28px; }
  .value { padding: 24px 0 28px; }
  .value-name { margin-top: 18px; font-size: 24px; }
}

/* Filet du menu : même retrait que le texte, et il s'arrête avant le chevron */
:root { --menu-pad: clamp(9px, .75vw, 14px); }
@media (min-width: 1600px) { :root { --menu-pad: 16px; } }
@media (max-width: 1320px) { :root { --menu-pad: 9px; } }
.menu-link::after { left: var(--menu-pad); right: var(--menu-pad); }
.menu-item.has-submenu > .menu-link::after { right: calc(var(--menu-pad) + 18px); } /* chevron 12 px + écart 6 px */

/* =========================================================================
 * 1.10.0 — Mouvement (inspiration : maquette Dribbble UzOman, lue image par image le 13 sept. 2026)
 * 1. Les filets se tracent de gauche à droite quand une grille entre à l'écran.
 * 2. Le hero se pose en trois temps : la photo revient d'un léger zoom, le titre se dévoile, le reste suit.
 * 3. Les champs de formulaire apparaissent en cascade (classe .stagger existante).
 * 4. Section « Dates clés » (Qui sommes-nous) : année géante, ligne de jalons, précédent / suivant.
 * Tout est en CSS + 40 lignes de JS ; prefers-reduced-motion neutralise l'ensemble (règle en fin de bloc).
 * ====================================================================== */

/* 1. Filets tracés — uniquement les cellules qui portent déjà un filet supérieur */
.stagger > .card, .stagger > .value, .stagger > .home-action, .stagger > .benefit, .stagger.actions-grid > .content-block { position: relative; border-top-color: transparent; }
.stagger > .card::before, .stagger > .value::before, .stagger > .home-action::before, .stagger > .benefit::before, .stagger.actions-grid > .content-block::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line);
  transform-origin: left center; transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.stagger:not(.show) > .card::before, .stagger:not(.show) > .value::before, .stagger:not(.show) > .home-action::before, .stagger:not(.show) > .benefit::before, .stagger.actions-grid:not(.show) > .content-block::before { transform: scaleX(0); }
.stagger.show > *:nth-child(2)::before { transition-delay: 80ms; }
.stagger.show > *:nth-child(3)::before { transition-delay: 160ms; }
.stagger.show > *:nth-child(4)::before { transition-delay: 240ms; }
.stagger.show > *:nth-child(5)::before { transition-delay: 320ms; }
.stagger.show > *:nth-child(6), .stagger.show > *:nth-child(6)::before { transition-delay: 400ms; }
.stagger.show > *:nth-child(7), .stagger.show > *:nth-child(7)::before { transition-delay: 480ms; }
.stagger.show > *:nth-child(8), .stagger.show > *:nth-child(8)::before { transition-delay: 560ms; }
.stagger.show > *:nth-child(n+9), .stagger.show > *:nth-child(n+9)::before { transition-delay: 640ms; }

/* 2. Hero en trois temps */
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-photo { animation: hero-settle 1800ms cubic-bezier(.2,.7,.2,1) both; will-change: transform; }
.hero-content.reveal { transform: none; } /* le mouvement est porté par les enfants, pas par le bloc */
.hero-content > * { transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.7,.2,1), clip-path 900ms cubic-bezier(.2,.7,.2,1); }
.hero-content:not(.show) > * { opacity: 0; transform: translateY(26px); }
.hero-content:not(.show) > h1 { clip-path: inset(0 0 100% 0); }
.hero-content.show > *:nth-child(2) { transition-delay: 120ms; }
.hero-content.show > *:nth-child(3) { transition-delay: 260ms; }
.hero-content.show > *:nth-child(4) { transition-delay: 400ms; }
.hero-content.show > *:nth-child(5) { transition-delay: 520ms; }

/* 4. Dates clés */
.timeline-section { overflow: hidden; }
.timeline-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
.timeline-year { color: var(--white); font-size: clamp(84px, 11vw, 160px); font-weight: 400; line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.timeline-year, .timeline-panel > :not(.timeline-controls) { transition: opacity 240ms ease, transform 240ms ease; }
.timeline-stage.is-changing .timeline-year, .timeline-stage.is-changing .timeline-panel > :not(.timeline-controls) { opacity: 0; transform: translateY(10px); }
.timeline-date { display: block; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.timeline-title { margin: 14px 0 12px; color: var(--white); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.timeline-text { margin: 0; max-width: 48ch; color: rgba(255,255,255,.72); font-size: 16px; min-height: 3.2em; }
.timeline-controls { display: flex; gap: 8px; margin-top: 24px; }
.timeline-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.32); border-radius: 6px; background: transparent; color: var(--white); font-size: 18px; line-height: 1; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease; }
.timeline-btn:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.timeline-btn:disabled { opacity: .35; cursor: default; background: transparent; border-color: rgba(255,255,255,.32); }
.timeline-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; margin: 52px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.timeline-track::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: var(--progress, 0%); background: var(--gold); transition: width 500ms cubic-bezier(.2,.7,.2,1); }
.timeline-dot { position: relative; display: block; width: 100%; padding: 22px 12px 0 0; background: none; border: 0; color: rgba(255,255,255,.55); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-align: left; cursor: pointer; transition: color 200ms ease; }
.timeline-dot::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--navy-900); border: 1px solid rgba(255,255,255,.5); transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.timeline-dot:hover { color: var(--white); }
.timeline-dot:hover::before { border-color: var(--gold); }
.timeline-dot[aria-current="true"] { color: var(--white); }
.timeline-dot[aria-current="true"]::before { background: var(--gold); border-color: var(--gold); transform: scale(1.25); }
.timeline .action-row { margin-top: 40px; }
@media (max-width: 1080px) {
  .timeline-stage { grid-template-columns: 1fr; row-gap: 20px; }
  .timeline-year { font-size: clamp(72px, 14vw, 120px); }
}
@media (max-width: 680px) {
  .timeline-track { grid-template-columns: repeat(3, 1fr); row-gap: 26px; border-top: 0; margin-top: 40px; }
  .timeline-track::before { display: none; }
  .timeline-track li { border-top: 1px solid rgba(255,255,255,.18); }
  .timeline-dot { padding-top: 18px; font-size: 12px; }
  .timeline-text { min-height: 0; }
}

/* Mouvement réduit : tout est visible d'emblée, rien ne se trace ni ne se pose */
@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .hero-content:not(.show) > * { opacity: 1; transform: none; clip-path: none; }
  .stagger:not(.show) > .card::before, .stagger:not(.show) > .value::before, .stagger:not(.show) > .home-action::before, .stagger:not(.show) > .benefit::before, .stagger.actions-grid:not(.show) > .content-block::before { transform: none; }
  .timeline-stage.is-changing .timeline-year, .timeline-stage.is-changing .timeline-panel > * { opacity: 1; transform: none; }
}

/* =========================================================================
 * 1.11.1 — Pied de page : retours du gérant (colonnes, gras, note du champ e-mail)
 * ====================================================================== */
/* Colonnes de liens dimensionnées par leur contenu (plus de zones vides entre elles),
 * la colonne de marque absorbe le reste, écart renforcé entre elle et la première colonne de liens. */
.footer-body { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: clamp(40px, 4vw, 64px); }
.footer-brand { max-width: 520px; }
.footer-body > .footer-col:nth-child(2) { margin-left: clamp(24px, 4vw, 72px); }
.footer-col h4 { white-space: nowrap; }
@media (max-width: 1080px) {
  .footer-body { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .footer-body > .footer-col:nth-child(2) { margin-left: 0; }
}
@media (max-width: 680px) {
  .footer-body { grid-template-columns: 1fr; }
}
/* Barre légale : liens en graisse normale, le nom de l'agence en blanc sans gras */
.footer-legal a { font-weight: 400; }
.credit strong { font-weight: 400; color: var(--white); }
/* Note sous le champ e-mail : petite phrase de signature */
.footer-brand .footer-news-note { margin: 10px 0 0; max-width: none; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.48); } /* plus spécifique que .footer-brand p (15 px) */
.footer-brand .footer-news-note a { color: rgba(255,255,255,.62); }
.footer-brand .footer-news-note.ok { color: var(--gold); }
.footer-brand .footer-news-note.ko { color: #f1b3ba; }

/* =========================================================================
 * 1.12.1 — scène : numéros « 01 » blancs, icônes blanches 52 px (retour gérant)
 * 1.12.0 — Motifs de référence sur la home (gérant, 13 sept. 2026) : cartes de verre
 * sous le hero, scène photo à onglets (piliers), accordéon à rail numéroté (actions),
 * carrousel (actualités), adhésion pleine largeur + liste fléchée. Charte inchangée :
 * navy / rouge sur clair / doré sur bleu, Inter, filets ; arrondis 10–14 px réservés
 * aux panneaux de verre, aux photos et à l'accordéon.
 * ====================================================================== */
:root { --glass: rgba(6,26,45,.62); --glass-line: rgba(255,255,255,.16); --radius-lg: 14px; }

/* --- Chiffres clés : quatre cartes de verre à cheval sur le bas du hero --- */
.home-hero .hero-content { padding-bottom: 168px; }
.hero-cards { position: relative; z-index: 2; margin-top: -104px; }
.facts-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.facts-cards li { padding: 28px 26px 24px; background: rgba(6,26,45,.78); border: 1px solid var(--glass-line); border-radius: 12px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(6,26,45,.22); }
.facts-cards strong { display: block; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.16); color: var(--white); font-size: clamp(36px, 3.4vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts-cards span { display: block; margin-top: 16px; color: rgba(255,255,255,.74); font-size: 14px; font-weight: 600; line-height: 1.4; }
#raison-d-etre { padding-top: calc(var(--section-y) - 20px); }

/* --- Piliers : scène photo pleine largeur, onglets numérotés, panneau de verre --- */
.pillars-section { padding-bottom: 0; }
.pillars-section .section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.stage { position: relative; min-height: 640px; margin-bottom: 56px; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,26,45,.62), rgba(6,26,45,.22) 55%, rgba(6,26,45,.08)), linear-gradient(0deg, rgba(6,26,45,.55), transparent 45%); }
.stage-inner { position: relative; z-index: 1; min-height: inherit; }
.stage-tabs { position: absolute; left: 0; bottom: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 190px)); gap: 22px; width: min(100%, 60%); }
.stage-tab { display: grid; gap: 0; padding: 0; border: 0; background: none; color: var(--white); text-align: left; cursor: pointer; }
.stage-tab-num { color: var(--white); font-size: 13px; font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.stage-tab-bar { position: relative; display: block; height: 2px; margin: 10px 0 14px; background: rgba(255,255,255,.32); overflow: hidden; }
.stage-tab-bar::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--gold); }
.stage-tab.is-active .stage-tab-bar::after { width: 100%; }
.stage.is-playing .stage-tab.is-active .stage-tab-bar::after { animation: stage-progress var(--stage-delay, 6000ms) linear both; }
@keyframes stage-progress { from { width: 0; } to { width: 100%; } }
.stage-tab-label { color: rgba(255,255,255,.72); font-size: 17px; font-weight: 700; letter-spacing: -.01em; transition: color 200ms ease; }
.stage-tab.is-active .stage-tab-label, .stage-tab:hover .stage-tab-label { color: var(--white); }
.stage-panels { position: absolute; right: 0; bottom: -56px; width: min(100%, 440px); display: grid; }
.stage-panel { grid-area: 1 / 1; padding: 44px 44px 40px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(6,26,45,.35); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 500ms ease, transform 600ms cubic-bezier(.2,.7,.2,1), visibility 0s 500ms; }
.stage-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stage-panel-num { display: block; color: var(--white); font-size: 13px; font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.stage-panel h3 { margin: 20px 0 16px; color: var(--white); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.stage-panel p { margin: 0; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.6; }
.stage-panel-icon { display: block; margin-top: 30px; color: var(--white); line-height: 0; }
.stage-panel-icon svg { width: 52px; height: 52px; stroke-width: 1.15; }

/* --- Actions : accordéon à rail numéroté --- */
.acc { --rail: 132px; display: grid; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(12,35,58,.18); }
.acc-item { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); grid-template-areas: "title num" "panel num"; background: var(--navy-900); color: var(--white); }
.acc-item + .acc-item { border-top: 1px solid rgba(255,255,255,.08); }
.acc-title { grid-area: title; margin: 0; }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 40px; border: 0; background: none; color: var(--white); font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; text-align: left; cursor: pointer; transition: background 200ms ease; }
.acc-btn:hover { background: rgba(255,255,255,.04); }
.acc-chevron { flex-shrink: 0; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: rgba(255,255,255,.8); transition: transform 300ms ease, border-color 200ms ease; }
.acc-item.is-open .acc-chevron { transform: rotate(180deg); border-color: rgba(255,255,255,.5); }
.acc-panel { grid-area: panel; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms cubic-bezier(.2,.7,.2,1); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; min-height: 0; overflow: hidden; padding: 0 40px; visibility: hidden; transition: visibility 0s 420ms; }
.acc-item.is-open .acc-body { visibility: visible; transition-delay: 0s; }
.acc-body p { max-width: 58ch; margin: 0; padding: 0 0 40px; color: rgba(255,255,255,.8); font-size: 17px; line-height: 1.6; }
.acc-icon { display: block; padding: 0 20px 28px 0; color: rgba(255,255,255,.16); line-height: 0; }
.acc-icon svg { stroke-width: .9; }
.acc-num { grid-area: num; display: flex; align-items: center; justify-content: center; background: var(--red); color: rgba(255,255,255,.55); font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: font-size 300ms ease, color 300ms ease; }
.acc-item.is-open .acc-num { color: var(--white); font-size: clamp(56px, 5vw, 76px); }

/* --- Actualités : carrousel à crans --- */
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: -.01em; padding-bottom: 6px; border-bottom: 1px solid var(--navy); transition: color 160ms ease, border-color 160ms ease; }
.text-link:hover { color: var(--red); border-color: var(--red); }
.text-link svg { transition: transform 200ms ease; }
.text-link:hover svg { transform: translateX(4px); }
.carousel { position: relative; }
.carousel-track { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { display: none; }
.news-card { flex: 0 0 calc((100% - 56px) / 3.25); scroll-snap-align: start; display: flex; flex-direction: column; }
.news-media { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.news-media img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.news-card:hover .news-media img { transform: scale(1.04); }
.news-pill { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(6,26,45,.55); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.news-body { padding: 22px 0 0; }
.news-body h3 { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.news-body h3 a:hover { color: var(--red); }
.news-body p { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.carousel-foot { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.carousel-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(23,56,95,.3); border-radius: 50%; background: none; color: var(--navy); cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease, opacity 160ms ease; }
.carousel-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn:disabled:hover { background: none; color: var(--navy); border-color: rgba(23,56,95,.3); }
.carousel-progress { position: relative; flex: 1; height: 2px; margin-left: 20px; background: var(--line); }
.carousel-progress span { position: absolute; top: 0; left: 0; height: 100%; width: 30%; background: var(--navy); transition: left 200ms ease, width 200ms ease; }

/* --- Adhésion : photo à droite, panneau à gauche ; liste fléchée à filets --- */
.feature.join { grid-template-columns: 1.05fr .95fr; border-top: 0; }
.feature.join .feature-media { order: 2; }
.feature.join .feature-copy { order: 1; padding: 72px 64px 72px max(22px, calc((100vw - var(--max)) / 2)); }
.feature.join .section-label { color: rgba(255,255,255,.88); } /* bloc bleu avec CTA rouge : pas de doré */
.join-benefits { background: var(--paper); }
.arrow-list .benefit { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; }
.benefit-arrow { color: var(--navy); line-height: 0; margin-top: 2px; }
.arrow-list .benefit strong { font-size: 17px; }
.join-benefits .statement-side h2 { font-size: 22px; }

@media (max-width: 1080px) {
  .facts-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .facts-cards li { padding: 22px 20px 20px; }
  .home-hero .hero-content { padding-bottom: 150px; }
  .hero-cards { margin-top: -84px; }
  .stage { min-height: 560px; }
  .stage-tabs { width: 100%; bottom: 300px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .stage-panels { left: 0; right: 0; width: auto; bottom: -56px; }
  .stage-panel { padding: 32px; }
  .acc { --rail: 100px; }
  .acc-btn { padding: 24px 28px; }
  .acc-body { grid-template-columns: 1fr; padding: 0 28px; }
  .acc-icon { display: none; }
  .news-card { flex-basis: calc((100% - 28px) / 2.15); }
  .feature.join { grid-template-columns: 1fr; }
  .feature.join .feature-media { order: 1; min-height: 360px; }
  .feature.join .feature-copy { order: 2; padding: 56px 22px; }
}
@media (max-width: 680px) {
  .facts-cards { gap: 10px; }
  .facts-cards strong { font-size: 32px; padding-bottom: 12px; }
  .facts-cards span { margin-top: 10px; font-size: 13px; }
  .home-hero .hero-content { padding-bottom: 120px; }
  .hero-cards { margin-top: -64px; }
  .stage { min-height: 0; margin-bottom: 0; }
  .stage-photo { position: relative; height: 240px; }
  .stage::after { display: none; }
  .stage-inner { display: grid; gap: 22px; padding: 24px 0 0; }
  .stage-tabs { position: static; width: auto; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
  .stage-tab-label { font-size: 15px; }
  .stage-panels { position: static; width: auto; }
  .stage-panel { background: var(--navy-800); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: 26px 22px; }
  .stage-panel:not(.is-active) { display: none; }
  .pillars-section { padding-bottom: var(--section-y); }
  .acc { --rail: 64px; border-radius: 10px; }
  .acc-btn { padding: 18px 18px; font-size: 18px; gap: 14px; }
  .acc-chevron { width: 32px; height: 32px; }
  .acc-body { padding: 0 18px; }
  .acc-body p { padding-bottom: 22px; font-size: 16px; }
  .acc-num { font-size: 24px; }
  .acc-item.is-open .acc-num { font-size: 40px; }
  .news-card { flex-basis: 84%; }
  .carousel-foot { margin-top: 22px; }
  .feature.join .feature-media { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .stage-tab.is-active .stage-tab-bar::after { width: 100%; animation: none; } }

/* --- 1.12.2 — Têtes de section en pile (retour gérant : sous-titre + accroche, sans chapeau) --- */
.section-head.stack { display: block; max-width: 640px; margin-bottom: clamp(32px, 3.6vw, 48px); }
.section-kicker { display: block; color: var(--red); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.section-head.stack h2 { margin: 12px 0 0; max-width: 24ch; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
.section.dark .section-kicker { color: var(--gold); }
.section-head.stack.with-link { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-head.stack.with-link .head-action { margin: 0 0 6px; flex-shrink: 0; }
.section-head.stack.compact h2 { font-size: clamp(22px, 2vw, 28px); }
@media (max-width: 680px) { .section-head.stack.with-link { flex-direction: column; align-items: flex-start; } .section-head.stack.with-link .head-action { margin: 0; } }

/* --- 1.12.2 — Accordéon : rail en dégradé continu rouge → bleu nuit, volet ouvert légèrement éclairé --- */
.acc { position: relative; }
.acc::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--rail); background: linear-gradient(180deg, #c8283f 0%, var(--red) 30%, #6e1a27 68%, var(--navy-900) 100%); }
.acc-item { position: relative; background: linear-gradient(var(--navy-900), var(--navy-900)) left top / calc(100% - var(--rail)) 100% no-repeat; }
.acc-item.is-open { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%) left top / calc(100% - var(--rail)) 100% no-repeat, linear-gradient(var(--navy-900), var(--navy-900)) left top / calc(100% - var(--rail)) 100% no-repeat; }
.acc-num { background: none; z-index: 1; }

/* --- 1.12.4 — « Qui est l'APE ? » en deux colonnes : photo arrondie, contenu en pile (retour gérant) --- */
.about { padding-top: calc(var(--section-y) - 12px); }
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.about-media { position: relative; margin: 0; }
.about-media::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; border-radius: var(--radius-lg); background: var(--mist); }
.about-media img { position: relative; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(12,35,58,.18); }
.about-copy h2 { margin: 12px 0 0; color: var(--navy); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
.about-quote { margin: 26px 0 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; letter-spacing: -.005em; color: var(--navy); }
.about-text { margin-top: 24px; }
.about-text p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.about-copy .text-link { margin-top: 12px; }
@media (max-width: 1080px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-media { max-width: 560px; } .about-media img { aspect-ratio: 3 / 2; } }
@media (max-width: 680px) { .about-media::before { inset: 14px -14px -14px 14px; } .about-quote { font-size: 19px; } }

/* --- 1.12.5 — Piliers : la photo couvre toute la section (tête comprise), bande blanche sous le panneau (retour gérant) --- */
.section.dark.pillars-section { position: relative; padding-bottom: 56px; background: linear-gradient(var(--navy-900), var(--navy-900)) top / 100% calc(100% - 56px) no-repeat var(--white); } /* plus spécifique que .section.dark */
.pillars-section .stage-photo { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 56px); object-fit: cover; }
.pillars-section::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 56px); pointer-events: none; background: linear-gradient(180deg, rgba(6,26,45,.96) 0%, rgba(6,26,45,.86) 24%, rgba(6,26,45,.42) 50%, rgba(6,26,45,.22) 74%, rgba(6,26,45,.62) 100%), linear-gradient(90deg, rgba(6,26,45,.55), rgba(6,26,45,.08) 60%); }
.pillars-section > .wrap, .pillars-section .stage { position: relative; z-index: 1; }
.pillars-section .stage { min-height: 560px; margin-bottom: 0; }
.pillars-section .stage::after { display: none; }
@media (max-width: 1080px) { .pillars-section .stage { min-height: 520px; } }
@media (max-width: 680px) {
  .section.dark.pillars-section { padding-bottom: var(--section-y); background: var(--navy-900); }
  .pillars-section .stage-photo, .pillars-section::after { height: 100%; }
  .pillars-section::after { background: rgba(6,26,45,.84); }
  .pillars-section .stage-photo { position: absolute; }
  .pillars-section .stage { min-height: 0; }
  .pillars-section .stage-inner { padding-top: 0; }
}

/* --- 1.12.7 — Adhésion : un seul bloc (panneau + bénéfices en trois colonnes), plus de tête répétée --- */
.feature.join .section-kicker { color: rgba(255,255,255,.88); }
.feature.join .section-kicker + h2 { margin-top: 12px; }
.join-benefits { background: var(--white); padding: clamp(44px, 5vw, 64px) 0 var(--section-y); }
.arrow-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 48px); }
@media (max-width: 1080px) { .arrow-list.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .arrow-list.cols-3 { grid-template-columns: 1fr; } .join-benefits { padding-top: 36px; } }

/* =========================================================================
 * 1.13.0 — Design system étendu à tout le site (retours gérant, 14 sept. 2026)
 * 1. Liens fléchés : la flèche est une icône qui glisse au survol (Lire la suite, Découvrir…).
 * 2. Boutons : pilule, texte en bas de casse, flèche qui glisse, contour fin comme les cercles
 *    du carrousel et de l'accordéon ; plus de soulèvement au survol.
 * 3. Têtes de section : le motif « en pile » de la home (sous-titre en bas de casse, H2 ≤ 34 px)
 *    devient le défaut sur toutes les pages ; le chapeau, quand il existe, se place sous le titre.
 * ====================================================================== */
/* --- 1. Liens fléchés --- */
.article-link { gap: 8px; }
.article-link svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 220ms ease; }
.article-link:hover svg { transform: translateX(4px); }
.article-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- 2. Boutons --- */
.nav-cta, .button { min-height: 48px; padding: 0 22px; gap: 10px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-transform: none; box-shadow: none; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
.nav-cta::after, .button::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center / contain no-repeat; transition: transform 220ms ease; }
.nav-cta:hover::after, .button:hover::after { transform: translateX(4px); }
.nav-cta:hover, .button:hover, .nav-cta:active, .button:active { transform: none; box-shadow: none; }
.nav-cta, .button.primary { background: var(--red); border-color: var(--red); color: var(--white); }
.nav-cta:hover, .button.primary:hover { background: #a71f31; border-color: #a71f31; }
.button.secondary { background: transparent; border-color: rgba(23,56,95,.3); color: var(--navy); }
.button.secondary:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.button.light { background: var(--white); border-color: var(--white); color: var(--navy); }
.button.light:hover { background: transparent; border-color: rgba(255,255,255,.6); color: var(--white); }
.hero .button.secondary { border-color: rgba(255,255,255,.6); color: var(--white); }
.hero .button.secondary:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
.nav-cta { min-width: 0; min-height: 44px; padding: 0 20px; font-size: 13px; }
.footer-cta { font-size: 13px; min-height: 44px; }

/* --- 3. Têtes de section en pile partout --- */
.section-label, .kicker { display: block; color: var(--red); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; text-wrap: balance; }
.section-label::before { display: none; }
.section-head h2 { margin-top: 12px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
.section-head h2 + .lead, .section-head h2 + p { margin-top: 20px; }
.section-head.compact h2 { font-size: clamp(22px, 2vw, 28px); }
.section.dark .section-label, .feature-copy .section-label, .proof-card.big .kicker { color: var(--gold); }
.split-panel .kicker, .feature.join .section-kicker { color: rgba(255,255,255,.88); }
.statement-side .section-label { line-height: 1.4; }
.statement-side h2 { margin-top: 12px; }
.split-panel h2, .proof-card h2, .feature-copy h2 { margin-top: 12px; }
@media (min-width: 1081px) {
  .section-head:not(.center) { display: block; max-width: 720px; }
  .section-head:not(.center) h2 { margin-top: 12px; max-width: 24ch; }
  .section-head:not(.center) .lead { margin-top: 20px; max-width: 62ch; padding-top: 0; }
  .section-head:not(.center).compact h2 { max-width: 30ch; }
  .section-head.split-head { display: block; max-width: 720px; }
  .section-head.split-head .section-head-main { display: block; }
  .section-head.with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
  .section-head.with-action > :not(.head-action) { flex: 0 1 720px; }
  .section-head.with-action .head-action { margin: 0 0 6px; flex-shrink: 0; }
}

/* --- 4. Bandeau d'adhésion des pages intérieures : bloc photo + panneau de la home ; frise : boutons en cercles --- */
.cta-join { min-height: 520px; }
.cta-join .feature-media { min-height: 360px; }
.topbar-actions a, .topbar p { font-weight: 500; }
.timeline-btn { border-radius: 50%; border-color: rgba(255,255,255,.32); }
.timeline-btn:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); }

/* =========================================================================
 * 1.14.0 — ADN de la home sur les pages intérieures (gérant, 14 sept. 2026) : article enrichi,
 * cartes de verre (Devenir membre), scène à onglets (valeurs), cartes photo + frise sur photo
 * (Qui sommes-nous), accordéon (objectifs des partenariats).
 * ====================================================================== */
/* --- Cartes de verre sur bleu (composant) --- */
.glass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.glass-card { position: relative; padding: 30px 28px 32px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background 220ms ease, border-color 220ms ease, transform 220ms ease; }
.glass-card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); transform: translateY(-3px); }
.glass-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.glass-card-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--white); }
.glass-card-icon svg { stroke-width: 1.5; }
.glass-card-num { color: rgba(255,255,255,.55); font-size: 13px; font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.glass-card h3 { margin: 0 0 10px; color: var(--white); font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
.glass-card p { margin: 0; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.6; }
.section.dark .section-head.stack .lead { color: rgba(255,255,255,.72); }
@media (max-width: 1080px) { .glass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 680px) { .glass-grid { grid-template-columns: 1fr; } .glass-card { padding: 24px 22px 26px; } }

/* --- Scène à onglets : nombre d'onglets variable, nom en serif (valeurs) --- */
.stage-tabs { grid-template-columns: repeat(var(--tabs, 4), minmax(0, 190px)); width: min(100%, var(--tabs-w, 60%)); } /* home : 4 onglets sur 60 %, identique à la version validée */
.values-stage .stage { --tabs-w: 62%; }
.values-stage .stage-tab-label { font-size: 15px; }
.stage-panel h3.serif { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); }
.section.dark.pillars-section .section-head.stack .lead { max-width: 56ch; }
@media (max-width: 680px) { .stage-tabs { grid-template-columns: repeat(2, 1fr); width: auto; max-width: none; } }

/* --- Sections sur photo (frise Dates clés) --- */
.section.dark.photo-section { position: relative; }
.photo-section .stage-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,26,45,.94) 0%, rgba(6,26,45,.86) 40%, rgba(6,26,45,.78) 100%); }
.photo-section > .wrap { position: relative; z-index: 1; }
.photo-section .timeline-panel { padding: 32px 34px 30px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.photo-section .timeline-date { color: var(--white); }
.timeline-btn svg { width: 18px; height: 18px; }

/* --- Cartes photo (Découvrir l'association) --- */
.photo-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.photo-link { color: inherit; }
.photo-link .news-media { display: block; }
.photo-link .news-media img { aspect-ratio: 4 / 3; }
.photo-link .news-pill { font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.photo-link .news-body { display: block; padding-top: 18px; }
.photo-link .news-body strong { display: block; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 19px; line-height: 1.25; letter-spacing: -.02em; transition: color 160ms ease; }
.photo-link:hover .news-body strong { color: var(--red); }
.photo-link .news-body p { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
@media (max-width: 1080px) { .photo-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .photo-links { grid-template-columns: 1fr; gap: 28px; } }

/* --- Article enrichi --- */
.article-hero.hero.small { min-height: 520px; }
.article-hero .hero-content { padding-bottom: 72px; }
.article-hero h1 { max-width: 20ch; font-size: clamp(30px, 3.4vw, 46px); }
.article-hero .news-pill { position: static; display: inline-block; margin-top: 4px; }
.article-section { padding-top: clamp(48px, 5vw, 72px); }
.article-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.article-rail-inner { display: grid; gap: 30px; }
.article-rail-label { display: block; margin-bottom: 12px; color: var(--navy); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.article-toc li { border-bottom: 1px solid var(--line); }
.article-toc a { display: block; padding: 11px 0 11px 14px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.35; transition: color 160ms ease, border-color 160ms ease, padding-left 160ms ease; }
.article-toc a:hover, .article-toc a.is-current { color: var(--navy); border-left-color: var(--red); padding-left: 18px; }
.article-share { display: block; }
.article-share-list a { width: 44px; height: 44px; border-radius: 50%; border-color: rgba(23,56,95,.3); }
.article-share-list a:hover { background: var(--navy); border-color: var(--navy); color: var(--white); transform: none; }
.text-link.article-back { color: var(--navy); font-size: 14px; }
.text-link.article-back svg { transition: transform 200ms ease; }
.text-link.article-back:hover svg { transform: translateX(-4px); }
.article-aside { display: none; }
.post-nav { max-width: 700px; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-nav-item { display: flex; align-items: center; gap: 16px; padding: 0; }
.post-nav-item.next { flex-direction: row-reverse; text-align: right; }
.post-nav-thumb { flex-shrink: 0; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; }
.post-nav-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
.post-nav-item:hover .post-nav-thumb img { transform: scale(1.06); }
.post-nav-body { min-width: 0; }
.post-nav-label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.post-nav-item.next .post-nav-label { flex-direction: row-reverse; }
.post-nav-title { font-size: 16px; }
@media (min-width: 1081px) {
  .article-layout { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .article-rail-inner { position: sticky; top: 120px; }
}
@media (max-width: 1080px) {
  .article-rail { order: 2; padding-top: 24px; border-top: 1px solid var(--line); }
  .article-rail-inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .article-toc { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .article-rail-inner { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; gap: 18px; }
  .post-nav-item.next { flex-direction: row; text-align: left; }
  .post-nav-item.next .post-nav-label { flex-direction: row; }
}

/* =========================================================================
 * 1.15.0 — Critique UI des pages Engagements et Devenir membre (gérant, 14 sept. 2026)
 * rythme clair / sombre, convictions en pastilles de verre sur photo, accordéon des six points,
 * panneau contact à côté du formulaire, numéros « 01 » partout, surtitre du hero en bas de casse,
 * hero sans boutons (le bandeau d'adhésion les porte), note à filet, titres de feature au gabarit.
 * ====================================================================== */
/* --- Surtitre du hero : même dessin que les sous-titres --- */
.hero .eyebrow, .home-hero .eyebrow { display: block; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.4; }
.hero .eyebrow::before { display: none; }
.hero h1 { margin-top: 14px; }
/* --- Feature : titre au gabarit, note à filet --- */
.feature-copy h2 { max-width: 22ch; font-size: clamp(26px, 2.4vw, 34px); }
.feature-note { padding: 2px 0 2px 18px; background: none; border-left: 2px solid var(--gold); border-radius: 0; }
.about .feature-note { margin-top: 22px; border-left-color: var(--red); }
.about .feature-note p { color: var(--ink); font-size: 16px; }
.about .action-row { margin-top: 28px; }
/* --- Plaidoyer : photo 4/3 avec les trois convictions en pastilles de verre --- */
@media (min-width: 1081px) { .plaidoyer .about-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.plaidoyer .about-media { padding-bottom: 44px; }
.plaidoyer .about-media::before { inset: 24px -24px 20px 24px; }
.plaidoyer .about-media img { aspect-ratio: 4 / 3; }
.chips { position: absolute; left: 20px; right: -4px; bottom: 0; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 16px 16px 15px; background: rgba(6,26,45,.82); border: 1px solid var(--glass-line); border-radius: 12px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(6,26,45,.25); color: var(--white); }
.chip-num { display: block; margin-bottom: 8px; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.chips strong { display: block; margin-bottom: 6px; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.chips p { margin: 0; color: rgba(255,255,255,.74); font-size: 13px; line-height: 1.45; }
/* --- Devenir membre : panneau contact à côté du formulaire --- */
.form-aside { align-self: start; padding: 40px; background: var(--navy-900); color: var(--white); border-radius: var(--radius-lg); }
.form-aside .section-kicker { color: var(--gold); }
.form-aside h3 { margin: 12px 0 0; color: var(--white); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.form-aside-list { display: grid; gap: 14px; margin: 28px 0 22px; }
.form-aside-list > * { display: flex; align-items: center; gap: 14px; color: var(--white); font-size: 16px; font-weight: 600; }
.form-aside-list a:hover { color: var(--gold); }
.form-aside-ico { display: inline-flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--white); }
.text-link.light { color: var(--white); border-color: rgba(255,255,255,.5); }
.text-link.light:hover { color: var(--gold); border-color: var(--gold); }
.form-aside .action-row { margin-top: 30px; }
@media (max-width: 1080px) {
  .plaidoyer .about-media { max-width: none; }
}
@media (max-width: 680px) {
  .plaidoyer .about-media { padding-bottom: 0; }
  .chips { position: static; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .chips li { box-shadow: none; }
  .form-aside { padding: 28px 22px; }
}

/* --- 1.15.1 — Devenir membre : cartes de verre sur photo (voile plus léger), sous-titre + titre seulement --- */
.join-why::after { background: linear-gradient(180deg, rgba(6,26,45,.93) 0%, rgba(6,26,45,.8) 45%, rgba(6,26,45,.7) 100%); }
.join-why .glass-card { background: rgba(6,26,45,.42); }
.join-why .glass-card:hover { background: rgba(6,26,45,.55); }

/* --- 1.15.2 — Valeurs en rail vertical à étapes (Engagements) : plus de double « slide » après le hero --- */
.rail-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.rail-head { position: sticky; top: 120px; margin-bottom: 0; }
.rail { position: relative; margin: 0; padding: 0; list-style: none; }
.rail::before { content: ""; position: absolute; top: 34px; bottom: 34px; left: 27px; width: 1px; background: var(--line); transform: scaleY(0); transform-origin: top; transition: transform 1400ms cubic-bezier(.2,.7,.2,1); }
.rail.show::before { transform: scaleY(1); }
.rail-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 26px; padding: 22px 0; }
.rail-item:first-child { padding-top: 6px; }
.rail-dot { position: relative; z-index: 1; display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border: 1px solid rgba(23,56,95,.3); border-radius: 50%; background: var(--paper); color: var(--navy); font-size: 13px; font-weight: 900; letter-spacing: .1em; font-variant-numeric: tabular-nums; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; }
.rail-item:hover .rail-dot { background: var(--red); border-color: var(--red); color: var(--white); }
.rail-body { padding-top: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rail-item:last-child .rail-body { border-bottom: 0; }
.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rail-name { margin: 0; color: var(--navy); font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } /* 1.15.7 : Inter comme tous les titres (le serif faisait incohérence) */
.rail-icon { flex-shrink: 0; color: var(--navy); line-height: 0; opacity: .7; }
.rail-icon svg { stroke-width: 1.5; }
.rail-body p { max-width: 52ch; margin: 12px 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6; }
@media (max-width: 1080px) { .rail-grid { grid-template-columns: 1fr; gap: 36px; } .rail-head { position: static; } }
@media (max-width: 680px) { .rail-item { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; } .rail-dot { width: 44px; height: 44px; font-size: 12px; } .rail::before { left: 21px; } .rail-name { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .rail::before { transform: none; } }

/* --- 1.15.2 — Devenir membre : cartes en clair (fond papier, cartes blanches, texte sombre) pour ne pas enchaîner deux blocs sombres --- */
.glass-grid.light .glass-card { background: var(--white); border-color: rgba(23,56,95,.1); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(12,35,58,.04); }
.glass-grid.light .glass-card:hover { background: var(--white); border-color: rgba(23,56,95,.22); box-shadow: 0 22px 50px rgba(12,35,58,.1); }
.glass-grid.light .glass-card-icon { border-color: rgba(23,56,95,.22); color: var(--navy); }
.glass-grid.light .glass-card-num { color: var(--red); }
.glass-grid.light .glass-card h3 { color: var(--navy); }
.glass-grid.light .glass-card p { color: var(--muted); }

/* --- 1.15.3 — Article : la colonne de lecture prend toute la largeur restante (retour gérant), corps 18 px --- */
.article-main .entry-content, .article-main .post-nav { max-width: none; }
.article-main .entry-content p, .article-main .entry-content li { font-size: 18px; line-height: 1.7; }
.article-main .entry-content .chapo { font-size: 21px; line-height: 1.55; }
.article-main .entry-content h2 { font-size: clamp(24px, 2.3vw, 31px); }
.article-main .entry-content h3 { font-size: 22px; }
@media (min-width: 1081px) { .article-layout { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(48px, 5vw, 72px); } }

/* --- 1.15.4 — Devenir membre : section Demande d'adhésion sur blanc (retour gérant), carte du formulaire délimitée par un filet léger --- */
#formulaire.white .form-card { border: 1px solid rgba(23,56,95,.1); box-shadow: 0 1px 0 rgba(12,35,58,.04); }

/* --- 1.15.5 — Appel à l'action des pages intérieures : clair et compact avant le pied de page (retour gérant) --- */
.cta-light { padding: clamp(48px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.cta-light-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cta-light-head h2 { margin: 12px 0 0; max-width: 18ch; color: var(--navy); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; }
.cta-light-body { padding-top: 6px; }
.cta-light-body p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.cta-light-body .action-row { margin-top: 26px; }
@media (max-width: 1080px) { .cta-light-grid { grid-template-columns: 1fr; gap: 24px; } .cta-light-body { padding-top: 0; } }

/* --- 1.15.6 — Cartes d'actualités de la home généralisées : liste des actualités (à la une + grille), Actualités & publications --- */
.news-grid, .grid-3.news-cards, .grid-3.rubriques { gap: 28px; }
.news-grid > .news-card { flex: none; }
.news-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 48px); align-items: center; margin-bottom: clamp(36px, 4vw, 52px); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.news-featured .news-media img { aspect-ratio: 3 / 2; }
.news-featured .news-body { padding-top: 0; }
.news-featured .news-body h2 { margin: 10px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.025em; }
.news-featured .news-body h2 a:hover { color: var(--red); }
.news-featured .news-body p { font-size: 17px; }
.rubriques .photo-link .news-media img { aspect-ratio: 3 / 2; }
.rubriques .photo-link .news-pill { letter-spacing: .02em; }
.news-grid > .news-card:nth-child(odd):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; } /* carte orpheline en pleine largeur, photo à gauche */
.news-grid > .news-card:nth-child(odd):last-child .news-body { padding-top: 0; }
@media (max-width: 1080px) { .news-featured { grid-template-columns: 1fr; gap: 20px; } .grid-3.news-cards, .grid-3.rubriques { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .news-grid > .news-card:nth-child(odd):last-child { grid-template-columns: 1fr; gap: 0; } .news-grid > .news-card:nth-child(odd):last-child .news-body { padding-top: 22px; } }
@media (max-width: 680px) { .grid-3.news-cards, .grid-3.rubriques, .news-grid { grid-template-columns: 1fr; } }

/* --- 1.15.8 — Appel à l'action des pages intérieures : panneau clair arrondi avec halo (retour gérant : « plus moderne ») --- */
.cta-light { border-top: 0; padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 6vw, 88px); }
.cta-panel { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(40px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px); background: linear-gradient(135deg, var(--mist) 0%, var(--paper) 55%, var(--white) 100%); border: 1px solid rgba(23,56,95,.08); border-radius: 24px; overflow: hidden; }
.cta-panel-glow { position: absolute; top: -40%; right: -8%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(47,116,166,.18) 0%, rgba(47,116,166,0) 68%); pointer-events: none; }
.cta-panel::after { content: ""; position: absolute; right: 8%; bottom: -34%; width: 34%; aspect-ratio: 1; border: 1px solid rgba(23,56,95,.1); border-radius: 50%; pointer-events: none; }
.cta-panel > :not(.cta-panel-glow) { position: relative; z-index: 1; }
.cta-panel .cta-light-body { padding-top: 0; }
@media (max-width: 1080px) { .cta-panel { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 680px) { .cta-panel { padding: 32px 22px; border-radius: 18px; } .cta-panel::after { display: none; } }

/* --- 1.15.8 — Mot du Président : portrait en tête de lettre (affiché dès que le fichier president-younes-benjelloun.jpg est présent) --- */
.letter-portrait { display: flex; align-items: center; gap: 24px; margin: 0 0 34px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.letter-portrait img { width: 128px; height: 128px; object-fit: cover; object-position: top; border-radius: 50%; box-shadow: 0 16px 40px rgba(12,35,58,.16); }
.letter-portrait figcaption strong { display: block; color: var(--navy); font-size: 20px; letter-spacing: -.02em; }
.letter-portrait figcaption span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
@media (min-width: 1081px) {
  .letter-portrait { float: right; flex-direction: column; align-items: flex-start; width: 220px; margin: 6px 0 24px 40px; padding: 0; border: 0; }
  .letter-portrait img { width: 220px; height: 260px; border-radius: 14px; }
}
@media (max-width: 680px) { .letter-portrait img { width: 96px; height: 96px; } }

/* --- 1.15.9 — Panneau « Mot du Président » et carte Membres (Structure & gouvernance) au dessin du site --- */
.proof-grid { gap: 28px; align-items: stretch; }
.proof-card.big { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 52px); background: var(--navy-900); border-radius: var(--radius-lg); }
.proof-card.big::before { content: none; }
.proof-card.big .section-kicker { color: var(--gold); }
.proof-card.big blockquote { margin: 18px 0 26px; padding: 0; font-family: var(--serif); font-style: normal; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.38; letter-spacing: 0; color: var(--white); }
.proof-author-row { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.proof-portrait { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: top; }
.proof-author { color: var(--white); font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.proof-author small { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 14px; font-weight: 500; }
.proof-card.big .action-row { margin-top: 28px; }
.proof-grid .photo-link .news-media img { aspect-ratio: 3 / 2; }
@media (max-width: 1080px) { .proof-grid { grid-template-columns: 1fr; } }

/* --- 1.15.11 — Mot du Président : la lettre occupe toute la largeur restante (retour gérant : « laisse un vide à droite ») --- */
.side-layout .letter { max-width: none; }
.side-layout .letter p { font-size: 18px; line-height: 1.7; }
.side-layout .letter .letter-open { font-size: clamp(21px, 1.9vw, 25px); }

/* --- 1.15.12 — Sous-menu : la page courante est marquée (rouge, filet à gauche), comme au survol --- */
.submenu a.active { color: var(--red); padding-left: 22px; background: var(--paper); }
.submenu a.active::before { height: 18px; }

/* Pages légales */
.hero.small.legal-hero { min-height: 320px; }
.legal-content h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 34px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content ul { padding-left: 20px; }

/* =========================================================================
 * Cahier de modifications v1.2
 * ====================================================================== */
/* M07 — Bandeau de chiffres du marché : titre au-dessus des cartes, unité en plus petit, sources dessous */
.facts-title { margin: 0 0 14px; color: var(--white); font-size: 15px; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 12px rgba(6,26,45,.45); }
.facts-cards strong small { font-size: .42em; font-weight: 600; letter-spacing: 0; white-space: nowrap; color: rgba(255,255,255,.82); }
.facts-sources { margin: 14px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 680px) { .facts-title { font-size: 14px; margin-bottom: 10px; } }
/* M18 — Modalités d'adhésion avant le formulaire : catégorie en gras dans la phrase, sans double espacement avec le formulaire */
.modalites > .card { margin: 0; color: var(--muted); line-height: 1.6; }
.modalites > .card strong { display: inline; margin: 0; color: var(--navy); font-size: inherit; line-height: inherit; }
.modalites-section + .section { padding-top: 0; }
/* 1.15.15 — Rubriques sans page (« Qui sommes-nous », « Actualités & publications ») : intitulé de la navigation
   latérale en texte simple, même boîte que les liens */
.side-nav span.side-nav-head { padding: 15px 18px; border-bottom: 1px solid var(--line); font-weight: 800; }