/* =========================================================================
   ACCI — Association des Créateurs de Contenu Ivoiriens
   Système de design — feuille de style principale
   Palette inspirée du drapeau ivoirien : orange, blanc, vert.
   ========================================================================= */

:root {
  /* Couleurs de marque */
  --orange: #FF7105;          /* orange de marque — prélevé sur le logo (pixels dominants) */
  --orange-d: #E06304;        /* orange soutenu — survol des aplats */
  --orange-l: #FFF4E8;
  /* Deux variantes accessibles (WCAG AA). L'orange de marque ne peut pas
     porter de texte blanc : #fff sur #F77F00 ne donne que 2,63:1.
     --orange-solid : fond des boutons et bandeaux à texte blanc → 5,20:1
     --orange-text  : orange utilisé COMME texte sur blanc/teinte → 6,07:1 */
  --orange-solid: #C25604;   /* pastilles et boutons : logo assombri de 24 %, blanc lisible à 4,54:1 */
  --orange-solid-d: #A34803; /* survol de la pastille */
  --orange-text: #A34700;
  --green: #0B7A3B;
  --green-d: #0B3D2E;
  --green-l: #E8F4ED;
  --green-deep: #07301F;

  /* Neutres */
  --ink: #14201b;
  --body: #3d4a44;
  --muted: #6b776f;
  /* --muted (#6b776f) ne tient pas le rapport 4,5:1 sur les fonds teintés :
     4,41:1 sur --bg-soft, 4,04:1 sous l'en-tête translucide. --muted-strong
     est sa variante conforme (6,05:1 sur --bg-soft). */
  --muted-strong: #55625b;
  --line: #e4eae6;
  --line-2: #eef2f0;
  --bg: #ffffff;
  --bg-soft: #f6f9f7;
  --bg-tint: #f1f6f2;
  --white: #ffffff;

  /* Accent secondaire (sécurité / alerte) */
  --danger: #c0392b;
  --danger-l: #fdeceb;
  --warn: #c87f0a;
  --warn-l: #fdf4e3;
  --info: #1b6ec2;
  --info-l: #eaf2fb;

  /* Typo */
  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Mesures */
  --container: 1180px;
  --narrow: 820px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(11, 61, 46, .06), 0 1px 2px rgba(11, 61, 46, .04);
  --shadow: 0 10px 30px -12px rgba(11, 61, 46, .18);
  --shadow-lg: 0 24px 60px -20px rgba(11, 61, 46, .28);
  --ring: 0 0 0 3px var(--green-deep), 0 0 0 6px rgba(255, 255, 255, .95);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* En-tête sur deux niveaux : la barre d'identité, puis la navigation.
     Les deux se cumulent dans la hauteur collante, d'où --masthead-h, qui
     sert aussi de décalage d'ancre (scroll-padding-top). */
  --header-h: 68px;
  --navrow-h: 48px;
  --masthead-h: calc(var(--header-h) + var(--navrow-h));

  /* Hauteur réservée en bas de page aux commandes flottantes (assistant et
     retour en haut). Sans elle, elles recouvrent les mentions légales. */
  --float-safe: 96px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Garantit que l'attribut [hidden] masque réellement l'élément même si une
   règle .classe définit display (sinon un panneau « caché » reste cliquable). */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--masthead-h) + 16px); }
body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--orange-text); }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.18; font-weight: 700; letter-spacing: -.015em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible {
  /* outline conservé (et non « none ») : c'est le seul indicateur qui survit
     au mode contraste élevé de Windows, où les box-shadow sont supprimées. */
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
  border-radius: 6px;
}
.icon { flex-shrink: 0; }

/* ---------- Mise en page ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: var(--narrow); }
.section { padding: 72px 0; }
.section--tight { padding: 36px 0; }
.section--stats { padding: 56px 0; }
.section + .section { padding-top: 0; }
.section--stats + .section, .section + .section--stats { padding-top: 56px; }

/* Visible uniquement pour les lecteurs d'écran (libellés, annonces d'état). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.skip-link {
  /* « fixed » et non « absolute » : sans ancêtre positionné, un absolute se
     place par rapport au document, donc hors écran dès que la page a défilé. */
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--green-d); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Barre supérieure ---------- */
.topbar {
  background: var(--green-deep); color: #d9e6df; font-size: 13.5px;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; }
.topbar__tag { display: inline-flex; align-items: center; gap: 8px; color: #cfe0d7; }
.topbar__tag .icon { color: var(--orange); }
.topbar__right { display: flex; align-items: center; gap: 22px; }
.util { display: flex; gap: 18px; }
.util__link { display: inline-flex; align-items: center; gap: 6px; color: #d9e6df; font-weight: 500; }
.util__link:hover { color: #fff; }
.util__link .icon { color: var(--orange); }
.util__socials { display: flex; gap: 8px; }
.util__social {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
  color: #cfe0d7; background: rgba(255,255,255,.06);
}
.util__social:hover { background: var(--orange-solid); color: #fff; }

/* ---------- En-tête ---------- */
.header {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s, background .3s;
}
.header.is-stuck { box-shadow: var(--shadow); }

/* Niveau 1 — identité à gauche, commandes à droite. Le « space-between »
   remplace le margin-left:auto que portait .nav : celui-ci disparaissait avec
   la navigation sous 1081 px, et les boutons se retrouvaient collés au logo. */
.header__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

/* Niveau 2 — la navigation occupe sa propre ligne, alignée sur le conteneur.
   Sur une seule ligne, l'ensemble réclamait 1439 px pour 1132 px disponibles :
   le bouton « Adhérer » sortait de l'écran. */
.header__navrow { border-top: 1px solid var(--line-2); }
.header__navrow .container { position: relative; }

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark { display: grid; place-items: center; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__acr { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--green-d); letter-spacing: .02em; }
.brand__full { font-size: 11px; color: var(--muted-strong); font-weight: 500; max-width: 240px; }
.brand:hover .brand__acr { color: var(--orange-text); }

/* .nav porte le positionnement : le méga-menu s'aligne sur la largeur du
   conteneur, et non sur l'entrée survolée. C'est ce qui l'empêche de sortir
   de l'écran pour les dernières entrées de la barre. */
.nav { position: relative; }
.nav__list { display: flex; align-items: stretch; gap: 2px; }
.nav__item { position: static; display: flex; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; height: var(--navrow-h);
  font-weight: 600; font-size: 15.5px; color: var(--ink); white-space: nowrap;
  border-radius: 0; position: relative;
}
/* Repère de section courante : un filet sous l'entrée, posé sur la bordure du
   niveau 2 — lisible sans dépendre de la seule couleur. */
.nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--orange-solid);
  transform: scaleX(0); transform-origin: 50% 100%; transition: transform .22s var(--ease);
}
.nav__link:hover, .nav__item:hover > .nav__link { color: var(--orange-text); background: var(--orange-l); }
.nav__link:hover::after, .nav__item:hover > .nav__link::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--orange-text); }
.nav__link.is-current::after { transform: scaleX(1); }
.nav__caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; opacity: .7; }
.nav__item:hover .nav__caret { transform: rotate(225deg) translateY(-1px); }

/* Méga-menu */
.megamenu {
  position: absolute; top: 100%; left: 0; right: 0; transform: translateY(8px);
  background: #fff; border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px;
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease); z-index: 120;
}
/* Ouverture au survol (souris) ou sur demande explicite (clavier, via .is-open
   posé par main.js en même temps que aria-expanded). « :focus-within » a été
   retiré : il ouvrait le panneau à la simple tabulation sur le bouton, ce qui
   démentait aria-expanded="false" et injectait 41 arrêts de tabulation
   supplémentaires dans l'en-tête. */
.nav__item--has-children:hover .megamenu,
.megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* grid-auto-rows: 1fr égalise la hauteur des rangées.

   Sans cela, une seule description qui passe à deux lignes fait grandir toute
   sa rangée : sur quatre des cinq menus, la dernière rangée mesurait 80,5 px
   quand les précédentes en faisaient 63,6. Les entrées ne s'alignaient donc
   plus d'une rangée à l'autre, et le fond de survol changeait de hauteur d'une
   ligne à la suivante. Les rangées prennent maintenant la hauteur de la plus
   haute, et la grille se lit comme un tableau régulier. */
.megamenu__inner { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 2px 10px; }
.megamenu__link { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border-radius: 12px; color: var(--ink); }
.megamenu__link:hover { background: var(--bg-tint); }
.megamenu__icon { color: var(--orange-text); margin-top: 2px; flex-shrink: 0; }
.megamenu__text { display: flex; flex-direction: column; }
.megamenu__label { font-weight: 600; font-size: 15px; }
.megamenu__desc { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.header__actions { display: flex; align-items: center; gap: 10px; }
.iconbtn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--green-d); border: 1px solid var(--line); background: #fff; }
.iconbtn:hover { background: var(--orange-l); color: var(--orange-text); border-color: transparent; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 15.5px;
  font-family: var(--font-head); letter-spacing: .005em; transition: all .22s var(--ease);
  cursor: pointer; white-space: nowrap; border: 2px solid transparent;
}
.btn__icon { transition: transform .25s var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }
.btn--sm { padding: 9px 18px; font-size: 14.5px; }
.btn--primary { background: var(--orange-solid); color: #fff; box-shadow: 0 8px 18px -6px rgba(179,79,0,.45); }
.btn--primary:hover { background: var(--orange-d); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(247,127,0,.6); }
.btn--ghost { background: transparent; color: var(--green-d); border-color: var(--line); }
.btn--ghost:hover { background: var(--green-d); color: #fff; border-color: var(--green-d); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--green-d); }
.btn--light:hover { background: var(--orange-l); color: var(--orange-text); transform: translateY(-2px); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: #fff; color: var(--green-d); transform: translateY(-2px); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-d); color: #fff; transform: translateY(-2px); }

/* ---------- Barre de recherche ---------- */
.searchbar { border-top: 1px solid var(--line); background: #fff; }
.searchbar__inner { position: relative; display: flex; align-items: center; gap: 12px; padding-block: 16px; }
.searchbar__icon { color: var(--muted); }
.searchbar input { flex: 1; border: none; font-size: 18px; padding: 8px 0; background: transparent; color: var(--ink); }
/* Le champ n'affiche pas d'anneau (il occupe toute la barre), mais il doit
   rester repérable au clavier : la barre entière se souligne à la place. */
.searchbar input:focus { outline: none; box-shadow: none; }
.searchbar__inner:focus-within { box-shadow: inset 0 -3px 0 0 var(--orange-solid); }
.searchbar__close { font-size: 28px; color: var(--muted); line-height: 1; padding: 0 6px; }
.searchbar__results {
  position: absolute; top: 100%; left: 24px; right: 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 60vh; overflow-y: auto; display: none; z-index: 130;
}
.searchbar__results.is-open { display: block; }
.sresult { display: block; padding: 13px 18px; border-bottom: 1px solid var(--line-2); }
.sresult:last-child { border-bottom: none; }
.sresult:hover { background: var(--bg-tint); }
.sresult__title { font-weight: 600; color: var(--ink); font-size: 15.5px; }
.sresult__sec { font-size: 12.5px; color: var(--orange-text); font-weight: 600; }
.sresult__desc { font-size: 13.5px; color: var(--muted); }
.sresult--empty { padding: 16px 18px; color: var(--muted); }

/* ---------- Menu mobile ---------- */
.burger { display: none; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 22px; height: 2px; background: var(--green-d); border-radius: 2px; transition: .25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 86vw); background: #fff;
  z-index: 160; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .3s var(--ease);
  overflow-y: auto; padding: calc(var(--header-h) + 20px) 0 40px;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__inner { padding: 0 18px; }
.mnav__link, .mnav__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 12px; font-weight: 600; font-size: 16.5px; color: var(--ink); border-bottom: 1px solid var(--line-2); border-radius: 8px; }
.mnav__toggle .mnav__caret { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s; }
.mnav__toggle[aria-expanded="true"] .mnav__caret { transform: rotate(225deg); }
.mnav__sub { display: none; padding: 4px 0 10px 14px; }
.mnav__sub.is-open { display: block; }
.mnav__sub a { display: block; padding: 10px 12px; color: var(--body); font-size: 15px; border-radius: 8px; }
.mnav__sub a:hover { background: var(--bg-tint); color: var(--orange-text); }
.mnav__cta { width: 100%; margin-top: 18px; }

.overlay { position: fixed; inset: 0; background: rgba(7,48,31,.45); z-index: 150; opacity: 0; transition: opacity .3s; }
.overlay.is-open { opacity: 1; }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: 14px; }
.breadcrumb .container { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 14px; color: var(--muted-strong); }
.breadcrumb a { color: var(--green); font-weight: 500; }
.crumb__sep { display: inline-flex; color: var(--line); }
.crumb__sep .icon { width: 14px; height: 14px; }
.crumb--current { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--green-deep) 0%, var(--green-d) 55%, #0a4732 100%); color: #fff; padding: 86px 0 92px; }
.hero__pattern { position: absolute; inset: 0; opacity: .5; background:
  radial-gradient(circle at 12% 20%, rgba(247,127,0,.30), transparent 38%),
  radial-gradient(circle at 88% 12%, rgba(11,122,59,.55), transparent 42%),
  radial-gradient(circle at 80% 90%, rgba(247,127,0,.18), transparent 40%); }
.hero__pattern::after { content:""; position:absolute; inset:0; opacity:.06; background-image:
  linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); }
.hero__inner { position: relative; max-width: 760px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #ffd9ad; margin-bottom: 22px; }
.hero__title { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; color: #fff; letter-spacing: -.025em; line-height: 1.08; }
.hero__title strong { color: #ffb56b; font-weight: 800; }
.hero__subtitle { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #d7e6dd; margin-top: 20px; max-width: 640px; line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.hero__badge { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: #cfe0d7; font-weight: 500; }
.hero__badge .icon { color: var(--orange); }
.hero--compact { padding: 60px 0 64px; }
.hero--compact .hero__title { font-size: clamp(1.9rem, 4vw, 2.7rem); }

/* ---------- Titres de section ---------- */
.section__head { max-width: 720px; margin-bottom: 44px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--right { margin-left: auto; text-align: right; }
.section__kicker { display: inline-block; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 14px; position: relative; padding-left: 26px; }
.section__kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; background: var(--orange); transform: translateY(-50%); }
.section__head--center .section__kicker { padding-left: 0; }
.section__head--center .section__kicker::before { display: none; }
.section__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
.section__lead { font-size: 1.18rem; color: var(--muted); margin-top: 16px; line-height: 1.6; }

/* ---------- Prose ---------- */
.prose { max-width: 760px; }
.prose p { margin-bottom: 18px; font-size: 1.06rem; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.7rem; margin: 36px 0 14px; }
.prose h3 { font-size: 1.3rem; margin: 28px 0 12px; }
.prose strong { color: var(--ink); }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

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

.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; height: 100%; display: flex; flex-direction: column; }

/* ---------- Cartes illustrées ----------
   La photo occupe le haut de la carte ; le rembourrage passe alors sur le corps,
   afin que l'image aille bien jusqu'aux bords arrondis. */
.card--media { padding: 0; overflow: hidden; }
.card__media { display: block; position: relative; aspect-ratio: 3 / 2; background: var(--bg-tint); overflow: hidden; }
.card__media img,
.card__media picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__media img { transition: transform .5s var(--ease); }
.card--link:hover .card__media img { transform: scale(1.04); }
/* Léger voile sombre en pied d'image : sépare la photo du corps blanc et
   garantit un contraste stable quelle que soit la photo. */
.card__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(11,61,46,.16), transparent); pointer-events: none; }
.card--media .card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.card--media .card__tag { margin-bottom: 10px; }
.card__body { display: flex; flex-direction: column; flex: 1; }
.card--link:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--orange-l); color: var(--orange-text); margin-bottom: 18px; }
.card--link:hover .card__icon { background: var(--orange-solid); color: #fff; }
.card__tag { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green); background: var(--green-l); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; }
.card__title { font-size: 1.22rem; margin-bottom: 10px; }
.card__text { color: var(--muted); font-size: .98rem; flex: 1; }
.card__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-weight: 600; color: var(--orange-text); font-size: 14.5px; }
.card__arrow { transition: transform .25s var(--ease); }
.card--link:hover .card__arrow { transform: translateX(4px); }

/* Variante numérotée pour cartes "combat" */
.card--link .card__icon { box-shadow: inset 0 0 0 1px rgba(247,127,0,.12); }

/* ---------- Statistiques ---------- */
.section--stats { background: var(--green-deep); color: #fff; }
.section--stats.is-light { background: var(--bg-tint); color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat__value { font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; color: #ffb56b; line-height: 1; }
.section--stats.is-light .stat__value { color: var(--orange-text); }
.stat__suffix { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: #ffb56b; }
.stat__label { margin-top: 10px; font-size: 14.5px; color: #cfe0d7; font-weight: 500; }
.section--stats.is-light .stat__label { color: var(--muted); }

/* ---------- Accordéon ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.accordion__trigger:hover { background: var(--bg-tint); color: var(--orange-text); }
.accordion__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: var(--orange); border-radius: 2px; transition: transform .25s var(--ease); }
.accordion__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.accordion__icon::after { left: 8px; top: 0; width: 2px; height: 18px; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.accordion__panel[hidden] { display: none; }
/* Le <h3> ne sert qu'à porter le bouton dans le plan de titres : il ne doit
   apporter aucun style propre. */
.accordion__h { margin: 0; font: inherit; }
.accordion__content { padding: 0 26px 24px; color: var(--body); }
.accordion__content p + p { margin-top: 12px; }

/* ---------- Étapes ---------- */
.steps { counter-reset: step; display: grid; gap: 6px; }
.step { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.step:last-child { border-bottom: none; }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: #fff; background: var(--green); width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.step__title { font-size: 1.2rem; margin-bottom: 6px; }
.step__body p { color: var(--muted); }

/* ---------- Split (texte + visuel) ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split--reverse .split__media { order: -1; }
.split__body p { color: var(--body); margin-bottom: 16px; }
.split__body .section__title { margin-bottom: 18px; }
.split__media { display: grid; place-items: center; }
.split__visual { width: 100%; aspect-ratio: 1/1; max-width: 360px; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--green-l), var(--orange-l)); display: grid; place-items: center; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.split__visual::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 25%, rgba(247,127,0,.18), transparent 55%); }
.split__bigicon { color: var(--green-d); width: 120px; height: 120px; position: relative; }
.ticklist { display: grid; gap: 13px; margin: 8px 0 24px; }
.ticklist li { display: flex; gap: 12px; align-items: flex-start; }
.li-icon { color: var(--green); margin-top: 3px; flex-shrink: 0; }

/* ---------- Encadré (callout) ---------- */
.callout { display: flex; gap: 18px; padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-soft); }
.callout__icon { flex-shrink: 0; }
.callout__title { font-size: 1.12rem; margin-bottom: 6px; }
.callout--info { background: var(--info-l); border-color: #cfe1f5; }
.callout--info .callout__icon { color: var(--info); }
.callout--warning { background: var(--warn-l); border-color: #f1e0bd; }
.callout--warning .callout__icon { color: var(--warn); }
.callout--danger { background: var(--danger-l); border-color: #f4cfca; }
.callout--danger .callout__icon { color: var(--danger); }
.callout--success { background: var(--green-l); border-color: #c7e6d3; }
.callout--success .callout__icon { color: var(--green); }

/* ---------- Listes à coches ---------- */
.checklist { display: grid; gap: 14px; }
.checklist--2 { grid-template-columns: repeat(2, 1fr); }
.checklist--3 { grid-template-columns: repeat(3, 1fr); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
.checklist--bad li { background: var(--danger-l); border-color: #f4cfca; }
.li-icon--good { color: var(--green); margin-top: 2px; }
.li-icon--bad { color: var(--danger); margin-top: 2px; }

/* ---------- Citation ---------- */
.quote { text-align: center; max-width: 720px; margin-inline: auto; }
.quote__mark { color: var(--orange); display: inline-flex; opacity: .7; }
.quote blockquote { font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; color: var(--ink); line-height: 1.4; margin: 14px 0 20px; }
.quote__author { display: block; font-weight: 700; color: var(--green-d); font-style: normal; }
.quote__role { font-size: 14px; color: var(--muted); }

/* ---------- Bandeau CTA ---------- */
.ctaband { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--orange-solid) 0%, var(--orange-solid-d) 100%); color: #fff; }
.ctaband__pattern { position: absolute; inset: 0; opacity: .25; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.4), transparent 40%), radial-gradient(circle at 10% 90%, rgba(0,0,0,.18), transparent 45%); }
.ctaband__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 56px; flex-wrap: wrap; }
.ctaband__title { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; max-width: 620px; }
.ctaband__text { margin-top: 10px; color: #fff; font-size: 1.1rem; max-width: 560px; }
.ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Tableau ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th { background: var(--green-deep); color: #fff; font-family: var(--font-head); font-weight: 600; text-align: left; padding: 16px 20px; font-size: 14.5px; }
.table td { padding: 15px 20px; border-top: 1px solid var(--line); font-size: 15px; }
.table tbody tr:nth-child(even) { background: var(--bg-soft); }

/* ---------- Frise chronologique ---------- */
.timeline { position: relative; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--orange), var(--green)); }
.tl__item { position: relative; padding-bottom: 30px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__dot { position: absolute; left: -33px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); }
.tl__year { font-family: var(--font-head); font-weight: 800; color: var(--orange-text); font-size: 1.05rem; }
.tl__card { margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.tl__card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.tl__card p { color: var(--muted); }

/* ---------- Équipe ---------- */
.member { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; text-align: center; transition: transform .28s var(--ease), box-shadow .28s; }
.member:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.member__avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, var(--orange), var(--green)); }
.member__name { font-size: 1.18rem; margin-bottom: 4px; }
.member__role { color: var(--orange-text); font-weight: 600; font-size: 14.5px; }
.member__bio { color: var(--muted); font-size: .95rem; margin-top: 12px; }

/* ---------- Articles / billets ---------- */
.post { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .28s var(--ease), box-shadow .28s; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post__thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-tint); }
.post__thumb img,
.post__thumb picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__thumb img { transition: transform .5s var(--ease); }
.post:hover .post__thumb img { transform: scale(1.04); }
/* Aplat de repli : utilisé uniquement lorsqu'aucune photo n'est associée. */
.post__thumb--fallback { display: grid; place-items: center; color: #fff; aspect-ratio: auto; height: 150px; }
.post__thumb--orange { background: linear-gradient(135deg, var(--orange-solid), var(--orange-solid-d)); }
.post__thumb--green { background: linear-gradient(135deg, var(--green), var(--green-d)); }
.post__thumb--deep { background: linear-gradient(135deg, var(--green-d), var(--green-deep)); }
.post__body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post__cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-text); margin-bottom: 8px; }
.post__title { font-size: 1.2rem; margin-bottom: 10px; }
.post__title a { color: var(--ink); }
.post__title a:hover { color: var(--orange-text); }
.post__excerpt { color: var(--muted); font-size: .96rem; flex: 1; }
.post__meta { margin-top: 16px; display: flex; gap: 16px; color: var(--muted); font-size: 13.5px; }
.post__date { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Téléchargements ---------- */
.downloads { display: grid; gap: 14px; }
.download { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; transition: border-color .25s, box-shadow .25s; }
.download:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.download__icon { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--orange-l); color: var(--orange-text); flex-shrink: 0; }
.download__body { flex: 1; }
.download__body h3 { font-size: 1.08rem; margin-bottom: 2px; }
.download__body p { color: var(--muted); font-size: .92rem; }
.download__meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--green-d); text-transform: uppercase; }
.download__dl { color: var(--orange-text); }

/* ---------- Glossaire ---------- */
.defns { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.defn { padding: 22px 26px; }
.defn + .defn { border-top: 1px solid var(--line); }
.defn dt { font-family: var(--font-head); font-weight: 700; color: var(--green-d); font-size: 1.12rem; margin-bottom: 6px; }
.defn dd { color: var(--body); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.contact-info .section__lead { margin-bottom: 28px; }
.cinfo { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.cinfo__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--green-l); color: var(--green-d); display: grid; place-items: center; flex-shrink: 0; }
.cinfo__label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cinfo__value { display: block; color: var(--ink); font-weight: 500; }
.contact-form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); }
.cform { display: grid; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ink); }
.cform input, .cform select, .cform textarea { font-family: inherit; font-size: 15.5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink); font-weight: 400; transition: border-color .2s, box-shadow .2s; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,127,0,.15); background: #fff; }
.cform textarea { resize: vertical; }
.cform__check { flex-direction: row !important; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--muted); font-size: 13.5px; }
.cform__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); }
.cform__note { padding: 12px 16px; border-radius: var(--radius-sm); background: var(--green-l); color: var(--green-d); font-weight: 600; font-size: 14.5px; }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--green-deep); color: #fff; }
/* padding-block, et non le raccourci « padding » : celui-ci remettait à zéro
   le retrait horizontal de .container, si bien que le titre et le champ de
   saisie touchaient le bord de l'écran de 561 px à 1180 px. */
.newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding-block: 50px; flex-wrap: wrap; }
.newsletter__title { color: #fff; font-size: 1.7rem; margin-bottom: 6px; }
.newsletter__inner p { color: #cfe0d7; max-width: 460px; }
.newsletter__form { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter__form input { flex: 1 1 260px; padding: 14px 18px; border-radius: 999px; border: none; min-width: 0; font-size: 15.5px; font-family: inherit; }
.newsletter__form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(247,127,0,.4); }

/* ---------- Pied de page ---------- */
.footer { background: #07251a; color: #b9cac1; padding: 64px 0 var(--float-safe); font-size: 15px; }
/* minmax(0, …) : sans lui une colonne de grille ne descend pas sous la
   largeur de son contenu. Le rapport laisse 174 px par colonne de liens, de
   quoi tenir « Les mauvaises pratiques » (169,7 px) sans retour à la ligne :
   c'est ce retour qui décalait cinq rangées de la deuxième colonne. */
.footer__top { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2.75fr); gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand--footer .brand__acr { color: #fff; }
.footer__about { margin: 18px 0 22px; color: #9fb3a8; line-height: 1.6; max-width: 320px; }
.footer__socials { display: flex; gap: 10px; }
.footer__social { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #cfe0d7; }
.footer__social:hover { background: var(--orange-solid); color: #fff; }
/* Les colonnes ne s'empilent pas chacune de leur côté : titres et listes
   partagent une même grille (deux rangées, remplissage par colonne). Un titre
   ou un libellé qui revient à la ligne ne décale donc plus les liens de sa
   voisine — c'est ce qui désalignait la colonne « Nos champs d'action ». */
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 28px; align-content: start; }
.footer__col { display: contents; }
/* Les intitulés de colonne étaient plus petits (14 px) que les liens qu'ils
   coiffent (14,5 px). La hiérarchie passe désormais par la graisse, la casse
   et l'interlettrage, pas par la taille. */
.footer__title { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; align-self: end; }
.footer__col ul { display: grid; gap: 6px; }
/* inline-block + padding : une cible de 25 px au lieu de 17 px. Le survol ne
   change que la couleur — l'ancien « padding-left: 4px » déplaçait le lien
   sous le curseur à chaque survol. */
.footer__col a { display: inline-block; color: #a9bcb2; font-size: 15px; padding: 4px 0; text-wrap: pretty; }
.footer__col a:hover { color: #ffc98a; }
/* ---------- Crédits : partenaires et réalisation ---------- */
/* Cette bande s'intercale entre les colonnes et la ligne de copyright. Elle
   n'existe que si l'administration a renseigné un nom : le conteneur porte
   lui-même l'attribut hidden tant que ses deux blocs sont vides, et c'est
   site-settings.js qui le révèle en même temps qu'un crédit. Le masquage est
   porté par le conteneur plutôt que déduit de ses enfants (:has) : la règle
   déduite serait ignorée par les navigateurs qui ne connaissent pas :has, et
   le filet du border-top flotterait alors au-dessus du copyright sur un site
   sans crédits. */
.footer__credits { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); }
.footer__partners { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: #9fb3a8; }
.footer__partners ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__partners-title { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 700; color: #7f978a; }
.footer__partners a, .footer__partners span:not(.footer__partners-title) { color: #a9bcb2; font-size: 13.5px; padding: 3px 0; display: inline-block; }
.footer__partners a:hover { color: #ffc98a; }
/* Le nom du réalisateur porte le lien : il est distingué du libellé qui
   l'introduit, sinon « Conception & développement » se lit comme une partie
   du nom. */
.footer__credit { font-size: 13px; color: #7f978a; }
.footer__credit a { color: #a9bcb2; font-weight: 600; }
.footer__credit a[href]:hover { color: #ffc98a; text-decoration: underline; }

.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 28px; padding-top: 26px; font-size: 13px; color: #9fb3a8; }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a { color: #a9bcb2; padding: 4px 0; }
.footer__legal a:hover { color: #ffc98a; }

/* ---------- Bouton retour en haut ---------- */
/* visibility, et pas seulement opacity : à opacity 0 seul, le bouton restait
   atteignable au clavier — une tabulation aboutissait sur une cible invisible. */
.to-top { position: fixed; right: 24px; bottom: 24px; width: 50px; height: 50px; border-radius: 50%; background: var(--green-d); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; visibility: hidden; pointer-events: none; transition: .3s var(--ease); z-index: 90; }
.to-top .icon { transform: rotate(-90deg); }
.to-top.is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.to-top:hover { background: var(--orange-solid); }

/* ---------- Révélation au défilement ---------- */
/* L'animation d'apparition n'est appliquée QUE si JavaScript est actif
   (la classe « js » est posée par un script en ligne dans <head>). Sans cette
   garde, une page chargée sans JS resterait entièrement invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  /* Filet de sécurité : si main.js ne se charge pas (réseau mobile instable),
     le contenu réapparaît de lui-même au bout de 2 s au lieu de rester
     définitivement invisible. */
  animation: reveal-fallback 0s linear 2s forwards;
}
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  /* Neutralise aussi les TRANSITIONS et les transformations au survol : la
     règle précédente ne coupait que les `animation`, si bien que les dizaines
     de `transition` et de `translateY(-2px)` du site continuaient de s'exécuter
     pour des personnes sujettes aux vertiges ou aux migraines vestibulaires. */
  *:not(.reveal) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .card--link:hover .card__media img, .post:hover .post__thumb img { transform: none !important; }
  .btn:hover, .card:hover, .to-top:hover, .abtn:hover,
  .btn--light:hover, .btn--green:hover, .btn--outline-light:hover { transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Sous 1081 px la navigation passe dans le tiroir : c'est tout le niveau 2
     qui disparaît, bordure comprise, sinon il resterait un filet orphelin. */
  .header__navrow, .header__cta { display: none; }
  .burger { display: flex; }
  /* La barre supérieure repliait ses libellés sur deux lignes bien avant
     860 px ; elle bascule maintenant en même temps que la navigation. */
  .topbar__tag { display: none; }
  .topbar__inner { justify-content: center; }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 30px 24px; }
  .footer__col { display: block; }
}
@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 320px; margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .checklist--2, .checklist--3 { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .cform__row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 26px; }
  .brand__full { display: none; }
  .newsletter__form input { min-width: 0; flex: 1; }
  .util { display: none; }
  .hero { padding: 60px 0 64px; }
  .ctaband__inner { flex-direction: column; align-items: flex-start; }
  .container { padding-inline: 18px; }
}

/* =========================================================================
   AJOUTS — Images, graphiques & assistant conversationnel
   ========================================================================= */

/* ---------- Hero avec image de fond ---------- */
.hero--has-image { background: var(--green-deep); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(7,40,27,.94) 0%, rgba(7,48,31,.82) 42%, rgba(11,61,46,.55) 100%); }
.hero--has-image .hero__pattern { opacity: .35; z-index: 1; }
.hero--has-image .hero__inner { z-index: 2; }

/* ---------- Photo dans une section split ---------- */
.split__media--photo { margin: 0; width: 100%; }
.split__media--photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.split__cap { margin-top: 12px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---------- Bannière image pleine largeur ---------- */
.figbanner { margin: 0; }
.figbanner img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.figbanner__cap { margin-top: 12px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---------- Galerie d'images ---------- */
.gallery { display: grid; gap: 18px; }
.gphoto { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gphoto img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.gphoto:hover img { transform: scale(1.06); }
.gphoto__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; color: #fff; font-size: 14px; font-weight: 600;
  background: linear-gradient(transparent, rgba(7,40,27,.85)); }

/* ---------- Graphiques ---------- */
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-sm); }
.chart__source { margin-top: 22px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* Barres horizontales */
.chart--bar { display: grid; gap: 18px; }
.cbar { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; }
.cbar__label { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.cbar__track { position: relative; height: 34px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.cbar__fill { display: block; height: 100%; width: var(--w); background: var(--c, var(--orange)); border-radius: 999px;
  transition: width 1.2s var(--ease); min-width: 2px; }
.js .cbar.reveal:not(.is-in) .cbar__fill { width: 0; }
.cbar__val { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); }

/* Anneau (donut) */
.chart--donut { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; justify-content: center; }
.donut { position: relative; width: 210px; height: 210px; flex-shrink: 0; }
.donut svg { width: 100%; height: 100%; }
.donut__seg { transition: stroke-dasharray 1s var(--ease); }
.donut__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut__big { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--green-d); display: block; line-height: 1; }
.donut__small { font-size: 12px; color: var(--muted); }
.donut__legend { flex: 1; min-width: 240px; display: grid; gap: 14px; }
.donut__legitem { display: flex; align-items: center; gap: 12px; }
.donut__swatch { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; }
.donut__legtext { flex: 1; color: var(--body); font-size: 15px; }
.donut__legval { font-family: var(--font-head); font-weight: 700; color: var(--ink); }

/* ---------- Bouton retour en haut : déplacé à gauche pour laisser place au chat ---------- */
.to-top { right: auto; left: 24px; }

/* ---------- Assistant conversationnel (chat) ---------- */
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 120; }
.chat__fab { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px;
  background: var(--orange-solid); color: #fff; border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 28px -8px rgba(247,127,0,.6); transition: transform .25s var(--ease), background .25s; }
.chat__fab:hover { transform: translateY(-3px); background: var(--orange-d); }
.chat__fab-ic { display: inline-grid; place-items: center; }
.chat__fab-ic--close { display: none; }
.chat__fab.is-active .chat__fab-ic--open { display: none; }
.chat__fab.is-active .chat__fab-ic--close { display: inline-grid; }
.chat__fab.is-active .chat__fab-label { display: none; }
.chat__fab.is-active { padding: 14px; background: var(--green-d); }

.chat__panel { position: absolute; right: 0; bottom: calc(100% + 14px); width: 380px; max-width: calc(100vw - 32px);
  height: min(580px, calc(100vh - 120px)); background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
  transform: translateY(16px) scale(.98); opacity: 0; transition: transform .26s var(--ease), opacity .26s; transform-origin: bottom right; }
.chat__panel.is-open { transform: none; opacity: 1; }

.chat__header { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: linear-gradient(135deg, var(--green-deep), var(--green-d)); color: #fff; }
.chat__avatar { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; flex-shrink: 0; }
.chat__avatar svg { width: 30px; height: 30px; }
.chat__id { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.chat__name { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; display: inline-flex; align-items: center; gap: 6px; }
.chat__spark { color: #ffce8a; }
.chat__status { font-size: 12px; color: #cfe0d7; display: inline-flex; align-items: center; gap: 6px; }
.chat__dot { width: 8px; height: 8px; border-radius: 50%; background: #57d98a; box-shadow: 0 0 0 3px rgba(87,217,138,.25); }
.chat__close { color: #fff; font-size: 26px; line-height: 1; width: 32px; height: 32px; border-radius: 8px; }
.chat__close:hover { background: rgba(255,255,255,.12); }

.chat__body { flex: 1; overflow-y: auto; padding: 18px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 12px; }
.cmsg { display: flex; max-width: 88%; }
.cmsg--bot { align-self: flex-start; }
.cmsg--user { align-self: flex-end; }
.cmsg__bubble { padding: 12px 15px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.cmsg--bot .cmsg__bubble { background: #fff; color: var(--body); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.cmsg--user .cmsg__bubble { background: var(--green); color: #fff; border-bottom-right-radius: 5px; }
.cmsg__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmsg__link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; background: var(--orange-l); color: var(--orange-text);
  border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.cmsg__link:hover { background: var(--orange-solid); color: #fff; }
/* La puce de ces liens était un « → » typographique : son dessin change avec la
   police, il ne s'aligne pas sur la même grille que les icônes du site et sa
   graisse ne suit pas celle du trait. On reprend ici le tracé exact du glyphe
   « arrow » du jeu, posé en masque pour qu'il garde la couleur du lien au survol
   comme au repos. */
.cmsg__link::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0; background: currentColor;
  --ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12h14'/%3E%3Cpath d='M13.2 6.6L18.6 12l-5.4 5.4'/%3E%3C/svg%3E");
  -webkit-mask: var(--ic-arrow) center / contain no-repeat;
          mask: var(--ic-arrow) center / contain no-repeat;
}

.ctyping { display: inline-flex; gap: 4px; padding: 2px 0; }
.ctyping i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: cbounce 1s infinite; }
.ctyping i:nth-child(2) { animation-delay: .15s; }
.ctyping i:nth-child(3) { animation-delay: .3s; }
@keyframes cbounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 4px; background: var(--bg-soft); }
.chat__chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--green-d);
  font-size: 13px; font-weight: 600; transition: all .2s; }
.chat__chip:hover { background: var(--green-d); color: #fff; border-color: var(--green-d); }

.chat__form { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; border-top: 1px solid var(--line); background: #fff; }
.chat__form input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 12px 16px; font-family: inherit; font-size: 14.5px; background: var(--bg-soft); }
.chat__form input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247,127,0,.15); background: #fff; }
.chat__send { width: 44px; height: 44px; border-radius: 50%; background: var(--orange-solid); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .2s, transform .2s; }
.chat__send:hover { background: var(--orange-d); transform: scale(1.05); }
.chat__legal { font-size: 11px; color: var(--muted); text-align: center; padding: 0 14px 12px; background: #fff; margin: 0; }
.chat__legal a { color: var(--green); font-weight: 600; }

@media (max-width: 560px) {
  .cbar { grid-template-columns: 1fr; gap: 8px; }
  .cbar__label { font-size: 14px; }
  .chart-card { padding: 22px 18px; }
  .chat { right: 16px; bottom: 16px; }
  .chat__fab-label { display: none; }
  .chat__fab { padding: 15px; }
  .chat__panel { width: calc(100vw - 24px); height: min(70vh, 560px); right: -4px; }
  .to-top { left: 16px; bottom: 16px; }
}

/* ---------- Validation des formulaires ---------- */
.req { color: var(--orange-text); font-weight: 700; }
.cform__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cform__err { display: block; color: var(--danger); font-size: 12.5px; font-weight: 600; margin-top: 4px; min-height: 0; }
.cform input.is-invalid, .cform textarea.is-invalid, .cform select.is-invalid,
.newsletter__form input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.14); background: var(--danger-l); }
.cform__check .cform__err { display: inline; margin-left: 2px; }
.cform__note { margin: 0; }
.cform__note.is-ok { background: var(--green-l); color: var(--green-d); }
.cform__note.is-err { background: var(--danger-l); color: var(--danger); }
.cform__note { padding: 12px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14.5px; }
.newsletter__note { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; font-weight: 600; padding: 8px 0; }
.newsletter__note.is-ok { color: #bdf0d0; }
.newsletter__note.is-err { color: #ffd0c8; }

/* =========================================================================
   Logo (image) dans l'en-tête + confort de survol / précision du curseur
   ========================================================================= */
.brand__logo { height: 46px; width: auto; display: block; }
.brand .brand__full { border-left: 1px solid var(--line); padding-left: 12px; max-width: 210px;
  font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--muted-strong); }
@media (max-width: 560px) { .brand__logo { height: 38px; } }

/* Curseur « main » explicite sur tous les éléments interactifs */
a, button, [role="button"], summary,
.nav__link, .nav__toggle, .iconbtn, .burger, .btn, .card--link, .search-toggle,
.accordion__trigger, .to-top, .chat__fab, .chat__chip, .cmsg__link,
.megamenu__link, .mnav__toggle, .mnav__link, .th-sort, .snav { cursor: pointer; }
select, label.cform__check, .fcheck, input[type="checkbox"], input[type="radio"] { cursor: pointer; }

/* Le méga-menu est désormais accolé au bas du niveau 2 (top: 100% sur .nav) :
   il n'y a plus d'interstice à franchir, donc plus besoin du « pont » de
   survol qui compensait l'ancien décalage. */

/* Retour visuel net au survol/clic pour une meilleure précision perçue */
.btn:active { transform: translateY(0) scale(.98); }
.iconbtn:active, .burger:active { transform: scale(.94); }
.nav__link:focus-visible, .btn:focus-visible { box-shadow: var(--ring); }

/* Logo du pied de page (variante claire sur fond sombre) */
.brand__logo--footer { height: 52px; width: auto; }
@media (max-width: 560px) { .brand__logo--footer { height: 44px; } }

/* Logo dans l'en-tête de l'assistant (chat) */
.chat__logo { height: 26px; width: auto; flex-shrink: 0; }

/* Drapeau de la Côte d'Ivoire dans la barre supérieure */
.ci-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); display: block; flex-shrink: 0; }

/* =========================================================================
   Coordonnées dans le pied de page & mention de la lettre d'information
   ========================================================================= */

/* Bloc « Nous joindre ». Les valeurs portent des repères data-site : elles
   sont réécrites depuis l'administration comme le reste de l'identité. */
.footer__contact { margin: 0 0 22px; }
.footer__contact address { font-style: normal; display: grid; gap: 8px; }
.fcontact { display: flex; align-items: flex-start; gap: 10px; color: #a9bcb2; font-size: 14.5px; line-height: 1.45; padding: 2px 0; }
a.fcontact:hover { color: #ffc98a; }
.fcontact__ic { color: var(--orange); flex-shrink: 0; margin-top: 2px; }

/* Finalité du traitement, à côté du champ qui collecte l'adresse plutôt que
   sur une page que personne n'ouvre avant de s'abonner. */
.newsletter__legal { flex-basis: 100%; margin: 12px 0 0; font-size: 13px; color: #cfe0d7; line-height: 1.5; max-width: 460px; }
.newsletter__legal a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.newsletter__legal a:hover { color: #ffc98a; }

/* Le formulaire garde sa largeur propre : sans cela la mention l'étirait et
   décalait le bouton « S'abonner » sous le champ. */
.newsletter__form { max-width: 520px; }

/* ---------- Partenaires (grille alimentée à l'exécution) ---------- */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.partner {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 16px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
a.partner:hover, a.partner:focus-visible {
  border-color: var(--orange); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 61, 46, .08);
}
/* Les logos arrivent à des formats très différents : la hauteur est bornée et
   le rapport préservé, sinon un logo panoramique écrase toute la ligne. */
.partner__logo { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
.partner__name {
  font-weight: 600; font-size: .95rem; color: var(--ink);
  text-align: center; line-height: 1.35;
}
@media (max-width: 560px) {
  .partners { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
  .partner { min-height: 78px; padding: 12px; }
}

/* Portrait d'un membre du bureau. Il remplace les initiales quand une photo
   existe ; le disque garde exactement les mêmes dimensions, pour que la grille
   ne bouge pas selon que le portrait est disponible ou non. */
.member__avatar--photo { overflow: hidden; background: var(--line-2); padding: 0; }
.member__avatar--photo picture,
.member__avatar--photo img { width: 100%; height: 100%; display: block; }
.member__avatar--photo img { object-fit: cover; border-radius: 50%; }

/* Partenaires groupés par catégorie. Sans catégorie renseignée, la grille
   simple est conservée : un intertitre unique au-dessus de tous les logos
   n'apporterait rien. */
.partners--grouped { display: block; }
.partners__group + .partners__group { margin-top: 30px; }
.partners__cat {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.partners__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px;
}
@media (max-width: 560px) {
  .partners__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
}

/* ---------------------------------------------------------------------------
   Bandeau de consentement
   Posé en bas plutôt qu'en plein écran : il doit se voir et se décider, non
   prendre la page en otage. Les deux réponses ont le même poids visuel — un
   refus rendu plus laborieux que l'accord ne recueille pas un consentement.
   --------------------------------------------------------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--green-deep); color: #dbe8e1;
  border-top: 3px solid var(--orange);
  box-shadow: 0 -12px 34px -18px rgba(0, 0, 0, .55);
  animation: consent-in .28s ease-out both;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

.consent__inner {
  display: flex; align-items: flex-start; gap: 30px;
  padding-top: 18px; padding-bottom: 18px;
}
.consent__text { flex: 1; min-width: 0; }
.consent__title { font-size: 15px; color: #fff; margin: 0 0 5px; }
.consent__text p { margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 68ch; }
.consent__text a { color: #ffd7ab; text-decoration: underline; }
.consent__text a:hover { color: #fff; }

.consent__opts { display: grid; gap: 10px; margin-top: 14px; }
.consent__opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent__opt input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--orange); flex: none; }
.consent__opt span { font-size: 12.5px; line-height: 1.5; }
.consent__opt b { display: block; color: #fff; font-size: 13px; }

.consent__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: none; }
.consent__acts .btn { padding: 10px 18px; font-size: 13.5px; }
.consent__more {
  background: none; border: 1px solid rgba(255, 255, 255, .3); color: #dbe8e1;
  border-radius: var(--radius-sm); padding: 10px 16px; font: inherit; font-size: 13.5px;
  cursor: pointer;
}
.consent__more:hover { border-color: #fff; color: #fff; }
.consent :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Le lien du pied de page qui rouvre le choix : il doit ressembler aux autres
   liens légaux, pas à un bouton. */
.footer__legal button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline;
}

@media (max-width: 860px) {
  .consent__inner { flex-direction: column; gap: 16px; }
  .consent__acts { width: 100%; }
  .consent__acts .btn, .consent__more { flex: 1 1 auto; justify-content: center; }
}