@charset "UTF-8";

/* =====================================================================
   FEUILLE DE STYLE DU SITE — Chaire ISCI-MENA
   ---------------------------------------------------------------------
   Utilisée par index.html et par toutes les pages générées par le
   gestionnaire (pages des personnes, des projets…), via
     <link rel="stylesheet" href="css/style.css">
   (chemin relatif à la racine du site ; les pages en sous-dossier ont
   <base href="../../"> et pointent donc vers ce même fichier).

   L'ordre des parties compte : une règle plus bas peut compléter ou
   remplacer une règle plus haut (même ordre qu'avant dans index.html).

   SOMMAIRE
      1. Base — reset, typographie générale
      2. En-tête — logos, navigation supérieure, menu principal, méga-menu, version mobile
      3. Carrousel d'accueil — diapositives, flèches, pastilles
      4. Sections communes — site-section, titres, boutons — partagé par toutes les sections
      5. Actualités — grille de cartes de la page d'accueil
      6. Publications — cartes « Ouvrages et articles scientifiques »
      7. Focus — section « Our focus »
      8. Agenda — onglets À venir / Passés, cartes d'évènements
      9. Membres et partenaires — section data-partenaires
     10. Catégorie — liste des contenus d'une catégorie (data-categorie)
     11. Tous les projets — cartes et filtre par pays (data-projets)
     12. Fiche projet et éléments partagés — fiche data-projet, volet de navigation, équipe (pastilles), partenaires, bouton « Afficher plus »
     13. Profil d'une personne — portrait data-personne : photo, biographie, publications, projets, actualités
     14. Pied de page — footer
     15. Page créée dans le gestionnaire — titre et image d'aperçu
     16. Légendes des images — figcaption sous une image (case « Afficher la légende » du gestionnaire)
     17. Blocs de contenu — sections ajoutées aux pages dans le gestionnaire (texte, image, bouton…)
     18. Nombre d'éléments selon l'écran — data-limit-mobile (ex. bloc « Publications »)
   ===================================================================== */


/* #####################################################################
   1. BASE
   reset, typographie générale
   ##################################################################### */

/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html, body {
  margin: 0;
  padding: 0;
}

/* "clip" (et non "hidden") : coupe aussi le débordement horizontal,
   mais sans créer de zone de défilement, ce qui casserait
   position: sticky (volets de navigation). */
html {
  overflow-x: clip;
}

body {
  font-family: "Roboto", sans-serif;
  color: #111;
  background: #fff;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: "Roboto Condensed", sans-serif;
}


/* #####################################################################
   2. EN-TÊTE
   logos, navigation supérieure, menu principal, méga-menu, version mobile
   ##################################################################### */

.header {
  width: 100%;
  box-sizing: border-box;
  height: 124px;
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #ddd;

  /* Même logique que .site-section : 24 px de marge latérale,
     le conteneur interne centre le contenu à 1120px (le logo ne
     touche plus le bord quand la fenêtre est à peine plus large) */
  padding: 0 24px;
}

/* =========================================================
   CONTENEUR INTERNE DU HEADER
   Reprend exactement la logique de .site-section__container :
   largeur 100%, max-width 1120px, centré via margin auto.
   C'est ce qui garantit que le logo principal démarre à la
   même marge que le contenu des sections.
   ========================================================= */

.header-inner {
  width: 100%;
  max-width: 1120px;
  height: 100%;
  margin: 0 auto;

  display: flex;
  align-items: center; /* CORRIGÉ : était "stretch", forçait le logo à déborder */
}


/* =========================================================
   LOGOS DES INSTITUTIONS
   ========================================================= */

/* Logos remplis par js/contenus.js : masqués (place réservée) tant que
   les logos de la Structure du site ne sont pas en place, pour ne pas
   voir passer d'anciens logos au chargement */
.header .institutions:not([data-logos-prets]) {
  visibility: hidden;
}

.institutions {
  display: flex;
  align-items: center; /* CORRIGÉ : centre verticalement les logos de tailles différentes */
  flex-shrink: 0;

  position: relative;
  z-index: 10;
}

.institutions-secondary {
  display: flex;
  align-items: center;
}

.institution {
  width: 100px;   /* réduit de 124px */
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  position: relative;
}

.institution-1 {
  width: 112px;   /* réduit de 164px : tient désormais dans le header (124px) */
  height: 112px;

  /* CORRIGÉ : le logo principal doit démarrer pile à la marge
     du contenu (comme les sections), pas être centré dans sa
     boîte — sinon il paraît décalé vers la droite. */
  justify-content: flex-start;
}

.institution-logo {
  display: block;

  width: 78%;
  height: 78%;

  max-width: 80px;   /* réduit de 110px */
  max-height: 80px;

  object-fit: contain;
  object-position: center;
}

.institution-1 .institution-logo {
  width: 76%;
  height: 76%;

  max-width: 92px;   /* réduit de 130px */
  max-height: 92px;
}


/* =========================================================
   CONTENU DU HEADER
   ========================================================= */

.header-content {
  flex: 1;
  min-width: 0;

  display: flex;
  flex-direction: column;

  /* Plus de padding ici : c'est .header-inner (comme
     .site-section__container) qui borne déjà la largeur à
     1120px, donc le contenu de droite s'aligne naturellement
     sur la même marge que le contenu des sections. */
  padding: 0;
}


/* =========================================================
   NAVIGATION SUPÉRIEURE
   ========================================================= */

.top-nav {
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  color: #666;
  font-size: 13px;
}

.top-nav a {
  padding: 0 14px;
  text-transform: uppercase;

  color: #666;
  text-decoration: none;
  white-space: nowrap;

  border-right: 1px solid #aaa;
}

.top-nav a:last-child {
  padding-right: 0;
  border-right: none;
}

.top-nav a:hover {
  color: #2F2A85;
}


/* =========================================================
   NAVIGATION PRINCIPALE
   ========================================================= */

.main-nav {
  height: 74px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 0;
  column-gap: 0;

  /*
   * Le menu déroulant est positionné par rapport au HEADER
   * sur desktop (voir .mega-menu), pas par rapport à .main-nav.
   */
  position: static;
}

.nav-item {
  position: static;

  display: flex;
  align-items: center;

  height: 100%;
  margin: 0; /* hitbox jointive avec les nav-item voisins : pas de zone morte au survol */
}

.nav-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  height: 100%;
  padding: 0 clamp(10px, 1.2vw, 21px);

  color: #111;
  font-size: 17px;
  font-weight: 700;

  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-link:hover {
  color: #00a9dc;
}


/* =========================================================
   PETIT TRIANGLE SOUS LE LIEN (desktop uniquement)
   ========================================================= */

.nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 0;

  transform: translateX(-50%) translateY(1px);

  border-left: 11px solid transparent;
  border-right: 11px solid transparent;

  border-bottom: 11px solid #06add5;

  opacity: 0;
}

.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link {
  color: #00a9dc;
}

.nav-item:hover .nav-link::after,
.nav-item:focus-within .nav-link::after {
  opacity: 1;
}


/* =========================================================
   MÉGA MENU (desktop : overlay sous le header)
   ========================================================= */

.mega-menu {
  position: absolute;

  top: 100%;
  left: 0;

  z-index: 1000;

  width: 100%;
  min-height: 190px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  padding: 20px max(40px, calc((100vw - 1000px) / 2));

  background: #06add5;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transform: none;
  transition: opacity 0.2s ease;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item.is-open .mega-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/*
 * PRIORITÉ D'EMPILEMENT : tous les mega-menu partagent le même
 * z-index (1000), donc en cas de deux menus ouverts en même temps
 * (ex : un lien cliqué garde le mega-menu affiché via :focus-within,
 * puis on survole un AUTRE lien plus à gauche dans le DOM), c'est
 * l'ordre du DOM qui tranchait et le sous-menu du lien cliqué
 * passait devant celui réellement survolé. On force ici le menu
 * sous la souris à toujours passer au premier plan.
 */
.nav-item.is-open .mega-menu {
  z-index: 1000;
}

.nav-item:focus-within .mega-menu {
  z-index: 1001;
}

.nav-item:hover .mega-menu {
  z-index: 1002;
}


/* Rubrique sélectionnée (panneau gardé ouvert par le focus) : son
   panneau s'efface tant que la souris survole une AUTRE rubrique qui
   a un panneau, puis réapparaît dès que ce survol s'arrête */
.main-nav:has(.nav-item:hover .mega-menu) .nav-item:not(:hover) .mega-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Passage d'une rubrique à une autre (js/contenus.js) : le panneau
   change de contenu sans fondu, il ne disparaît pas entre les deux */
.header--bascule-menu .mega-menu {
  transition: none !important;
}


/* =========================================================
   COLONNES DU MÉGA MENU
   ========================================================= */

.mega-column {
  min-width: 0;

  padding: 0 44px;

  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

.mega-column:first-of-type {
  padding-left: 0;
}

.mega-column:last-of-type {
  padding-right: 0;
  border-right: 0;
}

/* Titre de colonne (ex : pays dans le menu Projets) */
.mega-title {
  margin: 0 0 16px;
  padding-bottom: 8px;

  color: #201D5B;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.mega-menu a {
  display: block;

  margin: 0 0 14px;

  color: #fff;

  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;

  text-decoration: none;
}

.mega-menu a:last-child {
  margin-bottom: 0;
}

.mega-menu a:hover,
.mega-menu a:focus {
  color: #201D5B;
}

/* Lien "Tout voir : <catégorie>" : mobile uniquement (sur ordinateur,
   le titre de la catégorie dans la barre de menu est déjà cliquable) */
.mega-menu .mega-rubrique {
  display: none;
}


/* =========================================================
   MÉGA MENU PAR PAYS (Projets) — ordinateur uniquement
   Le nombre de colonnes par ligne (--nb-colonnes) et la
   classe .mega-column--debut (1re colonne de chaque ligne)
   sont calculés par js/contenus.js selon le nombre de pays.
   ========================================================= */

@media (min-width: 851px) {

  .mega-menu--pays {
    grid-template-columns: repeat(var(--nb-colonnes, 3), minmax(0, 1fr));
    row-gap: 32px;

    /* Menu très long : défilement interne plutôt que débordement */
    max-height: calc(100vh - 124px);
    overflow-y: auto;
  }

  .mega-menu--pays .mega-column,
  .mega-menu--pays .mega-column:first-of-type,
  .mega-menu--pays .mega-column:last-of-type {
    padding: 0 32px;
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
  }

  .mega-menu--pays .mega-column.mega-column--debut {
    padding-left: 0;
    border-left: 0;
  }

  .mega-menu--pays a {
    font-size: 16px;
    margin-bottom: 12px;
  }
}


/* =========================================================
   BOUTON AGENDA
   ========================================================= */

.donate {
  font-weight: 700;
  margin-left: 0;

  padding: 11px 21px;

  background: #2F2A85;
  color: #fff !important;

  text-decoration: none;
  text-transform: uppercase;
}

.donate:hover {
  /*background: #e8aa00;*/
}

.main-nav > .donate {
  height: auto;
}

/* =========================================================
   BOUTON "AGENDA" : masqué sur mobile
   ========================================================= */

@media (max-width: 850px) {
  .no-mobile {
    display: none;
  }
}

/* =========================================================
   EN-TÊTE TROP CHARGÉ (logos + menu) : anti-chevauchement
   Classes posées par js/contenus.js (ajusterHeader) quand le
   menu principal ne tient plus à droite des logos :
   1. .header--serre       : menu et logos secondaires resserrés
   2. .header--deux-lignes : logos + navigation supérieure en
      haut, menu principal sur toute la largeur en dessous
   ========================================================= */

@media (min-width: 851px) {

  .header--serre .nav-link {
    padding: 0 clamp(7px, 0.8vw, 12px);
    font-size: 15px;
  }

  .header--serre .donate {
    padding: 10px 14px;
    margin-left: 6px;
  }

  .header--serre .institution:not(.institution-1) {
    width: 84px;
  }

  .header--serre .top-nav a {
    padding: 0 9px;
  }

  .header.header--deux-lignes {
    height: auto;
  }

  .header--deux-lignes .header-inner {
    flex-wrap: wrap;
  }

  /* La navigation supérieure et le menu deviennent des éléments
     directs de la ligne flexible du header */
  .header--deux-lignes .header-content {
    display: contents;
  }

  .header--deux-lignes .top-nav {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    align-self: flex-start;
    margin-left: 24px;
  }

  .header--deux-lignes .main-nav {
    flex-basis: 100%;
    height: auto;
    min-height: 58px;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
  }

  .header--deux-lignes .nav-item {
    height: 58px;
  }

  .header--deux-lignes .mega-menu--pays {
    max-height: calc(100vh - 190px);
  }
}


/* =========================================================
   RESPONSIVE : 1400px
   ========================================================= */

@media (max-width: 1400px) {

  .main-nav a {
    font-size: 16px;
  }
}


/* =========================================================
   RESPONSIVE : 1100px
   ========================================================= */

@media (max-width: 1100px) {

  .header {
    height: 104px;
  }

  .institution {
    width: 84px;
    height: 84px;
  }

  .institution-1 {
    width: 96px;   /* CORRIGÉ : était 140px, dépassait des 110px du header */
    height: 96px;
  }

  .institution-logo {
    max-width: 66px;
    max-height: 66px;
  }

  .institution-1 .institution-logo {
    max-width: 76px;
    max-height: 76px;
  }

  .top-nav {
    font-size: 12px;
  }

  .top-nav a {
    padding: 0 8px;
  }

  .main-nav a,
  .nav-link {
    font-size: 14px;
  }

  .mega-menu {
    padding: 18px 30px;
  }

  .mega-menu a {
    font-size: 15px;
  }

  .mega-column {
    padding: 0 25px;
  }
}


/* =========================================================
   RESPONSIVE : 900px
   Même seuil et même valeur que .site-section (24px) : le
   header reste aligné avec les sections.
   ========================================================= */

@media (max-width: 900px) {

  .header {
    padding: 0 24px;
  }
}


/* =========================================================
   RESPONSIVE : 850px — bascule en menu mobile
   ========================================================= */

@media (max-width: 850px) {

  .header {
    height: auto;
  }

  .header-inner {
    flex-wrap: wrap;
  }

  /*
   * Logo principal collé à gauche, logos secondaires
   * groupés sur la même ligne et collés à droite de l'écran.
   */
  .institutions {
    width: 100%;
    flex-basis: 100%;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .institutions-secondary {
    justify-content: flex-end;
  }

  .institution {
    width: 88px;
    height: 90px;
  }

  .institution-1 {
    width: 108px;
    height: 108px;
  }

  .institution-logo {
    max-width: 64px;
    max-height: 64px;
  }

  .institution-1 .institution-logo {
    max-width: 78px;
    max-height: 78px;
  }

  .header-content {
    width: 100%;
    flex-basis: 100%;
  }

  .top-nav {
    display: none;
  }

  /* --- Nav empilée en colonne (fini le wrap inline) --- */
  .main-nav {
    flex-direction: column;
    align-items: stretch;

    height: auto;
    min-height: 0;

    gap: 0;
    padding: 12px 0;
  }

  .nav-item {
    position: relative;
    flex-direction: column;
    align-items: stretch;

    height: auto;

    border-top: 1px solid #eee;
  }

  .nav-item:first-child {
    border-top: none;
  }

  .nav-link {
    height: 52px;
    justify-content: flex-start;
  }

  /*
   * Triangle desktop supprimé, remplacé par un chevron
   * qui indique l'état ouvert/fermé de l'accordéon.
   */
  .nav-link::after {
    display: none;
  }

  .nav-link::before {
    content: "";

    position: absolute;
    right: 4px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-right: 2px solid #111;
    border-bottom: 2px solid #111;

    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
  }

  .nav-item.is-open .nav-link::before {
    transform: translateY(-30%) rotate(225deg);
  }

  /*
   * CORRIGÉ : le sous-menu ne flotte plus en "position: fixed"
   * (top/bottom: auto n'a pas de sens). Il s'ouvre désormais
   * en accordéon, dans le flux normal, juste sous son lien.
   *
   * CORRIGÉ (mobile) : l'ouverture/fermeture dépend UNIQUEMENT
   * de la classe .is-open (pilotée par le JS au clic). Sur tactile,
   * :hover peut rester "collé" après un tap et :focus-within reste
   * actif tant que le lien garde le focus : ces deux déclencheurs
   * empêchaient le sous-menu de se refermer au second tap. La
   * hauteur réelle (scrollHeight) est calculée en JS pour une
   * animation fluide et proportionnée au contenu, au lieu d'une
   * valeur arbitraire (600px) qui rendait la transition saccadée.
   */
  .mega-menu {
    position: static;

    width: 100%;
    min-height: 0;

    max-height: 0;
    overflow: hidden;

    grid-template-columns: 1fr;
    gap: 0;

    padding: 0 4px;

    visibility: hidden;
    opacity: 1;
    pointer-events: none;

    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-item.is-open .mega-menu {
    visibility: visible;
    pointer-events: auto;
    padding: 8px 4px 16px;
    /* max-height est fixé dynamiquement en JS (scrollHeight) */
  }

  .mega-column,
  .mega-column:first-of-type,
  .mega-column:last-of-type {
    padding: 0 0 14px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  }

  .mega-column:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mega-menu a {
    margin-bottom: 10px;
    font-size: 15px;
  }

  .donate {
    margin-top: 8px;
    text-align: center;
  }


  .mega-menu {
    background: inherit;
  }

  .mega-menu a {
    color: grey;
  }

  .mega-title {
    margin-bottom: 10px;
    color: #2F2A85;
    border-bottom-color: #eee;
  }

  .mega-column + .mega-column {
    padding-top: 14px;
  }

  .mega-menu .mega-rubrique {
    display: block;
    margin: 0 0 14px;
    color: #2F2A85;
    font-weight: 700;
  }
}


/* =========================================================
   RESPONSIVE : 600px
   ========================================================= */

@media (max-width: 600px) {

  .header {
    padding: 0 18px;
  }

  /*
   * Logo principal à gauche, logos secondaires (2, 3, 4)
   * groupés sur une seule ligne, collés à droite de l'écran.
   */
  .institutions {
    width: 100%;

    margin: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .institutions-secondary {
    justify-content: flex-end;
  }

  .institution,
  .institution-1 {
    width: 84px;
    height: 84px;
  }

  .institution-1 {
    width: 100px;
    height: 100px;
  }

  .institution-logo,
  .institution-1 .institution-logo {
    width: 78%;
    height: 78%;

    max-width: 62px;
    max-height: 62px;
  }

  .institution-1 .institution-logo {
    max-width: 76px;
    max-height: 76px;
  }

  .main-nav {
    padding: 12px 0;
  }

  .nav-link {
    font-size: 15px;
    padding-left: 4px;
  }

  .donate {
    padding: 9px 16px;
  }

}


/* =========================================================
   RESPONSIVE : 400px
   ========================================================= */

@media (max-width: 400px) {

  .header {
    padding: 0 15px;
  }

  .institution,
  .institution-1 {
    width: 72px;
    height: 72px;
  }

  .institution-1 {
    width: 88px;
    height: 88px;
  }

  .institution-logo,
  .institution-1 .institution-logo {
    max-width: 52px;
    max-height: 52px;
  }

  .institution-1 .institution-logo {
    max-width: 66px;
    max-height: 66px;
  }

  .nav-link {
    font-size: 14px;
  }
}


/* =========================================================
   ACCESSIBILITÉ : mouvement réduit
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .mega-menu,
  .nav-link::before {
    transition: none !important;
  }
}


/* #####################################################################
   3. CARROUSEL D'ACCUEIL
   diapositives, flèches, pastilles
   ##################################################################### */

.hero {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: #282d30;
}

.hero-slide {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;

background:
linear-gradient(
  to top,
  rgba(20, 22, 24, 0.95) 0%,
  rgba(20, 22, 24, 0.55) 45%,
  rgba(20, 22, 24, 0.25) 100%
),
var(--slide-image) center / cover no-repeat;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease;
  z-index: 1;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide-content {
  width: 100%;
  /* 1120px de contenu + 24px de marge de chaque côté */
  max-width: calc(1120px + 48px);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;

  /* Même logique que .site-section__container : aucune marge
     horizontale propre au-dessus de 900px, le texte démarre
     donc à la même marge que le contenu des sections et le
     logo du header. (Les flèches sont centrées verticalement
     à mi-hauteur du hero, le contenu est calé en bas : pas de
     chevauchement, donc pas besoin de dégagement horizontal.) */
  padding-bottom: 64px; /* CORRIGÉ : un peu plus d'air avant les pastilles */

  color: #fff;
}

.hero-eyebrow {
  display: inline-block;

  margin-bottom: 14px;

  padding: 5px 12px;

  background: #2F2A85;
  color: #fff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-title {
  margin-bottom: 14px;

  font-size: clamp(20px, 3vw, 34px); /* fluide au lieu de sauts brusques */
  font-weight: 700;
  line-height: 1.2;
}

.hero-description {
  margin-bottom: 22px;

  max-width: 620px;

  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;

  color: rgba(255, 255, 255, 0.9);
}

.hero-link {
  display: inline-block;

  padding: 11px 22px;
  margin-bottom: 24px;

  background: #06ADD5;
  color: #fff;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;

  text-decoration: none;
}

.hero-link:hover {
  /*background: #e8aa00;*/
}


/* --------- Flèches --------- */

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;

  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  transition: background 0.2s ease;
}

.hero-arrow:hover {
  background: #00a9dc;
}

.hero-arrow--prev {
  left: 20px;
}

.hero-arrow--next {
  right: 20px;
}


/* --------- Pastilles --------- */

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;

  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;

  cursor: pointer;
}

.hero-dot.is-active {
  background: #06ADD5;
  border-color: #06ADD5;
}

/* =========================================================
   RESPONSIVE : 1100px
   ========================================================= */

@media (max-width: 1100px) {

  .hero {
    height: 440px;
  }

  .hero-title {
    font-size: clamp(20px, 2.6vw, 28px);
  }
}


/* =========================================================
   RESPONSIVE : 900px
   Même seuil et même valeur que .site-section (24px) : le
   texte du carrousel reste aligné avec les sections.
   ========================================================= */

@media (max-width: 900px) {

  .hero-slide-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* =========================================================
   RESPONSIVE : 850px
   ========================================================= */

@media (max-width: 850px) {

  .hero {
    height: 420px;
  }

  .hero-slide-content {
    padding-bottom: 52px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-description {
    font-size: 14px;
  }

}


/* =========================================================
   RESPONSIVE : 600px
   ========================================================= */

@media (max-width: 600px) {

  .hero {
    height: 360px; /* CORRIGÉ : était écrasé à 200px par erreur de cascade */
  }

  .hero-slide-content {
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 40px;
  }

  .hero-title {
    font-size: 20px;
  }

  .hero-description {
    font-size: 13px;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-arrow {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}


/* =========================================================
   RESPONSIVE : 400px
   ========================================================= */

@media (max-width: 400px) {

  .hero {
    height: 340px;
  }

  .hero-slide-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 36px;
  }
}


/* =========================================================
   ACCESSIBILITÉ : mouvement réduit
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none !important;
  }
}


/* #####################################################################
   4. SECTIONS COMMUNES
   site-section, titres, boutons — partagé par toutes les sections
   ##################################################################### */

/* =========================================================
   SYSTÈME COMMUN : SITE-SECTION
   Structure, espacement et typo partagés par toutes les
   sections "News", "Publications" et "Focus".
   Seules les couleurs changent via .site-section--dark
   ========================================================= */

.site-section {
  /* --- Thème par défaut (clair) --- */
  --section-bg: #fff;
  --section-text: #111;
  --section-title-color: #111;
  --section-line-color: #2F2A85;
  --section-button-color: #2F2A85;
  --section-button-border: #2F2A85;
  --section-button-hover-bg: #f5fbfd;
  --section-button-hover-border: #00a4dc;
  --section-button-hover-color: #00a4dc;

  width: 100%;
  box-sizing: border-box;
  /* Marges latérales : le contenu ne touche jamais les bords, même
     quand la fenêtre est à peine plus large que le conteneur (1120 px) */
  padding: 72px 24px;
  background: var(--section-bg);
  color: var(--section-text);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
}

/* --- Thème sombre (utilisé par "Our focus") --- */
.site-section--dark {
  --section-bg: #2F2A85;
  --section-text: #fff;
  --section-title-color: #fff;
  --section-line-color: #fff;
  --section-button-color: #fff;
  --section-button-border: #fff;
  --section-button-hover-bg: #fff;
  --section-button-hover-border: #fff;
  --section-button-hover-color: #203f72;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.site-section__container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* =========================================================
   HEADER (titre + trait + description optionnelle)
   ========================================================= */

.site-section__header {
  text-align: center;
  margin: 0 0 48px;
}

.site-section__title {
  margin: 0;
  color: var(--section-title-color);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.site-section__line {
  display: block;
  width: 96px;
  height: 3px;
  margin: 13px auto 0;
  background: var(--section-line-color);
}

.site-section__desc {
  max-width: 850px;
  margin: 20px auto 0;
  color: var(--section-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* Sous-titre (ex: "A new focus for UN-Habitat") */
.site-section__subtitle {
  text-align: center;
  margin: 0 0 48px;
}

.site-section__subtitle h3 {
  margin: 0;
  color: var(--section-title-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

/* =========================================================
   BOUTON
   ========================================================= */

.site-section__action {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: min(535px, 100%);
  min-width: 0;
  min-height: 50px;

  padding: 10px 25px;
  gap: 15px;

  box-sizing: border-box;
  border: 1px solid var(--section-button-border);

  color: var(--section-button-color);

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;
  text-align: center;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.site-button:hover {
  background: var(--section-button-hover-bg);
  border-color: var(--section-button-hover-border);
  color: var(--section-button-hover-color);
}

.site-button__plus {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}

/* =========================================================
   RESPONSIVE — commun à toutes les sections
   ========================================================= */

@media (max-width: 900px) {
  .site-section {
    padding: 56px 24px;
  }
}

@media (max-width: 600px) {
  .site-section {
    padding: 42px 18px;
  }

  .site-section__header {
    margin-bottom: 30px;
  }

  .site-section__title {
    font-size: 24px;
  }

  .site-section__desc {
    font-size: 14px;
  }

  .site-section__subtitle {
    margin-bottom: 30px;
  }

  .site-section__subtitle h3 {
    font-size: 22px;
  }

  .site-section__action {
    margin-top: 30px;
  }

  .site-button {
    width: 100%;
    min-width: 0;
    padding: 10px 15px;
    gap: 10px;
    font-size: 13px;
  }

  .site-button__plus {
    font-size: 22px;
  }
}

@media (max-width: 400px) {
  .site-section {
    padding-left: 15px;
    padding-right: 15px;
  }
}


/* #####################################################################
   5. ACTUALITÉS
   grille de cartes de la page d'accueil
   ##################################################################### */

/* =========================================================
   SPÉCIFIQUE : NEWS & STORIES (grille de cartes)
   ========================================================= */
 
.site-section__container { max-width: 1120px; margin: 0 auto; }
 
.site-section__header { margin-bottom: 30px; }
.site-section__title { font-size: 28px; margin: 0 0 8px; }
.site-section__line { display: block; width: 60px; height: 3px; background: #2F2A85; }
 
.news-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 46px 30px;
}
 
.news-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #222;
  color: #fff;
  aspect-ratio: 1.88 / 1;
  isolation: isolate;
}
 
.news-card--large {
  grid-column: span 3;
  aspect-ratio: 1.83 / 1;
}
 
.news-card--small {
  grid-column: span 2;
  aspect-ratio: 1.93 / 1;
}
 
.news-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.35s ease;
}
 
.news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.1) 75%,
    rgba(0, 0, 0, 0.02) 100%
  );
  z-index: -1;
}
 
.news-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 27px 20px;
}
 
.news-card__meta {
  margin-bottom: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
 
.news-card__meta span + span {
  margin-left: 6px;
}

/* Titre de la catégorie en majuscules (comme ailleurs sur le site) */
.news-card__meta span:first-child {
  text-transform: uppercase;
}
 
.news-card__title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.28;
}
 
.news-card__description {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
.news-card:hover .news-card__image,
.news-card:focus-within .news-card__image {
  transform: scale(1.035);
}
 
.news-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
}
 
.news-card__link:focus-visible {
  outline: 3px solid #2F2A85;
  outline-offset: -3px;
}
 
.site-section__action { margin-top: 40px; text-align: center; }
.site-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #2F2A85;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.site-button__plus { font-size: 16px; }
 
@media (max-width: 900px) {
  .news-grid {
    gap: 24px;
  }
 
  .news-card--large,
  .news-card--small {
    grid-column: span 3;
  }
}
 
@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
 
  .news-card--large,
  .news-card--small {
    grid-column: auto;
    aspect-ratio: 1.72 / 1;
  }
 
  .news-card__content {
    padding: 0 18px 16px;
  }
 
  .news-card__title {
    font-size: 16px;
  }
}


/* #####################################################################
   6. PUBLICATIONS
   cartes « Ouvrages et articles scientifiques »
   ##################################################################### */

/* =========================================================
   SPÉCIFIQUE : RESEARCH & PUBLICATIONS
   ========================================================= */

.publications-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.publication-card {
  width: calc((100% - 120px) / 5);
  min-width: 0;
}

.publication-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.publication-image {
  width: 100%;
  height: 272px;
  margin-bottom: 20px;
  overflow: hidden;
  background: #eee;
}

.publication-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.publication-category {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.publication-card h3 {
  margin: 0;
  color: #2F2A85;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.28;
  transition: color 0.2s ease;
}

/* =========================================================
   AUTEURS
   ========================================================= */

.publication-authors {
  margin: 10px 0 0;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* =========================================================
   DESCRIPTION
   ========================================================= */

.publication-description {
  margin: 8px 0 0;
  color: #666;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.publication-card:hover h3 {
  color: #006fa9;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .publications-grid {
    gap: 24px;
  }

  .publication-card {
    width: calc((100% - 48px) / 3);
  }
}

@media (max-width: 600px) {

  .publications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 16px;
  }

  .publication-card {
    width: auto;
  }

  .publication-category {
    margin-bottom: 8px;
    font-size: 12px;
  }

  .publication-card h3 {
    font-size: 15px;
    line-height: 1.28;
  }

  .publication-authors {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
  }

  .publication-description {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-width: 400px) {

  .publications-grid {
    gap: 24px 12px;
  }

  .publication-card h3 {
    font-size: 14px;
  }

  .publication-category {
    font-size: 11px;
  }

  .publication-authors {
    font-size: 11px;
  }

  .publication-description {
    font-size: 11px;
  }
}


/* #####################################################################
   7. FOCUS
   section « Our focus »
   ##################################################################### */

/* =========================================================
   SPÉCIFIQUE : OUR FOCUS
   ========================================================= */

.focus-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.focus-item {
  flex: 0 1 250px;
  width: 250px;
  min-width: 0;
  text-align: center;
}

.focus-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-icon img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.focus-item h4 {
  max-width: 250px;
  margin: 0 auto;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .focus-grid {
    gap: 40px 24px;
  }

  .focus-item {
    flex: 0 1 280px;
    width: 280px;
  }

  .focus-item h4 {
    max-width: 280px;
  }
}

@media (max-width: 600px) {
  .focus-grid {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .focus-item {
    width: 100%;
    max-width: 280px;
    flex: none;
  }

  .focus-icon {
    width: 85px;
    height: 85px;
    margin-bottom: 16px;
  }

  .focus-icon img {
    width: 85px;
    height: 85px;
  }

  .focus-item h4 {
    max-width: 280px;
    font-size: 16px;
    line-height: 1.35;
  }
}

@media (max-width: 400px) {
  .focus-grid {
    gap: 24px;
  }

  .focus-item h4 {
    font-size: 15px;
  }
}


/* #####################################################################
   8. AGENDA
   onglets À venir / Passés, cartes d'évènements
   ##################################################################### */

/* =========================================================
   AGENDA
   ========================================================= */

.agenda-section {
  --section-bg: #f5f6fa;
  scroll-margin-top: 20px;
}

.agenda {
  max-width: 960px;
  margin: 0 auto;
}

/* --- Onglets À venir / Passés --- */
.agenda__onglets {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 32px;
  width: fit-content;
  padding: 4px;
  background: #fff;
  border: 1px solid #dfe1ec;
  border-radius: 999px;
}

.agenda__onglet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #2F2A85;
  font: 700 14px/1 "Roboto", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.agenda__onglet:hover {
  background: #eef0f8;
}

.agenda__onglet[aria-selected="true"] {
  background: #2F2A85;
  color: #fff;
}

.agenda__onglet:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 2px;
}

/* --- Liste --- */
.agenda__liste {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evt {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-areas: "date corps actions";
  align-items: center;
  gap: 0 28px;
  padding: 20px 24px 20px 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 60, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.evt:hover {
  box-shadow: 0 8px 24px rgba(47, 42, 133, 0.12);
  transform: translateY(-1px);
}

.evt[hidden] {
  display: none;
}

/* Pavé date */
.evt__date {
  grid-area: date;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  background: #2F2A85;
  color: #fff;
  text-align: center;
  line-height: 1;
}

.evt__jour {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 30px;
  font-weight: 700;
  white-space: nowrap;
}

.evt__mois {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evt__annee,
.evt__date-fin {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
}

.evt--en-cours .evt__date {
  background: #06ADD5;
}

.evt--passe .evt__date {
  background: #e6e7ee;
  color: #555a70;
}

/* Corps */
.evt__corps {
  grid-area: corps;
  min-width: 0;
}

.evt__haut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.evt__cat {
  color: #06ADD5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evt--passe .evt__cat {
  color: #777;
}

.evt__badge {
  padding: 3px 8px;
  border-radius: 3px;
  background: #06ADD5;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.evt__titre {
  margin: 0 0 10px;
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.evt__lien {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease, color 0.2s ease;
}

.evt__lien:hover,
.evt__lien:focus-visible {
  color: #2F2A85;
  background-size: 100% 1px;
}

.evt__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.evt__meta li {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.evt__meta svg,
.evt__btn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.evt__meta svg {
  color: #2F2A85;
}

.evt--passe .evt__meta svg {
  color: #999;
}

.evt__desc {
  margin: 10px 0 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actions */
.evt__actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.evt__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid #2F2A85;
  background: transparent;
  color: #2F2A85;
  font: 700 13px/1.2 "Roboto", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.evt__btn--secondaire:hover {
  background: #eef0f8;
}

.evt__btn:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 2px;
}

/* Afficher plus / vide */
.agenda__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed #b9bcd3;
  background: transparent;
  color: #2F2A85;
  font: 700 14px/1 "Roboto", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.agenda__plus:hover {
  background: #fff;
  border-color: #2F2A85;
}

.agenda__plus-nb {
  font-weight: 400;
  color: #666;
}

.agenda__vide {
  margin: 0;
  padding: 40px 20px;
  background: #fff;
  color: #666;
  text-align: center;
  font-size: 15px;
}

/* --- Tablette : actions sous le texte --- */
@media (max-width: 800px) {
  .evt {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      "date corps"
      "date actions";
    gap: 16px 20px;
    align-items: start;
  }

  .evt__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .evt__jour {
    font-size: 26px;
  }
}

/* --- Mobile --- */
@media (max-width: 600px) {
  .agenda__onglets {
    display: flex;
    width: 100%;
    margin-bottom: 24px;
  }

  .agenda__onglet {
    flex: 1;
    justify-content: center;
    padding: 12px 10px;
    font-size: 13px;
  }

  .agenda__liste {
    gap: 12px;
  }

  .evt {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "date corps"
      "actions actions";
    gap: 14px 14px;
    padding: 14px;
  }

  .evt:hover {
    transform: none;
  }

  .evt__date {
    align-self: start;
    padding: 10px 4px;
  }

  .evt__jour {
    font-size: 22px;
  }

  .evt__mois {
    font-size: 11px;
  }

  .evt__annee,
  .evt__date-fin {
    font-size: 10px;
  }

  .evt__titre {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .evt__meta {
    flex-direction: column;
    font-size: 13px;
  }

  .evt__desc {
    font-size: 13px;
  }

  .evt__actions {
    flex-direction: column;
  }

  .evt__btn {
    width: 100%;
    min-height: 44px;   /* cible tactile confortable */
  }
}

@media (prefers-reduced-motion: reduce) {
  .evt,
  .evt__lien {
    transition: none !important;
  }
}


/* #####################################################################
   9. MEMBRES ET PARTENAIRES
   section data-partenaires
   ##################################################################### */

/* Section partenaires : réutilise les cartes .projet__partenaire */
.partenaires__titre {
  margin-bottom: 8px;
}

.partenaires .projet__bloc {
  margin-top: 44px;
}

/* Titres de catégorie longs : retour à la ligne plutôt que coupure */
.partenaires .pt-groupe__titre {
  white-space: normal;
}

@media (max-width: 600px) {
  .partenaires .projet__bloc {
    margin-top: 32px;
  }

  .partenaires .pt-groupe__titre {
    font-size: 15px;
    line-height: 1.3;
  }
}


/* #####################################################################
   10. CATÉGORIE
   liste des contenus d'une catégorie (data-categorie)
   ##################################################################### */

/* =========================================================
   CATÉGORIE (liste)
   ========================================================= */

.liste-cat {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.liste-cat__lien {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  background: #fff;
  color: inherit;
  text-decoration: none;
  border-left: 4px solid #06ADD5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}

.liste-cat__lien:hover {
  box-shadow: 0 10px 26px rgba(47, 42, 133, 0.16);
}

.liste-cat__lien:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 3px;
}

.liste-cat__image {
  min-height: 170px;
  overflow: hidden;
  background: #e3e5ee;
}

.liste-cat__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.liste-cat__lien:hover .liste-cat__image img {
  transform: scale(1.04);
}

/* Publications : couverture verticale, affichée en entier */
.liste-cat__item--publications .liste-cat__lien {
  grid-template-columns: 150px minmax(0, 1fr);
}

.liste-cat__item--publications .liste-cat__image {
  min-height: 0;
  aspect-ratio: 3 / 4;
  align-self: start;
}

.liste-cat__corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
}

.liste-cat__titre {
  margin: 0;
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.2s ease;
}

.liste-cat__lien:hover .liste-cat__titre {
  color: #2F2A85;
}

.liste-cat__auteurs {
  margin: 0;
  color: #2F2A85;
  font-size: 14px;
  font-style: italic;
}

.liste-cat__desc {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.liste-cat__lien:hover .pt-projet__plus,
.liste-cat__lien:focus-visible .pt-projet__plus {
  background-size: 100% 1px;
}

.categorie__vide {
  padding: 40px 20px;
  background: #f5f6fa;
  color: #666;
  text-align: center;
}

@media (max-width: 600px) {
  .liste-cat__lien,
  .liste-cat__item--publications .liste-cat__lien {
    grid-template-columns: 1fr;
  }

  .liste-cat__image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .liste-cat__item--publications .liste-cat__image {
    aspect-ratio: auto;
    height: 220px;
  }

  .liste-cat__item--publications .liste-cat__image img {
    object-fit: contain;
  }

  .liste-cat__corps {
    padding: 16px 18px 18px;
  }

  .liste-cat__titre {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liste-cat__image img {
    transition: none !important;
  }
}


/* #####################################################################
   11. TOUS LES PROJETS
   cartes et filtre par pays (data-projets)
   ##################################################################### */

/* =========================================================
   TOUS LES PROJETS
   ========================================================= */

.projets-section {
  --section-bg: #f5f6fa;
}

.projets-liste__titre {
  margin-bottom: 20px;
}

/* --- Filtre par pays --- */
.pj-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.pj-filtre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #d6d8e6;
  border-radius: 999px;
  background: #fff;
  color: #2F2A85;
  font: 500 14px/1 "Roboto", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pj-filtre span {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ecebf8;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.pj-filtre:hover {
  border-color: #2F2A85;
}

.pj-filtre[aria-pressed="true"] {
  background: #2F2A85;
  border-color: #2F2A85;
  color: #fff;
}

.pj-filtre[aria-pressed="true"] span {
  background: rgba(255, 255, 255, 0.2);
}

.pj-filtre:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 2px;
}

/* --- Grille de cartes --- */
.pj-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.pj-carte {
  min-width: 0;
}

.pj-carte__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(20, 20, 60, 0.08);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pj-carte__lien:hover {
  box-shadow: 0 12px 30px rgba(20, 20, 60, 0.14);
  transform: translateY(-3px);
}

.pj-carte__lien:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 3px;
}

.pj-carte__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #dfe1ec;
}

.pj-carte__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pj-carte__lien:hover .pj-carte__image img {
  transform: scale(1.04);
}

.pj-carte__tags {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pj-carte__pays {
  padding: 4px 10px;
  background: #2F2A85;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pj-carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.pj-carte__titre {
  margin: 0 0 10px;
  color: #111;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.pj-carte__lien:hover .pj-carte__titre {
  color: #2F2A85;
}

.pj-carte__desc {
  margin: 0 0 18px;
  color: #4a4d5e;
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pj-carte__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eceef5;
}

.pj-carte__equipe {
  display: flex;
  padding-left: 8px;
}

.pj-carte__avatar {
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #dfe1ec;
}

.pj-carte__avatar--initiales,
.pj-carte__avatar--reste {
  display: inline-grid;
  place-items: center;
  background: #ecebf8;
  color: #2F2A85;
  font-size: 11px;
  font-weight: 700;
}

.pj-carte__stats {
  color: #6b6f85;
  font-size: 13px;
}

.pj-carte__plus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  color: #06ADD5;
  font-size: 14px;
  font-weight: 700;
}

/* Avec un pied (équipe, chiffres), c'est lui qui est calé en bas */
.pj-carte__pied + .pj-carte__plus {
  margin-top: 0;
}

.pj-carte__plus::after {
  content: "→";
  transition: transform 0.2s ease;
}

.pj-carte__lien:hover .pj-carte__plus::after {
  transform: translateX(4px);
}

@media (max-width: 600px) {
  .pj-grille {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pj-carte__titre {
    font-size: 20px;
  }

  .pj-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -18px;
    padding-right: 18px;
    scrollbar-width: none;
  }

  .pj-filtre {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-carte__lien,
  .pj-carte__image img,
  .pj-carte__plus::after {
    transition: none !important;
  }
}


/* #####################################################################
   12. FICHE PROJET ET ÉLÉMENTS PARTAGÉS
   fiche data-projet, volet de navigation, équipe (pastilles), partenaires, bouton « Afficher plus »
   ##################################################################### */

/* =========================================================
   FICHE PROJET
   ========================================================= */

/* La mise en page 2 colonnes (.volet-grille) et le volet (.volet)
   sont communs à toutes les sections : voir « VOLET DE NAVIGATION ». */

/* --- Contenu principal --- */
.projet__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.projet__titre {
  margin: 0 0 24px;
  color: #111;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
}

.projet__titre::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 14px;
  background: #2F2A85;
}

.projet__image {
  margin: 0 0 28px;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: #e3e5ee;
}

.projet__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projet__texte {
  color: #222;
  font-size: 17px;
  line-height: 1.7;
}

.projet__texte p {
  margin: 0 0 18px;
}

.projet__texte p:last-child {
  margin-bottom: 0;
}

.projet__bloc {
  margin-top: 56px;
}

/* --- Équipe --- */
.projet__equipe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 28px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.projet__personne {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.projet__photo {
  width: 120px;
  height: 120px;
  margin-bottom: 12px;
  border-radius: 50%;
  object-fit: cover;
  background: #e3e5ee;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #dfe1ec;
  transition: box-shadow 0.2s ease;
}

.projet__photo--initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2F2A85;
  color: #fff;
  font: 700 32px/1 "Roboto Condensed", sans-serif;
}

a.projet__personne:hover .projet__photo {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #06ADD5;
}

.projet__nom {
  color: #111;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

.projet__fonction {
  margin-top: 4px;
  color: #666;
  font-size: 13px;
  line-height: 1.35;
}

/* --- Partenaires --- */
.projet__partenaires {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.projet__partenaires > li {
  display: flex;            /* cartes de même hauteur sur une ligne */
}

.projet__partenaire {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid #e3e5ee;
  border-bottom: 3px solid #e3e5ee;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Zone du logo : fond clair, hauteur fixe, logo centré sans déformation */
.projet__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 22px 26px;
  background: #f7f8fb;
  border-bottom: 1px solid #eceef5;
}

.projet__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Pas de logo : le nom sert de logo typographique */
.projet__logo-texte {
  color: #2F2A85;
  font: 700 24px/1.1 "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}

.projet__logo:has(.projet__logo-texte) + .projet__partenaire-nom {
  display: none;            /* évite d'afficher deux fois le nom */
}

.projet__logo:has(.projet__logo-texte) ~ .projet__partenaire-cat {
  margin-top: 14px;
}

.projet__partenaire-nom {
  margin: 14px 16px 16px;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.projet__partenaire-nom:has(+ .projet__partenaire-cat) {
  margin-bottom: 0;
}

.projet__partenaire-cat {
  margin: 6px 16px 16px;
  color: #0086a8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Partenaire avec lien : flèche « lien externe » + survol */
a.projet__partenaire::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  background: currentColor;
  color: #b9bcd3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: color 0.25s ease, transform 0.25s ease;
}

a.projet__partenaire:hover,
a.projet__partenaire:focus-visible {
  border-color: #d5d8e6;
  border-bottom-color: #06ADD5;
  box-shadow: 0 10px 24px rgba(47, 42, 133, 0.06);
  transform: translateY(-1px);
}

a.projet__partenaire:hover .projet__logo img,
a.projet__partenaire:focus-visible .projet__logo img {
  opacity: 1;
  transform: scale(1.04);
}

a.projet__partenaire:hover::after,
a.projet__partenaire:focus-visible::after {
  color: #06ADD5;
  transform: translate(1px, -1px);
}

a.projet__partenaire:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 2px;
}

@media (hover: none) {
  /* Écrans tactiles : pas de survol, logos directement en couleur */
  .projet__logo img {
    filter: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projet__partenaire,
  .projet__logo img,
  a.projet__partenaire::after {
    transition: none !important;
  }

  a.projet__partenaire:hover,
  a.projet__partenaire:focus-visible {
    transform: none;
  }
}

/* --- Afficher plus (équipe, actualités, catégories) --- */
.projet__plus,
.bouton-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 24px;
  padding: 14px;
  border: 1px dashed #b9bcd3;
  background: transparent;
  color: #2F2A85;
  font: 700 14px/1 "Roboto", sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.projet__plus:hover,
.bouton-plus:hover {
  background: #f5f6fa;
  border-color: #2F2A85;
}

.projet__plus:focus-visible,
.bouton-plus:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 2px;
}

/* éléments masqués par la pagination (prioritaire sur les display des cartes) */
[data-pagine] > [hidden] {
  display: none !important;
}

.projet__plus-nb,
.bouton-plus__nb {
  font-weight: 400;
  color: #666;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .projet__titre {
    font-size: 28px;
  }

  .projet__texte {
    font-size: 16px;
  }

  .projet__bloc {
    margin-top: 40px;
  }

  .projet__equipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .projet__photo {
    width: 96px;
    height: 96px;
  }

  .projet__partenaires {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .projet__logo {
    height: 90px;
    padding: 16px 18px;
  }

  .projet__logo-texte {
    font-size: 20px;
  }

  .projet__partenaire-nom {
    margin: 12px 10px 12px;
    font-size: 14px;
  }

  .projet__partenaire-cat {
    margin: 4px 10px 12px;
    font-size: 10px;
  }
}

/* =========================================================
   VOLET DE NAVIGATION (commun : projets, personnes, etc.)
   Généré par js/contenus.js depuis data/structure/navigation.json
   (data-volet="id-navigation", ou automatiquement dans une
   fiche projet).
   ========================================================= */

.volet-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}

.volet-principal {
  min-width: 0;
}

.volet {
  position: sticky;
  top: 24px;
  padding: 24px;
  background: #f5f6fa;
  border-top: 3px solid #2F2A85;
}

.volet__titre {
  margin: 0 0 18px;
  color: #2F2A85;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.volet__titre a:hover {
  color: #06ADD5;
}

.volet__groupe + .volet__groupe {
  margin-top: 20px;
}

.volet__sous-titre {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dfe1ec;
  color: #06ADD5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.volet ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.volet__lien {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 3px solid transparent;
  color: #222;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a.volet__lien:hover,
a.volet__lien:focus-visible {
  color: #2F2A85;
  border-left-color: #06ADD5;
}

.volet__lien.is-actif {
  color: #2F2A85;
  font-weight: 700;
  border-left-color: #2F2A85;
}

a.volet__lien.is-actif:hover,
a.volet__lien.is-actif:focus-visible {
  border-left-color: #06ADD5;
}

@media (max-width: 900px) {
  .volet-grille {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .volet {
    position: static;
  }
}


/* #####################################################################
   13. PROFIL D'UNE PERSONNE
   portrait data-personne : photo, biographie, publications, projets, actualités
   ##################################################################### */

/* =========================================================
   NOUVEAU BLOC : .text-media
   Image "encapsulée" dans le texte, puis texte sur 2 colonnes.
   C'est la SEULE partie à ajouter à ta feuille de styles —
   tout ce qui précède existe déjà sur le site.
   ========================================================= */
 
.text-media {
  column-count: 1;
  column-gap: 40px;
  color: var(--section-text);
  font-size: 16px;
  line-height: 1.6;
}
 
.text-media__image {
  float: left;
  width: 35%;          /* répartition image / texte : 25 / 75 */
  min-width: 160px;    /* reste lisible sur tablette */
  height: auto;
  margin: 4px 28px 20px 0;
  border-radius: 4px;
}
 
.text-media p {
  margin: 0 0 18px;
}
 
.text-media p:last-child {
  margin-bottom: 0;
}

/* Contient l'image flottante dans son bloc */
.text-media {
  display: flow-root;
}

/* Paragraphes de texte justifiés sur grand écran uniquement
   (sur mobile, la colonne est trop étroite : trous entre les mots).
   La césure automatique (lang="fr") limite les espaces trop larges. */
@media (min-width: 901px) {
  .projet__texte p,
  .text-media p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Espacement entre plusieurs portraits (si data-limit > 1) */
.personne + .personne {
  margin-top: 72px;
}

@media (max-width: 600px) {
  .personne + .personne {
    margin-top: 42px;
  }
}

/* =========================================================
   ARTICLES / PROJETS / ACTUALITÉS D'UNE PERSONNE (préfixe pt-)
   ========================================================= */

.personne__travaux {
  margin-top: 48px;
  padding: 40px;
  background: #f5f6fa;
  border-top: 3px solid #2F2A85;
}

.pt-groupe + .pt-groupe {
  margin-top: 48px;
}

/* --- En-tête de groupe : titre + filet --- */
.pt-groupe__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}

.pt-groupe__titre {
  margin: 0;
  color: #2F2A85;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pt-groupe__trait {
  flex: 1;
  height: 1px;
  background: #d5d8e6;
}

.pt-grille {
  display: grid;
  gap: 28px;
}

.pt-meta {
  display: block;
  color: #666;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

.pt-meta--clair {
  color: rgba(255, 255, 255, 0.9);
}

/* --- Articles : couvertures verticales --- */
.pt-grille--publications {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.pt-article__lien {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pt-article__image {
width: 100%;
height: 272px;
margin-bottom: 14px;
overflow: hidden;
background: #e3e5ee;
}

.pt-article__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.pt-article__titre {
  margin: 6px 0 0;
  color: #2F2A85;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.pt-article__lien:hover .pt-article__titre {
  color: #06ADD5;
}

/* --- Projets : cartes horizontales --- */
.pt-grille--projets {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.pt-projet__lien {
  display: grid;
  grid-template-columns: 42% 1fr;
  height: 100%;
  background: #fff;
  color: inherit;
  text-decoration: none;
  border-left: 4px solid #06ADD5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}

.pt-projet__image {
  min-height: 200px;
  overflow: hidden;
  background: #e3e5ee;
}

.pt-projet__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.pt-projet__corps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
}

.pt-projet__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pt-tag {
  padding: 3px 9px;
  background: #eaf8fc;
  color: #0086a8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pt-projet__titre {
  margin: 0;
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.pt-projet__desc {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-projet__plus {
  align-self: flex-start;   /* soulignement limité à la largeur du texte */
  margin-top: auto;
  color: #2F2A85;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;

  /* même effet de survol que le titre des évènements de l'agenda */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}


.pt-projet__lien:hover {
  box-shadow: 0 10px 26px rgba(47, 42, 133, 0.16);
}

.pt-projet__lien:hover .pt-projet__image img {
  transform: scale(1.04);
}
.pt-projet__lien:hover .pt-projet__plus,
.pt-projet__lien:focus-visible .pt-projet__plus {
  background-size: 100% 1px;
}


/* --- Actualités : vignettes image + dégradé --- */
.pt-grille--actualites {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.pt-actu {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #282d30;
  isolation: isolate;
}

.pt-actu__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.35s ease;
}

.pt-actu::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.05) 100%);
}

.pt-actu__contenu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20px 18px;
}

.pt-actu__titre {
  margin: 6px 0 0;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-actu__lien {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.pt-actu:hover .pt-actu__image,
.pt-actu:focus-within .pt-actu__image {
  transform: scale(1.04);
}

/* Focus clavier visible sur toutes les cartes */
.pt-article__lien:focus-visible,
.pt-projet__lien:focus-visible,
.pt-actu__lien:focus-visible {
  outline: 3px solid #06ADD5;
  outline-offset: 3px;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .personne__travaux {
    padding: 32px 24px;
  }

  .pt-grille--projets {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .personne__travaux {
    margin: 32px -18px 0;   /* pleine largeur sur mobile */
    padding: 28px 18px;
  }

  .pt-groupe + .pt-groupe {
    margin-top: 36px;
  }

  .pt-grille {
    gap: 20px;
  }

  .pt-grille--publications {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }

  .pt-article__titre {
    font-size: 14px;
  }

  .pt-grille--actualites {
    grid-template-columns: 1fr;
  }

  .pt-projet__lien {
    grid-template-columns: 1fr;
  }

  .pt-projet__image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .pt-projet__corps {
    padding: 18px;
  }

  .pt-projet__titre {
    font-size: 18px;
  }
}

@media (max-width: 400px) {
  .personne__travaux {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pt-article__image,
  .pt-projet__image img,
  .pt-projet__plus,
  .pt-actu__image {
    transition: none !important;
  }
}

/* évite qu'un sous-titre reste isolé en bas de colonne */
.text-media h3 {
  break-after: avoid;
  -webkit-column-break-after: avoid;
}
 
@media (min-width: 901px) {
  .text-media {
    column-count: 1;
  }
}
 
@media (max-width: 600px) {
  .text-media__image {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }
}


/* #####################################################################
   14. PIED DE PAGE
   footer
   ##################################################################### */

/* ==========================================
 FOOTER
========================================== */

.site-footer {
  width: 100%;
  background: #222222;
  color: #bdbdbd;



  box-sizing: border-box;
}

.footer-container {
  width: 100%;
  /* contenu de 1210px + 24px de marge de chaque côté */
  max-width: calc(1210px + 48px);

  margin: 0 auto;

  padding: 25px 24px 20px;

  box-sizing: border-box;
}


/* ==========================================
 TITRE / SOUS-TITRE
========================================== */

.footer-brand {
  min-height: 70px;

  display: flex;
  align-items: flex-start;
}

.footer-logo {
  display: flex;
  flex-direction: column;

  text-decoration: none;
}

.footer-title {
  display: block;

  color: #ffffff;

  font-family: "Roboto Condensed", sans-serif;

  font-size: 27px;
  line-height: 1.15;

  font-weight: 700;

  letter-spacing: 0.2px;
}

.footer-subtitle {
  display: block;

  margin-top: 6px;

  color: #bcbcbc;

  font-size: 15px;
  line-height: 1.3;

  font-weight: 400;
}


/* ==========================================
 SEPARATOR
========================================== */

.footer-divider {
  width: 100%;
  height: 1px;

  background: #555555;

  margin-bottom: 18px;
}


/* ==========================================
 COLUMNS
========================================== */

.footer-content {
  display: grid;

  /* nombre de colonnes fixé par js/contenus.js */
  grid-template-columns: repeat(var(--nb-colonnes-footer, 5), minmax(0, 1fr));

  column-gap: 42px;

  align-items: start;
}


/* ==========================================
 COLUMN
========================================== */

.footer-column {
  min-width: 0;
}

.footer-column h3 {
  margin: 0 0 16px;

  color: #fff;

  font-size: 16px;
  line-height: 1.2;

  font-weight: 700;
}

.footer-column ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-column li {
  margin: 0 0 18px;
}

.footer-column li:last-child {
  margin-bottom: 0;
}

.footer-column a {
  color: #bcbcbc;

  text-decoration: none;

  font-size: 14px;
  line-height: 1.45;

  font-weight: 400;

  transition:
      color 0.2s ease;
}

.footer-column a:hover {
  color: #00a9df;
}

/* Titre de colonne cliquable (lien vers la page de la catégorie) */
.footer-column h3 a {
  color: #fff;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


/* ==========================================
 GOVERNANCE
========================================== */

.governance li {
  margin-bottom: 19px;
}


/* ==========================================
 CONNECT
========================================== */

.footer-connect {
  margin-top: 42px;
}

.footer-connect h3 {
  margin-bottom: 9px;
}


/* ==========================================
 SOCIAL ICONS PNG
========================================== */

.social-links {
  display: flex;
  align-items: center;

  gap: 17px;
}

.social-links a {
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
}

.social-links img {
  display: block;

  width: 22px;
  height: 22px;

  object-fit: contain;

  opacity: 0.65;

  transition:
      opacity 0.2s ease,
      transform 0.2s ease;
}

.social-links a:hover img {
  opacity: 1;

  transform: translateY(-1px);
}


/* ==========================================
 BOTTOM
========================================== */

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  margin-top: 43px;
  padding-top: 8px;

  border-top: 1px solid #555555;

  font-size: 14px;
  line-height: 1.4;
}

.copyright {
  color: #bcbcbc;
}

.footer-legal {
  display: flex;
  align-items: center;

  gap: 35px;
}

.footer-legal a {
  color: #bcbcbc;

  text-decoration: none;

  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #00a9df;
}


/* ==========================================
 LARGE DESKTOP
========================================== */

@media (min-width: 1400px) {

  .footer-container {
      max-width: calc(1120px + 48px);
  }

}


/* ==========================================
 TABLET
========================================== */

@media (max-width: 1000px) {

  .footer-container {
      padding: 30px 35px 25px;
  }

  .footer-content {
      grid-template-columns:
          repeat(3, 1fr);

      row-gap: 45px;
      column-gap: 40px;
  }

  .media-column {
      grid-column: span 1;
  }

  .footer-bottom {
      margin-top: 45px;
  }
}


/* ==========================================
 MOBILE
========================================== */

@media (max-width: 650px) {

  .footer-container {
      padding: 30px 22px 25px;
  }


  /* Titre */

  .footer-brand {
      min-height: auto;

      margin-bottom: 25px;
  }

  .footer-title {
      font-size: 23px;
  }

  .footer-subtitle {
      font-size: 14px;
  }


  /* Columns */

  .footer-content {
      display: block;
  }

  .footer-column {
      margin-bottom: 38px;
  }

  .footer-column:last-child {
      margin-bottom: 0;
  }

  .footer-column h3 {
      font-size: 17px;
      margin-bottom: 15px;
  }

  .footer-column li {
      margin-bottom: 13px;
  }

  .footer-column a {
      font-size: 14px;
  }


  /* Connect */

  .footer-connect {
      margin-top: 35px;
  }


  /* Social */

  .social-links {
      gap: 15px;
  }


  /* Bottom */

  .footer-bottom {
      display: flex;
      flex-direction: column;

      align-items: flex-start;

      gap: 18px;

      margin-top: 30px;
      padding-top: 20px;
  }

  .footer-legal {
      gap: 25px;
  }
}


/* ==========================================
 VERY SMALL MOBILE
========================================== */

@media (max-width: 400px) {

  .footer-container {
      padding-left: 18px;
      padding-right: 18px;
  }

  .footer-title {
      font-size: 21px;
  }

  .footer-subtitle {
      font-size: 13px;
  }

  .footer-column a {
      font-size: 13px;
  }

  .copyright {
      font-size: 12px;
  }

  .footer-legal {
      font-size: 13px;
  }
}


/* #####################################################################
   15. PAGE CRÉÉE DANS LE GESTIONNAIRE
   page vide : titre, date, image d'aperçu, personnes et projets liés
   (section .page-libre ; liens remplis par contenus.js, data-page-liens)
   ##################################################################### */

/* Écart réduit entre l'en-tête de la page (titre, date, image) et son
   contenu : 40 px au lieu des marges cumulées des deux sections */
.page-libre {
  padding-bottom: 40px;
}

.page-libre .site-section__container > :last-child {
  margin-bottom: 0;
}

/* Premier bloc (sur fond blanc) collé à l'en-tête */
.page-libre ~ .blocs > .bloc:not(.bloc ~ .bloc) > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-top: 0;
}

.page-libre__titre {
  margin-bottom: 32px;
}

.page-libre__titre:has(+ .page-libre__date) {
  margin-bottom: 12px;
}

.page-libre__date {
  margin: 0 0 32px;
  color: var(--section-line-color);
  font-weight: 600;
}

.page-libre__image {
  margin: 0 0 40px;
}

.page-libre__liens {
  margin-top: 48px;
}

/* Personnes, projets et partenaires liés : section placée après les blocs de la page */
.page-libre-liens {
  padding-top: 0;
}

.page-libre-liens .page-libre__liens {
  margin-top: 0;
}

.page-libre__image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

@media (max-width: 600px) {
  .page-libre {
    padding-bottom: 28px;
  }

  .page-libre__titre {
    margin-bottom: 24px;
  }

  .page-libre__image {
    margin-bottom: 28px;
  }

  .page-libre__date {
    margin-bottom: 24px;
  }

  .page-libre__liens {
    margin-top: 32px;
  }
}


/* #####################################################################
   16. LÉGENDES DES IMAGES
   <figcaption class="legende"> : texte alternatif de l'image, affiché
   sous l'image quand la case « Afficher la légende » est cochée dans le
   gestionnaire (fiche projet, portrait d'une personne, page créée)
   ##################################################################### */

.legende {
  margin-top: 8px;
  color: #555;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

/* Section à fond violet : légende claire pour rester lisible */
.site-section--dark .legende {
  color: rgba(255, 255, 255, 0.82);
}

/* Fiche projet : l'image garde son format 16/8, la légende passe dessous */
.projet__image--legende {
  aspect-ratio: auto;
  overflow: visible;
  background: none;
}

.projet__image--legende img {
  aspect-ratio: 16 / 8;
  height: auto;
  background: #e3e5ee;
}

/* Portrait d'une personne : la figure prend la place de l'image flottante */
.text-media__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.text-media__figure {
  border-radius: 0;
}

.text-media__figure .legende {
  margin-bottom: 0;
}

/* Page créée : légende sous l'image d'aperçu */
.page-libre__image .legende {
  margin-top: 10px;
}


/* #####################################################################
   17. BLOCS DE CONTENU
   sections composées dans le gestionnaire (div.blocs[data-blocs]) ;
   les blocs de données (agenda, actualités, membres…) reprennent les
   styles des parties 3 à 11
   ##################################################################### */

/* Fond gris clair (le fond violet utilise .site-section--dark, partie 4) */
.bloc--gris {
  --section-bg: #f5f6fa;
}

/* --- Texte ---
   Même largeur que les autres sections (conteneur de 1120 px),
   comme le bloc « Texte et image » */
.bloc-texte__contenu {
  font-size: 17px;
  line-height: 1.7;
}

.bloc-texte__contenu p,
.bloc-texte__contenu ul {
  margin: 0 0 18px;
}

.bloc-texte__contenu > :last-child {
  margin-bottom: 0;
}

.bloc-texte__contenu ul {
  padding-left: 22px;
}

.bloc-texte__contenu li + li {
  margin-top: 6px;
}

.bloc-texte__contenu h3 {
  margin: 28px 0 12px;
  font-size: 22px;
  line-height: 1.25;
  color: var(--section-title-color);
}

.bloc-texte__contenu a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-section--dark .bloc-texte__contenu a:hover {
  color: #fff;
}

.bloc-texte__contenu a:hover {
  color: #00a4dc;
}

@media (min-width: 901px) {
  .bloc-texte__contenu p {
    text-align: justify;
    hyphens: auto;
  }
}

/* --- Texte et image ---
   Image flottante (à gauche ou à droite) : quand le texte est plus haut
   que l'image, il continue dessous sur toute la largeur de la section
   (comme le portrait des membres, partie 13) */
.bloc-texte-image__grille {
  display: flow-root;   /* contient l'image flottante */
}

.bloc-texte-image__grille .bloc-texte__contenu {
  max-width: none;
  margin: 0;
}

.bloc-texte-image__image {
  float: left;
  width: 42%;
  min-width: 200px;
  margin: 4px 40px 20px 0;
}

.bloc-texte-image--droite .bloc-texte-image__image {
  float: right;
  margin: 4px 0 20px 40px;
}

.bloc-texte-image__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 800px) {
  .bloc-texte-image__image,
  .bloc-texte-image--droite .bloc-texte-image__image {
    float: none;
    width: 100%;
    margin: 0 0 24px;
  }
}

/* --- Image --- */
.bloc-image__figure {
  margin: 0;
}

.bloc-image__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Bloc image : pas de marges intérieures haute et basse (la section garde
   ses marges latérales), seulement 24 px sous l'image */
.bloc--image {
  margin-bottom: 24px;
}

.bloc.bloc--image > .site-section.bloc-image {
  padding-top: 0;
  padding-bottom: 0;
}

/* Largeur réduite (75, 50 ou 25 % du contenu) : image et légende centrées */
.bloc-image--75 .bloc-image__figure { width: 75%; }
.bloc-image--50 .bloc-image__figure { width: 50%; }
.bloc-image--25 .bloc-image__figure { width: 25%; }

.bloc-image--75 .bloc-image__figure,
.bloc-image--50 .bloc-image__figure,
.bloc-image--25 .bloc-image__figure {
  margin-left: auto;
  margin-right: auto;
}

.bloc-image--75 .legende,
.bloc-image--50 .legende,
.bloc-image--25 .legende {
  text-align: center;
}

/* Petits écrans : une image réduite reste lisible */
@media (max-width: 600px) {
  .bloc-image--75 .bloc-image__figure,
  .bloc-image--50 .bloc-image__figure { width: 100%; }
  .bloc-image--25 .bloc-image__figure { width: 50%; }
}

/* --- Bouton seul ---
   Placé sous un autre bloc : il s'en rapproche (comme l'ancien bouton
   intégré aux blocs) */
.bloc-bouton .site-section__action {
  margin-top: 0;
}

/* (+ .isci-ajout : zones « Ajouter un bloc » de l'éditeur, entre les blocs,
   pour que l'aperçu en modification ait les mêmes marges que le site) */
.bloc:has(+ .bloc--bouton) > .site-section,
.bloc:has(+ .isci-ajout + .bloc--bouton) > .site-section {
  padding-bottom: 0;
}

.bloc + .bloc--bouton > .site-section,
.bloc + .isci-ajout + .bloc--bouton > .site-section {
  padding-top: 40px;
}

/* --- Citation ---
   Guillemet ouvrant, texte en italique et trait à gauche ; auteur
   (gras) et précision (fonction, ouvrage, date…) dessous */
.bloc-citation__figure {
  position: relative;
  margin: 10px 0;
  padding: 6px 0 6px 32px;
  border-left: 4px solid #00a4dc;
}

.bloc-citation__figure::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: 1;
  color: #00a4dc;
  opacity: 0.25;
  pointer-events: none;
}

.bloc-citation__texte {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  font-style: italic;
  color: var(--section-title-color);
}

.bloc-citation__texte.bloc-texte__contenu p {
  text-align: left;
}

.bloc-citation__texte em,
.bloc-citation__texte i {
  font-style: normal;
}

.bloc-citation__source {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.4;
}

.bloc-citation__auteur {
  font-weight: 700;
  color: var(--section-title-color);
}

.bloc-citation__precision {
  color: #666;
}

.site-section--dark .bloc-citation__figure,
.site-section--dark .bloc-citation__figure::before {
  border-color: #fff;
  color: #fff;
}

.site-section--dark .bloc-citation__precision {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 600px) {
  .bloc-citation__figure { padding-left: 20px; }
  .bloc-citation__figure::before { left: 8px; font-size: 56px; top: -12px; }
  .bloc-citation__texte { font-size: 18px; }
}

/* --- Textes qui se suivent ---
   Un bloc Texte (ou Texte et image, Citation, Documents) qui suit un bloc
   de contenu (texte, image, citation, documents) continue le texte : pas de grande marge entre les deux, seulement
   l'espace d'un paragraphe. (+ .isci-ajout : aperçu du gestionnaire) */
.bloc:is(.bloc--texte, .bloc--texte-image, .bloc--citation, .bloc--documents):has(+ .bloc:is(.bloc--texte, .bloc--texte-image, .bloc--image, .bloc--titre, .bloc--citation, .bloc--documents)) > .site-section:not(.bloc--gris):not(.site-section--dark),
.bloc:is(.bloc--texte, .bloc--texte-image, .bloc--citation, .bloc--documents):has(+ .isci-ajout + .bloc:is(.bloc--texte, .bloc--texte-image, .bloc--image, .bloc--titre, .bloc--citation, .bloc--documents)) > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-bottom: 18px;
}

.bloc:is(.bloc--texte, .bloc--texte-image, .bloc--image, .bloc--citation, .bloc--documents) + .bloc:is(.bloc--texte, .bloc--texte-image, .bloc--citation, .bloc--documents) > .site-section:not(.bloc--gris):not(.site-section--dark),
.bloc:is(.bloc--texte, .bloc--texte-image, .bloc--image, .bloc--citation, .bloc--documents) + .isci-ajout + .bloc:is(.bloc--texte, .bloc--texte-image, .bloc--citation, .bloc--documents) > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-top: 0;
}

/* Titre après un texte : un peu plus d'air qu'entre deux paragraphes */
.bloc:is(.bloc--texte, .bloc--texte-image, .bloc--image, .bloc--citation, .bloc--documents) + .bloc--titre > .site-section:not(.bloc--gris):not(.site-section--dark),
.bloc:is(.bloc--texte, .bloc--texte-image, .bloc--image, .bloc--citation, .bloc--documents) + .isci-ajout + .bloc--titre > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-top: 24px;
}

/* --- Titre (h2 à h6) ---
   Collé au bloc qui le suit */
.bloc-titre__texte {
  margin: 0;
  color: var(--section-title-color);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

/* Titre centré avec son trait (comme les anciens titres de section) */
.bloc-titre--centre .bloc-titre__texte {
  text-align: center;
}

.bloc-titre--centre .site-section__line {
  margin: 13px auto 0;
}

.bloc-titre__texte--h2 { font-size: 28px; }
.bloc-titre__texte--h3 { font-size: 23px; }
.bloc-titre__texte--h4 { font-size: 20px; }
.bloc-titre__texte--h5 { font-size: 18px; }
.bloc-titre__texte--h6 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }

.bloc--titre > .site-section {
  padding-bottom: 0;
}

.bloc--titre + .bloc > .site-section,
.bloc--titre + .isci-ajout + .bloc > .site-section {
  padding-top: 24px;
}

@media (max-width: 600px) {
  .bloc-titre__texte--h2 { font-size: 24px; }
  .bloc-titre__texte--h3 { font-size: 20px; }
  .bloc-titre__texte--h4 { font-size: 18px; }
}

/* --- Liste filtrée --- */
.bloc-liste .categorie__vide {
  text-align: center;
  color: #666;
}


/* #####################################################################
   18. NOMBRE D'ÉLÉMENTS SELON L'ÉCRAN
   data-limit / data-limit-mobile (ex. bloc « Publications ») : les
   éléments en trop pour l'écran courant sont masqués
   ##################################################################### */

@media (max-width: 600px) {
  .contenus-hors-mobile { display: none !important; }
}

@media (min-width: 601px) {
  .contenus-hors-ordinateur { display: none !important; }
}

/* Volet latéral d'une page créée (.page-volet, ajouté par contenus.js) :
   en-tête et blocs dans la colonne principale, volet de la rubrique à droite */
.page-volet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  width: 100%;
  max-width: calc(1120px + 48px);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.page-volet__principal {
  min-width: 0;
}

.page-volet__cote {
  padding: 72px 0;
}

/* Sections de la colonne : la largeur est celle de la colonne */
.page-volet__principal .site-section {
  padding-left: 0;
  padding-right: 0;
}

/* Fond gris ou violet : le texte garde une marge intérieure */
.page-volet__principal .site-section.bloc--gris,
.page-volet__principal .site-section.site-section--dark {
  padding-left: 32px;
  padding-right: 32px;
}

/* Avec le volet : titres de sections alignés à gauche */
@media (min-width: 901px) {
  .page-volet__principal .site-section__header {
    text-align: left;
  }

  .page-volet__principal .site-section__line {
    margin-left: 0;
  }

  .page-volet__principal .site-section__desc {
    margin-left: 0;
  }
}

/* Avec le volet : 4 publications par ligne sur ordinateur */
@media (min-width: 1001px) {
  .page-volet__principal .publications-grid {
    justify-content: flex-start;
  }

  .page-volet__principal .publication-card {
    width: calc((100% - 90px) / 4);
  }
}

@media (max-width: 900px) {
  .page-volet {
    display: block;
    padding: 0;
  }

  .page-volet__principal .site-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-volet__cote {
    padding: 0 24px 56px;
  }
}

@media (max-width: 600px) {
  .page-volet__principal .site-section {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Blocs sans titre (« Membres et partenaires ») : le premier groupe
   démarre en haut de la section, sans marge supplémentaire */
.partenaires > :first-child {
  margin-top: 0;
}


/* =========================================================
   CASES SANS IMAGE (actualités, publications, projets…)
   Pas d'image, ou image introuvable (js/contenus.js) : fond bleu
   marine, sans l'icône d'image cassée
   ========================================================= */
.news-card.sans-image,
.pt-actu.sans-image,
.publication-image.sans-image,
.pt-article__image.sans-image,
.pt-projet__image.sans-image,
.liste-cat__image.sans-image,
.pj-carte__image.sans-image {
  background: #1b2a4e;
}


/* #####################################################################
   DOCUMENTS PDF : bloc « Documents » et fenêtre de lecture
   (js/contenus.js, LecteurPdf ; PDF.js chargé à la première ouverture)
   ##################################################################### */

.documents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #e3e5ee;
  border-left: 4px solid #2F2A85;
  background: #fff;
  color: #111;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.document:hover {
  border-left-color: #06ADD5;
  box-shadow: 0 4px 14px rgba(47, 42, 133, 0.08);
}

.document__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 50px;
  background: #2F2A85;
  color: #fff;
  font: 700 12px/1 "Roboto", Arial, sans-serif;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}

.document__texte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.document__titre {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.document__date {
  color: #666;
  font-size: 14px;
}

.site-section--dark .document__date { color: rgba(255, 255, 255, 0.8); }

/* Bloc « Documents » : marges gérées comme celles des paragraphes
   (voir « Textes qui se suivent ») */

.document__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.document__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #2F2A85;
  background: transparent;
  color: #2F2A85;
  font: 700 13px/1.2 "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.document__btn:hover { border-color: #06ADD5; color: #06ADD5; }

.document__btn--lire { background: #2F2A85; color: #fff; }
.document__btn--lire:hover { background: #06ADD5; border-color: #06ADD5; color: #fff; }

.documents__vide { color: #666; }

/* Sur fond violet */
.site-section--dark .document { border-color: rgba(255, 255, 255, 0.25); border-left-color: #06ADD5; }

@media (max-width: 600px) {
  .document { flex-wrap: wrap; gap: 12px; }
  .document__texte { flex-basis: calc(100% - 56px); }
  .document__titre { font-size: 16px; }
  .document__actions { flex-basis: 100%; }
  .document__btn { flex: 1; min-height: 44px; }
}

/* ---------- Fenêtre de lecture ---------- */

body.pdf-sans-defilement { overflow: hidden; }

.pdf-voile {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(17, 15, 52, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.pdf-voile.is-ouverte { opacity: 1; visibility: visible; }

.pdf-fenetre {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2001;
  display: flex;
  flex-direction: column;
  width: min(90vw, 1100px);
  height: 90vh;
  height: 90dvh;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17, 15, 52, 0.35);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

@media (orientation: portrait) {
  .pdf-fenetre { width: 94vw; height: 85vh; height: 85dvh; }
}

.pdf-fenetre.is-ouverte { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.pdf-fenetre__entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  background: #2F2A85;
  color: #fff;
  border-bottom: 4px solid #06ADD5;
}

.pdf-fenetre__icone {
  flex: 0 0 auto;
  padding: 4px 6px;
  background: #fff;
  color: #2F2A85;
  font: 700 11px/1 "Roboto", Arial, sans-serif;
}

.pdf-fenetre__titre {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-fenetre__zoom {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.pdf-fenetre__zoom button {
  min-width: 34px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 500 16px/1 "Roboto", Arial, sans-serif;
  cursor: pointer;
}

.pdf-fenetre__zoom button:hover { background: rgba(255, 255, 255, 0.15); }

.pdf-fenetre__niveau {
  min-width: 60px !important;
  font-size: 13px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.35) !important;
}

.pdf-fenetre__telecharger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  background: #06ADD5;
  color: #fff;
  font: 700 12px/1 "Roboto", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.pdf-fenetre__telecharger:hover { background: #fff; color: #2F2A85; }

.pdf-fenetre__fermer {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.pdf-fenetre__fermer:hover { color: #06ADD5; }

.pdf-fenetre__lecteur {
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: #eceef4;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;   /* le pincement zoome le document, pas la page */
}

.pdf-page {
  position: relative;
  margin: 0 auto 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(17, 15, 52, 0.15);
}

.pdf-page:last-child { margin-bottom: 0; }

.pdf-page canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/* Texte invisible posé sur la page (sélection, copier) */
.pdf-page .textLayer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 0.25;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
}

.pdf-page .textLayer span,
.pdf-page .textLayer br {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.pdf-page .textLayer ::selection { background: #06ADD5; }

.pdf-fenetre__statut {
  margin: 40px 0 0;
  color: #555;
  text-align: center;
}

.pdf-fenetre__statut.is-erreur { color: #b3261e; }

@media (max-width: 768px) {
  .pdf-fenetre__entete { gap: 8px; padding: 8px 10px; }
  .pdf-fenetre__titre { font-size: 15px; }
  .pdf-fenetre__icone { display: none; }
  .pdf-fenetre__telecharger span { display: none; }
  .pdf-fenetre__lecteur { padding: 8px; }
  .pdf-page { margin-bottom: 8px; }
}

/* =========================================================
   SÉLECTEUR DE LANGUE (navigation supérieure, site multilingue)
   « FR | EN » : langue de la page en gras ; dans l'éditeur du
   gestionnaire, langue pas encore traduite en pointillés
   ========================================================= */
.top-nav .langue { letter-spacing: 0.06em; }
.top-nav .langue.is-active { color: #2F2A85; font-weight: 700; cursor: default; }
.top-nav .langue--absente { opacity: 0.45; text-decoration: underline dotted; }

/* Mobile (menu empilé) : la navigation supérieure disparaît, mais le
   sélecteur de langue reste, en haut à droite au-dessus des logos, sobre :
   « FR | EN » en petites capitales grises, langue de la page en bleu */
@media (max-width: 850px) {
  .header.header--langues { position: relative; }
  .header--langues .header-inner { padding-top: 26px; }

  .top-nav.top-nav--langues {
    position: absolute;
    top: 4px;
    right: 24px;
    z-index: 2;
    display: flex;
    align-items: center;
    height: auto;
    padding: 0;
    gap: 0;
    font-size: 12px;
  }

  .top-nav--langues a,
  .top-nav--langues a:last-child {
    padding: 6px 10px;   /* zone de toucher confortable, sans cadre visible */
    border-right: 1px solid #ddd;
    color: #888;
    letter-spacing: 0.08em;
  }

  .top-nav--langues a:last-child { padding-right: 0; border-right: none; }

  .top-nav.top-nav--langues a.langue.is-active {
    color: #2F2A85;
    font-weight: 700;
  }
}

/* #####################################################################
   Pages personne et projet : contenu en blocs (gestionnaire), placé
   dans la fiche, sous le nom / titre et au-dessus des équipes,
   publications, actualités… (js/contenus.js déplace div.blocs ici)
   ##################################################################### */
.fiche__blocs {
  margin: 0 0 8px;
}

.fiche__blocs > .bloc > .site-section {
  padding: 0 0 28px !important;
  background: transparent;
}

.fiche__blocs > .bloc > .site-section:is(.bloc--gris, .site-section--dark) {
  padding: 28px !important;
  margin-bottom: 28px;
  background: var(--section-bg);
}

.fiche__blocs .site-section__container {
  max-width: none;
}

/* Bloc « Texte et image » d'un portrait : photo à gauche, texte à droite */
.personne--blocs > .site-section__header {
  margin-bottom: 32px;
}

.projet__entete + .fiche__blocs,
.projet__entete + .fiche__blocs-emplacement {
  margin-top: 8px;
}

/* Pages créées : écart réduit entre la fin du contenu et le bloc
   « Personnes, projets et partenaires » (80 px au lieu des marges cumulées) */
/* (bloc des liens vide : section masquée, sans effet sur l'écart) */
.bloc:has(+ .bloc--liens:not(:has(> section[hidden]))) > .site-section:not(.bloc--gris):not(.site-section--dark),
.bloc:has(+ .isci-ajout + .bloc--liens:not(:has(> section[hidden]))) > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-bottom: 0;
}

.bloc + .bloc--liens > .site-section:not(.bloc--gris):not(.site-section--dark),
.bloc + .isci-ajout + .bloc--liens > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-top: 80px;
}

.bloc--liens .page-libre__liens {
  margin-top: 0;
}

.bloc--liens .page-libre__liens > .pt-groupe:first-child {
  margin-top: 0;
}


/* #####################################################################
   Dernier bloc d'une page (sans personnes, projets ni actualités après
   lui) : marge sous le contenu, pour que le pied de page (ou, sur
   téléphone, le menu latéral placé en fin de page) ne soit pas collé
   au dernier bloc. Les blocs vides (section masquée) ne comptent pas.
   ##################################################################### */
:root {
  --marge-fin-page: 72px;
}

.blocs:not(.fiche__blocs) > .bloc:not(:has(> section[hidden])):not(:has(~ .bloc:not(:has(> section[hidden])))) > .site-section:not(.bloc--gris):not(.site-section--dark) {
  padding-bottom: var(--marge-fin-page);
}

/* #####################################################################
   Téléphone et tablette : une seule marge latérale (gouttière) pour
   l'en-tête, le contenu, le menu latéral et le pied de page, afin que
   tout soit aligné ; le choix de la langue est collé à droite, à la
   même distance du bord que le contenu.
   ##################################################################### */
@media (max-width: 900px) {
  :root {
    --gouttiere: 24px;
    --marge-fin-page: 56px;
  }

  .header,
  .site-section,
  .page-volet__principal .site-section,
  .footer-container {
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
  }

  .page-volet__cote {
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
  }

  /* Sections imbriquées (blocs placés dans une fiche ou une colonne) :
     déjà dans la gouttière de leur section */
  .site-section .site-section,
  .fiche__blocs > .bloc > .site-section {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 850px) {
  .header--langues .top-nav.top-nav--langues {
    right: var(--gouttiere);
  }
}

@media (max-width: 650px) {
  :root {
    --gouttiere: 18px;
  }
}

@media (max-width: 600px) {
  :root {
    --gouttiere: 18px;
    --marge-fin-page: 42px;
  }
}

@media (max-width: 400px) {
  :root {
    --gouttiere: 15px;
  }
}