/* ==========================================================================
   Moûsso Ya Nafa Sira — feuille de styles
   Concept : « Bogolan — le tissu qui parle » + logo officiel (anneaux aux couleurs du Mali)
   Hiérarchie des couleurs : BASE bogolan (~80 %) · SIGNATURE tricolore (~10 %, filets/anneaux)
   · POP wax (~10 %, 3 endroits : Nous soutenir, une bande devise, icônes Nos actions)
   Organisation :
     1. Polices          2. Variables (couleurs, espacements, typo)
     3. Motifs bogolan   4. Base / reset     5. Utilitaires & mise en page
     6. En-tête & nav    7. Composants       8. Sections
     9. Pied de page     10. Mouvement       11. Impression
   Toutes les couleurs passent par les variables ci-dessous (contrastes vérifiés WCAG AA).
   ========================================================================== */

/* 1. Polices auto-hébergées (sous-ensembles incluant ɛ Ɛ ɔ Ɔ ɲ Ɲ ŋ Ŋ pour le bamanankan)
   Licences : assets/fonts/OFL-*.txt */
@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/noto-serif-display-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Arabe : Noto Naskh Arabic (texte) et Noto Kufi Arabic (titres, devises).
   unicode-range = téléchargées uniquement quand des caractères arabes s'affichent (jamais en français). */
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/noto-naskh-arabic-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FD3E-FD3F;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/noto-naskh-arabic-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FD3E-FD3F;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("../fonts/noto-kufi-arabic-800.woff2") format("woff2");
  font-weight: 700 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200F, U+FD3E-FD3F;
}
/* Majuscules condensées extra-grasses, proches du lettrage du logo (devises, étiquettes).
   Sous-ensemble majuscules + Ɛ Ɔ Ɲ Ŋ (12 Ko) — à n'utiliser qu'avec text-transform: uppercase. */
@font-face {
  font-family: "Noto Sans Condensed Caps";
  src: url("../fonts/noto-sans-condensed-800-caps.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: optional; /* décoratif : jamais de re-mise en page tardive (repli Andika si trop lente) */
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/andika-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("../fonts/andika-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Variables ------------------------------------------------------------ */
:root {
  /* Palette bogolan */
  --earth: #2b1a12;        /* brun profond — texte principal, fonds sombres */
  --earth-2: #3d271c;      /* cartes sur fond sombre */
  --clay: #a4461f;         /* terre cuite — boutons (texte crème : 5,0:1) */
  --clay-ink: #8f3b19;     /* terre cuite foncée — texte/liens sur crème (6,3:1) et sable (5,2:1) */
  --ochre: #d69a2d;        /* ocre — accents sur fond sombre (6,8:1) */
  --ochre-soft: #e9c27a;   /* ocre clair — texte sur fond sombre */
  --cream: #f5ebdd;        /* coton brut — fond principal */
  --sand: #e7d5be;         /* sable — fond alterné */
  --indigo: #26345a;       /* indigo — focus, liens rares, sortie rapide */
  --white: #fffaf3;
  --muted: #5c4535;        /* texte secondaire sur crème (7,5:1) */
  --muted-on-dark: #d9c6ae;/* texte secondaire sur brun (9,7:1) */
  --line: #cdb79c;         /* filets décoratifs */
  --danger: #8a1c1c;       /* erreurs de formulaire (7,4:1 sur crème) */
  --success: #2f5d34;

  /* SIGNATURE — tricolore mesuré dans le logo officiel (médiane des pixels des anneaux).
     Filets, barres et anneaux UNIQUEMENT — jamais de texte coloré, jamais de grand aplat. */
  --mali-green: #07bc57;   /* vert sur crème 2,1:1 → formes seulement · texte brun sur vert 6,6:1 */
  --mali-yellow: #ffff0a;  /* jaune sur crème 1,1:1 → toujours entre vert et rouge · texte brun sur jaune 15,5:1 */
  --mali-red: #fc0707;     /* ⚠️ sujet sensible (excision) : jamais en fond ni en grand texte. Filets fins uniquement. */
  /* POP — accent wax, 3 endroits maximum, jamais dans #comprendre ni #aide */
  --wax-turquoise: #1fa3b5; /* texte brun sur turquoise 5,5:1 · turquoise sur crème 2,6:1 → formes seulement */
  --tricolor: linear-gradient(to bottom, var(--mali-green) 0 3px, var(--mali-yellow) 3px 6px, var(--mali-red) 6px 9px);
  --tricolor-h: linear-gradient(to right, var(--mali-green) 0 33.34%, var(--mali-yellow) 33.34% 66.67%, var(--mali-red) 66.67%);

  /* Carte de prévalence (tranches) */
  --map-1: #4a1d0d;  /* 75–100 % */
  --map-2: #8f3b19;  /* 50–75 % */
  --map-3: #c46a2c;  /* 25–50 % */
  --map-4: #e2a54b;  /* 5–25 % */
  --map-5: #f1d79e;  /* < 5 % */
  --map-6: #7d6aa6;  /* pratiquée dans certaines communautés */
  --map-7: #9fb0d4;  /* signalée dans la diaspora */
  --map-none: #e9dfd2;

  /* Typographie */
  --font-head: "Noto Serif Display", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-body: "Andika", "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-caps: "Noto Sans Condensed Caps", "Andika", "Arial Narrow", sans-serif;
  --fs-300: 0.875rem;
  --fs-400: 1.0625rem;
  --fs-500: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-600: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --fs-700: clamp(1.65rem, 1.35rem + 1.4vw, 2.4rem);
  --fs-800: clamp(2rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-motto: clamp(1.45rem, 1rem + 2.4vw, 3rem);

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: 1rem;
  --container: 76rem;
  --radius: 6px;
  --radius-lg: 14px;
  --header-h: 4.25rem;
  --tap: 44px;
  --shadow: 0 1px 2px rgb(43 26 18 / 0.08), 0 6px 18px rgb(43 26 18 / 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 37.5em) { :root { --gutter: 1.5rem; } }
@media (min-width: 86em)   { :root { --header-h: 4.75rem; } }

/* 3. Motifs bogolan (SVG originaux, utilisés en masque : la couleur vient de background-color)
   zigzag · points · croix · losanges concentriques */
:root {
  --motif-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 11 6 3l6 8 6-8 6 8' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
  --motif-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='4.5' cy='4.5' r='1.8'/%3E%3Ccircle cx='13.5' cy='13.5' r='1.8'/%3E%3C/svg%3E");
  --motif-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 7v14M7 14h14' stroke='%23000' stroke-width='2.6'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.5'/%3E%3Ccircle cx='26.5' cy='26.5' r='1.5'/%3E%3Ccircle cx='26.5' cy='1.5' r='1.5'/%3E%3Ccircle cx='1.5' cy='26.5' r='1.5'/%3E%3C/svg%3E");
  --motif-lozenge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 2 34 18 18 34 2 18Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M18 10 26 18 18 26 10 18Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='18' cy='18' r='2.2'/%3E%3C/svg%3E");
  --motif-bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0 12 6 6 12 0 6Z'/%3E%3Cpath d='M6 3.4 8.6 6 6 8.6 3.4 6Z' fill='%23fff'/%3E%3C/svg%3E");
  /* d'après WA0030 : colonne de chevrons + grille de points + traits */
  --motif-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='60' viewBox='0 0 72 60'%3E%3Cpath d='M3 2l9 9 9-9M3 22l9 9 9-9M3 42l9 9 9-9' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M36 5h4v4h-4zM48 5h4v4h-4zM60 5h4v4h-4zM36 16h4v4h-4zM48 16h4v4h-4zM60 16h4v4h-4zM34 31h32v3H34zM34 41h32v3H34zM34 51h32v3H34z'/%3E%3C/svg%3E");
  /* d'après WA0031 / WA0036 : losange, triangles et points */
  --motif-triangles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 3 53 28 28 53 3 28Z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M28 11l6 9H22zM28 45l-6-9h12zM11 28l9-6v12zM45 28l-9 6V22z'/%3E%3Ccircle cx='28' cy='28' r='2.4'/%3E%3Ccircle cx='3' cy='3' r='1.6'/%3E%3Ccircle cx='10' cy='3' r='1.6'/%3E%3Ccircle cx='17' cy='3' r='1.6'/%3E%3Ccircle cx='3' cy='10' r='1.6'/%3E%3Ccircle cx='53' cy='53' r='1.6'/%3E%3Ccircle cx='46' cy='53' r='1.6'/%3E%3Ccircle cx='53' cy='46' r='1.6'/%3E%3C/svg%3E");
  /* Motifs multicolores (images de fond, pas des masques) */
  --pattern-frise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='56' viewBox='0 0 128 56'%3E%3Crect width='128' height='56' fill='%23D9661F'/%3E%3Cpath d='M0 4.5h128M0 51.5h128' stroke='%231a110c' stroke-width='2'/%3E%3Cpath d='M2 7v3M6 7v3M10 7v3M14 7v3M18 7v3M22 7v3M26 7v3M30 7v3M34 7v3M38 7v3M42 7v3M46 7v3M50 7v3M54 7v3M58 7v3M62 7v3M66 7v3M70 7v3M74 7v3M78 7v3M82 7v3M86 7v3M90 7v3M94 7v3M98 7v3M102 7v3M106 7v3M110 7v3M114 7v3M118 7v3M122 7v3M126 7v3M2 46v3M6 46v3M10 46v3M14 46v3M18 46v3M22 46v3M26 46v3M30 46v3M34 46v3M38 46v3M42 46v3M46 46v3M50 46v3M54 46v3M58 46v3M62 46v3M66 46v3M70 46v3M74 46v3M78 46v3M82 46v3M86 46v3M90 46v3M94 46v3M98 46v3M102 46v3M106 46v3M110 46v3M114 46v3M118 46v3M122 46v3M126 46v3' stroke='%231a110c' stroke-width='1.4'/%3E%3Crect y='12' width='128' height='32' fill='%231a110c'/%3E%3Cg transform='translate(4 14)'%3E%3Cpath d='M0 0h28L14 14Z' fill='%23F5EBDD'/%3E%3Cpath d='M28 0v28L14 14Z' fill='%23F2B233'/%3E%3Cpath d='M28 28H0l14-14Z' fill='%23F5EBDD'/%3E%3Cpath d='M0 28V0l14 14Z' fill='%23C8321E'/%3E%3C/g%3E%3Cpath d='M36 15v26M39 15v26M42 15v26' stroke='%23F5EBDD' stroke-width='1.6'/%3E%3Cg fill='%23C9C3E6'%3E%3Crect x='48' y='16' width='4' height='4'/%3E%3Crect x='56' y='16' width='4' height='4'/%3E%3Crect x='64' y='16' width='4' height='4'/%3E%3Crect x='52' y='22' width='4' height='4'/%3E%3Crect x='60' y='22' width='4' height='4'/%3E%3Crect x='48' y='28' width='4' height='4'/%3E%3Crect x='56' y='28' width='4' height='4'/%3E%3Crect x='64' y='28' width='4' height='4'/%3E%3Crect x='52' y='34' width='4' height='4'/%3E%3Crect x='60' y='34' width='4' height='4'/%3E%3C/g%3E%3Cpath d='M74 15v26M77 15v26M80 15v26' stroke='%23F5EBDD' stroke-width='1.6'/%3E%3Cpath d='M86 15l12 13-12 13Z' fill='%23F2B233'/%3E%3Cpath d='M112 15l-12 13 12 13Z' fill='%23C8321E'/%3E%3Cpath d='M118 15v26M121 15v26M124 15v26' stroke='%23F5EBDD' stroke-width='1.6'/%3E%3C/svg%3E"); /* d'après frise-bogolan.jpg */
  --pattern-wax: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='56' viewBox='0 0 80 56'%3E%3Crect width='80' height='56' fill='%23FFFAF3'/%3E%3Cpath d='M4 3l8 6-8 6M20 3l8 6-8 6M36 3l8 6-8 6M52 3l8 6-8 6M68 3l8 6-8 6' fill='none' stroke='%231a110c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 22l12 15-12 15L8 37Z' fill='%23F2B233'/%3E%3Cpath d='M60 22l12 15-12 15-12-15Z' fill='%231FA3B5'/%3E%3Cpath d='M0 22l40 34M40 22 0 56M40 22l40 34M80 22 40 56' stroke='%231a110c' stroke-width='1.3'/%3E%3Ccircle cx='40' cy='39' r='3.2' fill='%236B3A1E'/%3E%3Ccircle cx='0' cy='39' r='3.2' fill='%236B3A1E'/%3E%3Ccircle cx='80' cy='39' r='3.2' fill='%236B3A1E'/%3E%3C/svg%3E"); /* d'après wax-color.jpg (chevrons + losanges, sans rouge) */
  --motif-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40L0 40Z'/%3E%3Cpath d='M6 22 22 6' stroke='%23fff' stroke-width='2.4'/%3E%3Ccircle cx='9' cy='9' r='2.4' fill='%23fff'/%3E%3C/svg%3E");
}

/* Bande décorative (séparateur de sections) */
.bogolan-band {
  display: block;
  height: 56px;
  background: var(--pattern-frise) repeat-x left center / 128px 56px;
}
.bogolan-band--cross {
  height: 28px;
  background-color: var(--line);
  -webkit-mask: var(--motif-cross) repeat-x center / 28px 28px;
  mask: var(--motif-cross) repeat-x center / 28px 28px;
}
.bogolan-band--ochre { background-color: var(--ochre); }

/* 4. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.6rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--earth);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
h1, h2 { text-wrap: balance; }
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
p, ul, ol, dl, figure { margin: 0 0 var(--space-4); }
ul, ol { padding-inline-start: 1.25rem; }
a { color: var(--clay-ink); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--earth); }
strong { font-weight: 700; }
abbr[title] { text-decoration: underline dotted; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .section--dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .modal :focus-visible {
  outline-color: var(--ochre);
}

/* 5. Utilitaires & mise en page ------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--indigo);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-4); color: var(--white); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 50rem; }

.section {
  position: relative;
  padding-block: var(--space-8);
}
.section--sand { background: var(--sand); }
.section--dark {
  background: var(--earth);
  color: var(--cream);
}
.section--dark a { color: var(--ochre-soft); }
.section--dark a:hover { color: var(--white); }

.section__head { max-width: 46rem; margin-bottom: var(--space-6); }
.section__head h2::after {
  content: "";
  display: block;
  width: 72px; height: 6px;
  margin-top: var(--space-3);
  border-radius: 3px;
  background: var(--tricolor-h);
}
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-caps);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-ink);
}
.section__eyebrow::before {
  content: "";
  width: 12px; height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--motif-bullet) center / contain no-repeat;
  mask: var(--motif-bullet) center / contain no-repeat;
}
.section--dark .section__eyebrow { color: var(--ochre); }
.section__title { margin-bottom: var(--space-4); }
.lead { font-size: var(--fs-500); line-height: 1.55; }
.muted { color: var(--muted); }
.section--dark .muted { color: var(--muted-on-dark); }
.small { font-size: var(--fs-300); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 37.5em) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62em) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 62em) {
  .split { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); }
  .split--reverse { grid-template-columns: 0.9fr 1.1fr; }
}

/* Listes à puces losange */
.list-lozenge { list-style: none; padding: 0; }
.list-lozenge li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-bottom: var(--space-2);
}
.list-lozenge li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 0.5em;
  width: 11px; height: 11px;
  background-color: var(--clay);
  -webkit-mask: var(--motif-bullet) center / contain no-repeat;
  mask: var(--motif-bullet) center / contain no-repeat;
}
.section--dark .list-lozenge li::before { background-color: var(--ochre); }

/* 6. En-tête -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(245 235 221 / 0.97);
  transition: box-shadow 0.25s var(--ease);
}
/* Filet tricolore (3 × 3 px) sous l'en-tête, écho aux anneaux du logo */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 9px;
  background: var(--tricolor);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
  transition: min-height 0.25s var(--ease);
}
.site-header.is-scrolled .site-header__inner { min-height: calc(var(--header-h) - 0.75rem); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-end: auto;
  min-height: var(--tap);
  color: var(--earth);
  text-decoration: none;
}
.brand__badge { width: 48px; height: 48px; flex: none; transition: width 0.25s, height 0.25s; }
.brand__badge img { width: 100%; height: 100%; }
.site-header.is-scrolled .brand__badge { width: 40px; height: 40px; }
.brand__name {
  display: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.05;
}
.brand__name span { display: block; color: var(--clay-ink); }
@media (min-width: 48em) {
  .brand__badge { width: 56px; height: 56px; }
  .brand__name { display: block; } /* mot-symbole : tablette et bureau ; mobile = badge seul */
}

.site-nav { display: none; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.5rem;
  color: var(--earth);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 6px;
  height: 6px;
  background-color: var(--clay);
  -webkit-mask: var(--motif-zigzag) repeat-x left center / 12px 6px;
  mask: var(--motif-zigzag) repeat-x left center / 12px 6px;
  transform: scaleX(0);
  transform-origin: left;
}
[dir="rtl"] .site-nav__link::after { transform-origin: right;
  transition: transform 0.25s var(--ease);
}
.site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); }
.site-nav__link.is-active { color: var(--clay-ink); }

/* Sélecteur de langue */
.lang-switch {
  display: inline-flex;
  border: 2px solid var(--earth);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.lang-switch__btn {
  min-width: 2.75rem;
  min-height: var(--tap);
  padding: 0 0.55rem;
  border: 0;
  background: transparent;
  font-size: var(--fs-300);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lang-switch__btn + .lang-switch__btn { border-inline-start: 1px solid var(--line); }
.lang-switch__btn[aria-pressed="true"] { background: var(--earth); color: var(--cream); }
.lang-switch__btn:hover:not([aria-pressed="true"]) { background: var(--sand); }
.lang-switch--dark { border-color: var(--cream); }
.lang-switch--dark .lang-switch__btn { color: var(--cream); }
.lang-switch--dark .lang-switch__btn[aria-pressed="true"] { background: var(--cream); color: var(--earth); }
.lang-switch--dark .lang-switch__btn:hover:not([aria-pressed="true"]) { background: var(--earth-2); }

.site-header__donate { display: none; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 0;
  border-radius: var(--radius);
  background: var(--earth);
  color: var(--cream);
}
.burger svg { width: 24px; height: 24px; }

@media (min-width: 86em) {
  .site-nav { display: block; }
  .site-header__donate { display: inline-flex; }
  .burger { display: none; }
  .brand { margin-inline-end: var(--space-3); }
  .site-nav { margin-inline-end: auto; }
}
/* Sans JavaScript : la navigation reste visible sous l'en-tête */
.no-js .site-nav { display: block; width: 100%; }
.no-js .site-header__inner { flex-wrap: wrap; }
.no-js .burger { display: none; }

/* Menu mobile plein écran */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-4) var(--gutter) var(--space-7);
  background: var(--earth);
  color: var(--cream);
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ochre);
  opacity: 0.07;
  -webkit-mask: var(--motif-lozenge) 0 0 / 54px 54px;
  mask: var(--motif-lozenge) 0 0 / 54px 54px;
}
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.mobile-menu__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border: 2px solid var(--cream); border-radius: var(--radius);
  background: transparent; color: var(--cream);
}
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-bottom: 1px solid rgb(245 235 221 / 0.15);
  color: var(--cream);
  font-family: var(--font-head);
  font-size: 1.4rem;
  text-decoration: none;
}
.mobile-menu__list a:hover { color: var(--ochre-soft); }

/* Sortie rapide — toujours visible */
.quick-exit {
  position: fixed;
  z-index: 400;
  inset-inline-end: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--indigo);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
}
.quick-exit:hover, .quick-exit:focus-visible { background: #1a2442; color: var(--white); }
.quick-exit:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.quick-exit svg { width: 18px; height: 18px; flex: none; }
.quick-exit__tip {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 10px);
  width: min(17rem, 80vw);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--earth);
  color: var(--cream);
  font-size: var(--fs-300);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  pointer-events: none;
}
.quick-exit:hover .quick-exit__tip, .quick-exit:focus-visible .quick-exit__tip { opacity: 1; visibility: visible; }
@media (min-width: 86em) {
  .quick-exit { top: calc(var(--header-h) + 0.75rem); bottom: auto; inset-inline-end: var(--space-4); }
  .quick-exit__tip { top: calc(100% + 10px); bottom: auto; }
}

/* 7. Composants ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.6rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--clay); color: var(--white); }
.btn--primary:hover { background: var(--clay-ink); color: var(--white); }
.btn--outline { border-color: currentColor; color: var(--earth); background: transparent; }
.btn--outline:hover { background: var(--earth); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--earth); }
.btn--light:hover { background: var(--white); color: var(--earth); }
.btn--ghost-light { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn--ghost-light:hover { background: var(--cream); color: var(--earth); }
.btn--whatsapp { background: #136c3a; color: var(--white); }  /* vert foncé : 6,6:1 avec le blanc */
.btn--whatsapp:hover { background: #0d4f2a; color: var(--white); }
.btn--small { min-height: var(--tap); padding: 0.4rem 0.9rem; font-size: var(--fs-300); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Carte générique avec coin bogolan */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 40px; height: 40px;
  border-start-start-radius: var(--radius-lg);
  background-color: var(--ochre);
  -webkit-mask: var(--motif-corner) 0 0 / 40px 40px no-repeat;
  mask: var(--motif-corner) 0 0 / 40px 40px no-repeat;
}
.card--plain::before { content: none; }
.card__icon {
  width: 3.25rem; height: 3.25rem;
  margin-bottom: var(--space-4);
  padding: 0.65rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--clay-ink);
}
.card__title { font-size: var(--fs-500); margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }
.section--dark .card { background: var(--earth-2); border-color: rgb(245 235 221 / 0.14); color: var(--cream); box-shadow: none; }
.section--dark .card__icon { background: var(--earth); color: var(--ochre); }

/* Bande de devise (moments typographiques) */
.motto {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--earth);
  color: var(--cream);
  text-align: center;
}
.motto::before, .motto::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background-color: var(--ochre);
  -webkit-mask: var(--motif-zigzag) repeat-x center / 24px 14px;
  mask: var(--motif-zigzag) repeat-x center / 24px 14px;
}
.motto::before { top: 14px; }
.motto::after { bottom: 14px; }
.motto__text {
  max-width: 58rem;
  margin: 0 auto;
  font-family: var(--font-caps);
  font-size: clamp(1.7rem, 1.1rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.motto__text em { font-style: normal; color: var(--ochre); }
.motto--clay { background: var(--clay-ink); }
.motto--clay::before, .motto--clay::after { background-color: var(--ochre-soft); }
/* POP : une seule bande devise en style wax (bandes en haut et en bas, texte sur brun uni) */
.motto--wax { padding-block: calc(56px + clamp(2rem, 1.5rem + 2vw, 3.5rem)); }
.motto--wax::before, .motto--wax::after {
  height: 56px;
  background: var(--pattern-wax) repeat-x left center / 80px 56px;
  -webkit-mask: none;
  mask: none;
}
.motto--wax::before { top: 0; }
.motto--wax::after { bottom: 0; transform: scaleY(-1); }
.motto--wax .motto__text em { color: var(--wax-turquoise); } /* 5,5:1 sur brun */
.motto--inline { margin-top: var(--space-7); border-radius: var(--radius-lg); padding-inline: var(--space-5); }

/* Vidéos : façade légère (aucune requête YouTube avant le clic) */
.video-grid { display: grid; gap: var(--space-5); }
@media (min-width: 37.5em) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.video-card { margin: 0; }
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--earth);
}
.video-card__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--earth);
  color: var(--cream);
}
.video-card__play img, .video-card__play picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease), opacity 0.3s; }
.video-card__play:hover img { transform: scale(1.03); opacity: 0.85; }
/* Couverture neutre (vidéos dont la miniature est jugée trop explicite) */
.video-card__cover {
  position: absolute;
  inset: 0;
  background: var(--earth-2);
}
.video-card__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ochre);
  opacity: 0.35;
  -webkit-mask: var(--motif-lozenge) center / 44px 44px;
  mask: var(--motif-lozenge) center / 44px 44px;
}
.video-card__cover--alt::before { -webkit-mask-image: var(--motif-cross); mask-image: var(--motif-cross); -webkit-mask-size: 30px 30px; mask-size: 30px 30px; }
.video-card__badge {
  position: absolute;
  left: 50%; top: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 4.25rem; height: 4.25rem;
  margin: -2.125rem 0 0 -2.125rem;
  border: 0;
  border-radius: 50%;
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5.5px var(--mali-red), 0 0 0 8px var(--mali-yellow), 0 0 0 10.5px var(--mali-green), 0 4px 18px 6px rgb(0 0 0 / 0.35);
  transition: transform 0.2s var(--ease), background-color 0.2s;
}
.video-card__badge svg { width: 1.6rem; height: 1.6rem; margin-left: 4px; }
.video-card__play:hover .video-card__badge { transform: scale(1.08); background: var(--clay-ink); }
.video-card__duration {
  position: absolute;
  inset-inline-end: var(--space-2); bottom: var(--space-2);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgb(20 12 8 / 0.85);
  color: var(--white);
  font-size: var(--fs-300);
  font-weight: 700;
}
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__caption { padding-top: var(--space-3); }
.video-card__title { font-family: var(--font-body); font-size: var(--fs-500); font-weight: 700; margin: 0 0 var(--space-1); line-height: 1.3; }
.video-card__meta { margin: 0; font-size: var(--fs-300); color: var(--muted); }
.section--dark .video-card__meta { color: var(--muted-on-dark); }
.video-card__note { margin: var(--space-1) 0 0; font-size: var(--fs-300); font-style: italic; color: var(--muted); }
.section--dark .video-card__note { color: var(--muted-on-dark); }

/* Fenêtre modale vidéo */
.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgb(20 12 8 / 0.92);
}
.modal__dialog { width: min(64rem, 100%); color: var(--cream); }
.modal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.modal__title { margin: 0; font-size: var(--fs-500); }
.modal__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tap); height: var(--tap);
  border: 2px solid var(--cream); border-radius: 50%;
  background: transparent; color: var(--cream);
}
.modal__close svg { width: 20px; height: 20px; }
.modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Chargement (losanges bogolan) */
.loader { display: flex; gap: 8px; justify-content: center; align-items: center; padding: var(--space-6); }
.loader span {
  width: 14px; height: 14px;
  background-color: var(--clay);
  -webkit-mask: var(--motif-bullet) center / contain no-repeat;
  mask: var(--motif-bullet) center / contain no-repeat;
  animation: loader-pulse 1s infinite ease-in-out both;
}
.loader span:nth-child(2) { animation-delay: 0.15s; }
.loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes loader-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } }

/* Accordéons */
.accordion { border-top: 2px solid var(--earth); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__heading { margin: 0; font-size: var(--fs-600); }
.accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 4rem;
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  font-family: var(--font-head);
  font-weight: 700;
  text-align: start;
}
.accordion__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.25rem; height: 2.25rem;
  background-color: var(--sand);
  border-radius: 50%;
  color: var(--clay-ink);
  font-family: var(--font-body);
  font-size: var(--fs-300);
}
.accordion__label { flex: 1; }
.accordion__chevron { width: 24px; height: 24px; flex: none; color: var(--clay-ink); transition: transform 0.25s var(--ease); }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__trigger:hover .accordion__label { color: var(--clay-ink); }
.accordion__panel { padding: var(--space-2) 0 var(--space-6); }
.accordion__panel > :last-child { margin-bottom: 0; }
.accordion-tools { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }

/* Avertissement contenu sensible */
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 6px solid var(--indigo);
  border-radius: var(--radius);
  background: var(--white);
}
.notice svg { width: 26px; height: 26px; flex: none; color: var(--indigo); margin-top: 2px; }
.notice p { margin: 0; }

/* Types de MGF */
.types { list-style: none; padding: 0; display: grid; gap: var(--space-3); counter-reset: none; }
@media (min-width: 48em) { .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.types li { padding: var(--space-4); border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.types strong { display: block; color: var(--clay-ink); font-family: var(--font-head); font-size: var(--fs-500); }
.diagram { margin: var(--space-4) 0 0; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.diagram__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
@media (min-width: 48em) { .diagram__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.diagram__grid li { text-align: center; font-weight: 700; font-size: var(--fs-300); }
.diagram__grid svg { width: 100%; max-width: 8rem; margin: 0 auto var(--space-2); }
.diagram .d-skin { fill: var(--sand); stroke: var(--earth); stroke-width: 2; }
.diagram .d-inner { fill: var(--cream); stroke: var(--earth); stroke-width: 2; }
.diagram .d-part { fill: var(--muted); }
.diagram .d-removed { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-dasharray: 4 3; }
.diagram .d-seam { fill: none; stroke: var(--indigo); stroke-width: 2.5; }
.diagram .d-note { fill: var(--indigo); }
.diagram figcaption { font-size: var(--fs-300); color: var(--muted); }

/* Conséquences en deux colonnes */
.two-cols { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.two-cols__col { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--white); border-top: 6px solid var(--clay); }
.two-cols__col--long { border-top-color: var(--indigo); }
.two-cols__col h4 { margin-bottom: var(--space-3); }

/* Statistiques animées */
.stats-group { margin-bottom: var(--space-6); }
.stats-group__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-500); }
.stats-group__title::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.stat {
  display: flex;
  flex-direction: column;
  padding: calc(var(--space-5) + 9px) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--tricolor) top / 100% 9px no-repeat, var(--earth);
  color: var(--cream);
}
.stat--mali { background: var(--tricolor) top / 100% 9px no-repeat, var(--clay-ink); }
.stat__value {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ochre);
  font-variant-numeric: tabular-nums;
}
.stat--mali .stat__value { color: var(--white); }
.stat__unit { font-size: 0.45em; margin-inline-start: 0.15em; color: var(--ochre-soft); }
.stat--mali .stat__unit { color: var(--sand); }
.stat__label { flex: 1; margin-bottom: var(--space-3); }
.stat__source { font-size: var(--fs-300); color: var(--ochre-soft); }
.stat--mali .stat__source { color: var(--cream); }
.stat__source:hover { color: var(--white); }

/* Grand chiffre (section prévention) */
.big-number { margin: 0; padding: calc(var(--space-6) + 9px) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--tricolor) top / 100% 9px no-repeat, var(--earth); color: var(--cream); position: relative; overflow: hidden; }
.big-number::after {
  content: "";
  position: absolute;
  inset-inline-end: -30px; bottom: -30px;
  width: 180px; height: 180px;
  background-color: var(--ochre);
  opacity: 0.18;
  -webkit-mask: var(--motif-lozenge) 0 0 / 60px 60px;
  mask: var(--motif-lozenge) 0 0 / 60px 60px;
}
.big-number__value {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 2.5rem + 6vw, 6.5rem);
  line-height: 0.95;
  color: var(--ochre);
  font-variant-numeric: tabular-nums;
}
.big-number__unit { display: block; font-family: var(--font-head); font-size: var(--fs-600); color: var(--ochre-soft); margin-bottom: var(--space-3); }
.big-number__label { position: relative; z-index: 1; margin: 0 0 var(--space-3); font-size: var(--fs-500); }

/* Témoignages (masqué tant que vide) */
.testimonials { margin-top: var(--space-7); }
.testimonial { margin: 0; }
.testimonial blockquote { margin: 0 0 var(--space-3); font-family: var(--font-head); font-size: var(--fs-500); line-height: 1.4; }
.testimonial blockquote::before { content: "« "; color: var(--clay); }
.testimonial blockquote::after { content: " »"; color: var(--clay); }
.testimonial figcaption { font-weight: 700; color: var(--clay-ink); }
.photo-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: var(--fs-300);
  text-align: center;
  padding: var(--space-4);
}

/* Frise chronologique */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; padding-inline-start: 2.25rem; }
.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.7rem; top: 0.5rem; bottom: 0.5rem;
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--clay) 0 10px, transparent 10px 16px);
}
.timeline__item { position: relative; padding-bottom: var(--space-6); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -2.25rem; top: 0.15rem;
  width: 1.65rem; height: 1.65rem;
  background-color: var(--earth);
  -webkit-mask: var(--motif-bullet) center / contain no-repeat;
  mask: var(--motif-bullet) center / contain no-repeat;
}
.timeline__date {
  display: inline-block;
  margin-bottom: var(--space-1);
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--earth);
  color: var(--ochre-soft);
  font-size: var(--fs-300);
  font-weight: 700;
}
.timeline__title { font-size: var(--fs-500); margin-bottom: var(--space-2); }
.timeline__item p { margin: 0; }

.artists { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; }
.artists li {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 700;
  font-size: var(--fs-300);
}
.artists li.artists__lead { background: var(--earth); color: var(--cream); border-color: var(--earth); }

/* Filtres de la ressourcethèque */
.filters { margin-bottom: var(--space-5); }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.filters__label { margin-inline-end: var(--space-2); font-weight: 700; font-size: var(--fs-300); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1rem;
  border: 2px solid var(--earth);
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-300);
  font-weight: 700;
}
.chip[aria-pressed="true"] { background: var(--earth); color: var(--cream); }
.chip:hover:not([aria-pressed="true"]) { background: var(--white); }
.filters__count { margin: 0; font-size: var(--fs-300); color: var(--muted); }

.resources { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 37.5em) { .resources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .resources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.resource { height: 100%; padding: var(--space-5) var(--space-5) var(--space-4); }
.resource__top { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); padding-inline-start: 1.6rem; }
.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  background: var(--earth);
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--podcast { background: var(--indigo); }
.badge--article { background: var(--earth); }
.badge--video { background: var(--clay-ink); }
.badge--guide { background: var(--success); }
.badge--lang { background: transparent; color: var(--earth); border: 1px solid var(--earth); }
.resource__title { margin: 0 0 var(--space-2); font-family: var(--font-body); font-size: var(--fs-400); line-height: 1.35; }
.resource__title a { color: var(--earth); text-decoration: none; }
.resource__title a:hover { color: var(--clay-ink); text-decoration: underline; }
.resource__title a::after { content: ""; position: absolute; inset: 0; } /* carte entièrement cliquable */
.resource__title button { all: unset; cursor: pointer; }
.resource__title button::after { content: ""; position: absolute; inset: 0; }
.resource__title button:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.resource__source { margin: 0 0 var(--space-3); font-size: var(--fs-300); color: var(--muted); }
.resource__topics { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: auto 0 0; padding: 0; list-style: none; }
.resource__topics li { padding: 0 0.5rem; border-radius: 999px; background: var(--sand); font-size: 0.78rem; }
.resources__empty { padding: var(--space-5); text-align: center; color: var(--muted); }
.subheading { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-7) 0 var(--space-4); font-size: var(--fs-600); }

/* Carte de prévalence */
.map { display: grid; gap: var(--space-5); }
@media (min-width: 62em) { .map { grid-template-columns: 1.4fr 0.6fr; align-items: start; } }
.map__canvas { position: relative; border-radius: var(--radius-lg); background: #dfe6ec; overflow: hidden; min-height: 12rem; }
.map__canvas svg { width: 100%; height: auto; }
.map__canvas path { stroke: var(--white); stroke-width: 0.6; stroke-linejoin: round; transition: opacity 0.15s; }
.map__canvas path.is-data { cursor: pointer; }
.map__canvas path.is-data:hover, .map__canvas path.is-hover { opacity: 0.75; }
.map__canvas path.is-mali { stroke: var(--earth); stroke-width: 2.5; }
.map__label { font-family: var(--font-body); font-weight: 700; font-size: 16px; fill: var(--white); paint-order: stroke; stroke: var(--earth); stroke-width: 3px; pointer-events: none; }
.map__tooltip {
  position: absolute;
  z-index: 2;
  max-width: 15rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--earth);
  color: var(--cream);
  font-size: var(--fs-300);
  line-height: 1.35;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
}
.map__tooltip strong { display: block; color: var(--ochre-soft); }
.legend { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.legend li { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--fs-300); }
.legend__swatch { width: 1.4rem; height: 1rem; flex: none; border-radius: 3px; border: 1px solid rgb(43 26 18 / 0.25); }
.sw-1 { background: var(--map-1); } .sw-2 { background: var(--map-2); } .sw-3 { background: var(--map-3); }
.sw-4 { background: var(--map-4); } .sw-5 { background: var(--map-5); } .sw-6 { background: var(--map-6); }
.sw-7 { background: var(--map-7); } .sw-none { background: var(--map-none); }
.sw-mali { background: var(--map-1); outline: 2.5px solid var(--earth); outline-offset: 1px; }
.map-table { margin-top: var(--space-5); }
.map-table summary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap);
  font-weight: 700; color: var(--clay-ink);
  cursor: pointer;
}
.table-wrap { overflow-x: auto; margin-top: var(--space-3); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); background: var(--white); }
.data-table th, .data-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); text-align: start; }
.data-table thead th { background: var(--earth); color: var(--cream); }
.data-table th button {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.25rem; padding: 0;
  border: 0; background: transparent; color: inherit; font-weight: 700;
}
.data-table th button::after { content: "↕"; opacity: 0.6; }
.data-table th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.data-table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }
.data-table tr.is-mali td { font-weight: 700; background: var(--sand); }

/* Soutenir */
.support-card .btn { margin-top: auto; align-self: flex-start; }
.support-card p { margin-bottom: var(--space-4); }
.share { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.share .btn { margin-top: 0; }
.share__status { flex-basis: 100%; margin: var(--space-2) 0 0; font-size: var(--fs-300); color: var(--success); min-height: 1.4em; }

/* Aide */
.help-panel {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.help-panel h3 { font-size: var(--fs-500); }
.help-panel--todo { border: 2px dashed var(--clay-ink); background: var(--white); }

/* Formulaire */
.form { display: grid; gap: var(--space-4); }
.form__field { display: grid; gap: var(--space-1); }
.form__label { font-weight: 700; }
.form__hint { font-size: var(--fs-300); color: var(--muted); }
.form__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--muted);
  border-radius: var(--radius);
  background: var(--white);
}
textarea.form__input { min-height: 9rem; resize: vertical; }
.form__input:focus-visible { outline: 3px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
.form__input[aria-invalid="true"] { border-color: var(--danger); }
.form__error { margin: 0; color: var(--danger); font-size: var(--fs-300); font-weight: 700; }
.form__error:empty { display: none; }
.form__check { display: flex; gap: var(--space-3); align-items: flex-start; }
.form__check input { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--clay); }
.form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__summary { padding: var(--space-4); border: 2px solid var(--danger); border-radius: var(--radius); background: var(--white); }
.form__summary:focus { outline: 3px solid var(--indigo); }
.form__summary ul { margin: var(--space-2) 0 0; }
.form__status { margin: 0; padding: var(--space-4); border-radius: var(--radius); background: var(--white); border-inline-start: 6px solid var(--success); }
.form__status--error { border-inline-start-color: var(--danger); }
.req { color: var(--danger); }
.contact-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.contact-links a, .contact-links span {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap);
  font-weight: 700;
}
.contact-links svg { width: 26px; height: 26px; flex: none; color: var(--clay-ink); }
.todo-note { font-size: var(--fs-300); font-weight: 400; color: var(--muted); }

/* 8. Sections ------------------------------------------------------------- */
/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  background: var(--earth);
  color: var(--cream);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ochre);
  opacity: 0.09;
  -webkit-mask: var(--motif-chevron) 0 0 / 72px 60px;
  mask: var(--motif-chevron) 0 0 / 72px 60px;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background-color: var(--clay);
  -webkit-mask: var(--motif-zigzag) repeat-x center / 24px 14px;
  mask: var(--motif-zigzag) repeat-x center / 24px 14px;
}
.hero__inner { position: relative; display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 62em) { .hero__inner { grid-template-columns: 1.35fr 0.65fr; } }
.hero__kicker { display: block; margin-bottom: var(--space-3); color: var(--ochre); font-family: var(--font-caps); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.hero__title { margin-bottom: var(--space-5); font-size: clamp(2.4rem, 1.4rem + 5vw, 5rem); line-height: 1.02; }
.hero__name { display: block; }
.hero__name span { color: var(--ochre); }
.hero__tagline { max-width: 36rem; margin-bottom: var(--space-6); font-size: var(--fs-600); line-height: 1.35; color: var(--ochre-soft); font-family: var(--font-head); }
.hero__ctas { margin-bottom: var(--space-5); }
.hero__clip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-weight: 700;
  text-align: start;
}
.hero__clip-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem;
  margin: 8px; /* place pour les anneaux */
  border-radius: 50%;
  background: var(--cream);
  color: var(--earth);
  box-shadow: 0 0 0 2.5px var(--mali-red), 0 0 0 5px var(--mali-yellow), 0 0 0 7.5px var(--mali-green);
  transition: transform 0.2s var(--ease);
}
.hero__clip-icon svg { width: 1.2rem; height: 1.2rem; margin-left: 3px; }
.hero__clip:hover .hero__clip-icon { transform: scale(1.08); background: var(--ochre); }
.hero__clip small { display: block; font-weight: 400; color: var(--muted-on-dark); }

/* Valeurs */
.value-card__num { font-family: var(--font-head); font-size: var(--fs-700); color: var(--clay); line-height: 1; margin-bottom: var(--space-3); }
.next-block { margin-top: var(--space-7); }
.next-block__title { display: flex; align-items: center; gap: var(--space-3); }
.next-block__title::before {
  content: "";
  width: 2rem; height: 2rem; flex: none;
  background-color: var(--clay);
  -webkit-mask: var(--motif-lozenge) center / contain no-repeat;
  mask: var(--motif-lozenge) center / contain no-repeat;
}
.quote-aside {
  margin: 0;
  padding: var(--space-5);
  border-inline-start: 6px solid var(--ochre);
  background: var(--white);
  border-radius: 0;
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  font-family: var(--font-head);
  font-size: var(--fs-500);
  line-height: 1.45;
}

/* 9. Pied de page --------------------------------------------------------- */
.site-footer {
  position: relative;
  padding: var(--space-8) 0 calc(var(--space-7) + 3rem);
  background: var(--tricolor) top / 100% 9px no-repeat, var(--earth);
  color: var(--cream);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 23px 0 0;
  background-color: var(--ochre);
  opacity: 0.05;
  -webkit-mask: var(--motif-triangles) 0 0 / 56px 56px;
  mask: var(--motif-triangles) 0 0 / 56px 56px;
  pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer::before {
  content: "";
  position: absolute;
  top: 9px; left: 0; right: 0;
  height: 14px;
  background-color: var(--ochre);
  -webkit-mask: var(--motif-zigzag) repeat-x center / 24px 14px;
  mask: var(--motif-zigzag) repeat-x center / 24px 14px;
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--ochre-soft); }
.site-footer__motto {
  margin: 0 0 var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgb(245 235 221 / 0.2);
  font-family: var(--font-head);
  font-size: var(--fs-600);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ochre-soft);
  text-wrap: balance;
}
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer__brand { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); text-decoration: none; }
.site-footer__brand picture, .site-footer__brand img { width: 96px; height: 96px; flex: none; }
.site-footer__brand span { font-family: var(--font-head); font-size: var(--fs-500); }
.site-footer__title { font-family: var(--font-body); font-size: var(--fs-300); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); margin-bottom: var(--space-3); }
.site-footer__list { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--space-5); }
.site-footer__list li { break-inside: avoid; }
.site-footer__list a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgb(245 235 221 / 0.2);
  font-size: var(--fs-300);
  color: var(--muted-on-dark);
}
.site-footer__bottom a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Retour en haut */
.to-top {
  position: fixed;
  z-index: 90;
  inset-inline-start: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--earth);
  color: var(--cream);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 22px; height: 22px; }
@media (min-width: 86em) { .to-top { inset-inline-start: auto; inset-inline-end: var(--space-4); } }

/* Page mentions légales */
.legal { padding-block: var(--space-8); }
.legal h1 { font-size: var(--fs-700); }
.legal h2 { font-size: var(--fs-600); margin-top: var(--space-7); }
.legal dl { display: grid; gap: var(--space-1) var(--space-4); }
@media (min-width: 37.5em) { .legal dl { grid-template-columns: 14rem 1fr; } }
.legal dt { font-weight: 700; }
.legal dd { margin: 0 0 var(--space-3); }
.todo { background: #fbe6c2; padding: 0 0.3rem; border-radius: 3px; }

/* 10. Mouvement ------------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* 11. Impression : « Comprendre l'excision » et « Besoin d'aide » s'impriment proprement */
@media print {
  @page { margin: 1.5cm; }
  :root { --fs-motto: 16pt; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .site-header, .mobile-menu, .quick-exit, .to-top, .modal, .skip-link, .hero, .motto, .bogolan-band,
  #prevention, #qui-sommes-nous, #origine, #actions, #s-informer, #soutenir, #contact,
  .accordion-tools, .accordion__chevron, .video-grid, .video-card, .diagram-toggle, .map__canvas, .legend-wrap .btn,
  .site-footer__grid, .site-footer__bottom .lang-switch, .notice svg { display: none !important; }
  .section, .site-footer { padding: 0 0 1cm; background: #fff !important; color: #000 !important; }
  .site-footer::before, .card::before, .hero::before { content: none !important; }
  .site-footer__motto { color: #000; border: 0; }
  .accordion__panel[hidden], .map-table:not([open]) > :not(summary) { display: block !important; }
  .accordion__trigger { min-height: 0; padding: 0.4cm 0 0.2cm; }
  .accordion__item { break-inside: auto; }
  h2, h3, h4 { break-after: avoid; }
  .stat, .two-cols__col, .types li, .help-contact, .help-panel, .notice { break-inside: avoid; background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .stat__value, .stat__unit, .stat__source, .stat--mali .stat__value { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  .data-table thead th { background: #eee; color: #000; }
}

/* Classes de titre visuelles (indépendantes du niveau sémantique) */
.h4 { font-size: var(--fs-500); }
.h5 { font-family: var(--font-body); font-size: var(--fs-400); }

/* En-tête : largeur étendue et éléments insécables pour tenir sur une ligne en bureau */
.site-header__inner { max-width: 92rem; }
.brand__name, .site-header__donate, .lang-switch__btn { white-space: nowrap; }
@media (min-width: 86em) {
  .site-nav__link { padding: 0 0.42rem; font-size: 0.9rem; }
  .site-nav__link::after { left: 0.42rem; right: 0.42rem; }
  .site-nav__list { flex-wrap: nowrap; }
}
.big-number a { position: relative; z-index: 1; color: var(--ochre-soft); }
.big-number a:hover { color: var(--white); }
.split .video-grid { grid-template-columns: minmax(0, 1fr); }
.site-footer__list--single { columns: 1; }
/* Bouton « don » de l'en-tête : uniquement en bureau (le menu mobile a le sien) */
.site-header .site-header__donate { display: none; }
@media (min-width: 86em) { .site-header .site-header__donate { display: inline-flex; } }
.burger, .lang-switch { flex: none; }
.form__check input { width: 1.75rem; height: 1.75rem; }
.quick-exit { z-index: 600; } /* toujours au-dessus du menu et de la fenêtre vidéo */
@media print {
  .no-print { display: none !important; }
  .map-table::details-content { content-visibility: visible; display: block; }
  .map-table summary { display: none; }
}
.motto--clay .motto__text em { color: var(--ochre-soft); } /* 4,4:1 sur terre cuite foncée — texte large (≥ 3:1) */


/* ==========================================================================
   POP wax — « Nous soutenir » (bande d'appel) et icônes « Nos actions » uniquement
   ========================================================================== */
#soutenir { padding-top: calc(var(--space-8) + 40px); }
#soutenir::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: var(--pattern-wax) repeat-x left bottom / 57px 40px;
}
.btn--primary[data-donate-link]:hover, .btn--primary[data-donate-link]:focus-visible {
  background: var(--wax-turquoise);
  color: var(--earth); /* 5,5:1 */
}
#actions .card__icon { background: var(--wax-turquoise); color: var(--earth); }
#actions .card:nth-child(even) .card__icon { background: var(--ochre); color: var(--earth); }
.badge { font-family: var(--font-caps); font-weight: 800; letter-spacing: 0.05em; }

/* Impression : logo en couleur, petit, en haut de page */
@media print {
  .site-header { display: block !important; position: static; background: #fff; box-shadow: none; }
  .site-header::after, .site-nav, .lang-switch, .burger, .site-header__donate { display: none !important; }
  .site-header__inner { min-height: 0; padding-block: 0 0.4cm; }
  .brand__badge { width: 1.4cm; height: 1.4cm; }
  .brand__name { display: block; color: #000; }
  .brand__badge img, .site-footer__brand img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #soutenir::before { display: none; }
}

/* ==========================================================================
   v3 — Photos & vidéo d'Awa, contacts Mali, crédit développeur, arabe (RTL)
   ========================================================================== */

/* Sélecteur de langue compact (< 420 px) : liste déroulante native dans l'en-tête */
.lang-select { display: none; flex: none; }
.lang-select__input {
  min-height: var(--tap);
  padding: 0 0.6rem;
  border: 2px solid var(--earth);
  border-radius: 999px;
  background: var(--cream);
  color: var(--earth);
  font-weight: 700;
}
@media (max-width: 26.24em) {
  .lang-select { display: block; }
  .site-header__inner > .lang-switch { display: none; }
}

/* Accueil : portrait d'Awa en arche, liseré bogolan, filet tricolore, badge en sceau */
.hero__photo {
  position: relative;
  justify-self: center;
  order: -1;
  width: min(270px, 70vw);
  margin: var(--space-4) auto 0;
}
.hero__photo > picture:first-child {
  display: block;
  padding: 7px;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  background: var(--pattern-frise) repeat left top / 128px 56px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.4);
}
.hero__portrait {
  width: 100%;
  height: auto;
  max-height: 55vh;
  aspect-ratio: 620 / 780;
  object-fit: cover;
  object-position: top;
  border-radius: 999px 999px calc(var(--radius-lg) - 4px) calc(var(--radius-lg) - 4px);
}
.hero__photo::after { /* filet tricolore sous l'arche */
  content: "";
  display: block;
  width: 64%;
  height: 9px;
  margin: var(--space-3) auto 0;
  border-radius: 5px;
  background: var(--tricolor-h);
}
.hero__seal {
  position: absolute;
  inset-inline-end: -14px;
  bottom: 14px;
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 6px 14px rgb(0 0 0 / 0.45));
}
.hero__seal img { width: 100%; height: 100%; }
@media (min-width: 62em) {
  .hero__photo { order: 0; width: 340px; margin: 0 auto; }
  .hero__seal { width: 112px; height: 112px; inset-inline-end: -40px; bottom: 26px; }
}
@media (max-width: 61.99em) {
  .hero { padding-top: var(--space-5); }
  .hero__inner { gap: var(--space-5); }
}

/* Qui sommes-nous : la fondatrice */
.founder {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
@media (min-width: 37.5em) { .founder { grid-template-columns: auto 1fr; gap: var(--space-6); } }
.founder__photo { justify-self: center; }
.founder__photo img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  /* anneaux comme le logo : crème, rouge, jaune, vert */
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 7px var(--mali-red), 0 0 0 10px var(--mali-yellow), 0 0 0 13px var(--mali-green);
  margin: 13px;
}
.founder__name { font-size: var(--fs-600); margin-bottom: var(--space-2); }
.founder__body p:last-of-type { margin-bottom: var(--space-4); }
.founder__quote { margin: 0 0 var(--space-4); padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--ochre); font-family: var(--font-head); font-size: var(--fs-500); }

/* Origine : photo en studio + vidéo amateur */
.timeline__photo { margin: var(--space-4) 0; max-width: 240px; }
.timeline__photo img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.studio-video { margin: 0; max-width: 640px; }
.studio-video__frame {
  position: relative;
  aspect-ratio: 624 / 352;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--earth);
}
.studio-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* Nos actions : carte avec photo */
.card--media::before { content: none; }
.card__media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4); }
.card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}
.card__caption { padding: var(--space-2) var(--space-5) 0; font-size: var(--fs-300); color: var(--muted); }

/* Besoin d'aide : cartes de contact au Mali */
.help-contacts { display: grid; gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
@media (min-width: 37.5em) { .help-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help-contact {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-5);
  border: 2px solid var(--earth);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--earth);
  text-decoration: none;
}
.help-contact svg { grid-row: span 2; width: 2.5rem; height: 2.5rem; color: var(--clay-ink); }
.help-contact__label { font-weight: 700; }
.help-contact__value {
  justify-self: start;
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.help-contact:hover, .help-contact:focus-visible { background: var(--earth); color: var(--cream); }
.help-contact:hover svg, .help-contact:focus-visible svg { color: var(--ochre); }

/* Réalisation : crédit développeur (après le contenu de l'association) */
.realisation {
  position: relative;
  padding-block: calc(var(--space-7) + 9px) var(--space-7);
  background: var(--tricolor) top / 100% 9px no-repeat, var(--earth);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
}
.realisation::before {
  content: "";
  position: absolute;
  inset: 9px 0 0;
  background-color: var(--ochre);
  opacity: 0.06;
  -webkit-mask: var(--motif-chevron) 0 0 / 72px 60px;
  mask: var(--motif-chevron) 0 0 / 72px 60px;
  pointer-events: none;
}
.realisation__inner { position: relative; max-width: 46rem; }
.realisation__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-caps);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ochre);
}
.realisation__title { margin-bottom: var(--space-2); font-size: var(--fs-600); color: var(--cream); }
.realisation__title strong { color: var(--ochre-soft); }
.realisation__text { margin-bottom: var(--space-4); color: var(--muted-on-dark); }

/* Pied de page : crédit lisible */
.site-footer__credit { margin: var(--space-6) 0 0; font-size: var(--fs-400); color: var(--cream); }
.site-footer__credit a { color: var(--ochre-soft); font-weight: 700; }

/* ---------- Arabe : polices, tailles, et ce qui ne doit pas être espacé ---------- */
html:lang(ar) { /* sur <html> seulement : un sélecteur :lang() universel coûte cher à chaque élément */
  --font-body: "Noto Naskh Arabic", "Andika", "Segoe UI", sans-serif;
  --font-head: "Noto Kufi Arabic", "Noto Naskh Arabic", "Noto Serif Display", serif;
  --font-caps: "Noto Kufi Arabic", "Noto Naskh Arabic", "Andika", sans-serif;
}
html:lang(ar) body { font-size: 1.125rem; line-height: 1.85; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3, html:lang(ar) h4 { line-height: 1.45; }
/* L'arabe est une écriture liée : jamais d'espacement entre les lettres ni de capitales */
html:lang(ar) .section__eyebrow, html:lang(ar) .hero__kicker, html:lang(ar) .motto__text, html:lang(ar) .badge,
html:lang(ar) .site-footer__title, html:lang(ar) .site-footer__motto, html:lang(ar) .realisation__label,
html:lang(ar) .lang-switch__btn { letter-spacing: 0; }
html:lang(ar) .motto__text { line-height: 1.5; }
html:lang(ar) .hero__title { line-height: 1.25; }
/* Icônes directionnelles retournées en RTL (pas le logo, ni le triangle « lecture », ni la carte) */
[dir="rtl"] .quick-exit svg, [dir="rtl"] .card::before { transform: scaleX(-1); }
/* 4 langues : navigation de bureau un peu plus compacte pour tenir sur une ligne dès 1376 px */
@media (min-width: 86em) {
  .site-nav__link { padding: 0 0.32rem; font-size: 0.86rem; }
  .site-nav__link::after { left: 0.32rem; right: 0.32rem; }
  .site-header__inner { gap: var(--space-2); }
}
/* L'adresse e-mail est longue : police de texte plus petite, coupure seulement après « @ » si nécessaire */
.help-contact[data-contact="email"] .help-contact__value { font-family: var(--font-body); font-weight: 700; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); overflow-wrap: normal; word-break: normal; }
/* Bureau : le sceau déborde moins, et la photo s'adapte entre 992 et 1440 px (sceau jamais rogné, LTR comme RTL) */
@media (min-width: 62em) {
  .hero__photo { width: clamp(270px, 24vw + 40px, 340px); }
  .hero__seal { inset-inline-end: -24px; }
}
@media print {
  #realisation, .site-footer__credit, .studio-video, .lang-select { display: none !important; }
  .hero__photo { display: none; }
}