/* Compléments de production sur le design system "classical" (non modifié).
   Couvre ce que le runtime de l'outil de prototypage fournissait implicitement
   (rendu des images dans .plate) et les états qui n'avaient pas d'équivalent
   HTML/CSS pur dans le prototype (filtre de catégorie sans JS). */

/* overflow-x: hidden sur html seulement (pas body) : sur les deux éléments,
   il transforme body en conteneur de scroll séparé du viewport et casse
   position: sticky sur l'en-tête (le rétrécissement au défilement ne
   s'enclenche jamais). Sur html seul, le clip anti-débordement horizontal
   reste actif et le viewport reste l'unique conteneur de scroll. */
html { overflow-x: hidden; }
html, body { margin: 0; background: var(--color-bg, #ffffff); }

/* — bandes plein écran : les pages publiques enchaînaient des sections
   toutes blanches du haut en bas, sans relief. Ces classes teintent une
   section en pleine largeur SANS toucher au balisage (pas de wrapper
   supplémentaire) : le box-shadow géant + clip-path est la technique
   standard pour "casser" la contrainte max-width:1240px d'un élément et
   peindre sa couleur jusqu'aux bords de l'écran, en toute sécurité (le
   clip-path empêche le débordement horizontal que le box-shadow créerait
   sinon). — */
.band-alt, .band-dark {
  position: relative;
  clip-path: inset(0 -100vmax);
}
/* — couleur de relief choisie : un anthracite quasi-noir (identique à la
   teinte déjà utilisée pour la bannière/footer), plutôt qu'un simple gris
   pâle — une vraie rupture de fond, pas une nuance. Comme le fond devient
   sombre, tout le texte posé directement dessus doit passer en clair ; les
   cartes/champs qui gardent un fond blanc (juste en dessous) doivent, elles,
   repasser en texte sombre normal — sinon le texte blanc du bandeau se
   propagerait par héritage dans les cartes blanches et deviendrait illisible. */
.band-alt {
  background: var(--color-relief-bg);
  box-shadow: 0 0 0 100vmax var(--color-relief-bg);
  color: #fff;
}
.band-dark { background: var(--hero-bg, #18181b); box-shadow: 0 0 0 100vmax var(--hero-bg, #18181b); }

.band-alt h1, .band-alt h2, .band-alt h3, .band-alt h4 { color: var(--color-heading-inverse); }
.band-alt p { color: color-mix(in srgb, #fff 78%, transparent); }
.band-alt .text-muted { color: color-mix(in srgb, #fff 62%, transparent); }
.band-alt .field > label { color: color-mix(in srgb, #fff 70%, transparent); }
.band-alt .btn-secondary { border-color: color-mix(in srgb, #fff 35%, transparent); }
.band-alt .btn-secondary:hover { background: color-mix(in srgb, #fff 10%, transparent); }
.band-alt .btn-secondary:active { background: color-mix(in srgb, #fff 18%, transparent); }

/* — lignes de la liste "Derniers rapports & communiqués" : mêmes codes
   visuels que les cartes vision/mission (fond blanc qui tranche sur le
   bandeau sombre, coins plus généreux, respiration) avec un survol teinté
   par l'accent bleu (cohérent avec l'étiquette de type de document). — */
.report-row {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border-color: var(--color-divider);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.report-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent-2) 45%, var(--color-divider));
}
.report-row .card-title { font-size: 19px; }
.report-row .tag { font-size: 13px; padding: 5px 12px; }
.report-row .card-meta { font-size: 13px; }
/* cartes/champs : gardent un fond blanc qui tranche sur une bande teintée,
   plutôt que de se fondre dedans (leur fond par défaut est transparent) —
   et redeviennent des îlots de texte sombre normal (cf. note plus haut).
   !important est nécessaire ici : de nombreuses cartes-liens du site portent
   un style inline `color: inherit` (pour hériter la couleur du contexte
   normal), qui sinon gagne toujours sur une simple règle de feuille de
   style et fait passer leur texte en blanc-sur-blanc, invisible. */
.band-alt .card, .band-alt .pillar, .band-alt .stat-card, .band-alt .input, .band-alt .table {
  background: var(--color-bg);
  color: var(--color-text) !important;
}
.band-alt .card h1, .band-alt .card h2, .band-alt .card h3, .band-alt .card h4,
.band-alt .pillar h1, .band-alt .pillar h2, .band-alt .pillar h3, .band-alt .pillar h4,
.band-alt .stat-card h1, .band-alt .stat-card h2, .band-alt .stat-card h3,
.band-alt .table h1, .band-alt .table h2, .band-alt .table h3 {
  color: var(--color-heading);
}
/* .band-alt p / .band-alt .text-muted (texte clair, pensées pour le fond
   sombre) ciblent directement ces éléments où qu'ils soient : sans ce
   correctif, ils gagneraient quand même sur l'héritage normal à l'intérieur
   des cartes blanches ci-dessus et resteraient illisibles. */
.band-alt .card p, .band-alt .card .text-muted,
.band-alt .pillar p, .band-alt .pillar .text-muted,
.band-alt .stat-card p, .band-alt .stat-card .text-muted,
.band-alt .table p, .band-alt .table .text-muted {
  color: inherit;
}

/* Filet de sécurité : une image insérée dans le corps d'un article (éditeur
   admin) ne doit jamais pouvoir dépasser la largeur de son conteneur. */
img { max-width: 100%; height: auto; }

.plate { position: relative; overflow: hidden; }
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.plate img.logo-fit { object-fit: contain; background: var(--color-surface); }

/* Filtre de catégorie basé sur de vrais liens (voir Mwangaza - Rapports et
   Communiques) plutôt que sur des boutons radio non fonctionnels : chaque
   état est une URL indexable, sans JavaScript. Remplace le petit bloc
   "segmented control" fondu du design system par des puces (chips)
   détachées, plus grandes et plus vivantes. */
.seg {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  border: none; overflow: visible; border-radius: 0;
}
.seg-opt {
  padding: 10px 20px; font-size: 14px; font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  transition: transform .2s ease, background .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease;
}
a.seg-opt { text-decoration: none; color: inherit; }
.seg-opt.is-active {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.seg-opt:not(.is-active):hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.member-logo-wrap {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
}
.member-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }

.flash-messages { max-width: 1240px; margin: var(--space-3) auto 0; padding: 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.flash {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  font-size: 14px;
}
.flash-success { border-color: var(--color-accent); color: var(--color-accent-800); background: var(--color-accent-100); }
.flash-warning, .flash-error, .flash-danger { border-color: #b3261e; color: #7a1a15; background: #fbeceb; }
.flash-info { background: var(--color-surface); }

.field-error { color: #b3261e; font-size: 12px; margin-top: 4px; }
.input-error { border-color: #b3261e; }

/* — champs fichier natifs (admin) : le bouton du navigateur est repris
   pour s'aligner avec .btn-secondary plutôt que de rester avec le chrome
   par défaut du système. — */
input[type="file"] { font: inherit; font-size: 14px; color: var(--color-text); width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; color: var(--color-text); cursor: pointer;
  background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: var(--space-2) calc(var(--space-3) * 1.2); margin-right: var(--space-3);
  transition: background-color .15s ease, border-color .15s ease;
}
input[type="file"]::file-selector-button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-accent);
  color: #fff; padding: var(--space-2) var(--space-3); z-index: 1000;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* — surface sombre, réutilisée par le hero d'accueil et le footer pour
   qu'ils partagent exactement la même couleur de fond. — */
.dark-surface {
  --hero-bg: #18181b;
  background: var(--hero-bg);
  color: #fff;
}
.dark-surface h1, .dark-surface h2, .dark-surface h3, .dark-surface h4, .dark-surface h5, .dark-surface h6 { color: var(--color-heading-inverse); }
.dark-surface p { color: color-mix(in srgb, #fff 78%, transparent); }
.dark-surface .text-muted { color: color-mix(in srgb, #fff 62%, transparent); }
.dark-surface .hr { background: color-mix(in srgb, #fff 16%, transparent); }
.dark-surface a:not(.btn) { color: var(--color-accent-500); }
.dark-surface a:not(.btn):hover { color: var(--color-accent-400); }
.dark-surface .nav-brand { color: #fff; }
.dark-surface .input { color: #fff; border-color: color-mix(in srgb, #fff 30%, transparent); }
.dark-surface .input::placeholder { color: color-mix(in srgb, #fff 50%, transparent); }
.dark-surface .input:hover { border-color: color-mix(in srgb, #fff 50%, transparent); }
.dark-surface .input:focus-visible { border-color: var(--color-accent-500); }
.dark-surface .btn-primary {
  background: var(--color-accent-500); border-color: var(--color-accent-500); color: var(--hero-bg);
}
.dark-surface .btn-primary:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); }
.dark-surface .btn-primary:active { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.dark-surface .btn-secondary { color: #fff; border-color: color-mix(in srgb, #fff 35%, transparent); }
.dark-surface .btn-secondary:hover { background: color-mix(in srgb, #fff 10%, transparent); }
.dark-surface .btn-secondary:active { background: color-mix(in srgb, #fff 18%, transparent); }

/* — bloc newsletter, désormais intégré en tête du footer (plus une carte
   blanche séparée au-dessus) : un peu plus de présence que le reste du
   footer pour rester un vrai appel à l'action, séparé du reste par un
   simple filet clair (.hr, déjà stylé pour les fonds sombres). — */
.footer-newsletter h3 { font-size: 23px; }
.footer-newsletter .input {
  min-height: 42px;
  background: color-mix(in srgb, #fff 6%, transparent);
}
.footer-newsletter .btn { padding-inline: 24px; }

/* — en-tête de page (À propos, Rapports, Textes légaux, Contact...) : même
   couleur de fond sombre que le hero/footer (cohérence de marque), habillée
   de deux halos dégradés (orange + bleu, les deux couleurs d'accent du
   site) façon "spotlight", contenu centré et resserré pour rester lisible.
   Remplace l'ancien fil d'Ariane (retiré partout) par un vrai bandeau de
   couverture. */
.page-header {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: calc(var(--space-8) + var(--space-4)) var(--space-6) var(--space-8);
}
.page-header::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(620px circle at 12% -15%, color-mix(in srgb, var(--color-accent-500) 55%, transparent), transparent 65%),
    radial-gradient(520px circle at 105% 115%, color-mix(in srgb, var(--color-accent-2-500) 30%, transparent), transparent 62%);
  pointer-events: none;
}
.page-header-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.page-header .tag { margin-bottom: var(--space-3); }
.page-header h1 { margin: 0; }
.page-header p { margin: var(--space-3) auto 0; max-width: 58ch; }

/* — tableau des textes légaux : habille .table (partagé avec l'admin, donc
   jamais modifié directement) d'une carte avec bordure/ombre/coins arrondis
   et de lignes plus confortables, uniquement dans ce conteneur dédié — la
   feuille de style de l'admin n'est pas concernée. */
.legal-table {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.legal-table .table { font-size: 15px; }
.legal-table .table th {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  font-size: 12px;
}
.legal-table .table td {
  padding: var(--space-4);
  vertical-align: middle;
}
.legal-table .table tbody tr:last-child td { border-bottom: none; }
.legal-table .table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-text) 2.5%, transparent); }
.legal-table .table tbody tr:hover { background: color-mix(in srgb, var(--color-accent-100) 55%, transparent); }
.legal-table-title {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 500; color: var(--color-heading);
}
.legal-table-title svg { flex: none; color: var(--color-accent); opacity: 0.75; }

/* — page contact : le formulaire devient une vraie carte (comme les blocs
   téléphone/e-mail en face), plutôt que des champs posés à nu sur la page
   blanche — les deux colonnes se répondent visuellement. Champs agrandis,
   halo au focus, bouton d'envoi en plein largeur et rempli. */
.contact-form-card { padding: var(--space-6); border-radius: var(--radius-lg); }
.contact-form-card .field > label { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.contact-form-card .input {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
}
.contact-form-card textarea.input { min-height: 120px; }
.contact-form-card .input:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.contact-form-card .btn-block {
  margin-top: var(--space-2);
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  min-height: 46px;
  font-size: 15px;
}
.contact-form-card .btn-block:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.contact-form-card .btn-block:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.contact-info-card { padding: var(--space-5, 22px); border-radius: var(--radius-lg); }
.contact-info-icon {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-100); color: var(--color-accent-700);
  margin-bottom: var(--space-3);
}

/* — en-tête : la barre de nav vit dans un bandeau pleine largeur (comme le
   footer), son contenu reste centré/limité à 1240px à l'intérieur. Elle
   reste collée en haut (sticky) et rétrécit une fois qu'on a défilé, pour
   laisser le logo être grand en haut de page sans rester encombrant. — */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: none;
  transition: box-shadow .35s cubic-bezier(.4,0,.2,1);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header .nav {
  border-bottom: none;
  transition: padding .35s cubic-bezier(.4,0,.2,1);
}

/* — logo : pastille compte-goutte (ampoule + carte RDC, sans le texte)
   utilisée à côté du mot-symbole "Mwangaza" en footer/admin (fond sombre :
   badge blanc pour rester lisible). En nav publique, c'est le logo complet
   (avec le mot-symbole déjà inclus) qui est utilisé seul, en grand, et qui
   rétrécit avec l'en-tête au défilement. — */
.brand-mark { height: 28px; width: auto; display: block; border-radius: 50%; object-fit: contain; }
.admin-sidebar .brand-mark { height: 24px; }
.brand-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: #fff; padding: 3px;
}
.brand-badge .brand-mark { height: 100%; width: 100%; }

/* Paramètre direct et réel de la hauteur de la barre : contrairement à un
   min-height sur .nav (qui ne fait qu'imposer un plancher — si le logo est
   plus grand, c'est LUI qui gagne et le paramètre ne sert à rien), cette
   hauteur-ci s'impose réellement : le logo (height:100% ci-dessous) est
   forcé de s'y adapter, jamais l'inverse. C'est CE nombre qu'il faut
   changer pour agrandir/réduire la barre — le logo suit automatiquement. */
.site-header .nav-brand-logo {
  display: flex; align-items: center; overflow: hidden;
  height: 99px;
  transition: height .35s cubic-bezier(.4,0,.2,1);
}
.site-header.is-scrolled .nav-brand-logo { height: 60px; }
@media (max-width: 768px) {
  .nav-brand-logo { height: 64px; }
  .site-header.is-scrolled .nav-brand-logo { height: 48px; }
}
.brand-mark-full { height: 100%; width: auto; display: block; }

.gold-rule { display: block; width: 44px; height: 3px; margin: var(--space-3) 0; background: var(--color-accent-500); border-radius: 2px; }

/* — bannière d'accueil : photo pleine largeur (edge-to-edge, comme le
   footer) avec un dégradé sombre pour garder le texte lisible, plutôt
   qu'une carte encadrée insérée dans la page. — */
.hero-banner {
  position: relative;
  background-color: var(--hero-bg, #18181b);
  overflow: hidden;
}
/* Le logo (ampoule + carte + "MWANGAZA") est une vraie balise <img>, pas un
   background-image en contain — c'est la cause exacte du bug précédent :
   avec contain sur .hero-banner (ou même sur une couche ::after de la
   même largeur que la bannière), la boîte de la couche fait toute la
   largeur de la bannière, mais l'image elle-même ne remplit qu'une partie
   de cette boîte (letterbox) — un mask-image en pourcentages, lui, se
   calcule sur LA BOÎTE (donc sur toute la largeur de la bannière), pas sur
   la zone réellement occupée par l'image. Résultat : le fondu démarrait
   bien à 0% de la bannière, mais l'image elle-même n'existait qu'à partir
   de ~30-40% (son propre bord de letterbox) — donc elle "apparaissait"
   déjà à mi-fondu, pas de zéro : la frontière nette restait entière.
   Avec un vrai <img> dimensionné à sa taille réelle (height:100%,
   width:auto — sans zone morte autour), le mask-image se calcule sur SA
   PROPRE largeur et démarre bien à 0% pile là où l'image commence
   réellement, quelle que soit la largeur de l'écran. */
.hero-banner-img {
  position: absolute; top: 0; right: 0; z-index: 0;
  height: 100%; width: auto; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);
  mask-image: linear-gradient(to right, transparent 0%, black 60%);
}
.hero-banner::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* Ombrage doux, purement horizontal ("to right" — un angle non-strict
     comme 100deg finit par balayer haut/bas sur un cadre haut et étroit,
     ex. mobile). Vient renforcer la lisibilité du texte par-dessus le
     fondu ci-dessus, sans jamais créer d'aplat à lui seul. Le halo orange
     (même intensité que sur les en-têtes de page) est posé EN DESSOUS de
     cet ombrage sombre pour ne jamais nuire à la lisibilité du texte. */
  background:
    linear-gradient(to right, rgba(24, 24, 27, .45) 0%, rgba(24, 24, 27, .25) 35%, rgba(24, 24, 27, .08) 60%, rgba(24, 24, 27, 0) 80%),
    radial-gradient(650px circle at 6% 100%, color-mix(in srgb, var(--color-accent-500) 45%, transparent), transparent 65%);
}
.hero-banner-inner {
  position: relative; z-index: 2;
  /* hauteur +30% (plancher 390px, plafond 546px) pour laisser le texte
     respirer davantage. */
  min-height: clamp(390px, 39vw, 546px);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1240px; margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}
.hero-banner-text { max-width: 620px; }

/* — chiffres clés, juste après la bannière : rupture de rythme entre le
   "pourquoi" (vision/mission, plus bas) et le "quoi" (à la une), avec de
   vrais chiffres calculés depuis la base plutôt qu'inventés. Cartes
   séparées (pas un bandeau à cloisons internes) pour reprendre le
   traitement visuel des blocs vision/mission. — */
.stat-card {
  padding: var(--space-6); border-radius: var(--radius-lg); text-align: center;
  border: 1px solid var(--color-divider); border-top-width: 3px; border-top-color: var(--color-accent-500);
  background: var(--color-surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider));
}
.stat-card strong {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 40px; line-height: 1; color: var(--color-accent-700); font-variant-numeric: tabular-nums;
}
.stat-card span {
  display: block; margin-top: var(--space-2); font-size: 15px; letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — page article : titre et image de couverture posés en pleine largeur
   au-dessus de la mise en page à deux colonnes (au lieu d'être coincés dans
   la colonne de texte) — plus grands, plus présents, façon page d'article
   éditoriale. — */
.article-title { font-size: 40px; }
.article-cover { border-radius: var(--radius-lg); }
@media (min-width: 640px) { .article-title { font-size: 46px; } }

/* — page article : bandeau de couverture sombre (même dégradé orange/bleu
   que les autres en-têtes de page) surmonté du titre, avec l'image de
   couverture qui chevauche la limite du bandeau (à moitié dans le bandeau,
   à moitié dans la zone blanche) plutôt que d'être simplement empilée
   dessous. */
/* --hero-w reproduit la largeur réelle (fluide puis plafonnée à 1080px moins
   son padding) de .article-hero-cover-wrap, pour que le chevauchement (donc
   la part du bandeau visible derrière l'image) reste toujours à ~40% de la
   hauteur de l'image (ratio 2.74/1 => hauteur = largeur/2.74 => 40% = largeur/6.85),
   quelle que soit la taille d'écran. */
.article-header {
  padding-top: var(--space-6);
  padding-bottom: calc(min(1024.8px, 100vw - 55.2px) / 6.85 + var(--space-8));
}
.article-header .page-header-inner { max-width: 900px; }
.article-hero-cover-wrap {
  max-width: 1080px; margin: 0 auto var(--space-8); padding: 0 var(--space-6);
  margin-top: calc(-1 * min(1024.8px, 100vw - 55.2px) / 6.85);
  position: relative; z-index: 2;
}
.article-hero-cover { width: 100%; aspect-ratio: 2.74 / 1; transform: scale(1.05); }

/* — page article : mise en page à deux colonnes — le corps du texte à
   gauche, une colonne latérale collante (détails + partage) à droite,
   plutôt que tout empiler verticalement au-dessus/en dessous du texte. */
.article-sidebar {
  display: flex; flex-direction: column; gap: var(--space-4);
  position: sticky; top: 84px;
}
.article-side-card { padding: var(--space-4); border-radius: var(--radius-lg); }
.article-meta-list {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: 13.5px;
}
.article-meta-list li { display: flex; align-items: center; gap: var(--space-2); }
.article-meta-list svg { width: 16px; height: 16px; flex: none; color: var(--color-accent); opacity: 0.8; }

.share-icons { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; position: relative; }
.share-copied-note {
  font-size: 12.5px; color: var(--color-accent-700); background: var(--color-accent-100);
  padding: 4px 10px; border-radius: 999px;
}

.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.article-nav-link { text-decoration: none; color: inherit; }

/* — "À la une" : trois cartes égales (plus de carte géante + 2 vignettes
   empilées à côté — asymétrique et déséquilibré). Même famille visuelle que
   la grille de rapports_list, mais légèrement agrandie pour rester la
   vitrine principale de l'accueil. */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, var(--space-4)); }
.featured-card { padding: var(--space-4); border-radius: var(--radius-lg); }
.featured-plate {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-1);
}
.featured-card .card-title { font-size: 19px; margin-top: var(--space-2); }
.featured-card .card-body { font-size: 14px; margin-top: var(--space-1); }
@media (max-width: 860px) {
  .featured-grid { grid-template-columns: 1fr; }
}

/* — vision / mission : deux blocs distincts par icône + couleur (bleu pour
   la vision, or pour la mission), pour qu'on les distingue au premier
   coup d'œil au lieu d'un simple libellé en petites capitales. — */
.pillar {
  padding: var(--space-6); border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider); border-top-width: 3px;
  background: var(--color-surface);
}
.pillar-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.pillar-icon svg { width: 24px; height: 24px; }
.pillar-kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: var(--space-1);
}
.pillar-vision { border-top-color: var(--color-accent-2-500); }
.pillar-vision .pillar-icon { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.pillar-vision .pillar-kicker { color: var(--color-accent-2-700); }
.pillar-mission { border-top-color: var(--color-accent-500); }
.pillar-mission .pillar-icon { background: var(--color-accent-100); color: var(--color-accent-700); }
.pillar-mission .pillar-kicker { color: var(--color-accent-700); }

/* — animations & effets de survol, sur toutes les pages (public + admin) — */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-banner-text { animation: fade-in-up .6s ease both; }
.stat-card { animation: fade-in-up .5s ease both; }

main .card { animation: fade-in-up .45s ease both; }
main .card:nth-of-type(2) { animation-delay: .05s; }
main .card:nth-of-type(3) { animation-delay: .1s; }
main .card:nth-of-type(4) { animation-delay: .15s; }
main .card:nth-of-type(5) { animation-delay: .2s; }
main .card:nth-of-type(n+6) { animation-delay: .24s; }
main .member-logo-wrap { animation: fade-in .5s ease both; }

a, .btn, .card, .plate img, .member-logo-wrap, .tag-outline, .seg-opt,
.table tbody tr, .input, .radio .dot, .nav a, footer a {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease,
              box-shadow .2s ease, transform .2s ease;
}

a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-divider));
}
.side-article.card:hover { transform: translateY(-2px); }

.plate { overflow: hidden; }
a.card:hover .plate img { transform: scale(1.05); }

.btn-primary:hover, .btn:not(.btn-ghost):not(.btn-icon):hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.member-logo-wrap:hover { transform: translateY(-3px); border-color: var(--color-accent); }

/* — textes des articles/publications : virent au doré au survol — */
a.card:hover .card-title { color: var(--color-accent-600); }

/* — partenaires : bloc élevé + ombre au survol — */
.partner-card {
  border-radius: var(--radius-md);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-divider));
}

/* — "Nos membres" (accueil) : grille qui s'auto-adapte au nombre de
   colonnes selon la largeur disponible (pas de palier fixe/brutal comme
   .grid-responsive) et cartes qui apparaissent en cascade au chargement,
   avec un accent qui se révèle au survol (logo qui reprend ses couleurs et
   pivote légèrement, bordure et fond teintés). */
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) {
  .members-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .members-grid { grid-template-columns: 1fr; }
}
.member-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3);
  padding: var(--space-5, 24px) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  animation: fade-in-up .5s cubic-bezier(.4,0,.2,1) both;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease,
              border-color .25s ease, background .25s ease;
}
.member-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider));
  background: color-mix(in srgb, var(--color-accent-100) 40%, var(--color-bg));
}
.member-card-logo {
  width: 76px; height: 76px; flex: none;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  filter: grayscale(0.6) opacity(0.85);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .35s ease, border-color .25s ease;
}
.member-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.member-card:hover .member-card-logo {
  transform: scale(1.1) rotate(-4deg);
  filter: grayscale(0) opacity(1);
  border-color: var(--color-accent-300);
}
.member-card-name {
  font-size: 13.5px; font-weight: 500; line-height: 1.35;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .members-grid { gap: var(--space-3); }
  .member-card-logo { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   Responsive — le design system "classical" n'a aucune media
   query d'origine ; tout ce qui suit est ajouté ici pour que le
   site reste utilisable sous ~768px (nav, grilles, tableaux) et
   ~860px pour l'admin (barre latérale).
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* — nav publique : menu hamburger sous 768px — */
.nav-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.nav-toggle-btn {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; border: none; background: transparent;
  cursor: pointer; flex: none; border-radius: var(--radius-md);
}
.nav-toggle-btn span {
  display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-input:focus-visible + .nav-toggle-btn { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links .nav-cta { margin-inline-start: 4px; font-size: 15px; }

@media (max-width: 768px) {
  .nav { flex-wrap: wrap; }
  .nav-toggle-btn { display: flex; }

  .nav-links {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav-links a { padding: 12px 2px; border-bottom: 1px solid var(--color-divider); }
  .nav-links .nav-cta { margin: 12px 0 4px; text-align: center; }
  .nav-toggle-input:checked ~ .nav-links { max-height: 420px; }

  .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* — toutes les grilles à colonnes fixes du site public repassent à
     1 colonne ; !important est nécessaire car les ratios (1.4fr 1fr,
     1.6fr 1fr 1fr, etc.) sont posés en style inline dans les templates.
     min-width: 0 sur les enfants évite qu'un texte long ne les empêche de
     rétrécir sous leur min-width: auto par défaut (piège classique grid/flex). */
  .grid-responsive { grid-template-columns: 1fr !important; }
  .grid-responsive > * { min-width: 0; }
  /* la colonne latérale de l'article passe sous le texte plutôt qu'à côté :
     le "collant" (sticky) n'a plus de sens une fois empilée. */
  .article-sidebar { position: static; }

  .hero-banner-inner { min-height: 0; padding-top: var(--space-6); padding-bottom: var(--space-6); }
  /* Sur un cadre étroit et haut, "contain" réduit l'image à une bande fine
     positionnée quelque part dans la hauteur — quel que soit l'ancrage
     choisi, elle finit par passer derrière une partie du texte (qui occupe
     ici presque toute la hauteur de la bannière, empilé sur une seule
     colonne). Plus simple et plus sûr : image masquée, fond uni sombre
     (le logo reste visible dans la nav juste au-dessus). */
  .hero-banner-img { display: none; }
  .hero-banner-text h1 { font-size: 32px !important; margin-top: var(--space-2) !important; }
  .hero-banner-text p { font-size: 16px !important; }

  /* — tableaux : défilement horizontal plutôt que débordement de page — */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* — formulaire newsletter du pied de page — */
  .newsletter-form { flex-wrap: wrap; }
  .newsletter-form input[type="email"] { min-width: 0 !important; flex: 1 1 180px; }
}

/* — panneau admin : barre latérale en bandeau horizontal scrollable sous 860px.
   !important nécessaire : admin.css est chargé après site.css et pose ses
   propres règles non conditionnelles sur .admin-shell/.admin-sidebar à la
   même spécificité, qui gagneraient sinon même quand cette media query
   s'applique (l'ordre de cascade départage à spécificité égale). — */
@media (max-width: 860px) {
  .admin-shell { flex-direction: column !important; }
  .admin-sidebar {
    width: 100% !important; flex-direction: row !important; align-items: center !important;
    padding: var(--space-3) !important; gap: var(--space-3) !important; overflow-x: auto;
    border-right: none !important; border-bottom: 1px solid var(--color-divider);
  }
  .admin-sidebar nav { flex-direction: row !important; gap: 4px !important; }
  .admin-sidebar nav a { white-space: nowrap; }
  .admin-sidebar .admin-logout { margin-top: 0 !important; margin-left: auto; display: flex; gap: var(--space-3); white-space: nowrap; flex: none; }
  .admin-main { padding: var(--space-4) !important; max-width: 100% !important; }
}