/* ==========================================================================
   Fondation Tembele Buku Jean-Jacques (F-TBJ)
   Feuille de styles globale — complète la configuration Tailwind
   (js/tailwind.config.js)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sections et espacements généreux
   -------------------------------------------------------------------------- */
/* Chaque section porte son propre fond (eau / brume / bleu sombre) : elle doit
   donc garder son retrait haut ET bas, sinon le contenu vient toucher le bord
   coloré. La règle `.section + .section { padding-block-start: 0 }` du brief
   initial produisait exactement ce défaut ; les valeurs sont abaissées ici pour
   que l'addition de deux retraits reste juste. */
.section { padding-block: 4rem; }
@media (min-width: 768px)  { .section { padding-block: 5rem; } }
@media (min-width: 1024px) { .section { padding-block: 5.5rem; } }

/* --------------------------------------------------------------------------
   2. Glassmorphisme premium
   -------------------------------------------------------------------------- */
.verre {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(23, 51, 79, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.verre:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 45px rgba(23, 51, 79, 0.15);
  border-color: rgba(122, 181, 41, 0.45);
}

.verre--bleu   { background: linear-gradient(135deg, rgba(215,230,244,0.85), rgba(255,255,255,0.65)); }
.verre--vert   { background: linear-gradient(135deg, rgba(225,239,205,0.85), rgba(255,255,255,0.65)); }
.verre--terre { background: linear-gradient(135deg, rgba(250,234,219,0.85), rgba(255,255,255,0.65)); }

/* --------------------------------------------------------------------------
   3. Navigation haute définition
   -------------------------------------------------------------------------- */
.verre-nav {
  background: rgba(242, 246, 251, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.70);
}
.verre-nav.est-defile {
  background: rgba(242, 246, 251, 0.96);
  box-shadow: 0 10px 30px rgba(23, 51, 79, 0.10);
  border-bottom-color: transparent;
}
/* Liseré dégradé sous la barre, révélé au défilement */
.verre-nav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  opacity: 0;
  background-image: linear-gradient(90deg, #4889C9 0%, #7AB529 100%);
  transition: opacity 0.3s ease;
}
.verre-nav.est-defile::after { opacity: 1; }

.lien-nav {
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 600;
  color: #2B3A4A;
  transition: all 0.25s ease;
}
.lien-nav:hover { color: #2F6BA7; background: rgba(255, 255, 255, 0.9); }
.lien-nav[aria-current="page"] { color: #2F6BA7; font-weight: 700; background: #D7E6F4; }

.lien-nav-mobile {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid rgba(47, 107, 167, 0.12);
  font-size: 18px;
  font-weight: 600;
  color: #0B0A24;
}

/* --------------------------------------------------------------------------
   4. Halos d'ambiance
   -------------------------------------------------------------------------- */
.halo {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.halo--bleu   { background: rgba(72, 137, 201, 0.28); }
.halo--vert   { background: rgba(122, 181, 41, 0.22); }
.halo--terre { background: rgba(227, 121, 28, 0.22); }
/* Décale la dérive du second halo pour éviter le battement synchrone.
   Sélecteur doublé à dessein : la classe Tailwind `animate-derive` pose la
   propriété raccourcie `animation`, qui remet animation-delay à 0s. Les styles
   du CDN Tailwind étant injectés après cette feuille, un simple `.halo--decale`
   (même spécificité) perdrait la cascade. */
.halo.halo--decale { animation-delay: -9s; }

/* --------------------------------------------------------------------------
   5. Boutons ergonomiques et lisibles
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.8rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primaire { background: #2F6BA7; color: #ffffff; box-shadow: 0 6px 20px rgba(47,107,167,0.32); }
.btn-primaire:hover { background: #17334F; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(23,51,79,0.4); }
.btn-accent   { background: #964D0D; color: #ffffff; }
.btn-accent:hover { background: #7A3D0A; transform: translateY(-3px); }
.btn-fantome  { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1.5px solid rgba(47,107,167,0.35); color: #2F6BA7; }
.btn-fantome:hover { background: #ffffff; border-color: #7AB529; color: #4A6E17; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(122,181,41,0.20); }
.btn-lien { color: #2F6BA7; text-decoration: underline; text-underline-offset: 4px; font-weight: 700; padding: 0.55rem 0; background: none; min-height: 44px; }
.btn-lien:hover { color: #17334F; }
.btn i[data-lucide] { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   5 bis. Lignes « voies d'engagement » (section S'engager)
   Rangées numérotées sur fond sombre : toute la ligne est cliquable.
   -------------------------------------------------------------------------- */
.voie {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "num icone fleche fleche" "texte texte texte texte";
  align-items: center;
  gap: 0.75rem 0.9rem;
  padding: 1.35rem 1.25rem;
  transition: background-color 0.3s ease, padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 640px) {
  .voie {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "num icone texte fleche";
    gap: 1.15rem;
    padding: 1.6rem 1.75rem;
  }
}
.voie:hover { background: rgba(255, 255, 255, 0.07); padding-left: 1.75rem; }
@media (min-width: 640px) { .voie:hover { padding-left: 2.25rem; } }

.voie__num {
  grid-area: num;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}
.voie:hover .voie__num { color: rgba(255, 255, 255, 0.8); }

.voie__icone {
  grid-area: icone;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.voie__icone i[data-lucide], .voie__icone svg { height: 1.4rem; width: 1.4rem; }
.voie:hover .voie__icone { transform: scale(1.08); }
.voie__icone--bleu  { background: rgba(72, 137, 201, 0.25); color: #9CC2E4; }
.voie__icone--vert  { background: rgba(122, 181, 41, 0.25); color: #A3D45F; }
.voie__icone--terre { background: rgba(227, 121, 28, 0.25); color: #F0B27C; }

.voie__texte { grid-area: texte; min-width: 0; }
.voie__titre {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 0.3rem;
}
@media (min-width: 640px) { .voie__titre { font-size: 21px; } }
.voie__desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
@media (min-width: 640px) { .voie__desc { font-size: 16px; } }

.voie__fleche {
  grid-area: fleche;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  justify-self: end;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.voie__fleche i[data-lucide], .voie__fleche svg { height: 1.15rem; width: 1.15rem; }
.voie:hover .voie__fleche { background: #ffffff; color: #17334F; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5 ter. Pied de page
   -------------------------------------------------------------------------- */
/* Bande devise : un filet dégradé puis la devise de la Fondation. */
.bande-devise {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-block: 0.75rem 1.75rem;
}
@media (min-width: 768px) {
  .bande-devise { flex-direction: row; align-items: center; gap: 2rem; }
}
.bande-devise__filet {
  display: block;
  height: 3px;
  flex: 1 1 auto;
  min-width: 3rem;
  border-radius: 9999px;
  background-image: linear-gradient(90deg,
                      rgba(72, 137, 201, 0.15) 0%, #4889C9 45%, #7AB529 100%);
}


.devise { text-align: left; flex: 0 0 auto; }
@media (min-width: 768px) { .devise { text-align: right; } }

.devise__texte {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.25;
  color: #A3D45F;
}
.devise__trad {
  display: block;
  margin-top: 0.35rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.lien-pied {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  transition: color 0.25s ease, transform 0.25s ease;
}
.lien-pied:hover { color: #ffffff; transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5 quater. Mosaïque de la section « Suivre »
   Quatre vignettes carrées, légèrement décalées et inclinées, qui évoquent
   un fil de publications sans imiter l'interface d'un réseau social.
   -------------------------------------------------------------------------- */
.mosaique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 640px) { .mosaique { gap: 1rem; } }

.mosaique__case {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 30px rgba(23, 51, 79, 0.14);
  aspect-ratio: 1 / 1;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}
@media (min-width: 640px) { .mosaique__case { border-radius: 22px; } }

/* Décalage en quinconce : les deux cases de droite descendent */
@media (min-width: 480px) {
  .mosaique__case:nth-child(2),
  .mosaique__case:nth-child(4) { transform: translateY(1.75rem); }
  .mosaique__case:nth-child(1) { transform: rotate(-1.5deg); }
  .mosaique__case:nth-child(3) { transform: rotate(1.5deg); }
  .mosaique__case:nth-child(2) { transform: translateY(1.75rem) rotate(1.5deg); }
  .mosaique__case:nth-child(4) { transform: translateY(1.75rem) rotate(-1.5deg); }
  .mosaique { margin-bottom: 1.75rem; }
}

.mosaique__case:hover {
  transform: translateY(-6px) rotate(0deg) scale(1.02);
  box-shadow: 0 20px 45px rgba(23, 51, 79, 0.24);
  z-index: 2;
}
@media (min-width: 480px) {
  .mosaique__case:nth-child(2):hover,
  .mosaique__case:nth-child(4):hover { transform: translateY(1.15rem) rotate(0deg) scale(1.02); }
}

.mosaique__case img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mosaique__case:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   5 quinquies. Galerie d'aperçu (accueil)
   Grille de vignettes carrées ; la légende apparaît sous un voile au survol.
   -------------------------------------------------------------------------- */
.galerie-apercu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 640px)  { .galerie-apercu { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
@media (min-width: 1024px) { .galerie-apercu { grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } }

.galerie-apercu__case {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 20px rgba(23, 51, 79, 0.10);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.galerie-apercu__case:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(23, 51, 79, 0.20);
  z-index: 2;
}
.galerie-apercu__case img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.galerie-apercu__case:hover img { transform: scale(1.07); }

/* Voile de légende : masqué au repos, révélé au survol et au focus clavier */
.galerie-apercu__voile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  opacity: 0;
  background: linear-gradient(to top, rgba(23, 51, 79, 0.92) 0%, rgba(23, 51, 79, 0.35) 55%, transparent 100%);
  transition: opacity 0.3s ease;
}
.galerie-apercu__case:hover .galerie-apercu__voile,
.galerie-apercu__case:focus-within .galerie-apercu__voile { opacity: 1; }

.galerie-apercu__legende {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.35;
  color: #ffffff;
}
@media (min-width: 1024px) { .galerie-apercu__legende { font-size: 12px; } }

/* Sans survol possible (tactile), la légende reste lisible en permanence */
@media (hover: none) {
  .galerie-apercu__voile { opacity: 1; }
}

/* --------------------------------------------------------------------------
   5 sexies. Composants des pages intérieures
   -------------------------------------------------------------------------- */

/* Fil d'Ariane */
.ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #55677A;
}
.ariane a { color: #2F6BA7; }
.ariane a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ariane [aria-current="page"] { color: #0B0A24; font-weight: 600; }

/* En-tête de page intérieure */
.entete-page {
  position: relative;
  overflow: hidden;
  padding-block: 7.5rem 3.5rem;
}
@media (min-width: 1024px) { .entete-page { padding-block: 9.5rem 4.5rem; } }

/* Barre de pastilles collante (filtres et ancres) */
.barre-pastilles {
  position: sticky;
  top: 68px;
  z-index: 30;
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}
@media (min-width: 1024px) { .barre-pastilles { top: 76px; margin-inline: 0; padding-inline: 0; } }
.barre-pastilles__piste {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.6rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 26px rgba(23, 51, 79, 0.10);
}
.barre-pastilles__piste::-webkit-scrollbar { display: none; }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #2B3A4A;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pastille:hover { background: rgba(215, 230, 244, 0.75); color: #2F6BA7; }
.pastille i[data-lucide], .pastille svg { height: 16px; width: 16px; }
.pastille[aria-pressed="true"], .pastille[aria-current="true"] {
  background: #2F6BA7;
  color: #ffffff;
}

/* Fiche à quatre entrées — objet graphique récurrent du site */
.fiche {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  border-left: 3px solid #2F6BA7;
  padding-left: 1rem;
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 768px) { .fiche { font-size: 14px; } }
.fiche > div { display: flex; gap: 0.75rem; }
.fiche dt {
  width: 5.25rem;
  flex-shrink: 0;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #55677A;
}
.fiche dd { color: #0B0A24; font-weight: 600; margin: 0; }

/* Bloc d'action de la page « Nos actions » */
.action { scroll-margin-top: 130px; transition: opacity 0.25s ease; }
.action[hidden] { display: none; }

/* Grille de la galerie */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 640px)  { .galerie { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
@media (min-width: 1024px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie__case { margin: 0; }
.galerie__bouton {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 20px rgba(23, 51, 79, 0.10);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.galerie__bouton img { height: 100%; width: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.galerie__bouton:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 51, 79, 0.2); }
.galerie__bouton:hover img { transform: scale(1.07); }
.galerie__voile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem;
  opacity: 0;
  background: linear-gradient(to top, rgba(23,51,79,0.92) 0%, rgba(23,51,79,0.3) 60%, transparent 100%);
  transition: opacity 0.3s ease;
}
.galerie__bouton:hover .galerie__voile,
.galerie__bouton:focus-visible .galerie__voile { opacity: 1; }
.galerie__legende { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.35; color: #fff; text-align: left; }
@media (hover: none) { .galerie__voile { opacity: 1; } }

/* Visionneuse partagée (nos-actions et galerie) */
.visionneuse[hidden] { display: none; }
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(23, 51, 79, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.visionneuse__image {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.visionneuse__legende {
  position: absolute;
  inset-inline: 1rem;
  bottom: 1.25rem;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.visionneuse__compteur {
  position: absolute;
  top: 1rem;
  right: 4.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.visionneuse__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transition: background-color 0.2s ease;
}
.visionneuse__btn:hover { background: rgba(255, 255, 255, 0.3); }
.visionneuse__btn--fermer { top: 1rem; right: 1rem; }
.visionneuse__btn--prec  { left: 0.75rem;  top: 50%; transform: translateY(-50%); }
.visionneuse__btn--suiv  { right: 0.75rem; top: 50%; transform: translateY(-50%); }
@media (min-width: 768px) {
  .visionneuse__btn--prec { left: 1.75rem; }
  .visionneuse__btn--suiv { right: 1.75rem; }
}

/* Champs de formulaire en verre */
.champ {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  border: 1.5px solid rgba(47, 107, 167, 0.18);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: inherit;
  font-size: 16px;
  color: #0B0A24;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.champ::placeholder { color: #8A99A8; }
.champ:focus {
  outline: none;
  border-color: #2F6BA7;
  box-shadow: 0 0 0 3px rgba(47, 107, 167, 0.16);
}
.champ[aria-invalid="true"] { border-color: #964D0D; }
.champ-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 14px;
  font-weight: 600;
  color: #2B3A4A;
}
.champ-aide { display: block; margin-top: 0.3rem; font-size: 13px; color: #55677A; }
.champ-erreur { display: block; margin-top: 0.35rem; font-size: 13px; font-weight: 600; color: #964D0D; }
.champ-erreur[hidden] { display: none; }
/* Leurre anti-robots : hors flux et hors lecture d'écran */
.leurre { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Bouton flottant « Nous écrire » */
.flottant {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 56px;
  padding-inline: 1.05rem;
  border-radius: 9999px;
  background: #2F6BA7;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 28px rgba(23, 51, 79, 0.32);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.flottant:hover { background: #17334F; transform: translateY(-2px); }
.flottant__texte { display: none; }
@media (min-width: 640px) { .flottant__texte { display: inline; } }

/* ==========================================================================
   5 septies. VOCABULAIRE ÉDITORIAL « DOSSIER DOCUMENTAIRE »

   La Fondation apporte des preuves, pas des arguments : la référence formelle
   est le rapport d'enquête imprimé, pas la page d'atterrissage. D'où des
   filets plutôt que des cadres, des folios en marge, des notes suspendues en
   monospace et des planches photo légendées. Chaque page compose avec ces
   archétypes sans jamais en répéter deux à la suite.
   ========================================================================== */

/* --- Grain de papier : texture très basse, posée sur les fonds clairs ----- */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* --- Folio : le grand numéro de section, posé en marge ------------------- */
.folio {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(47, 107, 167, 0.28);
  user-select: none;
}
.folio--plein { color: rgba(47, 107, 167, 0.13); -webkit-text-stroke: 0; }
.folio--clair { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.3); }

/* --- Surtitre fileté : remplace le surtitre nu ---------------------------- */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2F6BA7;
}
.surtitre::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(47,107,167,0.45), rgba(122,181,41,0.35) 60%, transparent);
}
.surtitre--vert  { color: #4A6E17; }
.surtitre--terre { color: #964D0D; }
.surtitre--terre::after { background: linear-gradient(90deg, rgba(186,96,18,0.45), transparent); }
.surtitre--clair { color: #A3D45F; }
.surtitre--clair::after { background: linear-gradient(90deg, rgba(163,212,95,0.5), transparent); }
.surtitre--centre { justify-content: center; }
.surtitre--centre::after { display: none; }

/* --- Note marginale : suspendue dans la gouttière sur grand écran -------- */
.note-marge {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #55677A;
  border-left: 2px solid rgba(122, 181, 41, 0.55);
  padding-left: 0.9rem;
}
@media (min-width: 1280px) {
  .note-marge--bleu { border-left-color: rgba(47, 107, 167, 0.55); }

/* Puce carrée des listes « ce que ça a donné », teintée par axe */
.puce { margin-top: 7px; height: 6px; width: 6px; flex-shrink: 0; border-radius: 2px; }
.puce--vert  { background: #4A6E17; }
.puce--bleu  { background: #2F6BA7; }
.puce--terre { background: #964D0D; }

@media (min-width: 1280px) {
  .note-marge--suspendue {
    position: absolute;
    left: 0;
    width: 13rem;
    border-left: 0;
    border-right: 2px solid rgba(122, 181, 41, 0.55);
    padding-left: 0;
    padding-right: 0.9rem;
    text-align: right;
  }
}

/* --- Registre : liste réglée, sans aucune carte -------------------------- */
.registre { border-top: 2px solid rgba(11, 10, 36, 0.85); }
.registre__ligne {
  display: grid;
  gap: 0.35rem 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(47, 107, 167, 0.16);
  transition: background-color 0.25s ease, padding-left 0.25s ease;
}
@media (min-width: 768px) {
  .registre__ligne { grid-template-columns: 1.1fr 1.6fr; align-items: baseline; }
}
.registre__ligne:hover { background: rgba(255, 255, 255, 0.55); padding-left: 0.6rem; }
.registre__cle {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 16px;
  font-weight: 700;
  color: #0B0A24;
}
.registre__cle::before {
  content: "";
  height: 7px;
  width: 7px;
  flex-shrink: 0;
  border-radius: 2px;
  background: #7AB529;
  transform: translateY(-2px);
}
.registre__val {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  color: #2B3A4A;
}

/* --- Index numéroté : grands folios en marge, filets, aucune pastille ---- */
.index-liste { border-top: 1px solid rgba(47, 107, 167, 0.22); }
.index-liste__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-bottom: 1px solid rgba(47, 107, 167, 0.16);
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.index-liste__item:hover { padding-left: 0.6rem; }
@media (min-width: 768px) { .index-liste__item { grid-template-columns: 4.5rem 1fr; gap: 1.5rem; } }
.index-liste__num {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(47, 107, 167, 0.5);
}
@media (min-width: 768px) { .index-liste__num { font-size: 36px; } }
.index-liste__item:hover .index-liste__num { color: #7AB529; -webkit-text-stroke: 0; }
.index-liste__texte { font-size: 16px; line-height: 1.55; color: #2B3A4A; }
@media (min-width: 768px) { .index-liste__texte { font-size: 17px; } }

/* --- Planche photo : image débordante avec légende technique ------------- */
.planche { position: relative; }
.planche img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.planche__legende {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.85rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #55677A;
}
.planche__legende::before {
  content: "";
  margin-top: 0.55rem;
  height: 1px;
  width: 1.75rem;
  flex-shrink: 0;
  background: #7AB529;
}
/* Débordement contrôlé hors de la gouttière, sur grand écran seulement */
@media (min-width: 1024px) {
  .planche--deborde-d { margin-right: calc(50% - 50vw + 1rem); }
  .planche--deborde-g { margin-left:  calc(50% - 50vw + 1rem); }
}

/* --- Bande-chiffres : fond sombre, chiffres géants, aucun cadre ---------- */
.bande-chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 900px) { .bande-chiffres { grid-template-columns: repeat(4, 1fr); } }
.bande-chiffres__case {
  background: #17334F;
  padding: 1.75rem 1.15rem;
  text-align: center;
  transition: background-color 0.3s ease;
}
.bande-chiffres__case:hover { background: #1C3E5E; }
@media (min-width: 768px) { .bande-chiffres__case { padding: 2.5rem 1.5rem; } }
.bande-chiffres__val {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: 0.7rem;
}
.bande-chiffres__lib {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.66);
}

/* --- Tribune : citation traitée en déclaration typographique ------------- */
.tribune__citation {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3.1vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.tribune__ouvrant {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(4rem, 11vw, 8rem);
  font-weight: 800;
  line-height: 0.55;
  color: rgba(122, 181, 41, 0.42);
  user-select: none;
}

/* --- Encart de principe : filet épais à gauche, pas de carte ------------- */
.encart {
  border-left: 4px solid #7AB529;
  padding: 0.35rem 0 0.35rem 1.35rem;
}
.encart--bleu { border-left-color: #2F6BA7; }
.encart--terre { border-left-color: #BA6012; }
.encart__titre {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #0B0A24;
  margin-bottom: 0.55rem;
}

/* --- Chapitre : rupture sombre en milieu de page ------------------------- */
.chapitre {
  position: relative;
  overflow: hidden;
  background: #0B0A24;
  color: #ffffff;
}
.chapitre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* --- Portes d'entrée du contact : rangées numérotées, pas de cartes ------ */
.porte {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding-block: 1.35rem;
  border-bottom: 1px solid rgba(47, 107, 167, 0.16);
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
@media (min-width: 768px) { .porte { grid-template-columns: 4.5rem 1fr auto; gap: 1.5rem; } }
.porte:hover { padding-left: 0.65rem; background: rgba(255, 255, 255, 0.55); }

.porte__num {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(47, 107, 167, 0.5);
}
@media (min-width: 768px) { .porte__num { font-size: 36px; } }
.porte:hover .porte__num { color: #7AB529; -webkit-text-stroke: 0; }

.porte__corps { min-width: 0; }
.porte__titre {
  display: block;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #0B0A24;
  margin-bottom: 0.3rem;
}
@media (min-width: 768px) { .porte__titre { font-size: 21px; } }
.porte__texte { display: block; font-size: 15.5px; line-height: 1.55; color: #2B3A4A; }

.porte__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1.5px solid rgba(47, 107, 167, 0.22);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease;
}
.porte__fleche i[data-lucide], .porte__fleche svg { height: 1.2rem; width: 1.2rem; }
.porte:hover .porte__fleche { transform: translateX(4px); border-color: #7AB529; background: rgba(122, 181, 41, 0.12); }

/* --- Plaques d'axe : filet haut coloré, aucun cadre ---------------------- */
.axe-plaque {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 0 0;
  border-top: 3px solid var(--ton, #2F6BA7);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.axe-plaque:hover { transform: translateY(-4px); }
.axe-plaque--vert  { --ton: #7AB529; }
.axe-plaque--bleu  { --ton: #4889C9; }
.axe-plaque--terre { --ton: #E3791C; }

/* --- Carrousel du hero : fondu enchaîné, légende et puces ---------------- */
.carrousel__vues { position: absolute; inset: 0; }
.carrousel__vue {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}
.carrousel__vue[data-actif] { opacity: 1; }
.carrousel__vue img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
}

/* Légende et puces sont placées EN HAUT de l'image : la carte des chiffres
   flotte sur le bas et intercepterait les clics si les commandes y restaient. */
.carrousel__legende {
  position: absolute;
  inset-inline: 1rem;
  top: 2.6rem;
  z-index: 4;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(11, 10, 36, 0.65);
}
@media (min-width: 640px) { .carrousel__legende { inset-inline: 1.35rem; top: 2.9rem; font-size: 11.5px; } }

.carrousel__puces {
  position: absolute;
  inset-inline: 1rem;
  top: 0.9rem;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
}
@media (min-width: 640px) { .carrousel__puces { inset-inline: 1.35rem; top: 1.1rem; } }

/* Cible tactile de 44 px, trait visible de 3 px : la zone cliquable dépasse
   volontairement le repère dessiné. */
.carrousel__puce {
  position: relative;
  flex: 1 1 0;
  height: 44px;
  margin-top: -20px;
  background: none;
}
/* Le trait est dessiné au centre de la cible tactile */
.carrousel__puce::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.38);
  transition: background-color 0.3s ease;
}
.carrousel__puce:hover::after { background: rgba(255, 255, 255, 0.7); }
.carrousel__puce[aria-current="true"]::after { background: #7AB529; }

@media (prefers-reduced-motion: reduce) {
  .carrousel__vue { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Accessibilité
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid #2F6BA7; outline-offset: 4px; }

.evitement {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 1.25rem;
  background: #2F6BA7;
  color: white;
  z-index: 100;
  font-weight: bold;
  transition: top 0.2s;
}
.evitement:focus { top: 0; }

/* --------------------------------------------------------------------------
   7. Motifs, séparateurs et état initial des animations
   -------------------------------------------------------------------------- */
.gsap-hero-img { clip-path: inset(0 100% 0 0); }

/* Arrière-plan grille discrète */
.bg-grid {
  background-image: radial-gradient(rgba(47, 107, 167, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Filet de séparation entre deux sections : dégradé bleu → vert, repris des
   deux moitiés du cœur du logo. Remplace les anciens arcs courbes. */
.filet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 3px;
  width: 100%;
  background-image: linear-gradient(90deg, #4889C9 0%, #6BA53D 55%, #7AB529 100%);
  pointer-events: none;
}
.filet--bas { top: auto; bottom: 0; }

/* --------------------------------------------------------------------------
   8. Préférence « mouvement réduit »
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .gsap-hero-img { clip-path: inset(0) !important; }
}