/* ==========================================================================
   AJSG — Feuille de style principale
   Association des Journalistes Scientifiques de Guinée
   Design system issu de la maquette « AJSG site web redesign »
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --vert-profond: #123f2c;
  --vert:         #1f6b4a;
  --vert-nuit:    #0e3324;
  --or:           #e4b93c;
  --or-clair:     #f3cd58;
  --vert-tendre:  #aedfc2;

  /* Drapeau guinéen */
  --gn-rouge: #ce1126;
  --gn-jaune: #fcd116;
  --gn-vert:  #009460;

  /* Surfaces */
  --fond:        #f6f4ee;
  --fond-doux:   #f0efe6;
  --surface:     #ffffff;
  --surface-alt: #eceadf;

  /* Texte */
  --encre:       #14181a;
  --texte:       #3e4842;
  --texte-doux:  #5b6660;
  --texte-faible:#7d8a81;
  --sur-vert:    #c9d6cd;
  --sur-vert-doux:#9fb3a6;

  /* Bordures */
  --bord:        #e9e5d9;
  --bord-moyen:  #e0dccf;
  --bord-fort:   #d9d5c7;

  /* Typographie — une seule famille, Poppins. Les variations passent par la
     graisse (400 à 700) et l'italique, jamais par une seconde police.
     --serif est conservé comme alias : il désigne l'usage « titre », pas un
     empattement, et reste lisible dans le reste de la feuille. */
  --serif: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans:  Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rayons */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Ombres */
  --ombre-carte: 0 16px 38px rgba(18, 63, 44, .1);
  --ombre-douce: 0 14px 34px rgba(18, 63, 44, .09);
  --ombre-menu:  0 18px 40px rgba(18, 63, 44, .14);

  /* Rythme */
  --contenu: 1220px;
  --lecture: 820px;
  --gouttiere: 24px;
  --section: 92px;

  /* Mouvement */
  --t-rapide: 160ms cubic-bezier(.4, 0, .2, 1);
  --t-moyen:  280ms cubic-bezier(.4, 0, .2, 1);
  --t-lent:   640ms cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 720px) {
  :root { --section: 62px; --gouttiere: 18px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--vert); text-decoration: none; transition: color var(--t-rapide); }
a:hover { color: var(--vert-profond); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--vert-profond);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--or); color: var(--vert-profond); }

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--vert-profond);
  color: #fff;
  padding: 14px 22px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Structure
   -------------------------------------------------------------------------- */
.contenu {
  max-width: var(--contenu);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}
.contenu--lecture { max-width: var(--lecture); }

.section { padding: var(--section) 0; }
.section--compacte { padding: calc(var(--section) * .72) 0; }
.section--blanche { background: var(--surface); }
.section--douce   { background: var(--fond-doux); }
.section--verte   { background: var(--vert-profond); color: #f3f2ec; }
.section--bord-h  { border-top: 1px solid var(--bord); }
.section--bord-b  { border-bottom: 1px solid var(--bord); }

/* Bande tricolore guinéenne */
.drapeau { display: flex; height: 4px; width: 100%; }
.drapeau span { flex: 1; }
.drapeau span:nth-child(1) { background: var(--gn-rouge); }
.drapeau span:nth-child(2) { background: var(--gn-jaune); }
.drapeau span:nth-child(3) { background: var(--gn-vert); }

/* --------------------------------------------------------------------------
   4. Typographie utilitaire
   -------------------------------------------------------------------------- */
.surtitre {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 0;
}
.surtitre--clair { color: var(--or); }
.surtitre--gris  { color: var(--texte-faible); }

.titre-section {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  margin: 12px 0 0;
}
.titre-page {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 14px 0 0;
  color: inherit;
}
.chapeau {
  font-size: 17px;
  line-height: 1.7;
  margin: 16px 0 0;
  max-width: 660px;
}
.section--verte .chapeau { color: var(--sur-vert); }

.intro { font-size: 16px; line-height: 1.75; color: var(--texte-doux); margin: 0; }

.entete-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
}

/* Lien « voir tout » souligné or */
.lien-fleche {
  font-size: 14.5px;
  font-weight: 600;
  border-bottom: 2px solid var(--or);
  padding-bottom: 3px;
  display: inline-block;
  transition: gap var(--t-rapide), border-color var(--t-rapide);
}
.lien-fleche span { display: inline-block; transition: transform var(--t-moyen); }
.lien-fleche:hover span { transform: translateX(5px); }

/* Fil d'Ariane */
.ariane { font-size: 12.5px; color: var(--sur-vert-doux); }
.ariane a { color: inherit; }
.ariane a:hover { color: #fff; }
.ariane .sep { opacity: .5; margin: 0 6px; }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
/* Pilule à pastille : le libellé à gauche, un chevron dans un rond à droite.
   La pastille est générée en CSS, aucun balisage supplémentaire n'est requis. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: 6px 6px 6px 26px;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-rapide), color var(--t-rapide),
              border-color var(--t-rapide), transform var(--t-rapide);
}
.btn:active { transform: translateY(1px); }

.btn::after {
  content: "\00BB";
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background var(--t-rapide), color var(--t-rapide), transform var(--t-moyen);
}
.btn:hover::after { transform: translateX(3px); }

/* Variante sans pastille, pour les actions secondaires. */
.btn--simple { padding: 15px 28px; justify-content: center; text-align: center; }
.btn--simple::after { display: none; }

.btn--or { background: var(--or); color: var(--vert-profond); font-weight: 700; }
.btn--or:hover { background: var(--or-clair); color: var(--vert-profond); }
.btn--or::after { background: var(--vert-profond); color: var(--or); }
.btn--or:hover::after { background: var(--vert); color: var(--or-clair); }

.btn--vert { background: var(--vert-profond); color: #fff; }
.btn--vert:hover { background: var(--vert); color: #fff; }
.btn--vert::after { background: rgba(255, 255, 255, .16); color: #fff; }
.btn--vert:hover::after { background: var(--or); color: var(--vert-profond); }

.btn--fantome { border-color: rgba(243, 242, 236, .35); color: #f3f2ec; background: transparent; }
.btn--fantome:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(243, 242, 236, .55); }
.btn--fantome::after { background: rgba(255, 255, 255, .12); color: #f3f2ec; }
.btn--fantome:hover::after { background: var(--or); color: var(--vert-profond); }

.btn--contour { border-color: var(--bord-fort); background: var(--surface); color: var(--encre); }
.btn--contour:hover { border-color: var(--vert); color: var(--vert); }
.btn--contour::after { background: var(--vert-profond); color: #fff; }
.btn--contour:hover::after { background: var(--vert); color: #fff; }

.btn--bloc { display: flex; width: 100%; }
.btn--bloc::after { margin-left: auto; }

/* --------------------------------------------------------------------------
   5 bis. Bloc « appelez-nous »
   -------------------------------------------------------------------------- */
.appel { display: flex; align-items: center; gap: 12px; }
.appel__icone {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--or);
  color: var(--vert-profond);
  display: grid;
  place-items: center;
  transition: background var(--t-rapide), transform var(--t-rapide);
}
.appel__icone:hover { background: var(--or-clair); color: var(--vert-profond); transform: translateY(-2px); }
.appel__icone svg { width: 19px; height: 19px; fill: currentColor; }
.appel__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.appel__numero {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--vert-profond);
  white-space: nowrap;
}
.appel__numero:hover { color: var(--vert); }

/* --------------------------------------------------------------------------
   6. Barre utilitaire + en-tête
   -------------------------------------------------------------------------- */
.barre-utile {
  background: var(--vert-profond);
  color: #dfe8e1;
  font-size: 12.5px;
}
.barre-utile .contenu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}
.barre-utile__infos { display: flex; flex-wrap: wrap; gap: 10px 18px; letter-spacing: .02em; }
.barre-utile__infos a { color: inherit; }
.barre-utile__infos a:hover { color: var(--or); }
.barre-utile__infos .point { opacity: .45; }
.barre-utile__social { display: flex; align-items: center; gap: 10px; }
.barre-utile__label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}

.reseaux { display: flex; gap: 6px; }
.reseaux a {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #f3f2ec;
  display: grid;
  place-items: center;
  transition: background var(--t-rapide), color var(--t-rapide), transform var(--t-rapide);
}
.reseaux a:hover { background: var(--or); color: var(--vert-profond); transform: translateY(-2px); }
.reseaux svg { width: 14px; height: 14px; fill: currentColor; }

.reseaux--grand a { width: 38px; height: 38px; }
.reseaux--grand svg { width: 17px; height: 17px; }
.reseaux--clair a { background: var(--vert-profond); color: #fff; }
.reseaux--contour a { background: transparent; border: 1px solid var(--bord-fort); color: var(--vert-profond); }
.reseaux--contour a:hover { background: var(--vert-profond); color: #fff; border-color: var(--vert-profond); }

/* En-tête */
.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow var(--t-moyen), background var(--t-moyen);
}
.entete.est-collee { box-shadow: 0 8px 26px rgba(18, 63, 44, .08); }
.entete .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 86px;
  transition: min-height var(--t-moyen);
}
.entete.est-collee .contenu { min-height: 72px; }

.marque { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.marque img {
  height: 54px;
  width: auto;
  transition: height var(--t-moyen);
}
.entete.est-collee .marque img { height: 44px; }

/* Navigation */
.nav { display: flex; align-items: center; gap: 2px; }
.nav__lien {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--encre);
  position: relative;
  transition: background var(--t-rapide), color var(--t-rapide);
  white-space: nowrap;
}
.nav__lien:hover { background: var(--fond-doux); color: var(--vert); }
.nav__lien[aria-current="page"] { color: var(--vert); }
.nav__lien[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--or);
  border-radius: 2px;
}

.nav__groupe { position: relative; }
.nav__bascule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font-family: var(--sans);
  cursor: pointer;
}
.nav__chevron { transition: transform var(--t-moyen); font-size: 9px; opacity: .6; }
.nav__groupe.est-ouvert .nav__chevron { transform: rotate(180deg); }

.sous-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-top: 3px solid var(--vert);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--ombre-menu);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-moyen), transform var(--t-moyen), visibility var(--t-moyen);
}
.nav__groupe.est-ouvert .sous-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sous-menu a {
  padding: 12px 14px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre);
  transition: background var(--t-rapide), color var(--t-rapide);
}
.sous-menu a:hover { background: var(--fond-doux); color: var(--vert); }

/* Bascule de langue, reprise de la maquette : deux pastilles dans un anneau. */
.langues {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
  padding: 2px;
}
.langues a {
  border-radius: var(--r-full);
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sur-vert);
  line-height: 1.4;
}
.langues a:hover { color: #fff; }
.langues a.est-actif { background: var(--or); color: var(--vert-profond); }
.langues a.est-actif:hover { color: var(--vert-profond); }

/* Reprise de la bascule dans le menu mobile, où la barre utilitaire est masquée. */
.nav-mobile .langues {
  margin: 20px 12px 0;
  align-self: flex-start;
  border-color: var(--bord-fort);
}
.nav-mobile .langues a { color: var(--texte-doux); border-bottom: 0; padding: 6px 14px; font-size: 12px; }
.nav-mobile .langues a.est-actif { background: var(--vert-profond); color: #fff; }

.entete__actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.entete .appel { display: none; }
@media (min-width: 1240px) {
  .entete .appel { display: flex; }
  .barre-utile__tel { display: none; }
}

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--vert-profond);
  border-radius: 2px;
  position: relative;
  transition: background var(--t-rapide);
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--vert-profond);
  border-radius: 2px;
  transition: transform var(--t-moyen), top var(--t-moyen);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Menu mobile */
.nav-mobile {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background: var(--surface);
  z-index: 90;
  padding: 24px 22px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-moyen);
  box-shadow: -20px 0 50px rgba(18, 63, 44, .16);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile.est-ouvert { transform: translateX(0); }
.nav-mobile a {
  padding: 14px 12px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 600;
  color: var(--encre);
  border-bottom: 1px solid var(--bord);
}
.nav-mobile a:hover, .nav-mobile a[aria-current="page"] { color: var(--vert); background: var(--fond-doux); }
.nav-mobile .sous { padding-left: 26px; font-size: 14.5px; font-weight: 500; }
.nav-mobile__titre {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: 18px 12px 6px;
  font-weight: 700;
}
.voile {
  position: fixed;
  inset: 0;
  background: rgba(14, 51, 36, .5);
  backdrop-filter: blur(2px);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-moyen), visibility var(--t-moyen);
}
.voile.est-ouvert { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   7. Héros
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  background: var(--vert-profond);
  color: #f3f2ec;
  overflow: hidden;
}
.heros__trame {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px);
}
.heros__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #123f2c 0%, #123f2c 52%, rgba(18,63,44,.55) 100%);
}
.heros .contenu { position: relative; }
.heros__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
  padding: 92px 0 100px;
}
.heros__grille > div { min-width: 0; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--or);
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.heros h1 {
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.04;
  margin: 0;
  letter-spacing: -.02em;
  color: #fff;
}

/* Titre du héros : un seul ton, et les mots entrent l'un après l'autre.
   L'animation est purement CSS — elle n'attend aucun script, donc le titre
   finit toujours par s'afficher, même si le JavaScript est bloqué. */
.heros__titre .mot {
  display: inline-block;
  animation: ajsg-mot .62s cubic-bezier(.2, .72, .25, 1) both;
  animation-delay: calc(var(--i, 0) * 105ms + 120ms);
}
@keyframes ajsg-mot {
  from { opacity: 0; transform: translateY(.42em); }
  to   { opacity: 1; transform: none; }
}

/* Nom complet de l'association, placé sous le titre. */
.heros__marque {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
  color: var(--or);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  animation: ajsg-mot .6s ease-out both;
  animation-delay: .62s;
}
.heros__marque::before {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: var(--or);
}
@media (prefers-reduced-motion: reduce) {
  .heros__titre .mot,
  .heros__marque { animation: none; opacity: 1; transform: none; }
}
.heros__texte {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--sur-vert);
  max-width: 560px;
  margin: 22px 0 0;
}
.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.heros__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.heros__chiffres b {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  display: block;
  line-height: 1.1;
}
.heros__chiffres span {
  font-size: 12.5px;
  color: var(--sur-vert-doux);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.heros__media { display: flex; flex-direction: column; gap: 16px; }
.heros__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #0e3324;
}
.heros__photo img { width: 100%; height: 100%; object-fit: cover; }
.heros__vignettes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.heros__vignettes figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #0e3324;
}
.heros__vignettes img { width: 100%; height: 100%; object-fit: cover; }

/* Héros de page intérieure */
.heros-page {
  background: var(--vert-profond);
  color: #f3f2ec;
  padding: 66px 0 70px;
  position: relative;
  overflow: hidden;
}
.heros-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 14px);
}
.heros-page .contenu { position: relative; }
.heros-page h1 { color: #fff; }

/* --------------------------------------------------------------------------
   8. Valeurs / bandeau
   -------------------------------------------------------------------------- */
.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--bord);
}
.valeurs > div { background: var(--surface); padding: 40px 28px; }
.valeurs h3 { font-size: 22px; }
.valeurs p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   9. Cartes
   -------------------------------------------------------------------------- */
.grille { display: grid; gap: 24px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grille--serree { gap: 16px; }
.grille--statuts { grid-template-columns: minmax(240px, 320px) 1fr; gap: 48px; align-items: start; }

.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--t-moyen), box-shadow var(--t-moyen), transform var(--t-moyen);
}
.carte:hover { border-color: var(--vert); box-shadow: var(--ombre-carte); transform: translateY(-4px); }

/* --------------------------------------------------------------------------
   9 bis. Cartes de service
   Pilule d'action en débord du coin bas-gauche : l'anneau de la couleur du
   fond derrière la carte creuse une encoche dans la silhouette.
   --decoupe doit donc valoir la couleur de fond de la section.
   -------------------------------------------------------------------------- */
.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  column-gap: 22px;
  row-gap: 48px;
  padding-bottom: 24px;
  --decoupe: var(--fond);
}
.section--blanche .grille-services { --decoupe: var(--surface); }
.section--douce .grille-services   { --decoupe: var(--fond-doux); }

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 256px;
  padding: 32px 28px 52px;
  border-radius: 22px;
  border: 1px solid transparent;
  transition: transform var(--t-moyen), box-shadow var(--t-moyen);
}
.service:hover { transform: translateY(-5px); box-shadow: var(--ombre-carte); }

.service__icone { margin-bottom: 10px; }
.service__icone svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-moyen);
}
.service:hover .service__icone svg { transform: translateY(-3px); }

.service h3 { font-size: 21px; line-height: 1.25; color: inherit; }
.service p { margin: 0; font-size: 14px; line-height: 1.65; }
.service__pied { margin-top: auto; font-size: 12.5px; font-weight: 600; opacity: .8; }

.service__cta {
  position: absolute;
  left: 24px;
  bottom: -19px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 0 7px var(--decoupe);
  transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.service__cta i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  transition: transform var(--t-moyen), background var(--t-rapide), color var(--t-rapide);
}
.service:hover .service__cta i { transform: translateX(3px); }

/* Variante claire */
.service--blanc { background: var(--surface); border-color: var(--bord); color: var(--encre); }
.service--blanc h3 { color: var(--vert-profond); }
.service--blanc p { color: var(--texte-doux); }
.service--blanc .service__icone { color: var(--vert-profond); }
.service--blanc .service__cta { background: var(--surface); border-color: var(--bord-fort); color: var(--vert-profond); }
.service--blanc .service__cta i { background: var(--fond-doux); color: var(--vert); }
.service--blanc:hover .service__cta { border-color: var(--vert); }

/* Variante vert tendre */
.service--tendre { background: var(--vert-tendre); color: var(--vert-profond); }
.service--tendre h3 { color: var(--vert-profond); }
.service--tendre p { color: #2f5544; }
.service--tendre .service__icone { color: var(--vert-profond); }
.service--tendre .service__pied { color: #2f5544; }
.service--tendre .service__cta { background: var(--vert-tendre); border-color: rgba(18, 63, 44, .22); color: var(--vert-profond); }
.service--tendre .service__cta i { background: rgba(18, 63, 44, .12); color: var(--vert-profond); }
.service--tendre:hover .service__cta { background: var(--vert-profond); border-color: var(--vert-profond); color: #fff; }
.service--tendre:hover .service__cta i { background: var(--or); color: var(--vert-profond); }

/* Variante sombre */
.service--sombre { background: var(--vert-profond); color: #f3f2ec; }
.service--sombre h3 { color: #fff; }
.service--sombre p { color: var(--sur-vert); }
.service--sombre .service__icone { color: var(--or); }
.service--sombre .service__pied { color: var(--sur-vert-doux); }
.service--sombre .service__cta { background: var(--vert-profond); border-color: rgba(255, 255, 255, .22); color: #fff; }
.service--sombre .service__cta i { background: var(--or); color: var(--vert-profond); }
.service--sombre:hover .service__cta { background: var(--vert); border-color: var(--vert); }

/* Carte article */
.article-carte { display: flex; flex-direction: column; color: var(--encre); }
.article-carte:hover { color: var(--encre); }
.article-carte__visuel {
  aspect-ratio: 16 / 10;
  background: var(--surface-alt);
  overflow: hidden;
}
.article-carte__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lent);
}
.article-carte:hover .article-carte__visuel img { transform: scale(1.05); }
.article-carte__corps {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.article-carte h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.article-carte p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--texte-doux); }
.article-carte__pied {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--texte-faible);
}

.meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--texte-doux); flex-wrap: wrap; }
.puce {
  background: var(--vert-profond);
  color: var(--or);
  padding: 4px 10px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.puce--or { background: var(--or); color: var(--vert-profond); }
.puce--claire { background: var(--fond-doux); color: var(--vert); }

/* Article à la une */
.une {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--encre);
  transition: border-color var(--t-moyen), box-shadow var(--t-moyen);
}
.une:hover { border-color: var(--vert); box-shadow: var(--ombre-carte); color: var(--encre); }
.une__visuel { min-height: 300px; background: var(--surface-alt); overflow: hidden; }
.une__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lent); }
.une:hover .une__visuel img { transform: scale(1.04); }
.une__corps { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.une__corps h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.22; margin: 16px 0 0; }
.une__corps p { font-size: 15.5px; line-height: 1.75; color: var(--texte-doux); margin: 14px 0 0; }

/* Carte projet */
.projet {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.projet__entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.projet__statut { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert); }
.projet__periode { font-size: 12px; color: var(--texte-faible); }
.projet h3 { font-size: 21px; line-height: 1.28; }
.projet p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--texte-doux); }
.projet__pied {
  font-size: 12.5px;
  color: var(--texte-faible);
  border-top: 1px solid var(--bord);
  padding-top: 12px;
  margin-top: auto;
}

/* Projet étendu (page Projets) */
.projet-large {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-moyen), box-shadow var(--t-moyen);
}
.projet-large:hover { border-color: var(--vert); box-shadow: var(--ombre-douce); }
.projet-large__visuel { min-height: 240px; background: var(--surface-alt); overflow: hidden; }
.projet-large__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lent); }
.projet-large:hover .projet-large__visuel img { transform: scale(1.04); }
.projet-large__corps {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.projet-large__corps h2 { font-size: 25px; line-height: 1.25; margin: 4px 0 0; }
.projet-large__corps p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--texte-doux); }
.projet-large__infos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--texte-faible);
}

/* --------------------------------------------------------------------------
   10. Formations / listes numérotées
   -------------------------------------------------------------------------- */
/* La photo reste calée en haut pendant que la liste défile à côté.
   La colonne occupe toute la hauteur de la rangée (étirement par défaut de la
   grille) : c'est ce qui donne à la photo collante sa course. */
.formations__colonne { min-width: 0; }
.formations__media {
  position: sticky;
  top: 110px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bord-moyen);
  aspect-ratio: 5 / 4;
}
.formations__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .formations__media { position: static; }
}

.liste-lignes { display: flex; flex-direction: column; margin-top: 28px; border-top: 1px solid var(--bord-moyen); }
.liste-lignes__item {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--bord-moyen);
  transition: padding-left var(--t-moyen);
}
.liste-lignes__item:hover { padding-left: 8px; }
.liste-lignes__num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--vert);
  flex-shrink: 0;
  width: 52px;
}
.liste-lignes__titre { font-size: 16px; font-weight: 600; color: var(--encre); }
.liste-lignes__meta { font-size: 13.5px; color: var(--texte-doux); margin-top: 3px; }

/* --------------------------------------------------------------------------
   10 ter. Mission et présentation
   -------------------------------------------------------------------------- */
/* Bandeau centré : sans colonne latérale, aucun vide ne peut se creuser
   sous le texte. */
.mission { text-align: center; }
.mission__texte {
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--vert-profond);
  max-width: 800px;
  margin: 20px auto 0;
}
.mission__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}

/* Présentation de l'organisation : texte, repères chiffrés et photo. */
/* Deux colonnes de même hauteur : le texte est réparti du haut vers le bas
   et la photo s'étire sur toute la rangée, si bien qu'aucune des deux ne
   laisse de vide sous l'autre. */
.presentation {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 52px;
  align-items: stretch;
}
@media (max-width: 900px) { .presentation { grid-template-columns: 1fr; gap: 36px; } }
.presentation__texte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-width: 0;
}
.presentation p:not([class]) { font-size: 16.5px; line-height: 1.8; color: var(--texte); margin: 18px 0 0; }
/* Les repères sont empilés : un libellé long tient sur une ou deux lignes
   au lieu d'être écrasé dans une colonne étroite. */
.presentation__reperes {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  overflow: hidden;
}
.presentation__repere {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border-top: 1px solid var(--bord);
}
.presentation__repere:first-child { border-top: 0; }
.presentation__repere b {
  font-size: 27px;
  font-weight: 700;
  color: var(--vert-profond);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.presentation__repere span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texte-doux);
}
@media (max-width: 420px) {
  .presentation__repere { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
}
.presentation__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bord-moyen);
  min-height: 340px;
}
@media (max-width: 900px) { .presentation__photo { min-height: 0; aspect-ratio: 4 / 3; } }
.presentation__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   10 bis. Vision et valeurs
   -------------------------------------------------------------------------- */
.vision { position: relative; overflow: hidden; }
.vision__phrase {
  font-size: clamp(24px, 3.1vw, 38px);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 940px;
  margin: 18px 0 0;
}
.vision__phrase em { color: var(--or); font-style: normal; }
.vision__source {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sur-vert-doux);
  margin: 22px 0 0;
}
.vision__piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 48px;
  background: rgba(255, 255, 255, .14);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.vision__pilier {
  background: var(--vert-profond);
  padding: 30px 26px 8px;
}
.vision__pilier b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--or);
  letter-spacing: -.01em;
}
.vision__pilier p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--sur-vert); }

/* Cartes de valeurs, à icône */
.valeur {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 18px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--t-moyen), transform var(--t-moyen), box-shadow var(--t-moyen);
}
.valeur:hover { border-color: var(--vert); transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.valeur__icone {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--fond-doux);
  display: grid;
  place-items: center;
  color: var(--vert-profond);
  transition: background var(--t-moyen), color var(--t-moyen);
}
.valeur:hover .valeur__icone { background: var(--vert-profond); color: var(--or); }
.valeur__icone svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.valeur h3 { font-size: 21px; margin-top: 4px; }
.valeur p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   11. Chiffres clés
   -------------------------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 36px; }
.chiffre { border-left: 2px solid var(--or); padding-left: 20px; }
.chiffre b {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: block;
}
.chiffre span { font-size: 14px; color: var(--sur-vert); margin-top: 10px; line-height: 1.5; display: block; }

/* --------------------------------------------------------------------------
   12. Équipe
   -------------------------------------------------------------------------- */
.membre { overflow: hidden; }
.membre__photo { aspect-ratio: 5 / 4; background: var(--surface-alt); overflow: hidden; }
.membre__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform var(--t-lent); }
.membre:hover .membre__photo img { transform: scale(1.05); }
.membre__corps { padding: 20px; }
.membre__corps h3 { font-size: 19px; }
.membre__role { font-size: 13.5px; color: var(--vert); font-weight: 600; margin-top: 2px; }
.membre__corps p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }

.membre__social { display: flex; gap: 7px; margin-top: 14px; }
.membre__social a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--bord-fort);
  display: grid;
  place-items: center;
  color: var(--vert-profond);
  transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.membre__social a:hover { background: var(--vert-profond); color: #fff; border-color: var(--vert-profond); }
.membre__social svg { width: 13px; height: 13px; fill: currentColor; }

.membre-mini {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  padding: 14px;
  transition: border-color var(--t-moyen), transform var(--t-moyen);
}
.membre-mini:hover { border-color: var(--vert); transform: translateY(-2px); }
.membre-mini img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  flex-shrink: 0;
}
.membre-mini b { font-size: 14.5px; font-weight: 600; display: block; }
.membre-mini span { font-size: 12.5px; color: var(--texte-doux); }

/* Portraits du carrousel de l'accueil.
   ------------------------------------------------------------------------
   Les deux premières classes ne sont plus produites par les gabarits, mais
   une page gardée en cache par le serveur peut encore les contenir alors que
   cette feuille, elle, est servie à jour. Sans ces règles, ces pages-là
   s'affichaient en portraits empilés pleine largeur. On les conserve donc :
   le coût est nul, la panne qu'elles évitent ne l'est pas. */
.equipe-apercu,
.equipe-accueil {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}
@media (max-width: 1000px) { .equipe-apercu, .equipe-accueil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .equipe-apercu, .equipe-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

.equipe-apercu figure, .equipe-accueil figure, .carrousel--equipe figure { margin: 0; }
.equipe-apercu img, .equipe-accueil img, .carrousel--equipe img {
  aspect-ratio: 5 / 4;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--bord-moyen);
  transition: transform var(--t-moyen), box-shadow var(--t-moyen);
}
.equipe-apercu figure:hover img,
.equipe-accueil figure:hover img,
.carrousel--equipe figure:hover img { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.equipe-apercu b, .equipe-accueil b, .carrousel--equipe b { font-size: 14.5px; font-weight: 600; margin-top: 10px; display: block; }
.equipe-apercu span, .equipe-accueil span, .carrousel--equipe span { font-size: 12.5px; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   12 bis. Carrousel
   --------------------------------------------------------------------------
   Le défilement est celui du navigateur : accrochage natif, glissement au
   doigt sur mobile, flèches et clavier sur ordinateur. Sans JavaScript, la
   piste reste une bande que l'on fait défiler à la main — rien n'est perdu.
   -------------------------------------------------------------------------- */
.carrousel { margin-top: 36px; }
.carrousel__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste:focus-visible { outline: 2px solid var(--vert-profond); outline-offset: 6px; }
.carrousel__item { scroll-snap-align: start; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .carrousel__piste { scroll-behavior: auto; } }

@media (max-width: 1000px) { .carrousel__piste { grid-auto-columns: calc((100% - 2 * 22px) / 3); gap: 22px; } }
@media (max-width: 760px)  { .carrousel__piste { grid-auto-columns: calc((100% - 18px) / 2); gap: 18px; } }
@media (max-width: 480px)  { .carrousel__piste { grid-auto-columns: 78%; gap: 16px; } }

.carrousel__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}
.carrousel__rail {
  position: relative;
  flex: 1 1 auto;
  max-width: 260px;
  height: 3px;
  border-radius: 3px;
  background: var(--bord);
  overflow: hidden;
}
.carrousel__rail span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 3px;
  background: var(--vert-profond);
}
.carrousel__fleches { display: flex; gap: 10px; margin-left: auto; }
.carrousel__fleche {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--bord-moyen);
  color: var(--vert-profond);
  cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide), opacity var(--t-rapide);
}
.carrousel__fleche svg { width: 17px; height: 17px; fill: currentColor; }
.carrousel__fleche:hover:not(:disabled) {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: #fff;
}
.carrousel__fleche:disabled { opacity: .32; cursor: default; }
/* Une seule page de contenu : la commande n'a plus lieu d'être. */
.carrousel--fige .carrousel__nav { display: none; }

/* --------------------------------------------------------------------------
   13. Citation / témoignage
   -------------------------------------------------------------------------- */
.citation {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--encre);
  border-left: 3px solid var(--or);
  padding-left: 22px;
}
.citation__auteur { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-left: 25px; }
.citation__auteur img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center top; }
.citation__auteur b { font-weight: 600; font-size: 15px; display: block; }
.citation__auteur span { font-size: 13px; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   14. Partenaires
   -------------------------------------------------------------------------- */
.partenaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-top: 28px; }
.partenaires a, .partenaires div {
  height: 104px;
  border: 1px solid var(--bord-moyen);
  border-radius: 10px;
  background: var(--surface);
  padding: 18px 22px;
  overflow: hidden;
  transition: border-color var(--t-moyen), transform var(--t-moyen), box-shadow var(--t-moyen);
}
.partenaires a:hover { border-color: var(--vert); transform: translateY(-3px); box-shadow: var(--ombre-douce); }
/* Dimensions explicites : les logos ont des formats très différents et
   déborderaient du cadre si on les laissait à leur taille naturelle. */
.partenaires img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: .78;
  transition: filter var(--t-moyen), opacity var(--t-moyen);
}
.partenaires span {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-doux);
  text-align: center;
}
.partenaires a:hover img, .partenaires div:hover img { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   15. Appels à l'action
   -------------------------------------------------------------------------- */
.cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; }
.cta__bloc { border-radius: var(--r-xl); padding: 46px 42px; }
.cta__bloc--vert { background: var(--vert-profond); color: #f3f2ec; }
.cta__bloc--vert h3 { color: #fff; font-size: 30px; line-height: 1.2; }
.cta__bloc--vert p { font-size: 15.5px; line-height: 1.7; color: var(--sur-vert); margin: 14px 0 0; }
.cta__bloc--blanc { background: var(--surface); border: 1px solid var(--bord); }
.cta__bloc--blanc h3 { font-size: 30px; line-height: 1.2; }
.cta__bloc--blanc p { font-size: 15.5px; line-height: 1.7; color: var(--texte-doux); margin: 14px 0 0; }

.newsletter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.newsletter input {
  flex: 1;
  min-width: 190px;
  padding: 15px 18px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: 14.5px;
  background: #faf9f4;
  color: var(--encre);
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.newsletter input:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(31, 107, 74, .12); }
.note { font-size: 12.5px; color: var(--texte-faible); margin: 14px 0 0; }

/* --------------------------------------------------------------------------
   16. Formulaires
   -------------------------------------------------------------------------- */
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--texte); }
.champ--large { grid-column: 1 / -1; }
.champ input, .champ textarea, .champ select {
  padding: 13px 16px;
  border: 1px solid var(--bord-fort);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14.5px;
  background: var(--surface);
  color: var(--encre);
  font-weight: 400;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(31, 107, 74, .12);
}
.champ .obligatoire { color: var(--gn-rouge); }

.message-form {
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.message-form--ok { background: #e7f3ec; border: 1px solid #b7dcc7; color: #14523a; }
.message-form--ko { background: #fdecec; border: 1px solid #f3c4c4; color: #8c2020; }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* Conditions numérotées */
.conditions { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.conditions > div { display: flex; gap: 12px; }
.conditions b { color: var(--or); font-weight: 700; flex-shrink: 0; }
.conditions span { font-size: 14.5px; line-height: 1.65; color: var(--texte); }

/* Tarifs d'adhésion */
.tarif { padding: 34px; display: flex; flex-direction: column; gap: 12px; }
.tarif h3 { font-size: 23px; }
.tarif__prix { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--vert); line-height: 1.1; }
.tarif p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--texte-doux); }
.tarif ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tarif li { font-size: 13.5px; line-height: 1.55; color: var(--texte); padding-left: 22px; position: relative; }
.tarif li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--or);
}

/* --------------------------------------------------------------------------
   17. Coordonnées
   -------------------------------------------------------------------------- */
.bloc-info { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-lg); padding: 30px; }
.coordonnees { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--texte); }
.coordonnees b { font-weight: 600; color: var(--vert-profond); display: block; }
.coordonnees a { color: var(--texte); }
.coordonnees a:hover { color: var(--vert); }

.carte-lieu {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bord-moyen);
  background: var(--surface-alt);
}
.carte-lieu iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   18. Filtres & recherche (Actualités)
   -------------------------------------------------------------------------- */
.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 28px;
  border-bottom: 1px solid var(--bord-moyen);
}
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--bord-fort);
  background: var(--surface);
  color: var(--encre);
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-rapide), color var(--t-rapide), background var(--t-rapide);
}
.filtre:hover { border-color: var(--vert); color: var(--vert); }
.filtre.est-actif { background: var(--vert-profond); border-color: var(--vert-profond); color: #fff; }
.filtre.est-actif:hover { color: #fff; }

.recherche {
  padding: 11px 18px 11px 40px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: 13.5px;
  background: var(--surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8a81' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 16px;
  min-width: 240px;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.recherche:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(31, 107, 74, .12); }

.aucun-resultat {
  text-align: center;
  padding: 60px 20px;
  color: var(--texte-doux);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   19. Article
   -------------------------------------------------------------------------- */
.article-entete { background: var(--surface); border-bottom: 1px solid var(--bord); padding: 52px 0 44px; }
.article-entete .ariane { color: var(--texte-faible); }
.article-entete .ariane a { color: var(--texte-faible); }
.article-entete .ariane a:hover { color: var(--vert); }
.article-entete h1 {
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.15;
  margin: 18px 0 0;
  letter-spacing: -.02em;
}
.article-signature {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--bord);
}
.article-signature__id { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 180px; }
.article-signature img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.article-signature b { font-weight: 600; font-size: 15px; display: block; }
.article-signature span { font-size: 13px; color: var(--texte-doux); }

.article-visuel {
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 34px 0 8px;
}
.article-visuel img { width: 100%; height: 100%; object-fit: cover; }
.legende { font-size: 12.5px; color: var(--texte-faible); font-style: italic; margin: 0 0 34px; }

/* Corps rédactionnel */
.prose { font-size: 17px; line-height: 1.85; color: var(--texte); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 22px 0 0; }
.prose p:first-of-type { font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--vert-profond); }
.prose h2 { font-family: var(--serif); font-size: 27px; margin: 38px 0 0; }
.prose h3 { font-size: 22px; margin: 30px 0 0; }
.prose ul, .prose ol { margin: 20px 0 0; padding-left: 22px; }
.prose li { margin: 8px 0; }
.prose img { border-radius: var(--r-md); margin: 28px 0 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose blockquote {
  margin: 32px 0;
  border-left: 3px solid var(--or);
  padding: 6px 0 6px 24px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.55;
  color: var(--vert-profond);
}
.prose blockquote p { margin: 0; font-family: var(--serif); font-size: inherit; color: inherit; }
.prose figcaption { font-size: 12.5px; color: var(--texte-faible); font-style: italic; margin-top: 8px; }
.prose hr { border: 0; border-top: 1px solid var(--bord-moyen); margin: 36px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 26px 0 0; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--bord-moyen); padding: 10px 14px; text-align: left; }
.prose th { background: var(--fond-doux); font-weight: 600; }

.encadre {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 26px 28px;
  margin: 32px 0;
}
.encadre p { font-size: 15px; line-height: 1.75; color: var(--texte); margin: 10px 0 0; }

.mots-cles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--bord-moyen);
}
.mots-cles a, .mots-cles span {
  background: var(--fond-doux);
  color: var(--texte);
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  transition: background var(--t-rapide), color var(--t-rapide);
}
.mots-cles a:hover { background: var(--vert-profond); color: #fff; }

/* Mention portée par les blocs longs affichés en anglais : la version
   française reste la référence. Le libellé est en anglais par nature. */
.prose.est-traduit::before {
  content: "Translated from French — the French version remains authoritative.";
  display: block;
  margin-bottom: 26px;
  padding: 10px 14px;
  border-left: 3px solid var(--or);
  background: var(--fond-doux);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texte-doux);
}

/* Sommaire collant (Statuts) */
.sommaire {
  position: sticky;
  top: 110px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 14px;
  padding: 26px;
}
.sommaire__liste { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.sommaire__liste a {
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre);
  transition: background var(--t-rapide), color var(--t-rapide);
  border-left: 2px solid transparent;
}
.sommaire__liste a:hover { background: var(--fond-doux); color: var(--vert); }
.sommaire__liste a.est-actif { background: var(--fond-doux); color: var(--vert); border-left-color: var(--or); }

.mise-en-avant {
  background: var(--fond);
  border-left: 3px solid var(--or);
  padding: 20px 24px;
  margin: 26px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--texte);
}

/* Frise chronologique */
.frise { display: flex; flex-direction: column; }
.frise__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  padding: 24px 0;
  border-top: 1px solid var(--bord);
}
.frise__annee { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--or); }
.frise__titre { font-size: 17px; font-weight: 600; color: var(--vert-profond); }
.frise__item p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--texte-doux); }

/* Agenda */
.agenda__item {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--bord);
}
.agenda__date { background: var(--vert-profond); color: #fff; border-radius: 10px; padding: 10px 0; text-align: center; }
.agenda__date b { font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1; display: block; }
.agenda__date span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin-top: 3px; display: block; }
.agenda__titre { font-size: 16.5px; font-weight: 600; color: var(--vert-profond); }
.agenda__lieu { font-size: 13.5px; color: var(--texte-doux); margin-top: 3px; }

/* Pagination */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 46px; flex-wrap: wrap; }
/* WordPress enveloppe ses liens dans <nav class="pagination"><div class="nav-links">.
   Sans cette règle, les boutons s'empilent en colonne. */
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pagination a, .pagination .page-numbers {
  min-width: 40px; height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--bord-fort);
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  color: var(--encre);
  transition: border-color var(--t-rapide), color var(--t-rapide);
}
.pagination a:hover { border-color: var(--vert); color: var(--vert); }
.pagination .est-actif,
.pagination .page-numbers.current { background: var(--vert-profond); border-color: var(--vert-profond); color: #fff; }

/* --------------------------------------------------------------------------
   20. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  position: relative;
  background: var(--vert-nuit);
  color: var(--sur-vert);
  padding: 72px 0 0;
  overflow: hidden;
}

/* Filigrane : l'image se fond dans la couleur de fond, haut et bas.
   Se change en redéfinissant --pied-filigrane sur l'élément .pied. */
.pied__filigrane {
  position: absolute;
  inset: 0;
  /* L'image et son opacité sont posées en attribut style sur l'élément :
     une URL relative dans une variable CSS serait résolue depuis cette
     feuille de style. */
  background-size: cover;
  background-position: center;
  opacity: .1;
  filter: grayscale(1) contrast(1.1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 68%, transparent 100%);
}
.pied > .contenu, .pied > .drapeau { position: relative; z-index: 1; }

.pied__grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 50px;
}
@media (max-width: 980px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 640px) { .pied__grille { grid-template-columns: 1fr; gap: 38px; } }

.pied__logo img { height: 74px; width: auto; }
.pied p { font-size: 14.5px; line-height: 1.75; margin: 22px 0 0; max-width: 420px; }

.pied__titre {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
}

/* Miniatures des dernières actualités */
.pied__actus { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.pied__actu {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--sur-vert);
}
.pied__actu:hover { color: #fff; }
.pied__actu img {
  width: 68px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: border-color var(--t-rapide);
}
.pied__actu:hover img { border-color: var(--or); }
.pied__actu b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
}
.pied__actu span { font-size: 12px; color: var(--sur-vert-doux); }

.pied__liens { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; font-size: 14.5px; }
.pied__liens a, .pied__liens span { color: var(--sur-vert); line-height: 1.55; }
.pied__liens a:hover { color: #fff; }
.pied__contact .reseaux { margin-top: 20px; }
.pied__adhesion { margin-top: 20px; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: var(--sur-vert-doux);
}
.pied__bas a { color: var(--sur-vert-doux); }
.pied__bas a:hover { color: #fff; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.pied__signature { margin-left: auto; }
.pied__signature a { color: var(--or); font-weight: 600; }
.pied__signature a:hover { color: var(--or-clair); }
@media (max-width: 760px) {
  .pied__bas { justify-content: center; text-align: center; }
  .pied__legal { justify-content: center; }
  .pied__signature { margin-left: 0; width: 100%; }
}

/* Retour en haut */
.haut {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--vert-profond);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-moyen), transform var(--t-moyen), visibility var(--t-moyen), background var(--t-rapide);
  box-shadow: 0 10px 26px rgba(18, 63, 44, .28);
}
.haut.est-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.haut:hover { background: var(--vert); }
.haut svg { width: 18px; height: 18px; fill: currentColor; }

/* Barre de progression de lecture */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--or), var(--gn-vert));
  z-index: 100;
  transition: width 90ms linear;
}

/* --------------------------------------------------------------------------
   21. Animations
   -------------------------------------------------------------------------- */
/* Le masquage initial n'est appliqué QUE si le script a confirmé qu'il peut
   révéler les éléments (classe posée sur <html>). Si le script échoue ou est
   bloqué, le contenu reste visible : une page vide n'est jamais acceptable. */
html.anim-prete .anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-lent), transform var(--t-lent);
  will-change: opacity, transform;
}
html.anim-prete .anim.est-visible { opacity: 1; transform: none; }

html.anim-prete .anim--gauche { transform: translateX(-26px); }
html.anim-prete .anim--droite { transform: translateX(26px); }
html.anim-prete .anim--zoom   { transform: scale(.965); }
html.anim-prete .anim--gauche.est-visible,
html.anim-prete .anim--droite.est-visible,
html.anim-prete .anim--zoom.est-visible { transform: none; }

/* Décalage en cascade */
html.anim-prete .anim[data-delai="1"] { transition-delay: 70ms; }
html.anim-prete .anim[data-delai="2"] { transition-delay: 140ms; }
html.anim-prete .anim[data-delai="3"] { transition-delay: 210ms; }
html.anim-prete .anim[data-delai="4"] { transition-delay: 280ms; }
html.anim-prete .anim[data-delai="5"] { transition-delay: 350ms; }
html.anim-prete .anim[data-delai="6"] { transition-delay: 420ms; }

/* Sur petit écran, on ne décale plus horizontalement : la translation
   verticale suffit et ne peut pas déborder. */
@media (max-width: 900px) {
  .anim--gauche, .anim--droite { transform: translateY(22px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .anim { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   22. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav, .entete__actions .btn { display: none; }
  .burger { display: grid; }
}

@media (max-width: 900px) {
  .une__corps { padding: 30px; }
  .projet-large__corps { padding: 28px; }
  .sommaire { position: static; }
  .grille--statuts { grid-template-columns: 1fr; }
  .article-entete { padding: 40px 0 34px; }
}

@media (max-width: 720px) {
  /* Sur mobile, le bandeau vert au-dessus de l'en-tête est masqué : ses
     informations sont reprises dans le menu et dans le pied de page. */
  .barre-utile { display: none; }
  .heros__grille { padding: 62px 0 68px; gap: 40px; }
  .heros__chiffres { gap: 20px; }
  .cta__bloc { padding: 34px 26px; }
  .frise__item { grid-template-columns: 1fr; gap: 6px; }
  .agenda__item { grid-template-columns: 70px 1fr; }
  .agenda__item > a { grid-column: 2; justify-self: start; }
  .une__visuel { min-height: 220px; }
  .prose { font-size: 16.5px; }
  .prose p:first-of-type { font-size: 18.5px; }
  .pied__grille { gap: 32px; }
  .pied__bas { justify-content: center; text-align: center; }
  .recherche { min-width: 100%; }
  .barre-filtres { gap: 16px; }
}

@media (max-width: 460px) {
  .heros__vignettes { grid-template-columns: 1fr; }
  .btn { padding-left: 20px; gap: 10px; font-size: 14.5px; min-height: 44px; }
  .btn::after { width: 30px; height: 30px; }
  .btn--simple { padding: 13px 20px; }
  .service { padding: 28px 24px 48px; }
  .service__cta { left: 20px; }
}

/* --------------------------------------------------------------------------
   23. Impression
   -------------------------------------------------------------------------- */
@media print {
  .barre-utile, .entete, .pied, .haut, .progression, .nav-mobile, .voile, .barre-filtres { display: none !important; }
  body { background: #fff; }
  .anim { opacity: 1 !important; transform: none !important; }
  .contenu { max-width: none; }
}