/**
 * Sections d'accueil produites par gi-core.
 *
 * Aucune couleur en dur : tout vient de la palette réglée dans le
 * personnalisateur de Blocksy. Changer la charte, c'est changer la palette, et
 * ces sections suivent. Les valeurs de repli entre parenthèses ne servent qu'au
 * cas où une section serait rendue hors de Blocksy.
 *
 * Les règles qui posent la hauteur ou le rayon d'une image sont **doublées de
 * la classe de leur cadre** — `.gi-carte__media .gi-carte__image` et non
 * `.gi-carte__image` seul. Une règle qui vise l'image par une classe et un
 * élément — `.elementor img { height: auto; border-radius: 0 }` du temps
 * d'Elementor, `.wp-block-image img` du cœur aujourd'hui — dépasse la
 * spécificité d'une classe seule : sans ce doublage, l'image garde ses
 * proportions d'origine au lieu de remplir son cadre, et perd ses angles
 * arrondis — constaté sur la photo d'ouverture.
 *
 * Le garde était d'abord `.gi-section`, le conteneur des sections d'accueil.
 * C'était une erreur : hors de l'accueil — sur une archive, sur une fiche — ce
 * conteneur n'existe pas, et les règles cessaient de s'appliquer. Les
 * couvertures de l'archive des publications gardaient ainsi leurs proportions
 * d'origine, angles droits et rangées désalignées. La classe du cadre, elle,
 * accompagne toujours l'image, où qu'elle soit rendue.
 */

.gi-section {
  --gi-encre: var(--theme-palette-color-3, #201e1d);
  --gi-accent: var(--theme-palette-color-1, #9b3b00);
  --gi-filet: var(--theme-palette-color-5, #8c8a86);
  --gi-carte-fond: var(--theme-palette-color-8, #fff);
  --gi-aplat: var(--theme-palette-color-6, #eae7e7);
  --gi-rayon: 12px;
  --gi-rayon-bouton: 8px;

  padding-block: clamp(48px, 7vw, 96px);
  color: var(--gi-encre);
}

/* En-tête de section */

.gi-section__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.gi-section__titre {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.gi-lien-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gi-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gi-lien-action:hover,
.gi-lien-action:focus-visible {
  border-bottom-color: currentColor;
}

/* Grille de cartes */

.gi-grille--cartes {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* `auto-fit` répartit les colonnes restantes entre les cartes présentes : une
   carte seule occupait donc les 1290 px de la rangée, avec une photographie
   haute d'un écran. C'est le cas sur la fiche d'un axe qui n'a qu'un programme
   achevé. On borne donc la largeur d'une rangée de une ou deux cartes — au-delà,
   la répartition retrouve son sens. */

.gi-grille--cartes > :only-child,
.gi-grille--cartes > :first-child:nth-last-child(2),
.gi-grille--cartes > :first-child:nth-last-child(2) ~ * {
  max-width: 420px;
}

/* Six axes : à 280 px, `auto-fit` en posait quatre puis deux, une rangée
   bancale qui suggère une hiérarchie que le plan ne fait pas. À 320 px, la
   largeur du contenu (1290 px) n'en loge que trois : deux rangées égales, puis
   deux colonnes sur tablette et une sur téléphone. */
.gi-section--thematiques .gi-grille--cartes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.gi-carte {
  background: var(--theme-palette-color-7);
  border-radius: var(--gi-rayon);
  overflow: hidden;
}

/* Sur le crème de la page — archive des programmes, pages, fiches — la carte
   crème se fondait dans le fond : elle passe au blanc. `.wp-singular` couvre
   aussi l'accueil et les fiches d'axe, dont les bandes blanches gardent donc
   la carte crème, sans quoi elle y disparaîtrait à son tour. */
.post-type-archive-programme .gi-carte,
.wp-singular .gi-carte {
  background: var(--theme-palette-color-8);
}

.gi-accueil-bande .gi-carte,
.single-thematique .gi-injecte > .gi-section:nth-child(even) .gi-carte {
  background: var(--theme-palette-color-7);
}

.gi-carte__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.gi-carte__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.gi-carte__media .gi-carte__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les photographies prennent leurs couleurs au survol du lien qui les porte. */
  filter: grayscale(1);
  transition:
    filter 0.3s ease,
    transform 0.4s ease;
}

.gi-carte__lien:hover .gi-carte__image,
.gi-carte__lien:focus-visible .gi-carte__image {
  filter: grayscale(0);
  transform: scale(1.03);
}

.gi-carte__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 2vw, 24px);
}

.gi-carte__surtitre {
  margin: 0;
  color: var(--gi-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gi-carte__titre {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
}

.gi-carte__chapeau {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.gi-carte__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Repoussée en pied de carte : les actions s'alignent d'une carte à l'autre,
	   quelle que soit la longueur du chapeau. */
  margin-top: auto;
  padding-top: 8px;
  color: var(--gi-accent);
  font-weight: 600;
}

.gi-carte__lien:hover .gi-carte__action,
.gi-carte__lien:focus-visible .gi-carte__action {
  text-decoration: underline;
}

.gi-fleche {
  flex: 0 0 auto;
}

/* Le focus doit rester visible : c'est la carte entière qui le porte. */
.gi-carte__lien:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 3px;
}

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

  .gi-carte__lien:hover .gi-carte__image {
    transform: none;
  }
}

/* Intitulé neutre : les partenaires n'ont pas droit au titre plein, qui
   les mettrait au même rang que les thématiques ou les publications. */

.gi-section__intitule {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Bande de logos
   ------------------------------------------------------------------
   Chaque logo repose sur une petite carte blanche, qui le détache du crème
   de la page — disposition reprise du bac à sable voisin.

   Un enroulement centré, et non une grille à colonnes égales : celle-ci
   laisse une case orpheline étirée en fin de rangée dès que le nombre de
   logos n'est pas un multiple du nombre de colonnes. La contrainte porte sur
   la hauteur, jamais sur la largeur : un logo carré et un logo en bandeau
   doivent peser pareil. */

.gi-partenaires__grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-partenaires__cellule {
  display: flex;
  /* Sans croissance : une rangée incomplète garde des cartes de la même
     taille que les autres au lieu de s'étirer. 150 px en font huit par
     rangée à la largeur du contenu, deux sur un téléphone. */
  flex: 0 1 150px;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding-inline: 20px;
  border-radius: var(--gi-rayon);
  background: var(--gi-carte-fond);
}

.gi-partenaires__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  max-width: 100%;
}

/* `min-width: 0` est indispensable : en élément flex, une image garde sa
   largeur intrinsèque comme minimum et déborde de sa carte, `max-width`
   ne suffisant pas à l'en empêcher. */

.gi-partenaires__logo {
  width: 260px;
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  /* Huit chartes graphiques étrangères se disputeraient la page : elles
     reviennent au noir et blanc, et ne reprennent leurs couleurs qu'au survol. */
  filter: grayscale(1);
  opacity: 0.75;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

.gi-partenaires__lien:hover .gi-partenaires__logo,
.gi-partenaires__lien:focus-visible .gi-partenaires__logo {
  filter: grayscale(0);
  opacity: 1;
}

.gi-partenaires__lien:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 6px;
}

@media (max-width: 700px) {
  .gi-partenaires__cellule {
    height: 80px;
    padding-inline: 12px;
  }

  .gi-partenaires__logo {
    max-height: 44px;
  }
}

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

/* Grille des publications */

.gi-grille--publications {
  display: grid;
  gap: clamp(20px, 2.5vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 230px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-publication__lien {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.gi-publication__lien .gi-publication__media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rapport de la maquette, plus large qu'un A4 : la couverture est rognée de
     quelques pour cent, par le bas, où ne figure jamais le titre. */
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: var(--gi-rayon);
  background: var(--gi-aplat);
}

.gi-publication__media .gi-publication__couverture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s ease;
}

.gi-publication__lien:hover .gi-publication__couverture,
.gi-publication__lien:focus-visible .gi-publication__couverture {
  transform: scale(1.03);
}

/* Couverture absente : un aplat porteur d'un glyphe, plutôt qu'un trou. */

.gi-publication__glyphe {
  width: 34%;
  height: auto;
  color: var(--gi-filet);
  opacity: 0.6;
}

.gi-publication__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gi-publication__type {
  padding: 3px 8px;
  color: var(--gi-accent);
  border: 1px solid currentColor;
}

.gi-publication__date {
  color: var(--gi-encre);
  opacity: 0.72;
}

.gi-publication__titre {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.gi-publication__lien:hover .gi-publication__titre,
.gi-publication__lien:focus-visible .gi-publication__titre {
  text-decoration: underline;
}

.gi-publication__compteur {
  /* Repoussé en pied de carte : les chiffres s'alignent d'une vignette à
     l'autre, quelle que soit la longueur du titre. */
  margin: auto 0 0;
  padding-top: 6px;
  font-size: 0.8rem;
  color: var(--gi-encre);
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.gi-publication__lien:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 4px;
}

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

  .gi-publication__lien:hover .gi-publication__couverture {
    transform: none;
  }
}

/* Boutons du socle — posés ici parce que l'ouverture les introduit, mais
   destinés à toutes les sections qui appelleront à l'action. */

.gi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--gi-rayon-bouton);
  color: var(--gi-encre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.gi-btn--primaire {
  background: var(--gi-accent);
  border-color: var(--gi-accent);
  /* Le blanc, et non la couleur 8 de la palette : ce texte doit garder son
     contraste même si la couleur claire de la charte change. */
  color: #fff;
}

.gi-btn--primaire:hover,
.gi-btn--primaire:focus-visible {
  background: var(--theme-palette-color-2, #702800);
  border-color: var(--theme-palette-color-2, #702800);
  color: #fff;
}

.gi-btn--secondaire {
  border-color: var(--gi-filet);
}

.gi-btn--secondaire:hover,
.gi-btn--secondaire:focus-visible {
  border-color: var(--gi-accent);
  color: var(--gi-accent);
}

.gi-btn:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 3px;
}

/* Ouverture */

.gi-hero {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  /* Le texte l'emporte sur l'image : c'est lui qui dit ce qu'est l'institut. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}

.gi-hero__surtitre {
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--gi-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gi-hero__titre {
  /* Pas de transformation de casse : à cette taille, les capitales feraient un
     mur. Le titre se rend tel qu'il est saisi. */
  margin: 0;
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.gi-hero__filet {
  height: 2px;
  margin: clamp(28px, 4vw, 44px) 0 24px;
  border: 0;
  background: var(--gi-aplat);
}

.gi-hero__chapeau {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  opacity: 0.85;
}

.gi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
}

.gi-hero__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  min-height: 260px;
  /* max-height: 70vh; */
  overflow: hidden;
  border-radius: var(--gi-rayon);
  background: var(--gi-aplat);
}

.gi-hero__media .gi-hero__image {
  /* `height: 100%` et le recadrage sont ce qui fait tenir une photographie
     paysage dans un cadre portrait : sans eux, elle garde ses proportions et
     laisse un aplat vide sous elle. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Noir et blanc comme les autres photographies du socle, et couleurs rendues
     au survol du cadre. */
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.gi-hero__media:hover .gi-hero__image,
.gi-hero__media:focus-within .gi-hero__image {
  filter: grayscale(0);
}

/* L'image passe sous le texte avant que la colonne ne devienne illisible. */

@media (max-width: 900px) {
  .gi-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .gi-hero__media {
    order: -1;
    aspect-ratio: 3 / 2;
  }
}

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

@media (max-width: 480px) {
  .gi-hero__actions .gi-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Texte réservé aux synthèses vocales : hors de l'écran sans être masqué,
   `display: none` le retirerait aussi de la restitution. */

.gi-hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Chiffres clés */

.gi-chiffres__grille {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-chiffre {
  /* Le filet sépare les colonnes ; la dernière n'en porte pas, et il disparaît
     dès que la grille repasse sur une seule colonne. */
  padding-right: clamp(16px, 2vw, 24px);
  border-right: 1px solid var(--gi-aplat);
}

.gi-chiffre:last-child {
  border-right: 0;
}

.gi-chiffre__nombre {
  margin: 0;
  color: var(--gi-accent);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.gi-chiffre__libelle {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.85;
}

.gi-chiffre__precision {
  margin: 8px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 0,6 donnait un gris de contraste 4,27 sur la crème, sous le seuil de 4,5. */
  opacity: 0.7;
}

/* Ligne incomplète : visible des seules personnes qui peuvent l'éditer. Elle
   s'affiche en retrait pour qu'on ne la confonde jamais avec un résultat. */

.gi-chiffre--a-venir {
  opacity: 0.55;
}

.gi-chiffre--a-venir .gi-chiffre__nombre {
  color: var(--gi-filet);
}

.gi-chiffre__mention {
  margin: 10px 0 0;
  padding: 6px 10px;
  font-size: 0.7rem;
  line-height: 1.4;
  border: 1px dashed var(--gi-filet);
  border-radius: var(--gi-rayon-bouton);
}

.gi-chiffres__note {
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-size: 0.8rem;
  opacity: 0.72;
}

@media (max-width: 700px) {
  .gi-chiffre {
    padding-right: 0;
    border-right: 0;
  }
}

/* Actualités : une à la une, les brèves en 2×2 */

.gi-actus {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.gi-breves {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.gi-actu {
  height: 100%;
  overflow: hidden;
  border-radius: var(--gi-rayon);
  background: var(--theme-palette-color-7);
}

.gi-actu__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.gi-actu__media {
  margin: 0;
  /* La une respire davantage ; les brèves restent en bandeau pour que deux
     rangées tiennent à côté d'elle. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gi-aplat);
}

.gi-actu--une .gi-actu__media {
  aspect-ratio: 4 / 3;
}

.gi-actu__media .gi-actu__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition:
    filter 0.3s ease,
    transform 0.4s ease;
}

.gi-actu__lien:hover .gi-actu__image,
.gi-actu__lien:focus-visible .gi-actu__image {
  filter: grayscale(0);
  transform: scale(1.03);
}

.gi-actu__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 26px);
}

.gi-actu__titre {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.gi-actu--une .gi-actu__titre {
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.gi-actu__lien:hover .gi-actu__titre,
.gi-actu__lien:focus-visible .gi-actu__titre {
  text-decoration: underline;
}

/* Métadonnées : la date et la durée de lecture, repoussées en pied de carte
   pour qu'elles s'alignent d'une carte à l'autre quel que soit le titre. */

.gi-actu__metas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: auto 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}

.gi-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gi-meta__icone {
  flex: 0 0 auto;
}

.gi-actu__etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-chip {
  padding: 5px 14px;
  font-size: 0.8rem;
  border: 1px solid var(--gi-filet);
  border-radius: 999px;
}

.gi-actu__lien:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .gi-actus {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .gi-breves {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

  .gi-actu__lien:hover .gi-actu__image {
    transform: none;
  }
}

/* Où travaillons-nous : chapeau, compteurs, puis la carte */

.gi-pays__entete {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.gi-pays__chapeau {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  opacity: 0.85;
}

.gi-pays__compteurs {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-pays__compteur {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gi-pays__compteur-nombre {
  color: var(--gi-accent);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.gi-pays__compteur-libelle {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.gi-pays__anterieurs {
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--gi-aplat);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.8;
}

.gi-pays__anterieurs-intitule {
  display: block;
  margin-bottom: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.gi-pays__anterieurs a {
  color: inherit;
}

@media (max-width: 760px) {
  .gi-pays__entete {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La carte et son panneau. Le tracé se colore de la palette : l'accent pour un
   pays d'intervention, l'accent éclairci pour une intervention antérieure, le
   ton sombre de la palette au survol. La mise en page suit la largeur de la
   section, pas celle de l'écran. */

.gi-atlas {
  --gi-atlas-ancien: color-mix(in srgb, var(--gi-accent) 42%, var(--gi-carte-fond));
  --gi-atlas-ancien-fort: color-mix(in srgb, var(--gi-accent) 72%, var(--gi-carte-fond));
  --gi-atlas-survol: var(--theme-palette-color-2, #702800);
  --gi-atlas-transition: cubic-bezier(0.4, 0, 0.2, 1);

  container-type: inline-size;
}

/* Un drapeau manquant ou une mention vide restent invisibles mais gardent leur
   place : la fiche et les vignettes ne changent pas de hauteur d'un pays à
   l'autre. */

.gi-atlas .gi-est-vide {
  visibility: hidden;
}

.gi-atlas__grille {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}

.gi-atlas__scene {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.gi-atlas__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: var(--gi-aplat);
  fill-rule: evenodd;
  stroke: var(--gi-carte-fond);
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.gi-atlas__pays {
  cursor: pointer;
  transition: fill 0.25s var(--gi-atlas-transition);
}

.gi-atlas__pays--actuel {
  fill: var(--gi-accent);
}

.gi-atlas__pays--anterieur {
  fill: var(--gi-atlas-ancien);
}

.gi-atlas__pays--actuel:hover,
.gi-atlas__pays--actuel.gi-est-survole,
.gi-atlas__pays--actuel.gi-est-actif {
  fill: var(--gi-atlas-survol);
}

.gi-atlas__pays--anterieur:hover,
.gi-atlas__pays--anterieur.gi-est-survole,
.gi-atlas__pays--anterieur.gi-est-actif {
  fill: var(--gi-atlas-ancien-fort);
}

/* Cap-Vert et Comores : un contour transparent élargit la zone de survol sans
   grossir les îles à l'écran. */

.gi-atlas__pays circle {
  stroke: transparent;
  stroke-width: 4;
}

.gi-atlas__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

.gi-atlas__legende li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.gi-atlas__pastille {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.gi-atlas__pastille--actuel {
  background: var(--gi-accent);
}

.gi-atlas__pastille--anterieur {
  background: var(--gi-atlas-ancien);
}

/* La fiche du pays désigné */

.gi-atlas__fiche {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 18px 22px;
  border: 1px solid var(--gi-aplat);
  border-radius: 18px;
  background: var(--theme-palette-color-7, #f7f5ef);
}

.gi-atlas__fiche-drapeau,
.gi-atlas__vignette-drapeau {
  display: block;
  flex-shrink: 0;
  background: center / cover no-repeat;
}

.gi-atlas__fiche-drapeau {
  width: 72px;
  height: 48px;
  border: 1px solid var(--gi-aplat);
  border-radius: 6px;
}

.gi-atlas__fiche-texte {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gi-atlas__fiche-texte p {
  margin: 0;
}

.gi-atlas__fiche-nom {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.gi-atlas__fiche-region {
  color: color-mix(in srgb, var(--theme-palette-color-3, #201e1d) 72%, transparent);
  font-size: 0.75rem;
}

.gi-atlas__fiche-etat {
  color: var(--gi-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.gi-atlas__fiche-etat.gi-est-ancien {
  color: var(--gi-atlas-ancien-fort);
}

.gi-atlas__fiche-mention {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Une vignette par pays d'intervention */

.gi-atlas__vignettes {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-atlas__vignettes li {
  display: flex;
  margin: 0;
}

/* Ce sont des boutons : le thème leur donne fond, bordure et marges, qu'il faut
   retirer avant de poser les nôtres. */

.gi-atlas__vignette,
.gi-atlas__ancien {
  appearance: none;
  min-height: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  cursor: pointer;
}

.gi-atlas__vignette {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border: 1.5px solid var(--gi-aplat);
  border-radius: 14px;
  background: var(--theme-palette-color-7, #f7f5ef);
  transition:
    transform 0.22s var(--gi-atlas-transition),
    border-color 0.22s,
    box-shadow 0.22s;
}

.gi-atlas__vignette:hover,
.gi-atlas__vignette.gi-est-survole {
  transform: translateY(-2px);
  border-color: var(--gi-atlas-survol);
  background: var(--theme-palette-color-7, #f7f5ef);
  color: inherit;
}

.gi-atlas__vignette.gi-est-actif {
  border-color: var(--gi-accent);
  box-shadow: 0 0 0 1px var(--gi-accent);
}

.gi-atlas__vignette:focus-visible,
.gi-atlas__ancien:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 2px;
}

.gi-atlas__vignette-drapeau {
  width: 42px;
  height: 28px;
  border: 1px solid var(--gi-aplat);
  border-radius: 5px;
}

/* L'emblème de la Guinée-Bissau est au bord : un recadrage centré le couperait. */

.gi-atlas__vignette-drapeau[style*="/gw.svg"] {
  background-position: 18% center;
}

.gi-atlas__vignette-nom {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

/* Les interventions antérieures, en phrase sous les vignettes */

.gi-atlas .gi-pays__anterieurs {
  margin-top: 22px;
  padding-top: 16px;
}

.gi-atlas__ancien {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--gi-aplat);
  text-underline-offset: 3px;
}

.gi-atlas__ancien:hover,
.gi-atlas__ancien.gi-est-survole,
.gi-atlas__ancien.gi-est-actif {
  background: none;
  color: var(--gi-accent);
  text-decoration-color: currentColor;
}

@container (max-width: 760px) {
  .gi-atlas__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .gi-atlas__scene {
    max-width: 460px;
  }
}

@container (max-width: 480px) {
  .gi-atlas__fiche {
    gap: 14px;
    padding: 14px 16px;
  }

  .gi-atlas__fiche-drapeau {
    width: 54px;
    height: 36px;
  }

  .gi-atlas__vignettes {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gi-atlas__pays,
  .gi-atlas__vignette {
    transition: none;
  }

  .gi-atlas__vignette:hover,
  .gi-atlas__vignette.gi-est-survole {
    transform: none;
  }
}

/* Trombinoscope */

.gi-membres {
  display: grid;
  gap: clamp(20px, 2.5vw, 34px);
  grid-template-columns: repeat(auto-fill, minmax(min(45%, 210px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-membre__media {
  /* Le cadre reste même sans portrait : sans lui, la rangée se décale. */
  aspect-ratio: 3 / 4;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: var(--gi-rayon);
  background: var(--gi-aplat);
}

.gi-membre__media .gi-membre__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage haut : un portrait se recadre par le bas, jamais par le visage. */
  object-position: top;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.gi-membre:hover .gi-membre__portrait {
  filter: grayscale(0);
}

.gi-membre__nom {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.gi-membre__fonction {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.8;
}

.gi-membre__pays {
  margin: 6px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

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

/* Blocs injectés dans une fiche individuelle
   ------------------------------------------------------------------
   Ils sont posés hors du conteneur de contenu de Blocksy, donc sans largeur.
   On leur rend celle du thème plutôt qu'un rembourrage arbitraire.

   Et on la reprend **par les deux variables que Blocksy pose sur l'article**,
   `--theme-block-width` et `--theme-block-max-width`, qui sont exactement
   celles dont il dote les blocs du corps de texte. Un calcul de notre cru —
   `min(1290px, 90vw)` — donnait un conteneur de 1330 px là où les paragraphes
   en font 1290 : nos sections commençaient vingt pixels à gauche du texte de
   la fiche, un désalignement visible sur toute la hauteur de la page. Les
   valeurs de repli ne servent qu'au cas où ces blocs seraient rendus hors de
   Blocksy. */

.gi-injecte {
  width: var(--theme-block-width, min(1290px, 90vw));
  max-width: var(--theme-block-max-width, 1290px);
  margin-inline: auto;
}

/* Bandeau des fiches individuelles
   ------------------------------------------------------------------
   Posé par gi-core dans le conteneur de contenu de Blocksy. Il ne porte pas
   la classe .gi-section : l'espacement vient du gabarit du thème, et un
   second rembourrage vertical décollerait le bandeau de son titre. Les
   jetons de couleur sont donc redéclarés ici. */

.gi-fiche {
  --gi-encre: var(--theme-palette-color-3, #201e1d);
  --gi-accent: var(--theme-palette-color-1, #9b3b00);
  --gi-filet: var(--theme-palette-color-5, #8c8a86);
  --gi-aplat: var(--theme-palette-color-6, #eae7e7);
  --gi-rayon: 12px;
  --gi-rayon-bouton: 8px;

  display: grid;
  gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--gi-aplat);
  color: var(--gi-encre);
}

.gi-fiche__couverture {
  margin: 0;
  overflow: hidden;
  border-radius: var(--gi-rayon);
  background: var(--gi-aplat);
}

.gi-fiche .gi-fiche__image {
  display: block;
  width: 100%;
  height: auto;
}

.gi-fiche__infos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gi-fiche__type {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.gi-fiche__type .gi-chip {
  color: var(--gi-accent);
  border-color: currentColor;
  text-decoration: none;
}

.gi-fiche__type a.gi-chip:hover,
.gi-fiche__type a.gi-chip:focus-visible {
  background: var(--gi-accent);
  color: #fff;
}

/* Métadonnées : intitulé à gauche, valeur à droite, alignés d'une ligne à
   l'autre. Une définition vide n'est jamais rendue, donc pas de ligne creuse.

   La largeur est bornée : sur un grand écran, laisser « 20/07/2026 » s'étaler
   en face de « PARUTION » sur toute la colonne ouvre un vide que l'œil doit
   traverser pour relier l'intitulé à sa valeur. */

.gi-fiche__meta {
  display: grid;
  gap: 2px;
  max-width: 460px;
  margin: 0;
}

.gi-meta-ligne {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--gi-aplat);
}

.gi-meta-ligne__intitule {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.gi-meta-ligne__valeur {
  margin: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.gi-fiche__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

/* Blanc plein : sur l'accent, le moindre fondu passe sous le seuil de contraste
   (3,4 à 75 %). La précision se distingue par sa graisse, pas par sa teinte. */

.gi-btn__precision {
  font-weight: 400;
}

@media (max-width: 600px) {
  .gi-fiche {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Borne réservée à la couverture d'une publication, qui est un portrait :
     étirée sur toute la largeur d'un téléphone, elle occupait un écran entier
     avant le premier mot. Une photographie de programme ou une affiche d'axe,
     elles, sont en paysage et n'ont pas ce défaut — la borne les réduisait
     pour rien. */

  .gi-fiche--publication .gi-fiche__couverture {
    max-width: 260px;
  }
}

/* Archives du socle : filtres, résultats, pagination
   ------------------------------------------------------------------
   Rendues à la place de la liste de Blocksy, dans son conteneur : pas de
   largeur à poser ici, seulement les jetons de couleur que .gi-section
   apporterait ailleurs. */

.gi-archive {
  --gi-encre: var(--theme-palette-color-3, #201e1d);
  --gi-accent: var(--theme-palette-color-1, #9b3b00);
  --gi-filet: var(--theme-palette-color-5, #8c8a86);
  --gi-aplat: var(--theme-palette-color-6, #eae7e7);
  --gi-rayon: 12px;
  --gi-rayon-bouton: 8px;

  color: var(--gi-encre);
}

.gi-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gi-aplat);
}

.gi-filtres__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Deux rangées de pastilles — l'axe, puis le statut — et le champ de recherche
   qui les suit. Les deux rangées prennent toute la largeur pour rester
   lisibles comme deux questions distinctes ; les mêler sur une seule ligne
   laisserait croire à un seul jeu de filtres qui s'excluent. */

.gi-filtres--doubles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 24px;
}

.gi-filtres--doubles .gi-recherche {
  /* Le champ tient la hauteur des deux rangées plutôt que d'en ouvrir une
     troisième : la barre passait sinon du simple au triple en hauteur. */
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 860px) {
  .gi-filtres--doubles {
    grid-template-columns: minmax(0, 1fr);
  }

  .gi-filtres--doubles .gi-recherche {
    grid-column: 1;
    grid-row: auto;
  }
}

.gi-filtre {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--gi-aplat);
  border-radius: 999px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.gi-filtre:hover,
.gi-filtre:focus-visible {
  border-color: var(--gi-accent);
  color: var(--gi-accent);
}

.gi-filtre--actif {
  background: var(--gi-accent);
  border-color: var(--gi-accent);
  /* Blanc plutôt que la couleur claire de la palette : ce texte doit garder
     son contraste même si la charte change. */
  color: #fff;
}

.gi-filtre--actif:hover,
.gi-filtre--actif:focus-visible {
  color: #fff;
}

/* Sur la pastille active, le compte est en blanc sur l'accent : atténué, il
   tombait à un contraste de 2,7. */

.gi-filtre--actif .gi-filtre__compte {
  opacity: 1;
}

/* Le compte dit ce que le filtre écarte : sans lui, on ne sait pas si une
   liste courte est un filtre efficace ou un fonds pauvre. */

.gi-filtre__compte {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

.gi-recherche {
  display: flex;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

/* Le champ est doublé de la classe du formulaire : Blocksy stylise
   `input:is([type=search], …)`, d'une spécificité (un attribut et un élément)
   qui dépasse celle d'une classe seule. Sa largeur de 100 % l'emportait donc,
   et le bouton, poussé d'autant, débordait du conteneur à droite. */

.gi-recherche .gi-recherche__champ {
  flex: 1 1 auto;
  width: 260px;
  min-width: 0;
  height: auto;
  padding: 8px 14px;
  font-size: 0.9rem;
  color: inherit;
  background: transparent;
  border: 1px solid var(--gi-filet);
  border-radius: var(--gi-rayon-bouton);
}

.gi-recherche .gi-recherche__champ:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 1px;
}

.gi-recherche__bouton {
  flex: none;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: var(--gi-accent);
  border: 1px solid var(--gi-accent);
  border-radius: var(--gi-rayon-bouton);
  cursor: pointer;
}

.gi-recherche__bouton:hover,
.gi-recherche__bouton:focus-visible {
  background: var(--theme-palette-color-2, #702800);
  border-color: var(--theme-palette-color-2, #702800);
}

.gi-archive__resultat {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: 0.9rem;
  opacity: 0.7;
}

.gi-archive__vide {
  margin: clamp(24px, 4vw, 48px) 0;
  font-size: 1rem;
  line-height: 1.6;
}

.gi-archive .gi-grille--publications {
  /* Cartes plus larges que sur l'accueil : quatre colonnes au plus, pour que
     les douze fiches d'une page remplissent exactement trois rangées. Une
     grille à cinq colonnes laissait trois trous en bas de page. */
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 280px), 1fr));
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Pagination */

.gi-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--gi-aplat);
}

.gi-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 9px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--gi-aplat);
  border-radius: var(--gi-rayon-bouton);
  font-variant-numeric: tabular-nums;
}

.gi-pagination a.page-numbers:hover,
.gi-pagination a.page-numbers:focus-visible {
  border-color: var(--gi-accent);
  color: var(--gi-accent);
}

.gi-pagination .page-numbers.current {
  background: var(--gi-accent);
  border-color: var(--gi-accent);
  color: #fff;
}

.gi-pagination .page-numbers.dots {
  border-color: transparent;
}

@media (max-width: 600px) {
  .gi-filtres {
    flex-direction: column;
    align-items: stretch;
  }

  .gi-recherche .gi-recherche__champ {
    flex: 1 1 auto;
  }
}

/* Cartes de programme
   ------------------------------------------------------------------
   Elles reprennent le gabarit .gi-carte des thématiques : même cadre, même
   image, même survol. Seul leur pied diffère — statut et période — et deux
   bornes de longueur, le sur-titre portant ici le nom d'un axe et non « Axe 1 ».

   Les bornes sont posées en lignes et non en hauteur fixe : une carte dont le
   texte tient en deux lignes ne se voit pas rogner, et la rangée s'aligne
   quand même, la grille étirant toutes les cartes à la plus haute. */

/* Le nom d'un axe fait jusqu'à soixante caractères : en capitales et espacé
   comme les autres sur-titres, il écrasait le titre du programme qu'il
   surmonte. Il garde donc sa casse, et deux lignes au plus. */

.gi-carte--programme .gi-carte__surtitre {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.gi-carte--programme .gi-carte__chapeau {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.gi-carte__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* Repoussé en pied de carte : les statuts s'alignent d'une carte à l'autre,
     quelle que soit la longueur du chapeau. */
  margin: auto 0 0;
  padding-top: 12px;
}

.gi-carte__periode {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* Le statut est la première chose qu'on cherche sur un programme : il se lit
   sans avoir à lire, par la couleur. L'aplat est réservé à « en cours » — un
   programme achevé n'a pas à crier plus fort que les autres. */

.gi-chip--statut {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.gi-chip--statut[data-statut="en-cours"] {
  color: var(--gi-accent);
  border-color: currentColor;
}

.gi-chip--statut[data-statut="acheve"] {
  color: var(--theme-palette-color-3, #201e1d);
  opacity: 0.72;
}

/* Sous-titre d'une section : sépare « En cours » et « Achevés » sur la fiche
   d'un axe, là où rien n'est paginé. */

.gi-section__sous-titre {
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(12px, 1.5vw, 18px);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.gi-section__sous-titre:first-of-type {
  margin-top: 0;
}

/* Archive des axes : une rangée par axe
   ------------------------------------------------------------------
   L'archive ne répète pas la carte de l'accueil, elle en dit davantage. D'où
   une rangée large : l'image tient un tiers, le texte le reste, et les
   programmes de l'axe s'affichent en pastilles cliquables. */

.gi-axes {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-axe {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  /* L'image tient un tiers de la rangée : au-delà, elle imposait sa hauteur
     à un texte qui n'en demandait pas tant, et ouvrait un vide sous lui. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  padding-bottom: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--gi-aplat);
}

.gi-axe:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.gi-axe__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--gi-rayon);
  background: var(--gi-aplat);
}

.gi-axe__media .gi-axe__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gi-axe__corps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
}

.gi-axe__surtitre {
  margin: 0;
  color: var(--gi-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gi-axe__titre {
  margin: 0;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.2;
}

.gi-axe__titre a {
  color: inherit;
  text-decoration: none;
}

.gi-axe__titre a:hover,
.gi-axe__titre a:focus-visible {
  color: var(--gi-accent);
}

.gi-axe__chapeau {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.gi-axe__programmes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

.gi-axe__intitule {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.gi-axe__programmes .gi-chip {
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.gi-axe__programmes .gi-chip:hover,
.gi-axe__programmes .gi-chip:focus-visible {
  border-color: var(--gi-accent);
  color: var(--gi-accent);
}

@media (max-width: 720px) {
  .gi-axe {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fiches programme et thématique
   ------------------------------------------------------------------
   Même bandeau que la fiche publication, mais une image plus large : une
   couverture de rapport est un portrait, une photographie de programme un
   paysage, et le cadre étroit de la première la réduisait à un timbre. */

.gi-fiche--programme {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
}

.gi-fiche--programme .gi-fiche__couverture {
  aspect-ratio: 4 / 3;
}

.gi-fiche--programme .gi-fiche__image {
  height: 100%;
  object-fit: cover;
}

/* Le bandeau d'un axe inverse l'ordre de la fiche publication : le texte
   d'abord, l'image ensuite. Sur un axe, l'objectif stratégique **est** le
   contenu de la page — tout le reste en découle — et l'image ne fait que
   l'illustrer. Elle passe donc à droite, dans une colonne bornée, et garde ses
   proportions : les images d'axe sont des affiches et des nuages de mots, que
   tout recadrage abîme.

   Alignement vertical au centre : le texte fait deux lignes, l'image trois
   fois plus haut, et les caler en haut laissait la phrase suspendue au bord
   supérieur d'un grand vide. */

.gi-fiche--thematique {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.gi-fiche--thematique .gi-fiche__infos {
  gap: 20px;
}

.gi-fiche--thematique-sobre {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.gi-fiche--thematique-sobre .gi-fiche__couverture {
  max-width: 460px;
}

/* La thèse de la page se compose comme telle. C'est la seule phrase que
   beaucoup de visiteurs liront de l'axe : elle ne peut pas avoir le corps
   d'une légende. */

.gi-fiche__chapeau.gi-fiche__these {
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  /* Aucune largeur maximale : à cette taille de corps, la colonne de gauche
     casse déjà les lignes autour de cinquante-cinq caractères, la longueur
     confortable pour une phrase d'accroche. En poser une par-dessus ne faisait
     que creuser un fossé entre la phrase et l'image. */
}

.gi-fiche__chapeau {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .gi-fiche--programme,
  .gi-fiche--thematique {
    grid-template-columns: minmax(0, 1fr);
  }

  .gi-fiche--programme .gi-fiche__couverture {
    max-width: none;
  }

  .gi-fiche__chapeau.gi-fiche__these {
    max-width: none;
  }
}

/* Les sections injectées en pied de fiche respirent moins que celles de
   l'accueil : empilées à quatre ou cinq sur la page d'un axe, l'espacement de
   l'accueil transformerait la fiche en défilement. */

.gi-injecte .gi-section {
  padding-block: clamp(28px, 4vw, 52px);
}

/* Et leurs titres pèsent moins lourd que ceux de l'accueil. Là-bas, le titre
   de section est le plus gros texte de l'écran ; ici, il vient après le titre
   de la fiche, et le dépasser inverserait la hiérarchie. Sur la page d'un axe,
   où quatre sections s'enchaînent, quatre titres de quarante pixels feraient
   de la fiche une suite d'affiches. */

.gi-injecte .gi-section__titre {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
}

/* Sur la page d'un axe, les sections alternent crème et blanc, pour que
   cinq sections empilées se lisent comme cinq et non comme une seule. Le rang
   est compté sur les sections effectivement rendues : une section vide
   n'étant pas rendue du tout, l'alternance ne se casse pas quand l'une manque.

   La bande blanche déborde de l'enveloppe jusqu'aux bords de l'écran par une
   ombre portée, que `clip-path` rogne en hauteur. Un `100vw` aurait compté la
   barre de défilement et ouvert un défilement horizontal. */

.single-thematique .gi-injecte > .gi-section:nth-child(even) {
  background: var(--theme-palette-color-8, #fff);
  box-shadow: 0 0 0 100vmax var(--theme-palette-color-8, #fff);
  clip-path: inset(0 -100vmax);
}

/* Les cartes prennent l'autre teinte que leur bande : crème sur le blanc,
   blanches sur le crème, où elles se fondraient sinon dans le fond. Les
   priorités, bordées d'un simple filet sur le crème de la page, reçoivent
   elles aussi un fond. */

.single-thematique .gi-injecte > .gi-section:nth-child(odd) .gi-carte,
.single-thematique .gi-injecte > .gi-section:nth-child(odd) .gi-actu__lien,
.single-thematique .gi-injecte > .gi-section:nth-child(odd) .gi-priorite {
  background: var(--theme-palette-color-8, #fff);
}

.single-thematique .gi-injecte > .gi-section:nth-child(even) .gi-priorite {
  background: var(--theme-palette-color-7);
}

/* Sur une fiche programme, pas d'alternance : les actualités sont posées sur
   le crème de la page, et passent donc au blanc. */

.single-programme .gi-actu__lien {
  background: var(--theme-palette-color-8, #fff);
}

/* Contexte et enjeux d'un axe
   ------------------------------------------------------------------
   Un paragraphe long, sur toute la largeur de l'enveloppe : borné à une
   longueur de ligne lisible, faute de quoi il ferait 180 signes par ligne. */

.gi-contexte {
  max-width: 72ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

.gi-contexte p {
  margin: 0;
}

.gi-contexte p + p {
  margin-top: 1em;
}

/* Priorités d'intervention et résultats attendus d'un axe
   ------------------------------------------------------------------
   Les deux répéteurs d'un axe, qui n'étaient rendus nulle part. */

/* Trois colonnes et non quatre : les axes portent cinq priorités et cinq
   résultats, qui se rangent en 3 + 2 plutôt qu'en 4 + 1. */

.gi-priorites {
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-priorite {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--gi-aplat);
  border-radius: var(--gi-rayon);
}

.gi-priorite__rang {
  margin: 0;
  color: var(--gi-accent);
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.gi-priorite__titre {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.3;
}

.gi-priorite__texte {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.gi-resultats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gi-resultat {
  position: relative;
  padding: 10px 0 10px 30px;
  font-size: 1rem;
  line-height: 1.5;
  border-top: 1px solid var(--gi-aplat);
}

/* La coche est décorative : le texte du résultat se suffit, et une synthèse
   vocale n'a rien à lire d'un signe. D'où un pseudo-élément et non un glyphe
   dans le document. */

.gi-resultat::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 4px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--gi-accent);
  border-bottom: 2px solid var(--gi-accent);
  transform: rotate(-45deg);
}

/* Accueil en blocs
   ------------------------------------------------------------------
   Depuis le 23/09/2026, l'accueil est une page de blocs du cœur, et non plus
   une page Elementor. L'ouverture y est faite de blocs — groupe, titre,
   séparateur, boutons, image — qui portent les classes `gi-hero__*` du
   balisage d'origine ; les règles ci-dessous rattrapent ce que ces blocs
   ajoutent (enveloppe des boutons, marges de mise en page, styles du thème).
   Chacune est préfixée de `.gi-hero` : les styles de WordPress et de Blocksy
   visent ces blocs avec une classe et un élément, qu'une classe seule ne
   dépasse pas. */

/* Les sections se touchent : chacune porte son propre espacement vertical, et
   celui que Blocksy pose entre les blocs du contenu ferait apparaître des
   bandes crème entre les bandes blanches. */
.home .entry-content > .gi-section,
.home .entry-content > .gi-accueil-bande,
.home .entry-content > .gi-accueil-bande > .gi-section {
  margin-block: 0;
}

/* Bandes blanches pleine largeur — thématiques, actualités, pays —, dont le
   contenu garde la largeur de celui de la page. */
.entry-content > .gi-accueil-bande {
  padding-inline: var(--theme-content-edge-spacing, 5vw);
  background: var(--theme-palette-color-8, #fff);
}

.gi-accueil-bande > * {
  max-width: var(--theme-block-max-width, 1290px);
  margin-inline: auto;
}

.gi-hero .gi-hero__texte > *,
.gi-hero > .gi-hero__media {
  margin-block: 0;
}

.gi-hero .gi-hero__texte > .gi-hero__surtitre {
  margin-bottom: clamp(16px, 2vw, 24px);
}

/* Le séparateur porte le style « Large » du cœur : c'est lui qui le soustrait
   aux 100 px que Blocksy impose aux autres, dans l'éditeur comme sur le site.
   Dans la version Elementor, le filet ne s'affichait pas — ses marges étaient
   écrasées. */
.gi-hero .gi-hero__texte > .wp-block-separator.gi-hero__filet {
  height: 2px;
  margin: clamp(28px, 4vw, 44px) 0 24px;
  border: 0;
  background: var(--gi-aplat);
  opacity: 1;
}

.gi-hero .gi-hero__texte > .gi-hero__actions {
  margin-top: clamp(24px, 3vw, 32px);
}

/* Les boutons du cœur rendus comme `.gi-btn` : le premier plein, le second
   (style « Contour ») en retrait. */
.gi-hero .gi-hero__actions .wp-block-button__link {
  padding: 15px 26px;
  border: 2px solid var(--gi-accent);
  border-radius: var(--gi-rayon-bouton);
  background: var(--gi-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.gi-hero .gi-hero__actions .wp-block-button__link:hover,
.gi-hero .gi-hero__actions .wp-block-button__link:focus-visible {
  background: var(--theme-palette-color-2, #702800);
  border-color: var(--theme-palette-color-2, #702800);
  color: #fff;
}

/* Le style « Contour » a ses propres marges intérieures, posées par une règle
   plus forte que la précédente : sans les redire ici, le second bouton était
   plus bas que le premier (40 px contre 52). */
.gi-hero .gi-hero__actions .wp-block-button.is-style-outline > .wp-block-button__link {
  padding: 15px 26px;
  border-color: var(--gi-filet);
  background: transparent;
  color: var(--gi-encre);
}

/* Le fond reste transparent au survol : la règle du premier bouton l'aurait
   sinon passé au brun foncé, sous un texte orange illisible. */
.gi-hero .gi-hero__actions .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.gi-hero .gi-hero__actions .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  border-color: var(--gi-accent);
  background: transparent;
  color: var(--gi-accent);
}

.gi-hero .gi-hero__actions .wp-block-button__link:focus-visible {
  outline: 2px solid var(--gi-accent);
  outline-offset: 3px;
}

/* L'image du bloc Image, recadrée dans le cadre portrait comme l'était
   `.gi-hero__image`. */
.gi-hero .gi-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.gi-hero .gi-hero__media:hover img,
.gi-hero .gi-hero__media:focus-within img {
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .gi-hero .gi-hero__media img {
    transition: none;
  }
}

@media (max-width: 480px) {
  .gi-hero .gi-hero__actions .wp-block-button {
    width: 100%;
  }

  .gi-hero .gi-hero__actions .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* Habillage de Blocksy
   ------------------------------------------------------------------ */

/* Fil d'Ariane sur le bandeau gris des en-têtes (palette-color-6) : l'accent n'y
   offre qu'un contraste de 4,0 aux petits liens, sous le seuil de 4,5 ; le brun
   de la palette donne 8,6. Les pages et le blog ont leur réglage dans le
   personnalisateur, pas les types du socle : la règle vaut pour tous. */

.hero-section .ct-breadcrumbs a {
  color: var(--theme-palette-color-2, #702800);
}