/* ============================================================
   ONBAH — Site institutionnel
   Design system : bleu eau (#3A9AD9, couleur principale — clarté et
   fluidité de l'eau) + bleu-noir profond, corail en accent secondaire,
   motif topographique, animations discrètes au scroll.
   Aucune dépendance externe.
   ============================================================ */

:root {
  /* Bleu-noir profond — texte principal, fonds sombres (footer, header
     scrollé, boutons "navy"). Conserve les noms de variables --navy-*
     historiques pour ne pas avoir à retoucher chaque usage inline. */
  --navy-950: #1A2B36;
  --navy-900: #21384A;
  --navy-800: #2A4A5E;
  --navy-700: #375D73;
  --water-900-rgb: 26, 43, 54;

  /* Voile assombrissant la bannière d'accueil, pour que le texte blanc reste
     lisible par-dessus la photo. Défini ICI et nulle part ailleurs : il était
     recopié à l'identique dans index.html et page-index.js, et deux copies
     finissent toujours par diverger.
     Les valeurs d'origine (.55 / .9 à 65% / navy-950 opaque en bas) avaient été
     calibrées sur la photo statique livrée avec le site, une vue de barrage de
     nuit déjà sombre. Appliquées à une photo de jour choisie dans le CMS, elles
     l'effaçaient complètement : la bannière n'était plus qu'un aplat bleu nuit.
     Allégées ici jusqu'à laisser la photo pleinement lisible. La lisibilité du
     texte ne repose donc plus sur le voile mais sur une ombre portée (voir
     `.hero h1, .hero .slogan…` plus bas) : assombrir toute l'image pour faire
     ressortir quatre lignes de texte revenait à sacrifier la photo entière au
     profit de la zone qu'elle occupe. Les deux réglages sont maintenant
     indépendants — on peut éclaircir la bannière sans rendre le titre illisible. */
  --hero-voile: linear-gradient(180deg,
    rgba(var(--water-900-rgb), .10),
    rgba(var(--water-900-rgb), .38) 60%,
    rgba(var(--water-900-rgb), .70) 100%);

  /* Bleu eau — couleur principale de marque */
  --accent-700: #2A86C5; /* liens hypertexte, boutons secondaires (contour) */
  --accent-600: #257BB5; /* survol des éléments bleu eau pleins */
  --accent-500: #3A9AD9; /* bleu eau officiel — couleur principale du site */
  --accent-400: #7EC1EA; /* bleu eau clair — icônes/accents sur fond sombre */
  --accent-100: #E3F0FA; /* fond très clair teinté bleu eau */
  --accent-500-rgb: 58, 154, 217;

  /* Accent secondaire — appels à l'action clés (corail, complémentaire du bleu) */
  --coral: #FF7A59;
  --coral-dark: #D8684C;

  /* États sémantiques */
  --success: #2ECC71;
  --danger: #E74C3C;

  /* Couleurs du drapeau burkinabè — réservées à l'accent drapeau et à
     l'alerte sinistre, indépendantes de la palette de marque ci-dessus. */
  --bf-red: #e02f3c;
  --bf-green: #009e49;
  --bf-yellow: #fcd116;

  --ink: #1A2B36;
  --text-1: #1A2B36; /* bleu-noir profond — excellent contraste sans la dureté du noir pur */
  --text-2: #4a6376;
  --text-3: #8098a8;
  --surface: #ffffff;
  --surface-alt: #F4F9FC; /* blanc cassé — repose les yeux */
  --border: #dbe7ee;
  --shadow-sm: 0 2px 10px rgba(var(--water-900-rgb), 0.08);
  --shadow-md: 0 12px 32px rgba(var(--water-900-rgb), 0.14);
  --shadow-lg: 0 24px 60px rgba(var(--water-900-rgb), 0.28);
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1180px;
  --ff: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Sélection de texte — bleu eau à opacité réduite, texte inchangé */
::selection { background: rgba(var(--accent-500-rgb), .3); color: var(--text-1); }

/* Focus clavier (navigation Tab) — anneau bleu eau foncé bien visible */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff);
  color: var(--text-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ── Motif topographique (fond décoratif, inspiré de la plaquette) ── */
.topo-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .07;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.7) 34px 35px),
    repeating-linear-gradient(25deg, transparent 0 58px, rgba(255,255,255,.5) 58px 59px);
}
.topo-bg.dark { opacity: .05; }
.topo-bg.light {
  opacity: .06;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(11,27,40,.5) 34px 35px),
    repeating-linear-gradient(25deg, transparent 0 58px, rgba(11,27,40,.35) 58px 59px);
}
section { position: relative; }

/* ── Boutons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  border: 1.5px solid transparent; cursor: pointer; transition: all .22s ease;
  white-space: nowrap;
}
/* Bouton principal — fond bleu eau clair + texte foncé (le bleu eau est trop
   lumineux pour du texte blanc, cf. règle de contraste ci-dessous) ; au survol,
   le fond s'assombrit et le texte bascule en blanc — les deux états restent
   conformes aux contrastes WCAG AA. */
.btn-accent { background: linear-gradient(135deg, var(--accent-400), var(--accent-500)); color: var(--text-1); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-outline-accent { border-color: var(--accent-700); color: var(--accent-700); background: transparent; }
.btn-outline-accent:hover { background: var(--accent-100); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-900); transform: translateY(-2px); }
/* Bouton d'action cruciale (candidature, contact...) — corail, complémentaire
   du bleu eau ; texte foncé pour un contraste net (le corail non plus ne
   supporte pas un texte blanc en dessous de 18px). */
.btn-coral { background: var(--coral); color: var(--text-1); box-shadow: var(--shadow-sm); }
.btn-coral:hover { background: var(--coral-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 8px 16px; font-size: 12.5px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

/* ── Header ──
   Le header est transparent tant que la page n'est pas scrollée, posé
   directement sur le "hero" de la page. Comme la plupart des pages ont
   désormais un hero clair (.page-hero), le header utilise par défaut un
   texte foncé. Seules les pages avec un hero sombre (accueil, 404 — photo
   ou fond marine) reçoivent la classe JS `.on-dark`, qui repasse le texte
   en blanc. Une fois scrollé (`.solid`, fond marine plein), le texte est
   toujours blanc, quel que soit le thème du hero. */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  transition: background .35s ease, box-shadow .35s ease, padding .3s ease;
  padding: 18px 0;
}
#site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand .txt .tag { white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 92px; height: 92px; border-radius: 50%; }
.brand .txt { line-height: 1.15; }
.brand .txt .name { font-weight: 800; font-size: 16px; color: var(--text-1); letter-spacing: .3px; transition: color .3s; }
.brand .txt .tag { font-size: 10.5px; color: var(--accent-600); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; transition: color .3s; }

nav.main-nav { display: flex; align-items: center; gap: 2px; }
nav.main-nav a {
  color: var(--text-2); font-size: 14px; font-weight: 600;
  padding: 9px 10px; border-radius: 8px; transition: all .2s;
  position: relative; white-space: nowrap;
}
nav.main-nav a:hover, nav.main-nav a.active { color: var(--navy-950); background: var(--accent-500); }
nav.main-nav a.portail { background: var(--accent-500); color: var(--navy-950); margin-left: 8px; }
nav.main-nav a.portail:hover { background: var(--accent-400); }

.nav-toggle { display: none; border-color: rgba(11,27,40,.25); color: var(--text-1); }

/* #header-top (bandeau utilitaire : langue, réseaux, recherche) a son propre
   fond marine semi-transparent en permanence (voir renderHeader) — son texte
   reste donc toujours blanc, indépendamment du thème clair/sombre du hero. */
#header-utility { display:flex; align-items:center; gap:14px; }
#header-utility .lang { display:flex; gap:6px; font-size:11.5px; font-weight:700; color: rgba(255,255,255,.55); }
#header-utility .lang button { background:none; border:none; color:inherit; cursor:pointer; padding:2px 4px; }
#header-utility .lang button.active { color:#fff; border-bottom:2px solid var(--accent-500); }
#header-utility .social { display:flex; gap:10px; }
#header-utility .social a { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; }
#header-utility .social a:hover { background: var(--accent-500); color: #fff; }
#search-toggle { color: #fff; }

/* Thème sombre (hero photo/fond marine : accueil, 404) — la barre marque
   (logo/nav), elle, est transparente : texte blanc tant que non scrollée. */
#site-header.on-dark .brand .txt .name { color: #fff; }
#site-header.on-dark .brand .txt .tag { color: var(--accent-400); }
#site-header.on-dark nav.main-nav a { color: rgba(255,255,255,.82); }
#site-header.on-dark nav.main-nav a:hover, #site-header.on-dark nav.main-nav a.active { color: var(--navy-950); background: var(--accent-500); }
#site-header.on-dark .nav-toggle { border-color: rgba(255,255,255,.3); color: #fff; }

/* Scrollé : fond marine plein sur toute la hauteur du header, texte blanc —
   placé après `.on-dark` pour l'emporter à spécificité égale. */
#site-header.solid {
  background: rgba(var(--water-900-rgb), .94); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md); padding: 10px 0;
}
#site-header.solid .brand .txt .name { color: #fff; }
#site-header.solid .brand .txt .tag { color: var(--accent-400); }
#site-header.solid nav.main-nav a { color: rgba(255,255,255,.82); }
#site-header.solid nav.main-nav a:hover, #site-header.solid nav.main-nav a.active { color: var(--navy-950); background: var(--accent-500); }
#site-header.solid .nav-toggle { border-color: rgba(255,255,255,.3); color: #fff; }

/* ── Hero ──
   background-repeat/size/position en propriétés séparées (et non via le
   raccourci `background`) : une valeur unique (sans virgule) s'applique à
   TOUTES les couches d'arrière-plan, y compris la photo définie en inline
   sur chaque page (background-image) — garantit qu'elle ne se répète
   jamais, quel que soit le nombre de couches déclarées côté HTML. */
.hero {
  min-height: 92vh; display: flex; align-items: center;
  background-color: var(--navy-950);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff; position: relative; overflow: hidden;
}
.hero .container { position: relative; z-index: 2; padding-top: 160px; padding-bottom: 60px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent-700);
  background: #fff; border: 1px solid #fff;
  padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(32px, 5vw, 58px); font-weight: 800; line-height: 1.08; max-width: 820px; letter-spacing: -.5px; }
.hero .slogan { margin-top: 22px; font-size: clamp(16px, 2vw, 21px); font-style: italic; color: var(--accent-100); max-width: 640px; font-weight: 600; }
.hero .cta-row { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero .flag-accent { position:absolute; top:0; right:0; width:6px; height:100%;
  background: linear-gradient(180deg, var(--bf-red), var(--bf-green)); opacity:.8; z-index:2; }

.hero .stats-strip {
  margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero .stats-strip .stat { padding: 22px 18px 0; border-left: 1px solid rgba(255,255,255,.14); }
.hero .stats-strip .stat:first-child { border-left: none; padding-left: 0; }
.hero .stats-strip .stat .num { font-size: 28px; font-weight: 800; color: #fff; }
.hero .stats-strip .stat .lbl { font-size: 12px; color: #fff; margin-top: 4px; }

/* Lisibilité du texte de la bannière, indépendamment de la photo choisie dans
   le CMS. C'est cette ombre qui permet de garder --hero-voile léger : sans
   elle, la seule façon de faire tenir du texte blanc sur une photo claire
   était d'assombrir la photo entière — ce qu'on faisait, au point de la rendre
   invisible. Ici l'assombrissement est confiné aux quelques pixels autour des
   glyphes. */
.hero h1,
.hero .slogan,
.hero .stats-strip .num,
.hero .stats-strip .lbl {
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 14px rgba(0,0,0,.35);
}

/* ── Section générique ── */
.section { padding: 96px 0; }
.section.alt { background: var(--surface-alt); }
/* Section "tinted" : fond clair teinté d'accent, utilisée pour ponctuer
   visuellement une page sans recourir à un fond sombre (texte standard,
   toujours lisible sur fond clair). */
.section.tinted { background: var(--accent-100); color: var(--text-1); }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head .kicker {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent-700); margin-bottom: 12px; display:block;
}
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.3px; line-height: 1.15; }
.section-head p { margin-top: 16px; font-size: 16px; color: var(--text-2); line-height: 1.65; }

/* ── Reveal au scroll ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }

/* ── Grilles / cartes ── */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .28s ease, box-shadow .28s ease, border-color .28s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card .icon-badge {
  width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 18px; background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); color: var(--accent-400);
}
.card h3 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.card p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.card ul.checklist { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.card ul.checklist li { font-size: 13.5px; color: var(--text-2); padding-left: 22px; position: relative; }
.card ul.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-500); font-weight: 800; }

.photo-card { border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); }
.photo-card img { width: 100%; height: 260px; object-fit: cover; transition: transform .5s ease; }
.photo-card:hover img { transform: scale(1.06); }
.photo-card .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px;
  background: linear-gradient(180deg, transparent, rgba(var(--water-900-rgb),.92));
  color: #fff;
}
.photo-card .cap .tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-400); }
.photo-card .cap h4 { font-size: 15.5px; font-weight: 700; margin-top: 4px; }

/* ── Timeline (histoire) ── */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline .item { position: relative; padding-bottom: 34px; }
.timeline .item:last-child { padding-bottom: 0; }
.timeline .item::before {
  content: ""; position: absolute; left: -32px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-500); box-shadow: 0 0 0 4px var(--accent-100);
}
.timeline .year { font-weight: 800; color: var(--navy-800); font-size: 15px; }
.timeline .desc { margin-top: 4px; font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* ── Valeurs (icônes cerclées) ── */
.value-item { text-align: center; }
.value-item .ring {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
  border: 2px solid var(--accent-600); display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--accent-600); background: var(--accent-100);
}
.value-item h4 { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.value-item p { margin-top: 8px; font-size: 13px; color: var(--text-2); line-height: 1.55; }

/* ── Quote / DG ── */
.dg-block { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; }
.dg-block .photo-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.dg-block .photo-wrap img { width: 100%; height: 380px; object-fit: cover; }
.dg-block blockquote { font-size: 19px; line-height: 1.7; font-style: italic; color: var(--text-1); position: relative; padding-left: 26px; border-left: 4px solid var(--accent-500); }
.dg-block .sign { margin-top: 22px; font-weight: 800; font-size: 15px; color: var(--navy-800); }
.dg-block .sign span { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* Liens dans le contenu éditable superadmin (mot du DG, histoire, organisation) —
   bleu eau assombri et souligné (le soulignement aide les personnes daltoniennes
   à distinguer un lien d'un texte gris) ; au survol, bascule en bleu-noir profond. */
#dg-quote a, #histoire-custom a, #organisation-custom a {
  color: var(--accent-700); text-decoration: underline; text-underline-offset: 2px;
}
#dg-quote a:hover, #histoire-custom a:hover, #organisation-custom a:hover {
  color: var(--text-1); text-decoration: none;
}

/* ── Axes stratégiques ── */
.axis-card {
  border-radius: var(--radius-lg); padding: 34px 30px; color: var(--text-1);
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); border-top: 4px solid var(--accent-500);
  box-shadow: var(--shadow-sm);
}
.axis-card .num { font-size: 46px; font-weight: 900; color: var(--accent-500); opacity: .18; position: absolute; top: 18px; right: 26px; }
.axis-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 12px; max-width: 85%; }
.axis-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.axis-2 { border-top-color: var(--accent-600); }
.axis-3 { border-top-color: var(--navy-700); }

/* ── KPI chiffres ── */
.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.kpi-strip.kpi-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-strip .kpi { background: var(--surface); padding: 28px 16px; text-align: center; border-right: 1px solid var(--border); }
.kpi-strip .kpi:last-child { border-right: none; }
.kpi-strip .kpi .num { font-size: 26px; font-weight: 900; color: var(--navy-900); }
.kpi-strip .kpi .lbl { font-size: 11.5px; color: var(--text-2); margin-top: 6px; line-height: 1.4; }

/* ── Table projets ── */
.projet-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--surface);
  transition: box-shadow .2s, transform .2s;
}
.projet-row:hover { box-shadow: var(--shadow-sm); transform: translateX(4px); }
.projet-row .nom { font-weight: 700; font-size: 15px; }
.projet-row .meta { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
/* Taux d'exécution d'un projet (SiteWebProjet.taux_execution) — n'apparaît que
   si le taux est renseigné, `null` signifiant « non communiqué ». La valeur
   chiffrée reste lisible dans le badge : la barre l'illustre, elle ne la
   remplace pas (une barre seule est inexploitable au lecteur d'écran, d'où
   aussi role="progressbar" et aria-valuenow côté JS). */
.projet-progress {
  margin-top: 10px; height: 6px; border-radius: 999px;
  background: var(--border); overflow: hidden; max-width: 340px;
}
.projet-progress > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-500));
  transition: width .4s ease;
}
/* Message affiché quand une rubrique ne contient aucun projet publié. */
.projet-row + .muted, #projets-en-cours .muted, #projets-structurants .muted {
  color: var(--text-3); font-size: 13.5px; font-style: italic; padding: 8px 2px;
}

.badge { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
/* Texte toujours foncé (var(--text-1)) — un texte coloré sur ces fonds très
   clairs ne tiendrait pas le contraste WCAG ; la couleur d'identification de
   chaque statut passe par la bordure et la teinte de fond. */
.badge.en_cours { background: #e6f3ff; color: var(--text-1); border: 1px solid #0369a1; }
.badge.planifie { background: #f3e8ff; color: var(--text-1); border: 1px solid #7c3aed; }
.badge.termine { background: #e8fbf0; color: var(--text-1); border: 1px solid var(--success); }
.badge.structurant { background: var(--accent-100); color: var(--text-1); border: 1px solid var(--accent-500); }

/* ── Actualités / Médiathèque / Emplois cards ── */
.actu-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); transition: box-shadow .25s, transform .25s; }
.actu-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.actu-card .thumb { height: 190px; overflow: hidden; background: var(--surface-alt); }
.actu-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.actu-card .body { padding: 20px 22px; }
.actu-card .date { font-size: 11.5px; color: var(--accent-700); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.actu-card h4 { font-size: 16px; font-weight: 800; margin-top: 8px; line-height: 1.4; }
.actu-card p { font-size: 13.5px; color: var(--text-2); margin-top: 8px; line-height: 1.6; }

.emploi-row {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 26px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; background: var(--surface);
}
.emploi-row h4 { font-size: 16px; font-weight: 800; }
.emploi-row .meta { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.emploi-row .meta span { margin-right: 14px; }

.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.media-item { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-alt); position: relative; }
.media-item img { width: 100%; height: 100%; object-fit: cover; }

/* ── Placeholder visuel (zones sans photo réelle) ── */
.ph-visual {
  background: repeating-linear-gradient(135deg, var(--surface-alt), var(--surface-alt) 12px, #e4eaee 12px, #e4eaee 24px);
  display: flex; align-items: center; justify-content: center; color: var(--text-2);
  font-size: 12px; font-weight: 700; text-align: center; padding: 14px;
}

/* ── Alerte sinistre ── */
.alert-band {
  background: linear-gradient(90deg, var(--bf-red), #a8121e);
  color: #fff; padding: 16px 0;
}
.alert-band .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.alert-band .txt { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.alert-band .txt b { font-weight: 800; }

/* ── Footer ── */
footer#site-footer { background: var(--navy-950); color: rgba(255,255,255,.72); padding: 70px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-grid h5 { color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.footer-grid .brand-col .brand { margin-bottom: 16px; }
.footer-grid .brand-col p { font-size: 13.5px; line-height: 1.7; max-width: 320px; }
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul li a { font-size: 13.5px; transition: color .2s; }
.footer-grid ul li a:hover { color: var(--accent-400); }
.footer-grid .coord p { font-size: 13.5px; margin-bottom: 10px; line-height: 1.6; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 12px; flex-wrap: wrap; gap: 10px; }
.footer-bottom a { color: rgba(255,255,255,.55); }
.footer-bottom a:hover { color: var(--accent-400); }

/* ── Breadcrumb / page hero secondaire ── */
.page-hero {
  background: linear-gradient(150deg, var(--accent-100), var(--surface) 65%);
  color: var(--text-1); padding: 190px 0 64px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero .eyebrow { color: var(--accent-600); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; display:block; }
.page-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.4px; color: var(--text-1); }
.page-hero p { margin-top: 14px; font-size: 15.5px; color: var(--text-2); max-width: 640px; }

/* ── Tabs (pages avec sous-sections) ── */
.tabs { display: flex; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; }
.tabs button {
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-2);
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s;
}
.tabs button.active, .tabs button:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Loader discret pour contenu dynamique ── */
.skeleton { background: linear-gradient(90deg, var(--surface-alt) 25%, #eef2f4 37%, var(--surface-alt) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Responsive ── */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .dg-block { grid-template-columns: 1fr; }
  .dg-block .photo-wrap img { height: 300px; }
  .kpi-strip, .kpi-strip.kpi-4 { grid-template-columns: repeat(2,1fr); }
  .kpi-strip .kpi:nth-child(3) { border-right: none; }
  .hero .stats-strip { grid-template-columns: repeat(2,1fr); row-gap: 20px; }
  .hero .stats-strip .stat:nth-child(3) { border-left: none; }
}
@media (max-width: 1100px) {
  nav.main-nav, #header-utility .social { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .projet-row { grid-template-columns: 1fr; text-align: left; }
  .emploi-row { flex-direction: column; align-items: flex-start; }
  .kpi-strip { grid-template-columns: repeat(2,1fr); }
}