/* ==========================================================================
   UCIV — feuille de styles principale
   Approche « mobile d'abord » : les styles de base visent le téléphone,
   les blocs @media (min-width) ajoutent la mise en page tablette et ordinateur.
   Sommaire : 1. Jetons  2. Base  3. Éléments communs  4. En-tête
              5. Sections de l'accueil  6. Pied de page  7. Animations
   ========================================================================== */

/* 1. Jetons de design ------------------------------------------------------ */
:root {
  --orange: #E17F1C;
  --orange-fonce: #B45F0D;
  --jaune: #F7C548;
  --vert: #1B7A43;
  --vert-profond: #0C3322;
  --creme: #FBF5EA;
  --sable: #F1E6D3;
  --blanc: #FFFFFF;
  --encre: #17120C;
  --texte: #5C5247;
  --filet: rgba(23, 18, 12, .12);

  --f-titre: "Bricolage Grotesque", "Arial Black", sans-serif;
  --f-accent: "Instrument Serif", Georgia, serif;
  --f-texte: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-main: "Caveat", cursive;

  --marge: 20px;
  --section: 64px;
  --rayon: 24px;
  --rayon-lg: 28px;

  /* Courbes d'animation : plus franches que les valeurs CSS par défaut. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-tiroir: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-width: 720px) {
  :root { --marge: 40px; --section: 88px; }
}
@media (min-width: 1100px) {
  :root { --marge: 72px; --section: 112px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* La maquette dessine Bricolage Grotesque sans ajustement optique : on fait de même
     pour obtenir exactement les mêmes largeurs de titres. */
  font-optical-sizing: none;
  overflow-x: hidden;
}

body.menu-ouvert { overflow: hidden; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.visuellement-masque {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--encre); color: var(--blanc); font-weight: 700;
}
.skip-link:focus { top: 12px; }

.conteneur {
  width: 100%; max-width: 1440px; margin-inline: auto;
  padding-inline: var(--marge);
}

/* 3. Éléments communs ------------------------------------------------------ */
.section { padding-block: var(--section); position: relative; }
.section--blanc { background: var(--blanc); }
.section--sombre { background: var(--vert-profond); color: var(--blanc); }

.surtitre {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
  color: var(--orange-fonce);
  font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  line-height: 16px;
}
.surtitre::before { content: ""; flex: none; width: 36px; height: 2px; background: currentColor; }
.surtitre--blanc { color: var(--blanc); }
.surtitre--jaune { color: var(--jaune); }

.titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04; letter-spacing: -.03em;
  text-wrap: balance;
}
.titre em, .manifeste__titre em, .hero__titre em, .pied__titre em {
  display: block;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -.01em; line-height: 1.06;
  color: var(--orange);
}
.titre--clair { color: var(--blanc); }
.titre--clair em { color: var(--jaune); }
.titre--xl { font-size: clamp(40px, 5.6vw, 76px); }
/* Titres de section plus petits que le .titre standard (56 px), selon la maquette */
.titre--52 { font-size: clamp(32px, 3.9vw, 52px); }
.titre--48 { font-size: clamp(30px, 3.6vw, 48px); }
.titre--46 { font-size: clamp(28px, 3.45vw, 46px); }

.texte { color: var(--texte); font-size: 17px; line-height: 1.65; max-width: 62ch; }
.texte--clair { color: rgba(255, 255, 255, .92); }
.titre + .texte { margin-top: 24px; }
.texte + .btn { margin-top: 32px; }

.manuscrit { font-family: var(--f-main); font-weight: 700; line-height: 1.05; }

.entete-section {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  margin-bottom: 40px;
}
@media (min-width: 900px) {
  .entete-section { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 64px; }
  .entete-section > .texte { max-width: 440px; }
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 26px; min-height: 56px;
  border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 700; line-height: 20px;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn__rond {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.btn__rond .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }

.btn--vert { background: var(--vert); color: var(--blanc); }
.btn--orange { background: var(--orange); color: var(--blanc); }
.btn--blanc { background: var(--blanc); color: var(--vert-profond); }
.btn--blanc .btn__rond { background: var(--vert); color: var(--blanc); }
.btn--contour, .btn--contour-blanc { padding: 8px 26px; }
/* Contour dessiné vers l'intérieur : le bouton garde exactement 56 px de haut. */
.btn--contour { box-shadow: inset 0 0 0 1.5px var(--encre); }
.btn--contour-blanc { box-shadow: inset 0 0 0 1.5px var(--blanc); color: var(--blanc); }
.btn--compact { min-height: 45px; padding: 13px 22px; font-size: 15px; line-height: 19px; }

.rond-bouton {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(23, 18, 12, .15); border-radius: 50%;
  background: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.rond-bouton:active { transform: scale(.94); }
.rond-bouton--vert { background: var(--vert); border-color: var(--vert); color: var(--blanc); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700;
}
.lien-fleche .icon { transition: transform 200ms var(--ease-out); }
.lien-fleche--orange { color: var(--orange-fonce); }

.etiquette {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: rgba(23, 18, 12, .08);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
}
.etiquette--orange { background: var(--orange); color: var(--blanc); }
.etiquette--jaune { background: var(--jaune); color: var(--encre); }
.etiquette--vert { background: var(--vert); color: var(--blanc); }
.etiquette--brun { background: var(--orange-fonce); color: var(--blanc); }
.etiquette--profond { background: var(--vert-profond); color: var(--blanc); }

.picto {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: var(--blanc); font-size: 22px;
}
.picto--orange { background: var(--orange); }
.picto--vert { background: var(--vert); }

.forme { position: absolute; border-radius: 50%; pointer-events: none; }
.forme--anneau { background: transparent; border-style: solid; }

.pastille {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--jaune); color: var(--encre);
  font-family: var(--f-titre); font-weight: 800; font-size: 17px; line-height: 1.2;
}

/* Survols : réservés aux appareils avec souris (au doigt, un survol reste « collé »). */
@media (hover: hover) and (pointer: fine) {
  .btn--vert:hover { background: #166638; }
  .btn--orange:hover { background: #cf7215; }
  .btn--blanc:hover { background: var(--creme); }
  .btn--contour:hover { background: var(--encre); color: var(--blanc); }
  .btn--contour-blanc:hover { background: var(--blanc); color: var(--vert-profond); }
  .btn:hover .btn__rond .icon,
  a:hover > .lien-fleche .icon, a.lien-fleche:hover .icon { transform: translateX(3px); }
  .rond-bouton:hover { background: rgba(23, 18, 12, .06); }
  .rond-bouton--vert:hover { background: #166638; }
}

/* Défilement horizontal (mobile uniquement) */
.defilement {
  display: flex; gap: 16px;
  margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge);
  scrollbar-width: none;
}
.defilement::-webkit-scrollbar { display: none; }
.defilement > * { flex: 0 0 min(290px, 78vw); scroll-snap-align: start; }

.defilement-indicateur {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; color: var(--texte); font-size: 13px; font-weight: 600;
}
.defilement-indicateur__points { display: flex; align-items: center; gap: 8px; }
.defilement-indicateur__points span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(23, 18, 12, .2);
  transition: transform 250ms var(--ease-out), background-color 250ms ease;
}
.defilement-indicateur__points span.est-actif { transform: scale(1.4); background: var(--orange); }
.defilement-indicateur__aide { display: inline-flex; align-items: center; gap: 8px; }
.defilement-indicateur__aide .icon { color: var(--orange-fonce); }
.defilement-indicateur--clair { color: rgba(255, 255, 255, .8); }
.defilement-indicateur--clair .defilement-indicateur__points span { background: rgba(255, 255, 255, .3); }
.defilement-indicateur--clair .defilement-indicateur__points span.est-actif { background: var(--jaune); }
.defilement-indicateur--clair .icon { color: var(--jaune); }

@media (min-width: 900px) {
  .defilement { margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; }
  .defilement > * { flex: initial; }
  .defilement-indicateur { display: none; }
}

/* 4. Bandeau d'annonce et en-tête ------------------------------------------
   Valeurs reprises de la maquette (design_uciv.pen) :
   mobile 390 px : bandeau 36 px, en-tête 68 px ; ordinateur 1440 px : bandeau 44 px, en-tête 88 px. */
.annonce { background: var(--vert-profond); color: var(--blanc); font-size: 12.5px; line-height: 16px; }
.annonce__inner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 10px 20px; text-align: center;
}
.annonce__date { color: var(--jaune); font-weight: 700; }
.annonce__texte--long { display: none; }
.annonce__lien { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.annonce__lien span { display: none; }
.annonce__lien .icon { width: 14px; height: 14px; }
@media (min-width: 900px) {
  .annonce { font-size: 14px; line-height: 18px; }
  .annonce__inner { gap: 14px; min-height: 44px; padding: 13px var(--marge); }
  .annonce__texte--long { display: inline; color: rgba(255, 255, 255, .85); }
  .annonce__texte--court { display: none; }
  .annonce__lien span { display: inline; }
}

.entete {
  position: sticky; top: 0; z-index: 40;
  background: var(--creme);
  box-shadow: 0 1px 0 rgba(23, 18, 12, .08);
  transition: box-shadow 250ms ease;
}
.entete.est-defile { box-shadow: 0 1px 0 rgba(23, 18, 12, .08), 0 10px 30px -18px rgba(23, 18, 12, .35); }
.entete__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1440px; margin-inline: auto;
  height: 68px; padding-inline: 20px;
}
.entete__actions { display: flex; align-items: center; gap: 14px; }
.entete__recherche, .entete__cta { display: none; }
.entete__burger .icon { width: 20px; height: 20px; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__marque { display: block; width: 42px; height: 36px; overflow: hidden; flex: none; }
.logo__marque img { width: 100%; height: auto; max-width: none; }
.logo__nom {
  font-family: var(--f-titre); font-weight: 800; font-size: 14.5px; line-height: 1.1;
  white-space: nowrap;
}
.logo__nom span { display: block; color: var(--orange); }

.nav { display: none; }

@media (min-width: 720px) {
  .entete__inner { padding-inline: var(--marge); }
}

@media (min-width: 1280px) {
  .entete:not(.est-defile) { box-shadow: none; }
  .entete__inner { height: 88px; }
  .entete__recherche { display: grid; }
  .entete__recherche .icon { width: 18px; height: 18px; }
  .entete__cta { display: inline-flex; }
  .entete__burger { display: none; }
  .logo { gap: 12px; }
  .logo__marque { width: 52px; height: 44px; }
  .logo__nom { font-size: 17px; }

  .nav { display: block; }
  /* 30 px entre deux libellés, comme sur la maquette : 12 (marge interne) + 6 + 12. */
  .nav__liste { display: flex; align-items: center; gap: 6px; margin-inline: -12px; }
  .nav__item { position: relative; }
  .nav__lien {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 10px 12px; border-radius: 999px;
    font-size: 15px; font-weight: 600; line-height: 19px; white-space: nowrap;
    transition: background-color 200ms ease;
  }
  .nav__lien .icon { width: 15px; height: 15px; color: var(--orange-fonce); transition: transform 200ms var(--ease-out); }

  /* Sous-menu : part de son déclencheur (origine en haut à gauche), sortie plus rapide que l'entrée. */
  .sousmenu {
    position: absolute; top: 100%; left: 0; z-index: 10;
    min-width: 250px; padding: 8px; margin-top: 6px;
    background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px;
    box-shadow: 0 24px 48px -24px rgba(23, 18, 12, .35);
    opacity: 0; visibility: hidden;
    transform: translateY(-4px) scale(.97); transform-origin: top left;
    transition: opacity 120ms ease, transform 120ms var(--ease-out), visibility 0s 120ms;
  }
  .sousmenu::before { content: ""; position: absolute; inset: -8px 0 100% 0; }
  .sousmenu a {
    display: block; padding: 10px 14px; border-radius: 12px;
    font-size: 15px; font-weight: 600;
    transition: background-color 150ms ease;
  }
  .nav__item--menu:hover .sousmenu,
  .nav__item--menu:focus-within .sousmenu {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 180ms ease, transform 180ms var(--ease-out), visibility 0s;
  }
  .nav__item--menu:hover .nav__lien .icon,
  .nav__item--menu:focus-within .nav__lien .icon { transform: rotate(180deg); }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .nav__lien:hover { background: rgba(23, 18, 12, .06); }
  .sousmenu a:hover { background: var(--creme); }
}
/* Entre 1280 et 1419 px, la maquette (prévue pour 1440 px) ne tient pas telle quelle : on resserre. */
@media (min-width: 1280px) and (max-width: 1419px) {
  .nav__lien { padding-inline: 7px; font-size: 14px; }
  .nav__liste { gap: 0; margin-inline: -7px; }
  .entete__recherche { display: none; }
}

/* Menu mobile */
.menu-mobile { position: fixed; inset: 0; z-index: 60; }
.menu-mobile[hidden] { display: none; }
.menu-mobile__voile {
  position: absolute; inset: 0; background: rgba(12, 51, 34, .55);
  opacity: 0; transition: opacity 260ms ease;
}
.menu-mobile__panneau {
  position: absolute; inset: 0 0 0 auto; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 28px;
  padding: 16px var(--marge) 28px; overflow-y: auto;
  background: var(--creme);
  transform: translateX(100%);
  transition: transform 260ms var(--ease-tiroir);
}
.menu-mobile.est-ouvert .menu-mobile__voile { opacity: 1; }
.menu-mobile.est-ouvert .menu-mobile__panneau { transform: none; transition-duration: 420ms; }
/* Fermeture au clavier (Échap) : immédiate, sans animation. */
.menu-mobile.sans-animation .menu-mobile__voile,
.menu-mobile.sans-animation .menu-mobile__panneau,
.menu-mobile.sans-animation .menu-mobile__liste > li { transition: none; }

.menu-mobile__haut { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.menu-mobile__liste > li {
  border-bottom: 1px solid var(--filet); padding-block: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.menu-mobile.est-ouvert .menu-mobile__liste > li {
  opacity: 1; transform: none;
  transition: opacity 360ms ease, transform 420ms var(--ease-out);
  transition-delay: calc(90ms + var(--i, 0) * 40ms);
}
.menu-mobile__lien {
  display: block; font-family: var(--f-titre); font-weight: 800; font-size: 26px;
  letter-spacing: -.02em; line-height: 1.15;
}
.menu-mobile__sous { display: grid; gap: 8px; margin-top: 10px; }
.menu-mobile__sous a { color: var(--texte); font-weight: 600; }
.menu-mobile__cta { align-self: flex-start; margin-top: auto; }

/* 5. Sections de la page d'accueil ----------------------------------------- */

/* Hero
   Valeurs reprises de la maquette. Sur ordinateur (≥ 1100 px), le hero mesure 90 vh (entre 620 et 1000 px ; maquette : 780 px) et ses
   éléments sont placés aux coordonnées du cadre de 1440 px de la maquette. */
.hero { position: relative; overflow: hidden; background: var(--orange); color: var(--blanc); }
.hero__cadre {
  position: relative; max-width: 1440px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 26px;
  padding: 28px 20px 0;
}
.hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero .surtitre { margin: 0; }
.hero__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: 46px; line-height: .96; letter-spacing: -1.3px;
}
.hero__titre em { color: var(--jaune); font-size: 1em; line-height: .98; letter-spacing: -1.3px; }
.hero__chapo { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .94); }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px; }
.hero__parcours { display: none; }

.hero__visuel { display: flex; flex-direction: column; gap: 26px; }
.hero__signature { font-size: 23px; line-height: 29px; }
/* Mobile (maquette) : photo en pleine largeur, 390 x 292, collée au bas du hero. */
.hero__photo { aspect-ratio: 390 / 292; margin-inline: -20px; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__disque, .hero__anneau-vert { display: none; }
.hero__anneau-jaune {
  width: 240px; height: 240px; right: -100px; top: -110px;
  border-width: 26px; border-color: rgba(255, 255, 255, .15);
}

@media (min-width: 720px) {
  .hero__cadre { padding-inline: var(--marge); }
  .hero__titre, .hero__titre em { font-size: 62px; letter-spacing: -2px; }
  .hero__chapo { font-size: 18px; max-width: 500px; }
  .hero__cta { flex-direction: row; align-items: center; }
  .hero__signature { font-size: 30px; line-height: 36px; }
  .hero__photo { aspect-ratio: 1486 / 1059; max-width: 680px; margin-inline: 0; }
}

@media (min-width: 1100px) {
  /* Hauteur : 90 % de l'écran (bornée), pour les écrans d'environ 12 pouces et plus. */
  .hero__cadre { display: block; height: clamp(620px, 90vh, 1000px); padding: 0; }

  .hero__texte { position: absolute; z-index: 2; left: 72px; top: 50%; translate: 0 -54%; width: 620px; }
  .hero__titre { font-size: 80px; letter-spacing: -2.5px; }
  .hero__titre em { font-size: 90px; letter-spacing: -1px; }
  .hero__chapo { width: 480px; max-width: none; font-size: 18px; }

  .hero__parcours {
    position: absolute; left: 72px; bottom: 34px;
    display: flex; align-items: center; gap: 14px;
    font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: 1.6px; text-transform: uppercase;
    z-index: 2;
  }
  .hero__parcours li { display: inline-flex; align-items: center; gap: 14px; }
  .hero__parcours .icon { width: 16px; height: 16px; color: var(--jaune); }

  /* Bloc visuel : repère de 790 x 780 px collé en bas à droite (x = 650 à 1440 sur la maquette).
     --k le réduit sur les écrans plus étroits que la maquette. */
  .hero__visuel {
    --k: 1; --b: .87;
    position: absolute; right: 0; bottom: 0; display: block;
    width: 790px; height: 780px;
    pointer-events: none;   /* décor : il ne doit jamais recouvrir ni bloquer les boutons du texte */
    transform: scale(calc(var(--k) * var(--b))); transform-origin: 100% 100%;
  }
  .hero__disque { display: block; width: 760px; height: 760px; left: 150px; top: 170px; background: var(--creme); }
  .hero__anneau-jaune {
    width: 460px; height: 460px; left: 500px; right: auto; top: -190px;
    border-width: 46px; border-color: var(--jaune);
  }
  .hero__photo {
    /* Maquette : x = 620, y = 196, 820 x 584 (le repère du bloc visuel commence à x = 650). */
    position: absolute; left: -30px; top: 196px; width: 820px; height: 584px;
    max-width: none; aspect-ratio: auto; overflow: visible;
  }
  .hero__signature {
    position: absolute; left: 360px; top: 92px; white-space: nowrap;
    font-size: 48px; line-height: 60px;
    rotate: -6deg; transform-origin: 0 0;
  }
  .hero__anneau-vert { display: block; width: 340px; height: 340px; left: -280px; top: 640px; border: 44px solid var(--vert); }
}
@media (min-width: 1100px) and (max-width: 1179px) {
  .hero__visuel { --k: .66; }
  .hero__chapo { width: 440px; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .hero__visuel { --k: .75; }
  .hero__chapo { width: 470px; }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .hero__visuel { --k: .85; }
  .hero__chapo { width: 490px; }
}
@media (min-width: 1360px) and (max-width: 1439px) { .hero__visuel { --k: .92; } }

/* Manifeste */
.manifeste__grille { display: grid; gap: 28px; }
.manifeste__note { color: var(--vert); font-size: 30px; }
.manifeste__titre {
  font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.14; letter-spacing: -.025em;
}
.manifeste__titre em { margin-top: 12px; font-size: 1.3em; line-height: 1.08; }
.manifeste__colonnes { display: grid; gap: 20px; margin-top: 32px; color: var(--texte); font-size: 17px; line-height: 1.65; }
@media (min-width: 900px) {
  .manifeste__grille { grid-template-columns: 240px minmax(0, 1fr); gap: 72px; }
  .manifeste__note { font-size: 34px; max-width: 220px; }
  .manifeste__colonnes { grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
}

/* Engagement en expérience */
.conviction__grille { display: grid; gap: 36px; align-items: center; }
.conviction__visuel {
  position: relative; overflow: hidden;
  aspect-ratio: 13 / 14; max-width: 520px; width: 100%;
  border-radius: 999px 999px var(--rayon-lg) var(--rayon-lg);
  background: var(--sable);
}
.conviction__visuel img { width: 100%; height: 100%; object-fit: cover; }
.conviction__visuel .pastille { position: absolute; right: 14px; bottom: 56px; transform: rotate(-7deg); }
.preuves { margin-top: 28px; }
.preuves li {
  display: flex; align-items: center; gap: 22px;
  padding-block: 20px; border-top: 1px solid var(--filet);
}
.preuves__num { font-family: var(--f-titre); font-weight: 800; font-size: 20px; color: var(--orange); }
.preuves h3 { font-family: var(--f-titre); font-weight: 700; font-size: 21px; letter-spacing: -.015em; line-height: 1.2; }
.preuves p { margin-top: 4px; color: var(--texte); }
@media (min-width: 900px) {
  .conviction__grille { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: clamp(40px, 5.5vw, 80px); }
  .conviction__visuel { aspect-ratio: 13 / 16; }
  .preuves h3 { font-size: 24px; }
}

/* Domaines d'action */
.domaines__grille { display: grid; gap: 32px; }
.domaine { padding-top: 26px; border-top: 2px solid var(--encre); }
.domaine__haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.domaine__num { font-family: var(--f-accent); font-style: italic; font-size: 40px; line-height: 1; color: rgba(23, 18, 12, .35); }
.domaine h3 { font-family: var(--f-titre); font-weight: 700; font-size: 23px; line-height: 1.12; letter-spacing: -.02em; }
.domaine p { margin-top: 12px; color: var(--texte); }
@media (min-width: 720px) { .domaines__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .domaines__grille { grid-template-columns: repeat(4, 1fr); }
  .domaine h3 { font-size: 26px; }
}

/* Programmes */
.carte-programme { border-radius: var(--rayon-lg); overflow: hidden; color: var(--encre); }
.carte-programme__lien { display: flex; flex-direction: column; height: 100%; }
.carte-programme--orange { background: var(--orange); color: var(--blanc); }
.carte-programme--jaune { background: var(--jaune); }
.carte-programme--creme { background: var(--creme); }
.carte-programme__image { position: relative; aspect-ratio: 29 / 23; overflow: hidden; background: var(--sable); }
.carte-programme__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.carte-programme__image--detouree { background: var(--jaune); }
.carte-programme__image--detouree::before {
  content: ""; position: absolute; left: 50%; top: 12%; width: 78%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: rgba(255, 255, 255, .45);
}
.carte-programme__image--detouree img { position: relative; object-fit: contain; object-position: center bottom; padding-top: 10px; }
.carte-programme__contenu { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1; padding: 22px 22px 24px; }
.carte-programme h3 { font-family: var(--f-titre); font-weight: 800; font-size: 26px; letter-spacing: -.025em; line-height: 1.1; }
.carte-programme p { font-size: 15.5px; opacity: .9; }
.carte-programme .lien-fleche { margin-top: auto; padding-top: 6px; }
.carte-programme--orange .etiquette { background: rgba(255, 255, 255, .2); }
@media (min-width: 900px) {
  .programmes__cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .carte-programme__image { aspect-ratio: 42 / 30; }
  .carte-programme__contenu { padding: 28px 28px 30px; gap: 16px; }
  .carte-programme h3 { font-size: 32px; }
}
@media (hover: hover) and (pointer: fine) {
  .carte-programme:hover .carte-programme__image:not(.carte-programme__image--detouree) img { transform: scale(1.04); }
  .carte-programme:hover .lien-fleche .icon { transform: translateX(3px); }
}

/* Vision et chiffres */
.vision { background: var(--orange); color: var(--blanc); overflow: hidden; }
.vision__anneau { width: 520px; height: 520px; left: -220px; top: -240px; border-width: 57px; border-color: rgba(255, 255, 255, .12); }
.vision__grille { position: relative; display: grid; gap: 44px; }
.indicateurs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.indicateurs > div { padding-block: 18px 22px; border-top: 1px solid rgba(255, 255, 255, .35); }
.indicateurs dd {
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(44px, 5vw, 68px);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.indicateurs dd.est-en-attente {
  font-family: var(--f-accent); font-style: italic; font-weight: 400; letter-spacing: 0;
  font-size: clamp(34px, 3.6vw, 48px); line-height: 1.25; opacity: .75;
}
.indicateurs dt { margin-top: 4px; font-weight: 600; }
.indicateurs__note { margin-top: 8px; font-size: 14px; opacity: .85; }
@media (min-width: 900px) {
  .vision__grille { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
  .indicateurs { column-gap: 40px; }
  .indicateurs dt { font-size: 17px; }
}

/* Rejoindre UCIV */
.rejoindre__grille { display: grid; gap: 40px; }
.facons li:last-child .facon { border-bottom: 1.5px solid var(--encre); }
.facon {
  display: flex; align-items: center; gap: 18px;
  padding-block: 24px; border-top: 1.5px solid var(--encre);
}
.facon__puce { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.facon__puce--orange { background: var(--orange); }
.facon__puce--jaune { background: var(--jaune); }
.facon__puce--vert { background: var(--vert); }
.facon__texte { flex: 1; min-width: 0; display: grid; gap: 6px; color: var(--texte); }
.facon__texte strong { color: var(--encre); font-family: var(--f-titre); font-weight: 800; font-size: 23px; line-height: 1.12; letter-spacing: -.025em; }
.facon__fleche {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px;
  border: 1.5px solid var(--encre); border-radius: 50%; font-size: 19px;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.facon:active .facon__fleche { transform: scale(.94); }
@media (min-width: 900px) {
  .rejoindre__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
  .facon { gap: 26px; padding-block: 30px; }
  .facon__texte strong { font-size: clamp(24px, 2.5vw, 34px); }
}
@media (hover: hover) and (pointer: fine) {
  .facon:hover .facon__fleche { background: var(--encre); color: var(--blanc); }
}

/* Fondateur */
.fondateur { background: var(--sable); padding-top: var(--section); }
.fondateur__grille { display: grid; gap: 36px; }
.fondateur__portrait { position: relative; order: 2; width: min(100%, 440px); aspect-ratio: 46 / 56; margin-inline: auto; }
.fondateur__arche { position: absolute; inset: 0 8% 0 0; border-radius: 999px 999px 0 0; background: var(--orange); }
.fondateur__portrait img {
  position: absolute; left: 6%; top: 6%; width: 94%; height: 94%;
  object-fit: cover; object-position: center top; border-radius: 999px 999px 0 0;
}
.fondateur__nom { margin-top: 28px; color: var(--texte); }
.fondateur__nom strong { display: block; color: var(--encre); font-family: var(--f-titre); font-weight: 800; font-size: 22px; }
.fondateur__texte .btn { margin-top: 28px; }
.fondateur__texte .titre { font-size: clamp(30px, 3.6vw, 48px); }
@media (min-width: 900px) {
  .fondateur__grille { grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: end; }
  .fondateur__portrait { order: 0; width: 100%; margin: 0; }
  .fondateur__texte { padding-bottom: var(--section); }
}

/* Actualités */
.article a { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.article__image { aspect-ratio: 29 / 19; border-radius: 20px; overflow: hidden; background: var(--sable); }
.article__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.article__image--detouree img { object-fit: contain; object-position: center bottom !important; padding-top: 8px; }
.article__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--texte); font-size: 14px; }
.article h3 { font-family: var(--f-titre); font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -.02em; }
.article__chapo, .article--une .article__info { display: none; }

@media (min-width: 900px) {
  .actualites__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 40px; }
  .article--une { grid-row: 1 / span 3; }
  .article--une a { gap: 22px; }
  .article--une .article__image { aspect-ratio: 70 / 44; border-radius: var(--rayon-lg); }
  .article--une h3 { font-size: 36px; line-height: 1.08; letter-spacing: -.025em; }
  .article--une .article__info { display: inline; }
  .article__chapo { display: block; color: var(--texte); font-size: 17px; }

  .article:not(.article--une) a {
    flex-direction: row; align-items: center; gap: 24px;
    padding-block: 26px; border-bottom: 1px solid var(--filet);
  }
  .article:not(.article--une):nth-child(2) a { padding-top: 0; }
  .article:not(.article--une) .article__image { flex: 0 0 clamp(130px, 14vw, 190px); aspect-ratio: 19 / 15; }
  .article:not(.article--une) h3 { font-size: 23px; }
}
@media (hover: hover) and (pointer: fine) {
  .article:hover .article__image:not(.article__image--detouree) img { transform: scale(1.04); }
  .article:hover .lien-fleche .icon { transform: translateX(3px); }
}

/* Partenaires */
.partenaires__grille { display: grid; gap: 40px; }
.partenaires__cartes { display: grid; gap: 16px; }
.carte-partenaire {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 150px; height: 100%; padding: 24px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.carte-partenaire__apport { color: var(--texte); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.carte-partenaire strong { font-family: var(--f-titre); font-weight: 800; font-size: 23px; letter-spacing: -.02em; line-height: 1.15; }
.carte-partenaire--appel { background: var(--vert-profond); border-color: var(--vert-profond); color: var(--blanc); transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.carte-partenaire--appel:active { transform: scale(.98); }
.carte-partenaire--appel .carte-partenaire__apport { color: var(--jaune); }
.carte-partenaire--appel strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte-partenaire--appel .icon { color: var(--jaune); }
@media (min-width: 620px) {
  .partenaires__cartes { grid-template-columns: 1fr 1fr; }
  .carte-partenaire { min-height: 170px; }
}
@media (min-width: 1100px) {
  .partenaires__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
  .carte-partenaire strong { font-size: 26px; }
}
@media (hover: hover) and (pointer: fine) {
  .carte-partenaire--appel:hover { background: #0f4029; }
}

/* 6. Pied de page ---------------------------------------------------------- */
.pied { background: var(--vert-profond); color: var(--blanc); padding-block: 56px 28px; }
.pied__accroche {
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.pied__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.pied__titre em { color: var(--jaune); }
.pied__colonnes { display: grid; gap: 36px; padding-block: 40px; }
.pied__uciv { display: grid; gap: 18px; align-content: start; }
.pied__uciv p { color: rgba(255, 255, 255, .75); font-size: 15px; max-width: 34ch; }
.pied__logo { display: flex; align-items: center; gap: 12px; font-family: var(--f-titre); font-weight: 800; font-size: 26px; }
.pied__logo .logo__marque { width: 58px; height: 49px; }
.pied__contact { display: grid; gap: 10px; font-size: 15px; }
.pied__contact li { display: flex; align-items: center; gap: 10px; }
.pied__contact .icon { color: var(--jaune); }
.pied__liens h2 { margin-bottom: 14px; color: var(--jaune); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.pied__liens ul { display: grid; gap: 10px; }
.pied a { transition: color 150ms ease; }
.pied__liens a { color: rgba(255, 255, 255, .9); font-size: 15.5px; }

.lettre { display: grid; gap: 16px; align-content: start; padding: 26px; border-radius: var(--rayon); background: rgba(255, 255, 255, .08); }
.lettre > * { min-width: 0; }
.lettre h2 { font-family: var(--f-titre); font-weight: 800; font-size: 23px; line-height: 1.12; letter-spacing: -.02em; }
.lettre__form { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.lettre__form:focus-within { outline: 2px solid var(--jaune); outline-offset: 2px; }
.lettre__form input {
  flex: 1; min-width: 0; padding: 0 14px; border: 0; background: transparent;
  color: var(--blanc); font: inherit; font-size: 15px; outline: none;
}
.lettre__form input::placeholder { color: rgba(255, 255, 255, .6); }
.lettre__form button {
  flex: none; padding: 11px 18px; border: 0; border-radius: 999px;
  background: var(--jaune); color: var(--encre); font-size: 14px; font-weight: 700;
  transition: transform 160ms var(--ease-out);
}
.lettre__form button:active { transform: scale(.97); }
.lettre p { color: rgba(255, 255, 255, .6); font-size: 13px; }

.pied__bas {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .6); font-size: 13.5px;
}
.pied__reseaux, .pied__mentions { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pied__reseaux { gap: 10px; }
.pied__reseaux a { display: block; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; color: var(--blanc); font-weight: 600; transition: background-color 200ms ease, color 200ms ease; }

@media (min-width: 720px) {
  .pied { padding-block: 96px 36px; }
  .pied__accroche { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-bottom: 64px; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; gap: 48px 32px; padding-block: 64px; }
  .pied__bas { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1100px) {
  .pied__colonnes { grid-template-columns: 280px repeat(3, minmax(0, 1fr)) 300px; }
}
@media (hover: hover) and (pointer: fine) {
  .pied__liens a:hover, .pied__mentions a:hover, .pied__contact a:hover { color: var(--jaune); }
  .pied__reseaux a:hover { background: var(--blanc); color: var(--vert-profond); }
}

/* 7. Animations ------------------------------------------------------------ */

/* Entrée du hero au chargement : chaque bloc arrive légèrement après le précédent. */
@keyframes entree {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes entree-photo {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes entree-disque {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}
.hero__entree { animation: entree 700ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
.hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.hero__photo { animation: entree-photo 900ms var(--ease-out) 120ms both; }
.hero__signature { animation: entree 700ms var(--ease-out) 520ms both; }

/* Apparition au défilement : uniquement si JavaScript est actif (classe .js sur <html>),
   pour que le contenu reste visible sans script. */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms ease, transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* Images : le conteneur reste en place, c'est son contenu qui se dévoile de haut en bas.
   (Le masque est posé sur les enfants : masquer l'élément observé lui-même
   empêcherait le navigateur de détecter son entrée à l'écran.) */
.js [data-reveal="image"] { opacity: 1; transform: none; }
.js [data-reveal="image"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-in-out);
}
.js [data-reveal].est-visible { opacity: 1; transform: none; }
.js [data-reveal="image"].est-visible > * { clip-path: inset(0 0 0 0); }

/* Mouvement réduit : on garde les fondus, on retire les déplacements. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__entree, .hero__photo, .hero__disque, .hero__signature,
  .lead-hero__photo, .lead-hero__anneau, .lead-hero__logo { animation: none; }
  .js [data-reveal] { transform: none; transition: opacity 300ms ease; }
  .js [data-reveal="image"] { opacity: 0; }
  .js [data-reveal="image"] > * { clip-path: none; transition: none; }
  .js [data-reveal="image"].est-visible { opacity: 1; }
  .menu-mobile__panneau, .menu-mobile__liste > li { transition-duration: 1ms !important; transform: none; }
  .menu-mobile:not(.est-ouvert) .menu-mobile__panneau { opacity: 0; }
  .btn:active, .rond-bouton:active { transform: none; }
  .carte-programme__image img, .article__image img { transition: none; }
}
/* 12. Page UCIV Leadership --------------------------------------------------- */
.btn--encre { background: var(--encre); color: var(--blanc); }
.surtitre--encre { color: var(--encre); }
.titre--44 { font-size: clamp(28px, 3.05vw, 44px); }

.fil { margin-bottom: 28px; font-size: 13px; }
.fil ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.fil li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
.fil a:hover { text-decoration: underline; }

/* Hero */
.lead-hero { background: var(--jaune); overflow: hidden; }
.lead-hero__grille { display: grid; gap: 32px; padding-top: 28px; }
.lead-hero__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(40px, 5.8vw, 68px); line-height: .98; letter-spacing: -.03em;
}
.lead-hero__titre em {
  display: block; margin-top: 4px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -.01em; line-height: 1.04; color: var(--vert);
}
.lead-hero__chapo { margin-top: 24px; max-width: 560px; font-size: 17px; line-height: 1.6; }
.lead-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
.lead-hero__visuel { position: relative; align-self: end; max-width: 620px; width: 100%; margin-inline: auto; }
.lead-hero__photo { position: relative; width: 100%; }
.lead-hero__anneau {
  right: -8%; bottom: 6%; width: 62%; aspect-ratio: 1;
  border-width: 28px; border-color: var(--blanc); opacity: .55;
}
.lead-hero__logo {
  position: absolute; z-index: 2; top: -44px; right: 0;
  width: min(46%, 300px); padding: 14px 18px; border-radius: 20px; background: var(--blanc);
}
@media (min-width: 900px) {
  .lead-hero__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-top: 0; min-height: 600px; }
  .lead-hero__texte { padding-block: 56px; }
  .lead-hero__chapo { font-size: 19px; }
  .lead-hero__cta { flex-direction: row; align-items: center; }
  .lead-hero__visuel { align-self: end; margin-inline: 0; }
  .lead-hero__logo { top: -72px; }
}
/* Écrans d'environ 12 pouces et plus : le hero occupe 90 % de la hauteur de l'écran. */
@media (min-width: 1100px) {
  .lead-hero__grille { min-height: clamp(560px, 90vh, 1000px); }
}

/* Repères */
.lead-reperes { background: var(--blanc); padding-block: 36px; }
.lead-reperes__liste { display: grid; gap: 24px; }
.lead-reperes__liste li { display: grid; gap: 6px; padding-left: 20px; border-left: 2px solid var(--filet); }
.lead-reperes__liste span { color: var(--texte); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lead-reperes__liste strong { font-family: var(--f-titre); font-weight: 800; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.2; }
@media (min-width: 720px) {
  .lead-reperes { padding-block: 44px; }
  .lead-reperes__liste { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* Vision & mission */
.lead-vision__grille { display: grid; gap: 40px; }
.lead-vision__titre {
  font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.16; letter-spacing: -.025em;
}
.lead-vision__titre em {
  display: block; margin-top: 14px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.15em; letter-spacing: -.01em; line-height: 1.12; color: var(--orange);
}
.lead-mission {
  padding: 28px; border-radius: var(--rayon-lg); background: var(--blanc);
  box-shadow: 0 1px 2px rgba(23, 18, 12, .05), 0 12px 40px rgba(23, 18, 12, .06);
}
.lead-mission__label { margin-bottom: 14px; color: var(--vert); font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.lead-mission__intro { font-family: var(--f-titre); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.lead-mission__liste { margin-top: 20px; }
.lead-mission__liste li { display: flex; align-items: center; gap: 16px; padding-block: 12px; border-top: 1px solid var(--filet); font-weight: 600; }
.lead-mission__coche { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--vert); color: var(--blanc); }
.lead-mission__coche .icon { width: 14px; height: 14px; stroke-width: 3; }
@media (min-width: 900px) {
  .lead-vision__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 80px); align-items: center; }
  .lead-mission { padding: 40px; }
}

/* Intégrer le réseau */
.lead-etapes { display: grid; gap: 16px; }
.lead-etape { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 28px; border-radius: var(--rayon); background: var(--creme); }
.lead-etape__haut { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: auto; }
.lead-etape__num { font-family: var(--f-accent); font-style: italic; font-size: 56px; line-height: 1; color: var(--orange); }
.lead-etape h3 { font-family: var(--f-titre); font-weight: 800; font-size: 25px; letter-spacing: -.02em; line-height: 1.1; }
.lead-etape p { color: var(--texte); font-size: 15px; line-height: 1.55; }
.lead-etape--final { background: var(--jaune); }
.lead-etape--final .lead-etape__num { color: var(--encre); }
.lead-etape--final p { color: rgba(23, 18, 12, .8); }
@media (min-width: 720px) { .lead-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lead-etapes { grid-template-columns: repeat(4, 1fr); gap: 20px; } .lead-etape { min-height: 260px; } }

/* Pourquoi rejoindre */
.lead-pourquoi { overflow: hidden; }
.lead-pourquoi__grille { position: relative; display: grid; gap: 32px; }
.lead-pourquoi__anneau { right: -120px; bottom: -160px; width: 360px; aspect-ratio: 1; border-width: 40px; border-color: var(--jaune); opacity: .35; }
.lead-puces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lead-puces li { padding: 10px 18px; border-radius: 999px; background: var(--jaune); color: var(--encre); font-size: 14px; font-weight: 600; }
@media (min-width: 900px) {
  .lead-pourquoi__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
}

/* Principes */
.lead-principes__liste { display: grid; gap: 28px 24px; margin-top: 48px; }
.lead-principe { display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 2px solid var(--encre); }
.lead-principe__num { font-family: var(--f-accent); font-style: italic; font-size: 40px; line-height: 1; color: var(--orange); }
.lead-principe--vert .lead-principe__num { color: var(--vert); }
.lead-principe h3 { font-family: var(--f-titre); font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
.lead-principe p { color: var(--texte); font-size: 15.5px; line-height: 1.55; }
@media (min-width: 720px) { .lead-principes__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lead-principes__liste { grid-template-columns: repeat(5, 1fr); } }

/* Thème */
.lead-theme { padding-block: clamp(64px, 8vw, 104px); background: var(--jaune); text-align: center; }
.lead-theme__label { margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.lead-theme__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(30px, 4.45vw, 64px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance;
}
.lead-theme__titre em {
  display: block; margin-top: 6px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.12em; letter-spacing: -.01em; color: var(--vert);
}

/* Lancement */
.lead-lancement__grille { display: grid; gap: 48px; align-items: center; }
.lead-infos { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; }
.lead-infos li { padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--filet); font-size: 14px; font-weight: 600; }
.lead-infos .lead-infos__principale { background: var(--encre); color: var(--blanc); box-shadow: none; }
.lead-lancement__visuel { position: relative; max-width: 520px; width: 100%; aspect-ratio: 520 / 420; margin-inline: auto; }
/* Deux affiches qui se chevauchent, légèrement inclinées (cotes de la maquette : cadre 520 x 420) */
.lead-lancement__visuel img { position: absolute; height: auto; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 40px rgba(14, 40, 25, .16); }
.lead-lancement__premiere { left: 0; top: 5.48%; width: 52.5%; aspect-ratio: 273 / 357; transform: rotate(4deg); }
.lead-lancement__seconde { left: 44.42%; top: 2.38%; width: 55.58%; aspect-ratio: 289 / 384; transform: rotate(-3deg); }
.lead-lancement__disque { z-index: -1; right: -28px; bottom: -28px; width: 70%; aspect-ratio: 1; background: var(--jaune); opacity: .5; }
@media (min-width: 900px) {
  .lead-lancement__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
  .lead-lancement__visuel { margin-inline: auto 0; }
}

/* Animations de la page UCIV Leadership : mêmes entrées que le hero de l'accueil. */
.lead-hero__anneau { animation: entree-disque 900ms var(--ease-out) both; }
.lead-hero__photo { animation: entree-photo 900ms var(--ease-out) 120ms both; }
.lead-hero__logo { animation: entree 700ms var(--ease-out) 520ms both; }
.lead-etape__haut .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--encre:hover { background: #2e261c; }
  .lead-etape:hover .lead-etape__haut .icon { transform: translateX(3px); }
}
/* 13. Page Qui sommes-nous ? ------------------------------------------------- */
.titre--56 { font-size: clamp(34px, 4.2vw, 56px); }
.fil--clair { color: var(--blanc); }

/* Hero */
.qs-hero { background: var(--orange); color: var(--blanc); overflow: hidden; }
.qs-hero__grille { display: grid; gap: 32px; padding-top: 28px; }
.qs-hero__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(36px, 4.2vw, 60px); line-height: 1; letter-spacing: -.03em;
}
.qs-hero__titre em {
  display: block; margin-top: 4px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -.01em; line-height: 1.04; color: var(--jaune);
}
.qs-hero__chapo { margin-top: 24px; max-width: 540px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .95); }
.qs-hero__visuel { position: relative; align-self: end; max-width: 560px; width: 100%; margin-inline: auto; }
.qs-hero__photo { position: relative; width: 100%; }
.qs-hero__anneau {
  right: -6%; bottom: 10%; width: 58%; aspect-ratio: 1;
  border-width: 28px; border-color: var(--jaune); opacity: .55;
}
@media (min-width: 900px) {
  .qs-hero__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-top: 0; min-height: 540px; }
  .qs-hero__texte { padding-block: 56px; }
  .qs-hero__chapo { font-size: 19px; }
  .qs-hero__visuel { align-self: end; margin-inline: 0 0; }
}

/* Ambition */
.qs-ambition__grille { display: grid; gap: 36px; }
.qs-ambition__titre {
  font-family: var(--f-titre); font-weight: 700;
  font-size: clamp(26px, 3.05vw, 44px); line-height: 1.15; letter-spacing: -.025em;
}
.qs-ambition__titre em {
  display: block; margin-top: 14px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.18em; letter-spacing: -.01em; line-height: 1.1; color: var(--orange);
}
.qs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.qs-chips li { padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--encre); font-size: 14px; font-weight: 600; }
@media (min-width: 900px) {
  .qs-ambition__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
}

/* Vision & mission */
.qs-vm__grille { display: grid; gap: 24px; }
.qs-vision, .qs-mission { padding: 32px 28px; border-radius: var(--rayon-lg); }
.qs-vision { background: var(--vert-profond); color: var(--blanc); }
.qs-mission { background: var(--creme); }
.qs-vision h2 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(26px, 2.65vw, 38px); line-height: 1.08; letter-spacing: -.03em; }
.qs-vision h2 em {
  display: block; margin-top: 8px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -.01em; color: var(--jaune);
}
.qs-vision p:last-child { margin-top: 24px; color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.65; }
.qs-mission h2 { font-family: var(--f-titre); font-weight: 700; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.25; letter-spacing: -.02em; }
.qs-mission__intro { margin-top: 28px; color: var(--texte); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.qs-mission__liste { margin-top: 12px; }
.qs-mission__liste li { display: flex; align-items: center; gap: 14px; padding-block: 11px; border-top: 1px solid var(--filet); font-weight: 600; }
.qs-mission__coche { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--blanc); }
.qs-mission__coche .icon { width: 14px; height: 14px; stroke-width: 3; }
@media (min-width: 900px) {
  .qs-vm__grille { grid-template-columns: minmax(0, 560fr) minmax(0, 712fr); }
  .qs-vision, .qs-mission { padding: 48px; }
}

/* Valeurs */
.qs-valeurs__liste { display: grid; gap: 32px 28px; }
.qs-valeur { display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 2px solid var(--encre); }
.qs-valeur__num { font-family: var(--f-accent); font-style: italic; font-size: 48px; line-height: 1; color: var(--orange); }
.qs-valeur--vert .qs-valeur__num { color: var(--vert); }
.qs-valeur h3 { font-family: var(--f-titre); font-weight: 800; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; }
.qs-valeur p { color: var(--texte); font-size: 16px; line-height: 1.6; max-width: 36ch; }
@media (min-width: 720px) { .qs-valeurs__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .qs-valeurs__liste { grid-template-columns: repeat(3, 1fr); gap: 48px 40px; } }

/* Citation */
.qs-citation { padding-block: clamp(64px, 8vw, 112px); background: var(--orange); color: var(--blanc); text-align: center; }
.qs-citation__cadre { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.qs-citation__texte {
  max-width: 18em; font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance;
}
.qs-citation__texte em {
  display: block; margin-top: 6px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.12em; letter-spacing: -.01em; color: var(--jaune);
}

/* Animations : mêmes entrées que le hero de l'accueil. */
.qs-hero__anneau { animation: entree-disque 900ms var(--ease-out) both; }
.qs-hero__photo { animation: entree-photo 900ms var(--ease-out) 120ms both; }
@media (prefers-reduced-motion: reduce) {
  .qs-hero__photo, .qs-hero__anneau { animation: none; }
}
/* 14. Page Nos programmes ----------------------------------------------------- */
.btn--encre .btn__rond, .btn--orange .btn__rond, .btn--vert .btn__rond { background: rgba(255, 255, 255, .2); }

/* Hero */
.np-hero { position: relative; background: var(--vert-profond); color: var(--blanc); overflow: hidden; }
.np-hero__grille { position: relative; display: grid; gap: 40px; padding-block: 28px 56px; }
.np-hero__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(36px, 4.45vw, 64px); line-height: 1; letter-spacing: -.03em;
}
.np-hero__titre em {
  display: block; margin-top: 4px;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -.01em; line-height: 1.04; color: var(--jaune);
}
.np-hero__chapo { margin-top: 24px; max-width: 560px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.np-hero__visuel { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin-inline: auto; }
.np-hero__disque { position: absolute; inset: 0; border-radius: 50%; background: var(--orange); }
.np-hero__rond { right: -4%; bottom: -6%; width: 34%; aspect-ratio: 1; border: 22px solid var(--jaune); background: transparent; }
.np-hero__note {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; rotate: -8deg;
  font-size: clamp(28px, 4vw, 46px); white-space: nowrap; color: var(--blanc);
}
.np-hero__anneau { top: -120px; right: 38%; width: 240px; aspect-ratio: 1; border-width: 22px; border-color: rgba(255, 255, 255, .12); }
@media (min-width: 900px) {
  .np-hero__grille { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding-block: 0; min-height: 520px; }
  .np-hero__texte { padding-block: 56px; }
  .np-hero__chapo { font-size: 19px; }
  .np-hero__visuel { width: min(100%, 460px); margin-inline: auto 0; }
}

/* Méthode */
.np-etapes { display: grid; gap: 16px; }
.np-etape {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 200px; padding: 28px; border-radius: var(--rayon-lg);
}
.np-etape__haut { display: flex; align-items: flex-start; justify-content: space-between; }
.np-etape__num { font-family: var(--f-accent); font-style: italic; font-size: 64px; line-height: 1; }
.np-etape h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.12; }
.np-etape--orange { background: var(--orange); color: var(--blanc); }
.np-etape--jaune { background: var(--jaune); color: var(--encre); }
.np-etape--vert { background: var(--vert-profond); color: var(--blanc); }
@media (min-width: 900px) { .np-etapes { grid-template-columns: repeat(3, 1fr); gap: 24px; } .np-etape { min-height: 230px; padding: 32px; } }

/* Programmes */
.np-programme { display: grid; gap: 28px; align-items: center; padding-block: 40px; }
.np-programme + .np-programme { border-top: 1px solid var(--filet); }
.np-programme__visuel { position: relative; max-width: 560px; width: 100%; margin-inline: auto; }
.np-programme__forme {
  position: absolute; z-index: 0; width: 38%; aspect-ratio: 1; border-radius: 50%;
  top: -7%; left: -5%; background: var(--orange);
}
/* Programme 2 (maquette) : cadre jaune 560 x 420, grand arrondi en haut à droite,
   photo du groupe 468 x 390 posée à 56 px du bord gauche, collée en bas. */
.np-programme--jaune .np-programme__forme {
  top: -9%; left: 56.7%; width: 50%; background: var(--jaune);   /* cercle 300 px, derrière le cadre */
}
.np-programme__rond {   /* cercle blanc translucide 380 px à l'intérieur du cadre jaune */
  position: absolute; left: 19.6%; top: 14.3%; width: 67.9%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255, 255, 255, .4);
}
.np-programme--jaune .np-programme__photo { background: var(--jaune); aspect-ratio: 560 / 420; overflow: hidden; }
.np-programme--jaune .np-programme__photo img {
  position: absolute; left: 10%; bottom: 0; width: 83.6%; height: 92.9%;
  object-fit: cover; object-position: center bottom;
}
.np-programme--vert .np-programme__forme { top: -7%; left: -5%; background: var(--vert); }
.np-programme__photo {
  position: relative; z-index: 1; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: 28px; background: var(--sable);
  border-top-left-radius: clamp(80px, 30vw, 210px);
}
.np-programme:nth-of-type(even) .np-programme__photo { border-top-left-radius: 28px; border-top-right-radius: clamp(80px, 30vw, 210px); }
.np-programme__photo img { width: 100%; height: 100%; object-fit: cover; }
.np-programme__photo--detouree { background: transparent; overflow: visible; }
.np-programme__photo--detouree img { object-fit: contain; object-position: center bottom; }
.np-programme__num { display: block; font-family: var(--f-accent); font-style: italic; font-size: 34px; line-height: 1; color: var(--texte); }
.np-programme__tag { margin-top: 14px; background: var(--sable); }
.np-programme h2 { margin-top: 14px; font-family: var(--f-titre); font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 1.02; letter-spacing: -.03em; }
.np-programme__accroche { margin-top: 12px; font-family: var(--f-accent); font-style: italic; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; color: var(--orange); }
.np-programme--jaune .np-programme__accroche { color: var(--orange-fonce); }
.np-programme--vert .np-programme__accroche { color: var(--vert); }
.np-programme .texte { margin-top: 18px; }
.np-programme .btn { margin-top: 28px; }
@media (min-width: 900px) {
  .np-programme { grid-template-columns: minmax(0, 560fr) minmax(0, 640fr); gap: clamp(40px, 6vw, 96px); padding-block: 48px; }
  .np-programme:nth-of-type(even) .np-programme__visuel { order: 2; }
  .np-programme__photo { border-top-left-radius: clamp(110px, 15.5vw, 210px); }
  .np-programme:nth-of-type(even) .np-programme__photo { border-top-left-radius: 28px; border-top-right-radius: clamp(110px, 15.5vw, 210px); }
}
.np-avenir {
  display: flex; flex-direction: column; gap: 6px; margin-top: 40px; padding: 30px 28px;
  border-radius: var(--rayon); background: var(--creme);
}
.np-avenir strong { font-family: var(--f-titre); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.np-avenir p { color: var(--texte); }
@media (min-width: 720px) { .np-avenir { flex-direction: row; align-items: center; justify-content: space-between; padding-inline: 36px; } }

/* Appel */
.np-appel { position: relative; padding-block: clamp(56px, 7vw, 96px); background: var(--vert); color: var(--blanc); overflow: hidden; }
.np-appel__cadre { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.np-appel__titre { max-width: 14em; font-family: var(--f-titre); font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.03em; }
.np-appel__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.01em; color: var(--jaune); }
.np-appel__anneau { right: -80px; top: -120px; width: 340px; aspect-ratio: 1; border-width: 36px; border-color: rgba(255, 255, 255, .12); }
@media (min-width: 900px) { .np-appel__cadre { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Animations : entrée du hero, comme sur l'accueil. */
.np-hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.np-hero__rond { animation: entree-disque 900ms var(--ease-out) 150ms both; }
.np-hero__note { animation: entree 700ms var(--ease-out) 520ms both; }
@media (prefers-reduced-motion: reduce) {
  .np-hero__disque, .np-hero__rond, .np-hero__note { animation: none; }
}
/* 15. Page Les Go du Digital --------------------------------------------------- */
.surtitre--vert { color: var(--vert); }

/* Hero (maquette 1440 px : hauteur 640, colonne de texte à x = 72 / y = 52, cercle jaune 440 en (1120, -180),
   disque crème 540 en (760, 90), photo ronde 480 à 30 px du bord du disque). Les tailles suivent la largeur
   de l'écran (vw) pour garder les mêmes proportions en dessous de 1440 px. */
.gd-hero { position: relative; background: var(--orange); color: var(--blanc); overflow: hidden; }
.gd-hero__jaune {   /* anneau placé par rapport au disque crème : (360, -270) et 440 / 540 px (Go du Digital) */
  left: 66.7%; top: -50%; width: 81.5%; aspect-ratio: 1;
  background: var(--jaune);
}
.gd-hero--vert .gd-hero__jaune { left: 68.5%; }   /* Experience Lab : (370, -270) */
.gd-hero__grille { position: relative; display: grid; gap: 40px; padding-top: 28px; padding-bottom: 56px; }
.gd-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.gd-hero .fil { margin: 0; padding-bottom: 26px; }
.gd-hero .surtitre { margin: 0; }
.gd-hero__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(52px, 7.2vw, 104px); line-height: 1.02; letter-spacing: -.0278em;
}
.gd-hero__titre em {
  display: block;
  font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.096em; letter-spacing: 0; line-height: 1.04; color: var(--jaune);
}
.gd-hero__chapo { max-width: 520px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
.gd-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8px; }
.gd-hero__visuel { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.gd-hero__disque { position: absolute; inset: 0; border-radius: 50%; background: var(--creme); }
.gd-hero__photo { position: absolute; inset: 5.56%; overflow: hidden; border-radius: 50%; background: var(--sable); }
.gd-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.gd-hero__pastille {
  position: absolute; z-index: 2; left: 68.5%; top: 70.4%;
  display: flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px;
  background: var(--jaune); color: var(--encre); rotate: 8deg; white-space: nowrap;
}
.gd-hero__pastille strong { font-family: var(--f-titre); font-weight: 800; font-size: 30px; line-height: 1; }
.gd-hero__pastille span { font-size: 16px; font-weight: 700; line-height: 1; }
.gd-hero__note {
  position: absolute; z-index: 2; left: 7.4%; top: -10.9%; rotate: -5deg;
  font-size: clamp(24px, 2.78vw, 40px); white-space: nowrap; color: var(--blanc);
}
@media (min-width: 900px) {
  .gd-hero__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px;
    padding-block: 0; min-height: clamp(560px, 44.5vw, 700px);
  }
  .gd-hero__texte { max-width: 640px; padding-top: clamp(28px, 3.6vw, 52px); }
  .gd-hero__cta { flex-direction: row; align-items: center; }
  .gd-hero__chapo { font-size: 19px; }
  .gd-hero__visuel { width: min(100%, 37.5vw, 540px); margin: min(6.25vw, 90px) min(4.7vw, 68px) 0 auto; }
}

/* Repères : 4 colonnes, dernière valeur en orange foncé */
.gd-reperes__accent { color: var(--orange-fonce); }
@media (min-width: 900px) { .gd-reperes .lead-reperes__liste { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* Volets */
.gd-volets__grille { display: grid; gap: 40px; }
.gd-volets__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gd-volet {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 170px; padding: 20px; border-radius: var(--rayon);
}
.gd-volet__haut { display: flex; align-items: flex-start; justify-content: space-between; }
.gd-volet__haut span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gd-volet__haut .icon { width: 20px; height: 20px; }
.gd-volet h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.1; }
.gd-volet--orange { background: var(--orange); color: var(--blanc); }
.gd-volet--vert { background: var(--vert); color: var(--blanc); }
.gd-volet--jaune { background: var(--jaune); color: var(--encre); }
.gd-volet--profond { background: var(--vert-profond); color: var(--blanc); }
@media (min-width: 900px) {
  .gd-volets__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: clamp(40px, 6vw, 80px); align-items: center; }
  .gd-volet { min-height: 200px; padding: 24px; }
}

/* Apprentissages : numéro | titre | description */
.gd-apprentissages__liste { margin-top: 40px; }
.gd-appr { display: grid; gap: 8px; padding-block: 24px; border-top: 1px solid var(--filet); }
.gd-appr:last-child { border-bottom: 1px solid var(--filet); }
.gd-appr__num { font-family: var(--f-accent); font-style: italic; font-size: 44px; line-height: 1; color: var(--orange); }
.gd-appr--vert .gd-appr__num { color: var(--vert); }
.gd-appr h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(21px, 1.9vw, 27px); letter-spacing: -.02em; line-height: 1.15; }
.gd-appr p { color: var(--texte); line-height: 1.6; }
@media (min-width: 900px) {
  .gd-appr { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 28px; }
}

/* Pédagogie */
.gd-pedagogie__grille { display: grid; gap: 40px; align-items: center; }
.gd-pedagogie__chiffre {
  font-family: var(--f-titre); font-weight: 800; color: var(--jaune);
  font-size: clamp(96px, 13.9vw, 200px); line-height: .9; letter-spacing: -.05em;
}
.gd-pedagogie__suite { margin-bottom: 20px; font-family: var(--f-accent); font-style: italic; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; }
.gd-reine { padding: 40px 36px; border-radius: var(--rayon-lg); background: var(--jaune); color: var(--encre); }
.gd-reine__couronne { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--encre); color: var(--jaune); }
.gd-reine__couronne .icon { width: 28px; height: 28px; }
.gd-reine__label { margin-top: 28px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gd-reine h3 { margin-top: 10px; font-family: var(--f-titre); font-weight: 800; font-size: clamp(36px, 3.4vw, 48px); line-height: 1; letter-spacing: -.03em; }
.gd-reine h3 em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.01em; color: var(--orange-fonce); }
.gd-reine p:last-child { margin-top: 18px; font-size: 17px; line-height: 1.6; color: rgba(23, 18, 12, .85); }
@media (min-width: 900px) { .gd-pedagogie__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(40px, 6vw, 96px); } .gd-reine { padding: 44px; } }

/* Public & suivi */
.gd-public__grille { display: grid; gap: 40px; align-items: center; }
.gd-public__chips { margin-top: 36px; }
.gd-suivi {
  padding: 36px 32px; border-radius: var(--rayon-lg); background: var(--blanc);
  box-shadow: 0 1px 2px rgba(23, 18, 12, .05), 0 12px 40px rgba(23, 18, 12, .06);
}
.gd-suivi .surtitre { margin-bottom: 14px; }
.gd-suivi h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.025em; }
.gd-suivi p:last-child { margin-top: 16px; color: var(--texte); font-size: 17px; line-height: 1.65; }
@media (min-width: 900px) { .gd-public__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(40px, 6vw, 96px); } .gd-suivi { padding: 44px; } }

/* Partenaires du programme */
.gd-partenaires { padding-block: clamp(56px, 6vw, 88px); }
.gd-partenaires__liste { display: grid; gap: 16px; margin-top: 8px; }
.gd-partenaires__liste li {
  display: grid; place-items: center; min-height: 110px; padding: 24px; border-radius: var(--rayon);
  background: var(--creme); text-align: center;
  font-family: var(--f-titre); font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em;
}
@media (min-width: 720px) { .gd-partenaires__liste { grid-template-columns: repeat(3, 1fr); min-height: 130px; } .gd-partenaires__liste li { min-height: 130px; } }

/* Inscriptions (maquette : 450 px, texte 736 px à x = 72, carte d'infos 480 px, gap 80) */
.gd-inscriptions { position: relative; padding-block: clamp(64px, 7.2vw, 104px); background: var(--orange); color: var(--blanc); overflow: hidden; }
.gd-inscriptions__disque { left: -15.3vw; top: 14vw; width: clamp(240px, 36.1vw, 520px); aspect-ratio: 1; background: rgba(255, 255, 255, .12); }
.gd-inscriptions__grille { position: relative; display: grid; gap: 40px; align-items: center; }
.gd-inscriptions .surtitre { margin-bottom: 26px; }
.gd-inscriptions__titre {
  max-width: 14em; font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.0278em;
}
.gd-inscriptions__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.096em; line-height: 1.04; letter-spacing: 0; color: var(--jaune); }
.gd-inscriptions .btn { margin-top: 32px; }
.gd-inscriptions__infos { padding: 8px 32px; border-radius: var(--rayon-lg); background: rgba(255, 255, 255, .14); }
.gd-inscriptions__infos div { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .3); }
.gd-inscriptions__infos div:first-child { border-top: 0; }
.gd-inscriptions__infos dt { color: rgba(255, 255, 255, .9); font-size: 15px; }
.gd-inscriptions__infos dd { font-family: var(--f-titre); font-weight: 800; font-size: 20px; }
@media (min-width: 900px) { .gd-inscriptions__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(40px, 5.6vw, 80px); } }

/* Animations : entrée du hero, comme sur l'accueil. */
.gd-hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.gd-hero__photo { animation: entree-photo 900ms var(--ease-out) 120ms both; }
.gd-hero__pastille, .gd-hero__note { animation: entree 700ms var(--ease-out) 520ms both; }
@media (prefers-reduced-motion: reduce) {
  .gd-hero__disque, .gd-hero__photo, .gd-hero__pastille, .gd-hero__note { animation: none; }
}
/* 16. Page Experience Lab ------------------------------------------------------- */

/* Hero : variante verte de celui des Go du Digital, avec un cercle orange en bas à gauche
   (maquette : 340 px en (-170, 470)). */
.gd-hero--vert { background: var(--vert); }
.gd-hero__orange {
  left: -11.8vw; bottom: -11.8vw; width: clamp(130px, 23.6vw, 340px); aspect-ratio: 1;
  background: var(--orange);
}

/* Approche (maquette : titre 72 / 80, intro à 22 px, cartes 312 x 220, gap 16, marge 56) */
.el-approche .surtitre { margin-bottom: 22px; }
.el-approche__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.0278em;
}
.el-approche__titre em {
  display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400;
  font-size: 1.111em; letter-spacing: 0; line-height: 1.04; color: var(--vert);
}
.el-approche__intro { margin-top: 22px; color: var(--texte); font-size: 19px; line-height: 1.3; }
.el-questions { display: grid; gap: 16px; margin-top: 56px; }
.el-question {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 220px; padding: 28px; border-radius: var(--rayon);
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1);
}
.el-question__signe { font-family: var(--f-accent); font-style: italic; font-size: 84px; line-height: .9; }
.el-question h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.1; }
.el-question--orange .el-question__signe { color: var(--orange); }
.el-question--vert .el-question__signe { color: var(--vert); }
.el-question--profond { background: var(--vert-profond); color: var(--blanc); box-shadow: none; }
.el-question--profond .el-question__signe { color: var(--jaune); }
@media (min-width: 720px) { .el-questions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .el-questions { grid-template-columns: repeat(4, 1fr); } }

/* Objectifs (maquette : colonne de 460 px, gap 80, lignes de 86 px) */
.el-objectifs__grille { display: grid; gap: 40px; }
.el-objectifs .surtitre { margin-bottom: 24px; }
.el-objectifs__titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -.0278em;
}
.el-objectifs__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.108em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.el-objectifs__grille .texte { margin-top: 24px; line-height: 1.65; }
.el-objectifs__liste li {
  display: flex; align-items: center; gap: 28px; padding-block: 24px; border-bottom: 1px solid rgba(23, 18, 12, .15);
  font-family: var(--f-titre); font-weight: 700; font-size: clamp(18px, 1.74vw, 25px); letter-spacing: -.016em; line-height: 1.15;
}
.el-objectifs__num { flex: none; width: 56px; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 38px; line-height: 1; letter-spacing: 0; }
.el-objectif--vert .el-objectifs__num { color: var(--vert); }
.el-objectif--orange .el-objectifs__num { color: var(--orange); }
@media (min-width: 900px) { .el-objectifs__grille { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(40px, 5.6vw, 80px); align-items: start; } }
/* 17. Cercles creux de la maquette -------------------------------------------------
   Les ellipses de la maquette ont un « rayon intérieur » (innerRadius) : ce sont des anneaux, pas des
   disques pleins. Épaisseur = (1 - rayon intérieur) x rayon. Un dégradé radial reproduit l'anneau à
   n'importe quelle taille. Positions relevées à 1440 px, converties en vw (1 vw = 14,4 px). */

/* Go du Digital / Experience Lab */
.gd-hero__jaune { background: radial-gradient(circle closest-side, transparent 80%, var(--jaune) 80.6%); }
.gd-hero__orange { background: radial-gradient(circle closest-side, transparent 74%, var(--orange) 74.6%); }
.gd-inscriptions__disque { background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .12) 78.6%); }

/* UCIV Leadership : disque blanc 640 derrière la photo + anneau vert 360 en bas à gauche */
.lead-hero { position: relative; }
.lead-hero__disque {
  position: absolute; z-index: 0; left: 9.1%; top: 6.9%; width: 97.3%; aspect-ratio: 1;
  border-radius: 50%; background: var(--blanc);
}
.lead-hero__anneau {
  border: 0; opacity: 1; right: auto; top: auto; left: -13.2vw; bottom: -13.2vw; width: clamp(110px, 25vw, 360px);
  background: radial-gradient(circle closest-side, transparent 80%, var(--vert) 80.6%);
}
.lead-hero__logo { padding: 6px 12px; width: min(46%, 300px); }
@media (min-width: 900px) {
  .lead-hero__grille { align-items: end; }
  .lead-hero__texte { align-self: center; padding-block: 0; padding-top: clamp(28px, 3.6vw, 52px); }
  .lead-hero__visuel { width: min(100%, 45.7vw, 658px); max-width: none; margin-right: -2vw; margin-inline-start: auto; }
  .lead-hero__logo { top: -3.9vw; right: 1.9vw; width: clamp(150px, 20.8vw, 300px); }
}
.lead-pourquoi__anneau {
  border: 0; opacity: 1; bottom: auto; right: -12.5vw; top: 11.1vw; width: clamp(180px, 36.1vw, 520px);
  background: radial-gradient(circle closest-side, transparent 78%, rgba(247, 197, 72, .15) 78.6%);
}
.lead-lancement__disque { display: none; }

/* Qui sommes-nous ? : disque crème 700 + anneau jaune 440 (hero), anneau dans la carte vision, anneau dans la citation */
.qs-hero { position: relative; }
.qs-hero__disque {
  position: absolute; z-index: 0; left: 9.9%; top: 7.1%; width: 115%; aspect-ratio: 1;
  border-radius: 50%; background: var(--creme);
}
.qs-hero__anneau {
  border: 0; opacity: 1; bottom: auto; width: clamp(170px, 30.6vw, 440px); right: -12.5vw; top: -13.9vw;
  background: radial-gradient(circle closest-side, transparent 80%, var(--jaune) 80.6%);
}
@media (min-width: 900px) {
  .qs-hero__grille { align-items: end; }
  .qs-hero__texte { align-self: center; padding-block: 0; padding-top: clamp(28px, 3.6vw, 52px); }
  .qs-hero__visuel { width: min(100%, 42.2vw, 608px); max-width: none; margin-right: -0.7vw; margin-inline-start: auto; }
}
.qs-vision { position: relative; overflow: hidden; }
.qs-vision > * { position: relative; }
.qs-vision::before {
  content: ""; position: absolute; left: 58.9%; top: -150px; width: 67.9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 76%, rgba(255, 255, 255, .08) 76.6%);
}
.qs-citation { position: relative; overflow: hidden; }
.qs-citation__cadre { position: relative; }
.qs-citation::before {
  content: ""; position: absolute; left: -13.9vw; top: -15.3vw; width: clamp(240px, 36.1vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .12) 78.6%);
}

/* Nos programmes : disque orange 560 + anneau jaune 380 + anneau blanc 300 (hero), anneau de l'appel */
.np-hero__rond { background: radial-gradient(circle closest-side, transparent 76%, var(--jaune) 76.6%); border: 0; }
.np-hero__anneau {
  border: 0; background: radial-gradient(circle closest-side, transparent 70%, rgba(255, 255, 255, .08) 70.6%);
}
@media (min-width: 900px) {
  .np-hero__grille { position: static; min-height: clamp(480px, 38.9vw, 700px); }
  .np-hero__visuel { display: contents; }
  .np-hero__disque { inset: auto; left: 69.4vw; top: 4.17vw; width: 38.9vw; height: auto; aspect-ratio: 1; }
  .np-hero__rond { left: 81.9vw; right: auto; top: 22.9vw; bottom: auto; width: 26.4vw; }
  .np-hero__anneau { left: 61.1vw; right: auto; top: -11.1vw; width: 20.8vw; }
  .np-hero__note { left: 70.1vw; top: 17.6vw; translate: none; rotate: -8deg; font-size: clamp(30px, 3.2vw, 46px); }
}
.np-appel__anneau {
  border: 0; opacity: 1; right: -13.9vw; top: -18vw; width: clamp(240px, 36.1vw, 520px);
  background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .1) 78.6%);
}
/* 18. Page Équipe ------------------------------------------------------------------
   Valeurs de la maquette (1440 px). Anneaux : innerRadius 0,78 (jaune 520) et 0,7 (vert 300). */
.eq-titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.0278em;
}
.eq-titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.096em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }

/* Hero : 500 px, anneau jaune en haut à droite, disque orange et anneau vert en bas à droite */
.eq-hero { position: relative; background: var(--vert-profond); color: var(--blanc); overflow: hidden; }
.eq-hero__anneau-jaune {
  left: 75vw; top: -9.7vw; width: clamp(150px, 36.1vw, 520px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 78%, var(--jaune) 78.6%);
}
.eq-hero__disque { left: 66.7vw; top: 17.4vw; width: clamp(100px, 25vw, 360px); aspect-ratio: 1; background: var(--orange); }
.eq-hero__anneau-vert {
  left: 84.7vw; top: 22.2vw; width: clamp(90px, 20.8vw, 300px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 70%, var(--vert) 70.6%);
}
.eq-hero__grille { position: relative; padding-block: 28px 64px; }
.eq-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 700px; }
.eq-hero .fil { margin: 0; padding-bottom: 26px; }
.eq-hero .surtitre { margin: 0; }
.eq-hero__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(36px, 4.72vw, 68px); line-height: 1.02; letter-spacing: -.0278em; }
.eq-hero__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.103em; line-height: 1.04; letter-spacing: 0; color: var(--jaune); }
.eq-hero__chapo { max-width: 640px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
@media (min-width: 900px) {
  .eq-hero__grille { padding-block: clamp(28px, 3.6vw, 52px) 0; min-height: clamp(420px, 34.7vw, 560px); }
  .eq-hero__chapo { font-size: 19px; }
}

/* Président : arche orange 440 x 580, portrait décalé de (28, 36) */
.eq-president { padding-top: var(--section); }
.eq-president__grille { display: grid; gap: 40px; align-items: center; }
.eq-president__visuel { position: relative; width: min(100%, 468px); aspect-ratio: 468 / 580; margin-inline: auto; }
.eq-president__arche { position: absolute; left: 0; top: 0; width: 94%; height: 100%; border-radius: 999px 999px 0 0; background: var(--orange); }
.eq-president__photo { position: absolute; left: 6%; top: 6.2%; width: 94%; height: 93.8%; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--sable); }
.eq-president__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.eq-president__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 40px; }
.eq-president__texte .surtitre { margin: 0; }
.eq-president__nom { font-family: var(--f-titre); font-weight: 800; font-size: clamp(44px, 5.28vw, 76px); line-height: 1.02; letter-spacing: -.0278em; }
.eq-president__nom em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.105em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.eq-president__role { font-size: 20px; line-height: 1.65; }
.eq-president__texte .texte { margin: 0; }
@media (min-width: 900px) {
  .eq-president__grille { grid-template-columns: 468px minmax(0, 1fr); gap: clamp(40px, 6.1vw, 88px); }
  .eq-president__visuel { margin-inline: 0; }
  .eq-president__texte { padding-bottom: 0; }
}

/* Bureau exécutif : 4 cartes de 306 x 370, fond coloré 306 x 340 */
.eq-bureau .surtitre { margin-bottom: 22px; }
.eq-membres { display: grid; gap: 40px 24px; margin-top: 56px; }
.eq-membre__visuel { position: relative; aspect-ratio: 306 / 370; }
.eq-membre__fond, .eq-membre__photo {
  position: absolute; left: 0; width: 100%; border-radius: 999px 999px 24px 24px;
}
.eq-membre__fond { bottom: 0; height: 91.9%; background: var(--orange); }
.eq-membre__photo { top: 0; height: 100%; object-fit: cover; }
.eq-membre--vert .eq-membre__fond { background: var(--vert); }
.eq-membre--jaune .eq-membre__fond { background: var(--jaune); }
.eq-membre--profond .eq-membre__fond { background: var(--vert-profond); }
.eq-membre__initiales {
  position: absolute; left: 0; right: 0; bottom: 38%; text-align: center;
  font-family: var(--f-accent); font-style: italic; font-size: clamp(48px, 5vw, 72px); line-height: 1; color: var(--blanc);
}
.eq-membre--jaune .eq-membre__initiales { color: var(--encre); }
.eq-membre h3 { margin-top: 20px; font-family: var(--f-titre); font-weight: 800; font-size: 26px; letter-spacing: -.5px; line-height: 1.15; }
.eq-membre p { margin-top: 4px; font-family: var(--f-accent); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--orange-fonce); }
@media (min-width: 640px) { .eq-membres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .eq-membres { grid-template-columns: repeat(4, 1fr); } }

/* Médias & communication : lignes de 112 px, pastille d'initiales de 64 px */
.eq-medias .surtitre { margin-bottom: 22px; }
.eq-medias__liste { margin-top: 0; }
.eq-media { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px 20px; padding-block: 24px; border-top: 1px solid var(--encre); }
.eq-media:last-child { border-bottom: 1px solid var(--encre); }
.eq-media__initiales {
  grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  font-family: var(--f-titre); font-weight: 800; font-size: 22px; color: var(--blanc); background: var(--orange);
}
.eq-media--vert .eq-media__initiales { background: var(--vert); }
.eq-media--jaune .eq-media__initiales { background: var(--jaune); color: var(--encre); }
.eq-media--profond .eq-media__initiales { background: var(--vert-profond); }
.eq-media h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.0233em; line-height: 1.15; }
.eq-media p { color: var(--texte); font-size: 17px; line-height: 1.5; }
@media (min-width: 900px) {
  .eq-media { grid-template-columns: 64px minmax(0, 481px) minmax(0, 1fr); gap: 28px; }
  .eq-media__initiales { grid-row: auto; }
}

/* Appel : variante orange du bandeau de la page Nos programmes (anneau blanc 10 %, 520 px, 0,78) */
.np-appel--orange { background: var(--orange); }

/* Animations : mêmes entrées que l'accueil */
.eq-hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.eq-hero__anneau-jaune, .eq-hero__anneau-vert { animation: entree-disque 900ms var(--ease-out) 150ms both; }
@media (prefers-reduced-motion: reduce) {
  .eq-hero__disque, .eq-hero__anneau-jaune, .eq-hero__anneau-vert { animation: none; }
}
/* 19. Page Je veux m'engager ---------------------------------------------------------
   Valeurs de la maquette (1440 px) : hero 580 px, disque orange 520 px en (800, 60), photo ronde 460 px,
   anneau jaune 440 px (0,8) en (1130, -180), anneau vert 340 px (0,74) en (-170, 430). */
.eng-titre {
  font-family: var(--f-titre); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.0278em;
}
.eng-titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.096em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }

/* Hero */
.eng-hero { position: relative; background: var(--vert-profond); color: var(--blanc); overflow: hidden; }
.eng-hero__anneau-vert {
  left: -11.8vw; bottom: -13.2vw; width: clamp(110px, 23.6vw, 340px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 74%, var(--vert) 74.6%);
}
.eng-hero__grille { position: relative; display: grid; gap: 40px; padding-top: 28px; padding-bottom: 56px; }
.eng-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.eng-hero .fil { margin: 0; padding-bottom: 26px; }
.eng-hero .surtitre { margin: 0; }
.eng-hero__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -.0278em; }
.eng-hero__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.097em; line-height: 1.04; letter-spacing: 0; color: var(--jaune); }
.eng-hero__chapo { max-width: 580px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
.eng-hero__visuel { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.eng-hero__anneau-jaune {
  left: 63.5%; top: -46.2%; width: 84.6%; aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 80%, var(--jaune) 80.6%);
}
.eng-hero__disque { position: absolute; inset: 0; border-radius: 50%; background: var(--orange); }
.eng-hero__photo { position: absolute; inset: 5.77%; overflow: hidden; border-radius: 50%; background: var(--sable); }
.eng-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.eng-hero__note {
  position: absolute; z-index: 2; left: -5.8%; top: 77.7%; rotate: -6deg; white-space: nowrap;
  font-size: clamp(24px, 2.9vw, 42px); color: var(--jaune);
}
@media (min-width: 900px) {
  .eng-hero__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px;
    padding-block: 0; min-height: clamp(480px, 40.3vw, 640px);
  }
  .eng-hero__texte { max-width: 700px; padding-top: clamp(28px, 3.6vw, 52px); }
  .eng-hero__chapo { font-size: 19px; }
  .eng-hero__visuel { width: min(100%, 36.1vw, 520px); margin: min(4.17vw, 60px) min(6.9vw, 100px) 0 auto; }
}

/* Trois façons : cartes de 416 x 640, rembourrage 36 */
.eng-facons .surtitre { margin-bottom: 22px; }
.eng-facons__liste { display: grid; gap: 20px; margin-top: 56px; }
.eng-facon {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 36px; border-radius: var(--rayon-lg); background: var(--blanc);
  box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .12);
}
.eng-facon__num { font-family: var(--f-accent); font-style: italic; font-size: 72px; line-height: 1; color: var(--orange); }
.eng-facon h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(26px, 2.36vw, 34px); line-height: 1.05; letter-spacing: -.0265em; }
.eng-facon > p { color: var(--texte); font-size: 16px; line-height: 1.65; }
.eng-facon .btn { margin-top: auto; }
.eng-facon__puces { display: flex; flex-wrap: wrap; gap: 8px; }
.eng-facon__puces li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; }
.eng-facon--jaune { background: var(--jaune); box-shadow: none; }
.eng-facon--jaune .eng-facon__num { color: var(--encre); }
.eng-facon--jaune > p { color: rgba(23, 18, 12, .8); }
.eng-facon--profond { background: var(--vert-profond); color: var(--blanc); box-shadow: none; }
.eng-facon--profond .eng-facon__num { color: var(--jaune); }
.eng-facon--profond > p { color: rgba(255, 255, 255, .85); }
@media (min-width: 900px) {
  .eng-facons__liste { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .eng-facon { min-height: 640px; }
}

/* Formulaire : colonne de texte de 440 px, carte de 776 px, écart de 80 px */
.eng-formulaire__grille { display: grid; gap: 40px; align-items: start; }
.eng-formulaire__grille .surtitre { margin-bottom: 22px; }
.eng-formulaire__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(30px, 3.33vw, 48px); line-height: 1.02; letter-spacing: -.0278em; }
.eng-formulaire__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.104em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.eng-formulaire__grille .texte { margin-top: 26px; }
.eng-note { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 22px; border-radius: 20px; background: var(--creme); font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.eng-note__picto { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--blanc); }
.eng-form { display: flex; flex-direction: column; gap: 22px; padding: 28px 22px; border-radius: var(--rayon-lg); background: var(--creme); }
.eng-groupe { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.eng-ligne { display: grid; gap: 22px; }
.eng-label { padding: 0; font-size: 14px; font-weight: 700; }
.eng-label span { color: var(--texte); font-weight: 400; }
.eng-champ {
  width: 100%; height: 54px; padding: 0 22px; border: 1px solid rgba(23, 18, 12, .15); border-radius: 999px;
  background: var(--blanc); color: var(--encre); font: inherit; font-size: 15.5px;
}
.eng-champ::placeholder { color: rgba(92, 82, 71, .6); }
.eng-champ--zone { height: auto; min-height: 140px; padding: 16px 22px; border-radius: 20px; resize: vertical; line-height: 1.5; }
.eng-champ:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.eng-options { display: flex; flex-wrap: wrap; gap: 10px; }
.eng-option {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 18px 10px 12px;
  border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .15);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.eng-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.eng-option__case {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .35); color: transparent;
}
.eng-option__case--rond { border-radius: 50%; }
.eng-option__case .icon { width: 12px; height: 12px; stroke-width: 3.5; }
.eng-option:has(input:checked) { background: var(--vert-profond); color: var(--blanc); box-shadow: inset 0 0 0 1px var(--vert-profond); }
.eng-option:has(input:checked) .eng-option__case { background: var(--jaune); box-shadow: none; color: var(--encre); }
.eng-option:has(input:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 2px; }
.eng-form__bas { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.eng-form__bas p { max-width: 496px; color: var(--texte); font-size: 13.5px; line-height: 1.5; }
.eng-form__bas a { text-decoration: underline; }
.eng-erreur { color: #b3261e; font-size: 13.5px; font-weight: 600; }
.eng-alerte { padding: 14px 18px; border-radius: 16px; background: var(--vert-profond); color: var(--blanc); font-weight: 600; line-height: 1.5; }
.eng-alerte--error { background: #b3261e; }
.eng-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 720px) {
  .eng-form { padding: 44px; }
  .eng-ligne { grid-template-columns: 1fr 1fr; gap: 16px; }
  .eng-form__bas { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
@media (min-width: 900px) { .eng-formulaire__grille { grid-template-columns: minmax(0, 440px) minmax(0, 776px); justify-content: space-between; gap: clamp(40px, 5.6vw, 80px); } }

/* Animations : mêmes entrées que l'accueil */
.eng-hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.eng-hero__photo { animation: entree-photo 900ms var(--ease-out) 120ms both; }
.eng-hero__anneau-jaune, .eng-hero__anneau-vert { animation: entree-disque 900ms var(--ease-out) 150ms both; }
.eng-hero__note { animation: entree 700ms var(--ease-out) 520ms both; }
@media (prefers-reduced-motion: reduce) {
  .eng-hero__disque, .eng-hero__photo, .eng-hero__anneau-jaune, .eng-hero__anneau-vert, .eng-hero__note { animation: none; }
  .eng-option { transition: none; }
}
/* 20. Page Partenaires ---------------------------------------------------------------
   Valeurs de la maquette (1440 px) : hero 620 px, disque crème 540 en (790, 80), photo ronde 480,
   anneau jaune 440 (0,8) en (1150, -180), anneau vert 340 (0,74) en (-170, 470). */
.par-hero { position: relative; background: var(--orange); color: var(--blanc); overflow: hidden; }
.par-hero__anneau-vert {
  left: -11.8vw; bottom: -13.2vw; width: clamp(110px, 23.6vw, 340px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 74%, var(--vert) 74.6%);
}
.par-hero__grille { position: relative; display: grid; gap: 40px; padding-top: 28px; padding-bottom: 56px; }
.par-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.par-hero .fil { margin: 0; padding-bottom: 26px; }
.par-hero .surtitre { margin: 0; }
.par-hero__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(36px, 4.17vw, 60px); line-height: 1.02; letter-spacing: -.0278em; }
.par-hero__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.1em; line-height: 1.04; letter-spacing: 0; color: var(--jaune); }
.par-hero__chapo { max-width: 580px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
.par-hero__cta { padding-top: 8px; }
.par-hero__visuel { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.par-hero__anneau-jaune {
  left: 66.7%; top: -48.1%; width: 81.5%; aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 80%, var(--jaune) 80.6%);
}
.par-hero__disque { position: absolute; inset: 0; border-radius: 50%; background: var(--creme); }
.par-hero__photo { position: absolute; inset: 5.56%; overflow: hidden; border-radius: 50%; background: var(--sable); }
.par-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }   /* portrait : les visages sont en haut */
@media (min-width: 900px) {
  .par-hero__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 40px;
    padding-block: 0; min-height: clamp(520px, 43.1vw, 680px);
  }
  .par-hero__texte { max-width: 680px; padding-top: clamp(28px, 3.6vw, 52px); }
  .par-hero__chapo { font-size: 19px; }
  .par-hero__visuel { width: min(100%, 37.5vw, 540px); margin: min(5.56vw, 80px) min(2.6vw, 38px) 0 auto; }
}

/* Ils nous accompagnent : cartes de 416 x 250, rembourrage 32 */
.par-accompagnent .entete-section { margin-bottom: 56px; }
.par-accompagnent .surtitre { margin-bottom: 22px; }
.par-cartes { display: grid; gap: 20px; }
.par-carte {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 250px; padding: 32px;
  border-radius: var(--rayon-lg); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1);
}
.par-carte__haut { display: flex; align-items: flex-start; justify-content: space-between; }
.par-carte__picto { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: var(--blanc); }
.par-carte__picto .icon { width: 24px; height: 24px; }
.par-carte--vert .par-carte__picto { background: var(--vert); }
.par-carte--profond .par-carte__picto { background: var(--vert-profond); }
.par-carte__etiquette { padding-top: 6px; color: var(--texte); font-size: 11px; font-weight: 700; letter-spacing: .145em; text-transform: uppercase; }
.par-carte h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(26px, 2.2vw, 32px); letter-spacing: -.025em; line-height: 1.12; }
.par-carte p { margin-top: 6px; font-family: var(--f-accent); font-style: italic; font-size: 24px; line-height: 1.2; color: var(--orange-fonce); }
@media (min-width: 900px) { .par-cartes { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* Formes de collaboration : 10 lignes sur 2 colonnes de 624 px, écart 48 px */
.par-formes .entete-section { margin-bottom: 56px; }
.par-formes .surtitre { margin-bottom: 22px; }
.par-formes__titre em { color: var(--jaune); }
.par-formes .eng-titre { color: var(--blanc); }
.par-formes__liste { display: grid; gap: 0 48px; }
.par-formes__liste li {
  display: flex; align-items: center; gap: 22px; padding-block: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.par-formes__num { flex: none; width: 44px; font-family: var(--f-accent); font-style: italic; font-size: 30px; line-height: 1; color: var(--jaune); }
.par-formes__nom { flex: 1; font-family: var(--f-titre); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; line-height: 1.2; }
.par-formes__liste .icon { flex: none; width: 18px; height: 18px; opacity: .75; }
@media (min-width: 900px) { .par-formes__liste { grid-template-columns: 1fr 1fr; } }

/* Formulaire de partenariat : réutilise les contrôles de la page d'engagement */
.par-form__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(28px, 3.19vw, 46px); line-height: 1.02; letter-spacing: -.0278em; }
.par-form__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.109em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.eng-champ--select {
  appearance: none; color: var(--texte); cursor: pointer;
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235C5247' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center;
  padding-right: 52px;
}
.eng-form__bas--droite { justify-content: flex-end; }

/* Animations : mêmes entrées que l'accueil */
.par-hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.par-hero__photo { animation: entree-photo 900ms var(--ease-out) 120ms both; }
.par-hero__anneau-jaune, .par-hero__anneau-vert { animation: entree-disque 900ms var(--ease-out) 150ms both; }
@media (prefers-reduced-motion: reduce) {
  .par-hero__disque, .par-hero__photo, .par-hero__anneau-jaune, .par-hero__anneau-vert { animation: none; }
}
/* 21. Page Contact ---------------------------------------------------------------------
   Valeurs de la maquette (1440 px) : hero 500 px, anneau crème 520 (0,8) en (1070, -130), disque vert profond
   340 en (960, 250), anneau jaune 340 (0,74) en (-170, 360) ; formulaire 804 px + coordonnées 460 px, écart 32 px. */
.con-hero { position: relative; background: var(--orange); color: var(--blanc); overflow: hidden; }
.con-hero__anneau-creme {
  left: 74.3vw; top: -9vw; width: clamp(150px, 36.1vw, 520px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 80%, var(--creme) 80.6%);
}
.con-hero__disque { left: 66.7vw; top: 17.4vw; width: clamp(110px, 23.6vw, 340px); aspect-ratio: 1; background: var(--vert-profond); }
.con-hero__anneau-jaune {
  left: -11.8vw; top: 25vw; width: clamp(110px, 23.6vw, 340px); aspect-ratio: 1;
  background: radial-gradient(circle closest-side, transparent 74%, var(--jaune) 74.6%);
}
.con-hero__note {
  position: absolute; z-index: 2; left: 68.75vw; top: 22.8vw; rotate: -7deg; white-space: nowrap;
  font-size: clamp(22px, 3.33vw, 48px); color: var(--jaune);
}
.con-hero__grille { position: relative; padding-top: 28px; padding-bottom: 40px; }
.con-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 700px; }
.con-hero .fil { margin: 0; padding-bottom: 26px; }
.con-hero .surtitre { margin: 0; }
.con-hero__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(48px, 7.78vw, 112px); line-height: 1.02; letter-spacing: -.0278em; }
.con-hero__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.098em; line-height: 1.04; letter-spacing: 0; color: var(--jaune); }
.con-hero__chapo { max-width: 600px; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
@media (min-width: 900px) {
  .con-hero__grille { padding-top: clamp(28px, 3.6vw, 52px); padding-bottom: 48px; min-height: clamp(460px, 34.7vw, 560px); }
  .con-hero__chapo { font-size: 19px; }
}

/* Formulaire */
.con-corps { padding-block: clamp(48px, 7.2vw, 104px); }
.con-corps__grille { display: grid; gap: 32px; align-items: start; }
.con-form {
  display: flex; flex-direction: column; gap: 22px; padding: 28px 22px;
  border-radius: var(--rayon-lg); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1);
}
.con-form__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(32px, 3.06vw, 44px); line-height: 1.02; letter-spacing: -.0278em; }
.con-form__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.09em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.eng-label__aide { color: var(--texte); font-weight: 400; }
.con-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.con-chip {
  padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--encre);
  box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .2); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.con-chip.est-actif { background: var(--encre); color: var(--blanc); box-shadow: none; }

/* Coordonnées officielles */
.con-coord {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 28px; padding: 32px 28px;
  border-radius: var(--rayon-lg); background: var(--vert-profond); color: var(--blanc);
}
.con-coord > * { position: relative; }
.con-coord .surtitre { margin: 0; }
.con-coord__anneau {
  left: 56.5%; top: -140px; width: 78.3%; aspect-ratio: 1; position: absolute;
  background: radial-gradient(circle closest-side, transparent 76%, rgba(255, 255, 255, .08) 76.6%);
}
.con-coord__liste { display: flex; flex-direction: column; gap: 28px; }
.con-coord__liste li { display: flex; align-items: center; gap: 16px; }
.con-coord__picto { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--jaune); color: var(--encre); }
.con-coord__picto .icon { width: 20px; height: 20px; }
.con-coord__liste li > div { display: flex; flex-direction: column; min-width: 0; }
.con-coord__label { color: rgba(255, 255, 255, .6); font-size: 11px; font-weight: 700; letter-spacing: .145em; text-transform: uppercase; }
.con-coord__liste a, .con-coord__valeur { font-family: var(--f-titre); font-weight: 700; font-size: 21px; line-height: 1.35; overflow-wrap: anywhere; }
.con-coord__suivre { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .2); }
.con-coord__suivre ul { display: flex; flex-wrap: wrap; gap: 8px; }
.con-coord__suivre a { display: inline-block; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); font-size: 14px; font-weight: 600; line-height: 1.2; }
@media (min-width: 720px) {
  .con-form { padding: 40px; }
  .con-coord { padding: 44px; }
}
@media (min-width: 1100px) {
  .con-corps__grille { grid-template-columns: minmax(0, 804px) minmax(0, 460px); justify-content: space-between; }
  .con-form { padding: 48px; }
}
@media (hover: hover) and (pointer: fine) {
  .con-chip:not(.est-actif):hover { background: rgba(23, 18, 12, .06); }
  .con-coord__suivre a:hover { background: var(--blanc); color: var(--vert-profond); box-shadow: none; }
  .con-coord__liste a:hover { color: var(--jaune); }
}

/* Animations : mêmes entrées que l'accueil */
.con-hero__disque { animation: entree-disque 900ms var(--ease-out) both; }
.con-hero__anneau-creme, .con-hero__anneau-jaune { animation: entree-disque 900ms var(--ease-out) 150ms both; }
.con-hero__note { animation: entree 700ms var(--ease-out) 520ms both; }
@media (prefers-reduced-motion: reduce) {
  .con-hero__disque, .con-hero__anneau-creme, .con-hero__anneau-jaune, .con-hero__note { animation: none; }
  .con-chip { transition: none; }
}
/* 22. Pages alimentées par la base : Opportunités, Actualités, Article, Notre impact, Ressources ------
   Valeurs de la maquette (1440 px). Les formes des bandeaux sont des disques ou des anneaux (rayon intérieur). */

/* Bandeau de page : formes positionnées en pixels de maquette, converties en vw (1 vw = 14,4 px) */
.ph { --bg: var(--vert-profond); position: relative; background: var(--bg); color: var(--blanc); overflow: hidden; }
.ph--vert { --bg: var(--vert); }
.ph--orange { --bg: var(--orange); }
/* Chaque forme est placée par son centre : quand la taille plafonne (au-delà de 1440 px)
   ou atteint son minimum, les formes concentriques (disque dans un anneau) le restent. */
.ph-forme {
  --hh: var(--h-forme, var(--w));
  --lw: clamp(60px, calc(var(--w) / 14.4 * 1vw), calc(var(--w) * 1px));
  --lh: clamp(60px, calc(var(--hh) / 14.4 * 1vw), calc(var(--hh) * 1px));
  left: calc((var(--x) + var(--w) / 2) / 14.4 * 1vw - var(--lw) / 2);
  top: calc((var(--y) + var(--hh) / 2) / 14.4 * 1vw - var(--lh) / 2);
  width: var(--lw); height: var(--lh);
  background: radial-gradient(ellipse closest-side, transparent calc(var(--in) * 1%), var(--c) calc(var(--in) * 1% + .6%));
  animation: entree-disque 900ms var(--ease-out) both;
}
.ph-note {
  position: absolute; z-index: 2; left: calc(var(--x) / 14.4 * 1vw); top: calc(var(--y) / 14.4 * 1vw);
  font-size: clamp(20px, calc(var(--fs) / 14.4 * 1vw), calc(var(--fs) * 1px)); rotate: calc(var(--rot) * 1deg);
  white-space: nowrap; color: var(--c); animation: entree 700ms var(--ease-out) 520ms both;
}
.ph-grille { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 48px; }
.ph-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: calc(var(--tw) * 1px); }
.ph .fil { margin: 0; padding-bottom: 26px; }
.ph .surtitre { margin: 0; }
.ph-titre {
  font-family: var(--f-titre); font-weight: 800; line-height: 1.02; letter-spacing: -.0278em;
  font-size: clamp(36px, calc(var(--fs) / 14.4 * 1vw), calc(var(--fs) * 1px));
}
.ph-titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.1em; line-height: 1.04; letter-spacing: 0; color: var(--jaune); }
.ph-chapo { max-width: calc(var(--cw) * 1px); font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
@media (min-width: 900px) {
  .ph-grille { padding-top: clamp(28px, 3.6vw, 52px); padding-bottom: 48px; min-height: clamp(380px, calc(var(--h) / 14.4 * 1vw), calc(var(--h) * 1px)); }
  .ph-chapo { font-size: 19px; }
}

/* Pastilles de filtre, étiquettes colorées, messages */
.lst-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lst-chip {
  display: inline-block; padding: 10px 18px; border-radius: 999px; background: transparent; color: var(--encre);
  box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .2); font-size: 14px; font-weight: 600; line-height: 1.2;
  transition: background-color 160ms ease, color 160ms ease;
}
.lst-chip.est-actif { background: var(--encre); color: var(--blanc); box-shadow: none; }
.lst-tag {
  display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--orange); color: var(--blanc);
  font-size: 11px; font-weight: 700; letter-spacing: .127em; text-transform: uppercase; line-height: 1.2;
}
.lst-tag--jaune, .lst-tag--stages { background: var(--jaune); color: var(--encre); }
.lst-tag--vert, .lst-tag--formations { background: var(--vert); }
.lst-tag--brun, .lst-tag--appels { background: var(--orange-fonce); }
.lst-tag--profond, .lst-tag--emploi { background: var(--vert-profond); }
.lst-tag--encre { background: var(--encre); }
.lst-note, .lst-vide { margin-top: 28px; color: var(--texte); font-size: 14px; line-height: 1.6; }
.lst-vide { font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .lst-chip:not(.est-actif):hover { background: rgba(23, 18, 12, .06); }
}

/* Opportunités */
.opp-categories__liste { display: grid; gap: 28px; }
.opp-categorie { display: grid; gap: 14px; align-content: start; padding-top: 26px; border-top: 2px solid var(--encre); }
.opp-categorie__num { font-family: var(--f-accent); font-style: italic; font-size: 40px; line-height: 1; color: var(--orange); }
.opp-categorie--vert .opp-categorie__num { color: var(--vert); }
.opp-categorie h2 { font-family: var(--f-titre); font-weight: 800; font-size: 24px; line-height: 1.12; letter-spacing: -.5px; }
.opp-categorie p { color: var(--texte); font-size: 15.5px; line-height: 1.65; }
@media (min-width: 720px) { .opp-categories__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .opp-categories__liste { grid-template-columns: repeat(5, 1fr); } }
.opp-moment .lst-chips { margin-block: 40px; }
.opp-cartes { display: grid; gap: 20px; align-items: start; }
.opp-carte { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: var(--rayon); background: var(--creme); }
.opp-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opp-carte__source { color: var(--texte); font-size: 13px; }
.opp-carte h3 { font-family: var(--f-titre); font-weight: 800; font-size: 24px; line-height: 1.14; letter-spacing: -.5px; }
.opp-carte__infos { display: flex; flex-direction: column; gap: 10px; }
.opp-carte__infos li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.opp-carte__infos .icon { width: 16px; height: 16px; color: var(--texte); }
.opp-carte__infos span { flex: none; width: 90px; color: var(--texte); }
.opp-carte__infos strong { font-weight: 600; }
.opp-carte__date { color: var(--orange-fonce); }
@media (min-width: 720px) { .opp-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .opp-cartes { grid-template-columns: repeat(3, 1fr); } }

/* Actualités */
.lst-fil { padding-top: clamp(40px, 5vw, 72px); }
.lst-fil .lst-chips { margin-top: 0; }
.lst-une { margin-top: 48px; overflow: hidden; border-radius: var(--rayon-lg); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1); }
.lst-une a { display: grid; }
.lst-une__image { aspect-ratio: 700 / 460; background: var(--sable); }
.lst-une__image img { width: 100%; height: 100%; object-fit: cover; }
.lst-une__texte { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 28px; }
.lst-une__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lst-une h2 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(26px, 2.64vw, 38px); line-height: 1.08; letter-spacing: -.026em; }
.lst-une__texte > p:not(.lst-une__tags) { color: var(--texte); font-size: 17px; line-height: 1.65; }
@media (min-width: 900px) {
  .lst-une a { grid-template-columns: minmax(0, 700fr) minmax(0, 596fr); }
  .lst-une__image { aspect-ratio: auto; min-height: 460px; }
  .lst-une__texte { padding: 48px; }
}
.lst-grille { display: grid; gap: 40px 24px; margin-top: 48px; }
@media (min-width: 640px) { .lst-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lst-grille { grid-template-columns: repeat(3, 1fr); gap: 48px 31px; } }
.lst-article__lien { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.lst-article__image { aspect-ratio: 411 / 260; overflow: hidden; border-radius: var(--rayon); background: var(--sable); }
.lst-article--haut .lst-article__image { aspect-ratio: 411 / 300; }
.lst-article__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.lst-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--texte); font-size: 14px; }
.lst-article h3 { font-family: var(--f-titre); font-weight: 800; font-size: 24px; line-height: 1.14; letter-spacing: -.5px; }
.lst-article__chapo { color: var(--texte); font-size: 15.5px; line-height: 1.65; }
.lst-article .lien-fleche { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .lst-article:hover .lst-article__image img { transform: scale(1.04); }
  .lst-article:hover .lien-fleche .icon { transform: translateX(3px); }
}
.lst-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.lst-pagination__page {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .2);
  font-size: 15px; font-weight: 700;
}
.lst-pagination__page.est-actif { background: var(--encre); color: var(--blanc); box-shadow: none; }
.lst-pagination .icon { width: 18px; height: 18px; }

/* Article */
.art-hero { position: relative; background: var(--vert-profond); color: var(--blanc); overflow: hidden; }
.art-hero__grille { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 28px; padding-bottom: 48px; }
.art-hero .fil { margin: 0; padding-bottom: 4px; }
.art-hero__tag { margin: 0; }
.art-hero__titre { max-width: 960px; font-family: var(--f-titre); font-weight: 800; font-size: clamp(32px, 3.75vw, 54px); line-height: 1.02; letter-spacing: -.0278em; }
.art-hero__infos { display: flex; flex-wrap: wrap; gap: 8px 24px; color: rgba(255, 255, 255, .85); font-size: 14.5px; }
.art-hero__infos li { display: inline-flex; align-items: center; gap: 8px; }
.art-hero__infos .icon { width: 16px; height: 16px; }
.art-corps { padding-bottom: clamp(56px, 7.2vw, 104px); }
.art-corps__cadre { max-width: 1200px; }
.art-corps__image { margin: clamp(24px, 3vw, 40px) 0 0; }
.art-corps__image img { width: 100%; aspect-ratio: 960 / 540; object-fit: cover; border-radius: var(--rayon-lg); background: var(--sable); }
.art-corps__image figcaption { margin-top: 12px; color: var(--texte); font-size: 13.5px; }
.art-texte { display: flex; flex-direction: column; gap: 28px; max-width: 720px; margin: 40px auto 0; }
.art-texte p { color: var(--texte); font-size: 18px; line-height: 1.65; }
.art-texte .art-chapo { color: var(--encre); font-family: var(--f-titre); font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.4px; }
.art-texte h2 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.7px; }
.art-citation { margin: 0; padding: 8px 0 8px 32px; border-left: 3px solid var(--orange); }
.art-citation p { color: var(--encre); font-family: var(--f-accent); font-style: italic; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; }
.art-citation cite { display: block; margin-top: 14px; color: var(--texte); font-size: 15px; font-style: normal; font-weight: 600; }
.art-points { border-top: 1px solid rgba(23, 18, 12, .12); }
.art-points li { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-bottom: 1px solid rgba(23, 18, 12, .12); font-size: 17px; font-weight: 600; }
.art-points li::before { content: ""; flex: none; width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; background: var(--orange); }
.art-partage { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 26px; border-top: 1px solid var(--encre); }
.art-partage__tags, .art-partage__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.art-partage__tags li, .art-partage__liens a { padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .2); font-size: 14px; font-weight: 600; line-height: 1.2; }
.art-partage__liens strong { margin-right: 4px; font-size: 14px; }
.art-autres .entete-section { margin-bottom: 0; align-items: center; }
.art-autres .lst-grille { margin-top: 40px; }

/* Notre impact */
.imp-titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.0278em; }
.imp-titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.096em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.imp-chiffres .imp-titre { font-size: clamp(36px, 3.9vw, 56px); }
.imp-chiffres .entete-section, .imp-histoires .entete-section { margin-bottom: 56px; }
.imp-cartes { display: grid; gap: 20px; }
.imp-carte {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 200px; padding: 32px; border-radius: var(--rayon-lg); color: var(--blanc);
}
.imp-carte > * { position: relative; }
.imp-carte__anneau {
  right: -60px; top: -60px; width: 220px; aspect-ratio: 1; position: absolute;
  background: radial-gradient(circle closest-side, transparent 72%, rgba(255, 255, 255, .14) 72.6%);
}
.imp-carte__valeur { font-family: var(--f-titre); font-weight: 800; font-size: clamp(64px, 6.67vw, 96px); line-height: .95; letter-spacing: -.0417em; opacity: .55; }
.imp-carte__libelle { font-family: var(--f-titre); font-weight: 800; font-size: 24px; letter-spacing: -.4px; line-height: 1.15; }
.imp-carte--orange { background: var(--orange); }
.imp-carte--vert { background: var(--vert); }
.imp-carte--jaune { background: var(--jaune); color: var(--encre); }
.imp-carte--profond { background: var(--vert-profond); }
.imp-carte--sable { background: var(--sable); color: var(--encre); }
.imp-carte--jaune .imp-carte__anneau, .imp-carte--sable .imp-carte__anneau { background: radial-gradient(circle closest-side, transparent 72%, rgba(23, 18, 12, .08) 72.6%); }
.imp-carte--brun { background: var(--orange-fonce); }
@media (min-width: 720px) { .imp-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .imp-cartes { grid-template-columns: repeat(3, 1fr); } .imp-carte { min-height: 240px; } }
.imp-histoires .lst-grille { margin-top: 0; }
.qs-citation--profond { background: var(--vert-profond); }
.qs-citation--profond .qs-citation__texte { max-width: 22em; }

/* Ressources */
.res-biblio { padding-block: clamp(40px, 5vw, 72px) clamp(64px, 7.8vw, 112px); }
.res-filtres { padding: 8px 32px; border-radius: var(--rayon-lg); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1); }
.res-filtres__ligne { display: flex; flex-direction: column; gap: 8px; padding-block: 20px; }
.res-filtres__ligne + .res-filtres__ligne { border-top: 1px solid rgba(23, 18, 12, .12); }
.res-filtres__label { color: var(--texte); font-size: 12px; font-weight: 700; letter-spacing: .133em; text-transform: uppercase; }
.res-filtres .lst-chips { margin-top: 0; }
@media (min-width: 900px) {
  .res-filtres__ligne { flex-direction: row; align-items: center; gap: 24px; }
  .res-filtres__label { flex: none; width: 70px; }
}
.res-grille { display: grid; gap: 20px; margin-top: 40px; }
.res-carte {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 300px; padding: 26px;
  border-radius: var(--rayon); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1);
}
.res-carte__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.res-carte__picto { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--blanc); }
.res-carte__picto .icon { width: 20px; height: 20px; }
.res-carte__picto--brun { background: var(--orange-fonce); }
.res-carte__picto--vert { background: var(--vert); }
.res-carte__picto--jaune { background: var(--jaune); color: var(--encre); }
.res-carte__picto--profond { background: var(--vert-profond); }
.res-carte__theme { padding: 7px 14px; border-radius: 999px; background: var(--sable); font-size: 11px; font-weight: 700; letter-spacing: .127em; text-transform: uppercase; line-height: 1.2; }
.res-carte__corps { display: flex; flex-direction: column; gap: 10px; }
.res-carte__type { color: var(--orange-fonce); font-size: 11px; font-weight: 700; letter-spacing: .145em; text-transform: uppercase; }
.res-carte h2 { font-family: var(--f-titre); font-weight: 800; font-size: 23px; line-height: 1.14; letter-spacing: -.4px; }
.res-carte__meta { color: var(--texte); font-size: 14px; }
@media (min-width: 640px) { .res-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .res-grille { grid-template-columns: repeat(4, 1fr); } }

/* 26. Questions fréquentes (GEO) ---------------------------------------------------------------------------- */
.faq { padding-block: clamp(56px, 7vw, 104px); background: var(--creme); }
.faq__cadre { display: grid; gap: 36px; }
.faq__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.0278em; }
.faq__tete .surtitre { margin-bottom: 16px; }
.faq__liste { display: grid; gap: 0; }
.faq__item { padding-block: 24px; border-top: 1px solid rgba(23, 18, 12, .15); }
.faq__item:last-child { border-bottom: 1px solid rgba(23, 18, 12, .15); }
.faq__item h3 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; letter-spacing: -.02em; }
.faq__item p { margin-top: 10px; max-width: 70ch; color: var(--texte); font-size: 16px; line-height: 1.65; }
@media (min-width: 900px) { .faq__cadre { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } }

/* 23. Mobile : valeurs de la maquette 390 px ----------------------------------------------
   Écrans « … — Mobile » de la maquette. Ce bloc ne s'applique que sous 720 px : il ne
   change rien à la tablette ni à l'ordinateur. Tailles et interlignes relevés dans Pencil. */
@media (max-width: 719px) {
  /* Communs */
  :root { --section: 56px; }
  .entete-section { gap: 28px; margin-bottom: 28px; }
  .texte { font-size: 16px; line-height: 26px; }
  .ph-titre { font-size: calc(var(--fsm, 40) * 1px); line-height: 1.025; }
  .ph-chapo { font-size: 17px; line-height: 26px; }
  .ph-note { font-size: 23px; }

  /* Sections (accueil, puis pages dans l'ordre du menu) */
  .hero .hero__titre em { font-size: 52px; line-height: 51px; }
  .manifeste .manifeste__repere p.manuscrit { font-size: 26px; line-height: 27px; }
  .manifeste .manifeste__grille h2.manifeste__titre { font-size: 32px; line-height: 36px; }
  .manifeste .manifeste__titre em { font-size: 40px; line-height: 44px; }
  .manifeste .manifeste__colonnes p { font-size: 16px; line-height: 26px; }
  .conviction .conviction__visuel span.pastille { font-size: 20px; }
  .conviction .conviction__texte h2.titre { font-size: 36px; line-height: 37px; }
  .conviction .titre em { font-size: 40px; line-height: 42px; }
  .conviction .preuves span.preuves__num { font-size: 19px; }
  .domaines .entete-section h2.titre { font-size: 36px; line-height: 37px; }
  .domaines .titre em { font-size: 40px; line-height: 42px; }
  .domaines .domaine__haut span.domaine__num { font-size: 28px; }
  .domaines .domaine h3 { font-size: 21px; line-height: 24px; }
  .programmes .entete-section h2.titre { font-size: 36px; line-height: 37px; }
  .programmes .titre em { font-size: 36px; }
  .vision .vision__grille h2.titre { font-size: 32px; line-height: 33px; }
  .vision .titre em { font-size: 36px; line-height: 37px; }
  .rejoindre .rejoindre__grille h2.titre { font-size: 44px; line-height: 45px; }
  .rejoindre .titre em { font-size: 48px; line-height: 50px; }
  .rejoindre .facon__texte strong { font-size: 26px; }
  .fondateur .fondateur__texte h2.titre { font-size: 32px; line-height: 33px; }
  .fondateur .titre em { font-size: 36px; line-height: 37px; }
  .fondateur .fondateur__nom strong { font-size: 21px; }
  .actualites .entete-section h2.titre { font-size: 36px; line-height: 37px; }
  .actualites .titre em { font-size: 40px; line-height: 42px; }
  .actualites .article__corps h3 { font-weight: 700; }
  .partenaires .partenaires__grille h2.titre { font-size: 32px; line-height: 33px; }
  .partenaires .titre em { font-size: 32px; }
  .partenaires .carte-partenaire strong { font-size: 21px; }
  .pied .pied__accroche p.pied__titre { font-size: 40px; line-height: 40px; }
  .pied .pied__logo span { font-size: 21px; }
  .pied .lettre h2 { font-size: 21px; line-height: 24px; }
  .qs-hero .qs-hero__texte h1.qs-hero__titre { font-size: 40px; line-height: 41px; }
  .qs-ambition .qs-ambition__grille h2.qs-ambition__titre { font-size: 32px; line-height: 36px; }
  .qs-ambition .qs-ambition__titre em { font-size: 36px; line-height: 40px; }
  .qs-vm .qs-vision h2 { font-size: 28px; line-height: 29px; }
  .qs-vm .qs-vision em { font-size: 28px; line-height: 29px; }
  .qs-vm .qs-vision p:not(.surtitre) { font-size: 16px; line-height: 26px; }
  .qs-vm .qs-mission h2 { font-size: 23px; }
  .qs-valeurs .entete-section h2.titre { font-size: 36px; line-height: 37px; }
  .qs-valeurs .titre em { font-size: 40px; line-height: 42px; }
  .qs-valeurs .qs-valeur span.qs-valeur__num { font-size: 32px; line-height: 32px; }
  .qs-valeurs .qs-valeur h3 { font-size: 23px; }
  .qs-citation .qs-citation__cadre p.qs-citation__texte { font-size: 36px; line-height: 38px; }
  .qs-citation .qs-citation__texte em { font-size: 36px; line-height: 39px; }
  .eq-hero .eq-hero__texte h1.eq-hero__titre { font-size: 40px; line-height: 41px; }
  .eq-hero .eq-hero__titre em { font-size: 44px; line-height: 46px; }
  .eq-hero .eq-hero__texte p.eq-hero__chapo { font-size: 17px; line-height: 26px; }
  .eq-president .eq-president__nom em { font-size: 48px; }
  .eq-president .eq-president__texte p.eq-president__role { font-size: 17px; line-height: 28px; }
  .eq-bureau h2.eq-titre { font-size: 36px; line-height: 37px; }
  .eq-bureau .eq-titre em { font-size: 36px; }
  .eq-bureau .eq-membre h3 { font-size: 19px; line-height: 22px; }
  .eq-bureau .eq-membre p { font-size: 16px; line-height: 18px; }
  .eq-medias .entete-section h2.eq-titre { font-size: 36px; line-height: 37px; }
  .eq-medias .eq-titre em { font-size: 36px; }
  .eq-medias .eq-media span.eq-media__initiales { font-size: 19px; }
  .eq-medias .eq-media h3 { font-size: 23px; }
  .eq-medias .eq-media p { font-size: 16px; }
  .np-appel--orange .np-appel__cadre h2.np-appel__titre { font-size: 36px; line-height: 37px; }
  .np-appel--orange .np-appel__titre em { font-size: 36px; line-height: 37px; }
  .np-hero .np-hero__texte h1.np-hero__titre { font-size: 40px; line-height: 41px; }
  .np-hero .np-hero__visuel p.manuscrit { font-size: 23px; }
  .np-methode .entete-section h2.titre { font-size: 36px; line-height: 37px; }
  .np-methode .titre em { font-size: 36px; }
  .np-methode .np-etape__haut span.np-etape__num { font-size: 40px; line-height: 40px; }
  .np-methode .np-etape h3 { font-size: 23px; }
  .np-programmes .np-programme__texte span.np-programme__num { font-size: 26px; }
  .np-programmes .np-programme__texte p.np-programme__accroche { font-size: 26px; line-height: 30px; }
  .np-programmes .np-avenir strong { font-size: 21px; }
  .np-appel .np-appel__cadre h2.np-appel__titre { font-size: 36px; line-height: 37px; }
  .np-appel .np-appel__titre em { font-size: 36px; line-height: 37px; }
  .gd-hero .gd-hero__titre em { font-size: 52px; line-height: 54px; }
  .gd-hero .gd-hero__texte p.gd-hero__chapo { font-size: 17px; line-height: 26px; }
  .gd-hero .gd-hero__visuel p.manuscrit { font-size: 23px; }
  .gd-reperes .lead-reperes__liste strong { font-size: 21px; }
  .gd-reperes .lead-reperes__liste strong.gd-reperes__accent { font-size: 21px; }
  .gd-volets .gd-volets__grille h2.titre { font-size: 36px; line-height: 37px; }
  .gd-volets .titre em { font-size: 36px; }
  .gd-volets .gd-volet h3 { font-size: 19px; }
  .gd-apprentissages h2.titre { font-size: 36px; line-height: 37px; }
  .gd-apprentissages .titre em { font-size: 36px; }
  .gd-apprentissages .gd-appr span.gd-appr__num { font-size: 32px; line-height: 32px; }
  .gd-apprentissages .gd-appr h3 { font-size: 23px; line-height: 26px; }
  .gd-pedagogie .gd-pedagogie__grille p.gd-pedagogie__chiffre { line-height: 91px; }
  .gd-pedagogie .gd-pedagogie__grille p.gd-pedagogie__suite { font-size: 40px; line-height: 40px; }
  .gd-pedagogie .gd-reine h3 { font-size: 32px; line-height: 33px; }
  .gd-pedagogie .gd-reine em { font-size: 36px; line-height: 37px; }
  .gd-pedagogie .gd-reine p { font-size: 16px; }
  .gd-public .gd-public__grille h2.titre { font-size: 36px; line-height: 37px; }
  .gd-public .titre em { font-size: 36px; }
  .gd-public .gd-suivi p:not(.surtitre) { font-size: 16px; line-height: 26px; }
  .gd-partenaires .gd-partenaires__liste li { font-size: 21px; }
  .gd-inscriptions .gd-inscriptions__grille h2.gd-inscriptions__titre { font-size: 36px; line-height: 37px; }
  .gd-inscriptions .gd-inscriptions__titre em { font-size: 36px; }
  .gd-inscriptions .gd-inscriptions__infos dd { font-size: 17px; }
  .lead-hero .lead-hero__texte h1.lead-hero__titre { line-height: 41px; }
  .lead-reperes .lead-reperes__liste strong { font-size: 21px; }
  .lead-vision .lead-vision__grille h2.lead-vision__titre { font-size: 28px; line-height: 32px; }
  .lead-vision .lead-vision__titre em { font-size: 32px; line-height: 35px; }
  .lead-vision .lead-mission p.lead-mission__intro { font-size: 19px; line-height: 23px; }
  .lead-reseau .entete-section h2.titre { font-size: 36px; line-height: 37px; }
  .lead-reseau .titre em { font-size: 36px; }
  .lead-reseau .lead-etape__haut span.lead-etape__num { font-size: 36px; line-height: 36px; }
  .lead-reseau .lead-etape h3 { font-size: 21px; }
  .lead-reseau .lead-etape p { line-height: 25px; }
  .lead-pourquoi .lead-pourquoi__grille h2.titre { font-size: 32px; line-height: 35px; }
  .lead-pourquoi .titre em { font-size: 28px; line-height: 31px; }
  .lead-principes h2.titre { font-size: 36px; line-height: 37px; }
  .lead-principes .titre em { font-size: 36px; }
  .lead-principes .lead-principe span.lead-principe__num { font-size: 28px; line-height: 28px; }
  .lead-principes .lead-principe h3 { font-size: 21px; line-height: 24px; }
  .lead-principes .lead-principe p { line-height: 26px; }
  .lead-theme p.lead-theme__titre { font-size: 40px; line-height: 41px; }
  .lead-theme .lead-theme__titre em { font-size: 44px; line-height: 46px; }
  .lead-lancement .lead-lancement__grille h2.titre { font-size: 36px; line-height: 37px; }
  .lead-lancement .titre em { font-size: 36px; }
  .gd-hero--vert .gd-hero__titre em { font-size: 52px; line-height: 54px; }
  .gd-hero--vert .gd-hero__texte p.gd-hero__chapo { font-size: 17px; line-height: 26px; }
  .gd-hero--vert .gd-hero__visuel p.manuscrit { font-size: 23px; }
  .el-approche h2.el-approche__titre { font-size: 44px; line-height: 45px; }
  .el-approche .el-approche__titre em { font-size: 44px; line-height: 46px; }
  .el-approche p.el-approche__intro { font-size: 17px; }
  .el-objectifs .el-objectifs__grille h2.el-objectifs__titre { font-size: 32px; line-height: 33px; }
  .el-objectifs .el-objectifs__titre em { font-size: 32px; line-height: 33px; }
  .el-objectifs .el-objectif--vert span.el-objectifs__num { font-size: 28px; line-height: 28px; }
  .el-objectifs .el-objectif--vert span { font-size: 21px; line-height: 24px; }
  .el-objectifs .el-objectif--orange span.el-objectifs__num { font-size: 28px; line-height: 28px; }
  .el-objectifs .el-objectif--orange span { font-size: 21px; line-height: 24px; }
  .eng-hero .eng-hero__texte h1.eng-hero__titre { font-size: 44px; line-height: 45px; }
  .eng-hero .eng-hero__texte p.eng-hero__chapo { font-size: 17px; line-height: 26px; }
  .eng-hero .eng-hero__visuel p.manuscrit { font-size: 23px; }
  .eng-facons h2.eng-titre { font-size: 36px; line-height: 37px; }
  .eng-facons .eng-titre em { font-size: 36px; }
  .eng-facons .eng-facon span.eng-facon__num { font-size: 44px; line-height: 44px; }
  .eng-formulaire .eng-formulaire__grille h2.eng-formulaire__titre { font-size: 32px; line-height: 33px; }
  .eng-formulaire .eng-formulaire__titre em { font-size: 36px; line-height: 37px; }
  .par-hero .par-hero__texte h1.par-hero__titre { font-size: 40px; line-height: 41px; }
  .par-hero .par-hero__texte p.par-hero__chapo { font-size: 17px; line-height: 26px; }
  .par-accompagnent .entete-section h2.eng-titre { font-size: 36px; line-height: 37px; }
  .par-accompagnent .eng-titre em { font-size: 36px; }
  .par-accompagnent .par-carte p { font-size: 21px; }
  .par-formes .entete-section h2.eng-titre { font-size: 36px; line-height: 37px; }
  .par-formes .eng-titre em { font-size: 36px; }
  .par-formes .par-formes__liste span.par-formes__num { font-size: 23px; }
  .par-formes .par-formes__liste span.par-formes__nom { font-size: 21px; }
  .eng-formulaire .eng-formulaire__grille h2.par-form__titre { font-size: 32px; line-height: 33px; }
  .eng-formulaire .par-form__titre em { font-size: 32px; }
  .opp-categories .opp-categorie span.opp-categorie__num { font-size: 28px; line-height: 28px; }
  .opp-categories .opp-categorie h2 { font-size: 21px; line-height: 24px; }
  .opp-moment h2.eng-titre { font-size: 36px; line-height: 37px; }
  .opp-moment .eng-titre em { font-size: 36px; }
  .opp-moment .opp-carte h3 { font-size: 21px; line-height: 24px; }
  .lst-fil .lst-une__texte h2 { font-size: 28px; line-height: 30px; }
  .lst-fil .lst-une__texte p { font-size: 16px; line-height: 26px; }
  .lst-fil .lst-article__lien h3 { font-size: 21px; line-height: 24px; }
  .art-hero .art-hero__grille h1.art-hero__titre { font-size: 36px; line-height: 37px; }
  .art-corps .art-texte > p:not(.art-chapo) { font-size: 16px; line-height: 26px; }
  .art-corps .art-texte h2 { font-size: 26px; }
  .art-corps .art-points li { font-size: 16px; }
  .art-autres .entete-section h2.eng-titre { font-size: 36px; line-height: 37px; }
  .art-autres .eng-titre em { font-size: 36px; }
  .imp-chiffres .imp-titre em { font-size: 40px; }
  .imp-chiffres .imp-carte p.imp-carte__valeur { font-size: 44px; line-height: 42px; }
  .imp-chiffres .imp-carte p.imp-carte__libelle { font-size: 17px; line-height: 20px; }
  .imp-histoires .entete-section h2.imp-titre { font-size: 36px; line-height: 37px; }
  .imp-histoires .imp-titre em { font-size: 36px; }
  .imp-histoires .lst-article__lien h3 { font-size: 21px; line-height: 24px; }
  .qs-citation--profond .qs-citation__cadre p.qs-citation__texte { font-size: 36px; line-height: 38px; }
  .qs-citation--profond .qs-citation__texte em { font-size: 36px; line-height: 39px; }
  .res-biblio .res-carte__corps h2 { font-size: 19px; line-height: 22px; }
  .con-hero .con-hero__texte h1.con-hero__titre { font-size: 52px; line-height: 53px; }
  .con-hero .con-hero__titre em { font-size: 52px; }
  .con-hero .con-hero__texte p.con-hero__chapo { font-size: 17px; line-height: 26px; }
  .con-hero p.manuscrit { font-size: 23px; }
  .con-corps .con-form__titre em { font-size: 32px; line-height: 33px; }
  .con-corps .con-coord__liste a { font-size: 17px; line-height: 23px; }
  .con-corps .con-coord__liste span.con-coord__valeur { font-size: 19px; line-height: 26px; }

  /* Équipe : hero à un seul anneau, bureau en 2 x 2, médias empilés */
  .eq-hero__grille { padding-block: 28px 24px; }
  .eq-hero__disque, .eq-hero__anneau-vert { display: none; }
  .eq-hero__anneau-jaune { left: 250px; top: -110px; width: 240px; background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .15) 78.6%); }
  .eq-president__grille { gap: 28px; }
  .eq-president__visuel { width: 341px; max-width: 100%; aspect-ratio: 341 / 423; margin-inline: 0; }
  .eq-president__arche { width: 94.1%; }
  .eq-president__photo { left: 5.9%; top: 6.1%; width: 94.1%; height: 93.9%; }
  .eq-president__texte { gap: 24px; padding-bottom: 56px; }
  .eq-membres { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; margin-top: 28px; }
  .eq-membre__visuel { aspect-ratio: 169 / 204; }
  .eq-membre__fond, .eq-membre__photo { border-radius: 999px 999px 16px 16px; }
  .eq-membre__fond { height: 92.2%; }
  .eq-membre__initiales { font-size: 44px; }
  .eq-bureau .eq-membre h3 { margin-top: 10px; }
  .eq-bureau .eq-membre p { margin-top: 10px; }
  .eq-media { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .np-appel--orange .np-appel__cadre { gap: 28px; }

  /* Pied de page */
  .pied { padding-block: 56px 24px; }
  .pied__accroche { gap: 20px; padding-bottom: 32px; }
  .pied__titre em { font-size: 40px; line-height: 42px; }
  .pied__colonnes { gap: 28px; padding-block: 32px; }
  .pied__contact { gap: 8px; padding-top: 8px; }
  .pied__contact li { line-height: 19px; }
  .pied__liens h2 { line-height: 15px; }
  .pied__liens ul { gap: 14px; }
  .pied__liens li { line-height: 20px; }
  .lettre { padding: 28px; }
  .pied__bas { gap: 20px; }
  .pied__bas p, .pied__reseaux a, .pied__mentions li { line-height: 17px; }
  .pied__mentions { flex-direction: column; gap: 22px; }

  /* Bandeau de page (Opportunités, Actualités, Notre impact, Ressources) : un seul anneau,
     la note manuscrite passe sous le texte */
  .ph { display: flex; flex-direction: column; padding-bottom: 24px; }
  .ph-forme { display: none; }
  .ph::before {
    content: ""; position: absolute; left: 250px; top: -110px; width: 240px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .15) 78.6%);
  }
  .ph-grille { order: 1; padding-block: 28px 0; }
  .ph-note { order: 2; position: static; margin: 26px var(--marge) 0; rotate: 0deg; font-size: 23px; line-height: 29px; }

  /* Notre impact : indicateurs en 2 colonnes */
  .imp-chiffres .entete-section, .imp-histoires .entete-section { margin-bottom: 28px; }
  .imp-cartes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .imp-carte { min-height: 150px; gap: 12px; padding: 18px; border-radius: 28px; }
  .imp-carte__anneau { display: none; }

  /* Cartes d'article (Actualités, Notre impact, À lire aussi) */
  .lst-grille { gap: 28px; }
  .lst-article__lien { gap: 18px; }
  .lst-article__image { aspect-ratio: 350 / 260; }
  .lst-article--haut .lst-article__image { aspect-ratio: 350 / 300; }
  .lst-article__meta { min-height: 28px; }
  .lst-article .lien-fleche { line-height: 19px; }

  /* Citation (Qui sommes-nous ?, Notre impact) */
  .qs-citation { padding-block: 56px; }
  .qs-citation__texte em { margin-top: 0; }

  /* Fondateur (accueil, Qui sommes-nous ?) : portrait au-dessus du texte */
  .fondateur__grille { gap: 28px; }
  .fondateur__portrait { order: 0; width: 341px; max-width: 100%; aspect-ratio: 341 / 423; margin-inline: 0; }
  .fondateur__arche { inset: 0 5.9% 0 0; }
  .fondateur__portrait img { left: 5.9%; top: 6.1%; width: 94.1%; height: 93.9%; }
  .fondateur__texte { padding-bottom: 56px; }
  .fondateur__texte .surtitre { margin-bottom: 26px; }
  .fondateur__nom { margin-top: 26px; padding-top: 10px; line-height: 20px; }
  .fondateur__nom strong { margin-bottom: 4px; line-height: 25px; }
  .fondateur__texte .btn { margin-top: 32px; }

  /* Qui sommes-nous ? : valeurs en lignes (numéro à gauche), un filet par groupe de trois */
  .qs-valeurs__liste { gap: 28px; padding-bottom: 24px; }
  .qs-valeur { grid-template-columns: auto 1fr; gap: 10px 20px; padding-top: 0; border-top: 0; }
  .qs-valeur:nth-child(3n + 1) { padding-top: 24px; border-top: 2px solid var(--encre); }
  .qs-valeur__num { grid-row: span 2; }
  .qs-valeurs .qs-valeur h3 { line-height: 28px; }
  .qs-vision, .qs-mission { padding: 24px; }
  .qs-vision .surtitre, .qs-mission .surtitre { margin-bottom: 24px; }
  .qs-vm .qs-mission h2 { line-height: 27.6px; }
  .qs-mission__intro { margin-top: 24px; line-height: 14px; }
  .qs-mission__liste { margin-top: 24px; }
  .qs-vision h2 em { margin-top: 0; }

  /* Nos programmes */
  .np-hero__grille { gap: 26px; padding-block: 28px 24px; }
  .np-hero__visuel { width: auto; aspect-ratio: auto; margin: 0; }
  .np-hero__disque, .np-hero__rond { display: none; }
  .np-hero__note { position: static; translate: none; rotate: 0deg; font-size: 23px; line-height: 29px; }
  .np-hero__anneau { top: -110px; left: 250px; right: auto; width: 240px; border-width: 26px; border-color: rgba(255, 255, 255, .15); }
  .np-etapes { gap: 24px; }
  .np-etape { min-height: 0; gap: 22px; padding: 32px; }
  .np-etape h3 { line-height: 1.1; }
  .np-etape__haut .icon { width: 24px; height: 24px; }
  .np-programme { gap: 28px; padding-block: 0; }
  .np-programme + .np-programme { margin-top: 32px; border-top: 0; }
  .np-programme:nth-of-type(even) .np-programme__visuel { order: 2; }
  .np-programme__visuel { aspect-ratio: 350 / 257; max-width: none; }
  .np-programme__forme { top: -9%; left: -6.6%; width: 50%; }
  .np-programme--jaune .np-programme__forme { top: -9%; left: 56.6%; width: 50%; }
  .np-programme__photo { position: absolute; top: 4.7%; left: 6.6%; width: 93.4%; height: 95.3%; border-radius: 123px 16px 16px 16px; }
  .np-programme:nth-of-type(even) .np-programme__photo { left: 0; border-radius: 16px 123px 16px 16px; }
  .np-programme__texte { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
  .np-programme__texte > h2, .np-programme__texte > p { flex: 0 0 100%; }
  .np-programme__num { line-height: 34px; }
  .np-programme__tag { margin-top: 0; }
  .np-programme h2 { margin-top: 20px; line-height: 36px; }
  .np-programme__accroche, .np-programme .texte { margin-top: 20px; }
  .np-avenir { gap: 20px; margin-top: 32px; padding: 30px 24px; }
  .np-programmes { overflow-x: clip; }

  /* Je veux m'engager : note puis photo rectangulaire sous le texte, un seul anneau */
  .eng-hero::before, .par-hero::before {
    content: ""; position: absolute; left: 250px; top: -110px; width: 240px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .15) 78.6%);
  }
  .eng-hero__anneau-vert, .eng-hero__anneau-jaune, .eng-hero__disque { display: none; }
  .eng-hero__grille { gap: 26px; padding-block: 28px 24px; }
  .eng-hero__visuel { display: flex; flex-direction: column; gap: 26px; width: auto; aspect-ratio: auto; margin: 0; }
  .eng-hero__note { position: static; order: -1; rotate: 0deg; font-size: 23px; line-height: 29px; }
  .eng-hero__photo { position: relative; inset: auto; height: 280px; border-radius: 28px; }
  .eng-facons__liste { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .eng-facon { padding: 24px; }
  .eng-facon .btn { margin-top: 6px; }
  .eng-facon__puces li { padding: 5px 9px; font-size: 12.5px; line-height: 16px; }
  .eng-formulaire__grille { gap: 28px; }
  .eng-formulaire__grille .surtitre { margin-bottom: 24px; }
  .eng-formulaire__grille .texte { margin-top: 24px; }
  .eng-form { gap: 22px; padding: 24px; }
  .eng-groupe { gap: 8px; }
  .eng-ligne { gap: 16px; }
  .eng-options { gap: 8px; }

  /* Partenaires : photo rectangulaire sous le texte, cartes compactes */
  .par-hero__anneau-vert, .par-hero__anneau-jaune, .par-hero__disque { display: none; }
  .par-hero__grille { gap: 26px; padding-block: 28px 24px; }
  .par-hero__visuel { width: auto; height: 280px; aspect-ratio: auto; margin: 0; }
  .par-hero__photo { inset: 0; border-radius: 28px; }
  .par-cartes { gap: 24px; }
  .par-carte { gap: 22px; min-height: 0; }

  /* Pages programme (Go du Digital, Experience Lab) : hero, repères, sections */
  .gd-hero::before {
    content: ""; position: absolute; left: 250px; top: -110px; width: 240px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .15) 78.6%);
  }
  .gd-hero__jaune, .gd-hero__disque, .gd-hero__pastille { display: none; }
  .gd-hero__grille { gap: 26px; padding-block: 28px 24px; }
  .gd-hero__visuel { display: flex; flex-direction: column; gap: 26px; width: auto; aspect-ratio: auto; margin: 0; }
  .gd-hero__note { position: static; order: -1; rotate: 0deg; font-size: 23px; line-height: 29px; }
  .gd-hero__photo { position: relative; inset: auto; height: 280px; border-radius: 28px; }
  .lead-reperes { padding-block: 28px; }
  .lead-reperes__liste li { gap: 8px; padding-left: 24px; }
  .lead-reperes__liste span { line-height: 14px; }
  .lead-reperes__liste strong { line-height: 1.1; }
  .gd-volets__grille { gap: 28px; }
  .gd-volets .surtitre { margin-bottom: 24px; }
  .gd-volets__liste { gap: 12px; }
  .gd-volet { padding: 18px; }
  .gd-apprentissages__liste { margin-top: 24px; }
  .gd-appr { gap: 24px; padding-block: 28px; }
  .gd-pedagogie__grille, .gd-public__grille, .gd-inscriptions__grille { gap: 28px; }
  .gd-pedagogie .surtitre { margin-bottom: 8px; }
  .gd-pedagogie__grille .texte { margin-top: 22px; }
  .gd-reine { padding: 24px; }
  .gd-reine__label { margin-top: 20px; line-height: 14px; }
  .gd-reine h3 { margin-top: 20px; }
  .gd-reine > p:last-child { margin-top: 20px; }
  .gd-public .qs-chips { gap: 10px; margin-top: 24px; }
  .gd-public .qs-chips li { padding-block: 8px; }
  .gd-suivi { padding: 24px; }
  .gd-suivi .surtitre { margin-bottom: 18px; }
  .gd-suivi p:not(.surtitre) { margin-top: 18px; }
  .gd-partenaires { padding-block: 48px; }
  .gd-partenaires__liste { margin-top: 32px; }
  .gd-partenaires__liste li { min-height: 130px; }
  .gd-inscriptions { padding-block: 56px; }
  .gd-inscriptions__infos { padding: 8px 24px; }

  /* Experience Lab */
  .el-approche__intro { line-height: 21px; }
  .el-questions { gap: 16px; margin-top: 28px; }
  .el-question { gap: 22px; min-height: 0; }
  .el-question__signe { font-size: 48px; line-height: .9; }

  /* UCIV Leadership */
  .lead-vision__grille, .lead-lancement__grille { gap: 28px; }
  .lead-vision .surtitre { margin-bottom: 14px; }
  .lead-vision__titre em { margin-top: 14px; }
  .lead-mission { padding: 24px; }
  .lead-mission__label { margin-bottom: 6px; }
  .lead-mission__intro { padding-block: 14px 10px; }
  .lead-mission__liste { margin-top: 6px; }
  .lead-mission__liste li { gap: 12px; margin-top: 6px; line-height: 20px; }
  .lead-mission__label { line-height: 16px; }
  .lead-etape { gap: 8px; min-height: 0; }
  .lead-etape__haut { margin-bottom: 14px; }
  .lead-theme { padding-block: 56px; }
  .lead-lancement .surtitre { margin-bottom: 24px; }
  .lead-infos { gap: 8px; margin: 24px 0 34px; }
  .lead-infos li { padding-block: 8px; }
  .lead-lancement__visuel { aspect-ratio: 350 / 283; max-width: 350px; }
  .lead-lancement__visuel img { border-radius: 16px; }
  .lead-lancement__premiere { top: 5.3%; width: 52.57%; aspect-ratio: 184 / 240; }
  .lead-lancement__seconde { left: 44.29%; top: 2.47%; width: 55.71%; aspect-ratio: 195 / 258; }
  .lead-lancement__disque { display: none; }

  /* Ressources */
  .res-biblio { padding-block: 40px 56px; }
  .res-filtres { padding: 8px 24px; }
  .res-filtres__ligne { gap: 24px; }
  .res-filtres__label { line-height: 15px; }
  .res-grille { gap: 20px; margin-top: 24px; }
  .res-carte { gap: 22px; min-height: 0; padding: 26px; }
  .res-carte__haut { align-items: center; }
  .res-carte__picto { width: 52px; height: 52px; }
  .res-carte__picto .icon { width: 22px; height: 22px; }
  .res-carte__type { line-height: 14px; }
  .res-carte__meta { line-height: 18px; }
  .res-carte > .lien-fleche { margin-top: -6px; line-height: 19px; }

  /* Actualités : article à la une */
  .lst-fil { padding-top: 40px; }
  .lst-une { margin-top: 28px; }
  .lst-une__image { height: 300px; aspect-ratio: auto; }
  .lst-une__texte { gap: 20px; padding: 24px; }
  .lst-une__texte .btn { margin-top: 6px; }
  .lst-fil .lst-grille { margin-top: 28px; }

  /* Article */
  .art-hero::before {
    content: ""; position: absolute; left: 250px; top: -110px; width: 240px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .15) 78.6%);
  }
  .art-hero .forme { display: none; }
  .art-hero__grille { padding-bottom: 24px; }
  .art-hero .fil { padding-bottom: 14px; }
  .art-hero__infos { flex-direction: column; gap: 22px; }
  .art-hero__infos li { line-height: 18px; }
  .art-corps__image { margin-top: 0; }
  .art-corps__image img { height: 300px; aspect-ratio: auto; }
  .art-texte { gap: 26px; margin-top: 24px; }
  .art-citation { padding: 8px 0 8px 24px; }

  /* Opportunités */
  .opp-moment .lst-chips { margin-block: 28px 24px; }

  /* Contact : un seul anneau, note sous le texte */
  .con-hero { display: flex; flex-direction: column; padding-bottom: 24px; }
  .con-hero::before {
    content: ""; position: absolute; left: 250px; top: -110px; width: 240px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle closest-side, transparent 78%, rgba(255, 255, 255, .15) 78.6%);
  }
  .con-hero__anneau-creme, .con-hero__disque, .con-hero__anneau-jaune { display: none; }
  .con-hero > .conteneur { order: 1; padding-bottom: 0; }
  .con-hero__note { order: 2; position: static; margin: 26px var(--marge) 0; rotate: 0deg; font-size: 23px; line-height: 29px; }
  .con-corps { padding-block: 56px; }
  .con-form { padding: 24px; }
  .con-coord { padding: 24px; }
  .con-coord__anneau { left: auto; right: -40px; top: -70px; width: 180px; }
  .opp-carte__infos { gap: 0; }
  .opp-carte__infos li { padding-block: 10px; border-top: 1px solid rgba(23, 18, 12, .12); line-height: 18px; }
  .opp-carte__infos span { flex: none; width: 100px; }
  .opp-carte .lien-fleche { line-height: 19px; }

  /* Accueil : vision & chiffres, partenaires */
  .vision__anneau { left: -110px; top: -120px; width: 260px; height: 260px; border-width: 28px; }
  .vision__grille, .partenaires__grille { gap: 28px; }
  .vision .surtitre, .partenaires .surtitre { margin-bottom: 26px; }
  .vision .titre + .texte, .partenaires .titre + .texte { margin-top: 26px; }
  .indicateurs > div { padding-block: 22px 26px; }
  .indicateurs dd { line-height: 40px; }
  .indicateurs dt { margin-top: 2px; line-height: 20px; }
  .indicateurs__note { margin-top: 0; line-height: 18px; }
  .carte-partenaire { min-height: 170px; padding: 26px; }

  /* UCIV Leadership : pas de logo sur la photo du hero (maquette mobile) */
  .lead-hero__logo { display: none; }
}

/* 24. Pages légales et page 404 ----------------------------------------------------------
   Écrans « Mentions légales », « Politique de confidentialité », « Conditions d'utilisation »
   et « Page introuvable (404) » de la maquette. Valeurs mobiles (390 px) en base,
   valeurs ordinateur (1440 px) à partir de 900 px. */

/* Pastille « Dernière mise à jour » du bandeau */
.ph-maj {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: var(--blanc); font-size: 13px; font-weight: 600; line-height: 1.2;
}
.ph-maj .icon { width: 14px; height: 14px; color: var(--jaune); }
.ph-maj__long { display: none; }

/* Texte à compléter par UCIV (entre crochets) */
.a-completer { color: var(--orange-fonce); }

/* Corps : sommaire, encart « Une question ? », sections */
.leg-corps { padding-block: 40px 56px; }
.leg-grille { display: flex; flex-direction: column; gap: 40px; }
.leg-cote { display: contents; }
.leg-sommaire { order: 1; padding: 20px 22px; border-radius: 20px; background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1); }
.leg-sommaire summary {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; cursor: pointer; list-style: none;
  color: var(--texte); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.leg-sommaire summary::-webkit-details-marker { display: none; }
.leg-sommaire summary .icon { width: 18px; height: 18px; color: var(--encre); transition: rotate 200ms var(--ease-out); }
.leg-sommaire[open] summary .icon { rotate: 180deg; }
.leg-sommaire ol { display: grid; gap: 4px; }
.leg-sommaire a { display: flex; align-items: center; gap: 12px; padding-block: 7px; font-size: 15px; font-weight: 500; line-height: 1.3; transition: color 150ms ease; }
.leg-sommaire__num { flex: none; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 18px; color: var(--texte); }
.leg-sommaire a.est-actif { color: var(--orange-fonce); font-weight: 700; }
.leg-sommaire a.est-actif .leg-sommaire__num { color: var(--orange); }
.leg-question {
  order: 3; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 24px; border-radius: 24px; background: var(--vert-profond); color: rgba(255, 255, 255, .85); font-size: 15.5px; line-height: 1.6;
}
.leg-question__anneau { left: 230px; top: -60px; width: 160px; aspect-ratio: 1; background: radial-gradient(circle closest-side, transparent 76%, rgba(255, 255, 255, .08) 76.6%); }
.leg-question__titre { position: relative; font-family: var(--f-titre); font-weight: 800; font-size: 23px; line-height: 1.2; color: var(--blanc); }
.leg-question .lien-fleche { padding-top: 6px; color: var(--jaune); }
.leg-texte { order: 2; display: flex; flex-direction: column; gap: 40px; }
.leg-section { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 96px; }
.leg-section + .leg-section { padding-top: 40px; border-top: 1px solid rgba(23, 18, 12, .12); }
.leg-section h2 { display: flex; flex-direction: column; gap: 8px; font-family: var(--f-titre); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -.5px; }
.leg-section__num { font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: 0; color: var(--orange); }
.leg-section > p:not(.leg-encadre) { color: var(--texte); font-size: 16px; line-height: 26px; }
.leg-fiche { padding: 4px 20px; border-radius: 20px; background: var(--blanc); }
.leg-fiche > div { display: flex; flex-direction: column; gap: 4px; padding-block: 14px; }
.leg-fiche > div + div { border-top: 1px solid rgba(23, 18, 12, .08); }
.leg-fiche dt { font-size: 13px; font-weight: 700; line-height: 1.25; }
.leg-fiche dd { color: var(--texte); font-size: 15.5px; line-height: 1.5; }
.leg-liste { display: grid; gap: 12px; }
.leg-liste li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; }
.leg-liste__puce { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: var(--blanc); }
.leg-liste__puce .icon { width: 13px; height: 13px; stroke-width: 3; }
.leg-encadre { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: var(--sable); font-size: 15px; font-weight: 600; line-height: 1.5; }
.leg-encadre__picto { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--vert); color: var(--blanc); }
.leg-encadre__picto .icon { width: 18px; height: 18px; }

/* Autres documents */
.leg-documents .surtitre { margin-bottom: 22px; }
.leg-documents__titre { font-family: var(--f-titre); font-weight: 800; font-size: 36px; line-height: 1.02; letter-spacing: -1px; }
.leg-documents__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.11em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.leg-cartes { display: grid; gap: 16px; margin-top: 28px; }
.leg-carte { border-radius: 24px; background: var(--creme); }
.leg-carte, .leg-carte__lien { display: flex; flex-direction: column; gap: 16px; }
.leg-carte--actuel, .leg-carte__lien { padding: 24px; }
.leg-carte--actuel { background: var(--vert-profond); color: var(--blanc); }
.leg-carte__haut { display: flex; align-items: center; justify-content: space-between; }
.leg-carte__picto { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--blanc); }
.leg-carte__picto .icon { width: 22px; height: 22px; }
.leg-carte--actuel .leg-carte__picto { background: var(--jaune); color: var(--vert-profond); }
.leg-carte__tag { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--jaune); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.leg-carte h3 { font-family: var(--f-titre); font-weight: 800; font-size: 23px; line-height: 1.1; letter-spacing: -.4px; }
.leg-carte p { color: var(--texte); font-size: 15.5px; line-height: 1.6; }
.leg-carte--actuel p { color: rgba(255, 255, 255, .8); }

@media (min-width: 900px) {
  .ph-maj { font-size: 13.5px; padding-inline: 16px; }
  .ph--legal .ph-grille { padding-bottom: 30px; }
  .ph-maj__long { display: inline; }
  .ph-maj__court { display: none; }
  .ph-maj .icon { width: 15px; height: 15px; }
  .leg-corps { padding-block: 96px 112px; }
  .leg-grille { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 80px; align-items: start; }
  .leg-cote { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 20px; }
  .leg-sommaire { padding: 28px; border-radius: 24px; }
  .leg-sommaire summary { padding-bottom: 14px; pointer-events: none; }
  .leg-sommaire summary .icon { display: none; }
  .leg-sommaire ol { gap: 6px; }
  .leg-sommaire a { padding-block: 8px; font-size: 15.5px; }
  .leg-sommaire__num { font-size: 20px; }
  .leg-question { padding: 28px; }
  .leg-question__anneau { left: 220px; }
  .leg-question__titre { font-size: 24px; }
  .leg-texte { gap: 56px; }
  .leg-section { gap: 20px; }
  .leg-section + .leg-section { padding-top: 48px; }
  .leg-section h2 { flex-direction: row; align-items: flex-end; gap: 16px; font-size: 32px; line-height: 1.05; letter-spacing: -.8px; }
  .leg-section__num { font-size: 36px; }
  .leg-section > p:not(.leg-encadre) { font-size: 17px; line-height: 1.65; }
  .leg-fiche { padding: 6px 24px; }
  .leg-fiche > div { flex-direction: row; gap: 24px; padding-block: 16px; }
  .leg-fiche dt { flex: none; width: 200px; font-size: 14px; }
  .leg-fiche dd { font-size: 16px; }
  .leg-liste li { gap: 14px; font-size: 16.5px; }
  .leg-encadre { gap: 16px; padding: 22px; font-size: 15.5px; }
  .leg-encadre__picto { width: 44px; height: 44px; }
  .leg-encadre__picto .icon { width: 20px; height: 20px; }
  .leg-documents { padding-block: 96px; }
  .leg-documents__titre { font-size: 52px; letter-spacing: -1.4px; }
  .leg-documents__titre em { font-size: 1.096em; }
  .leg-cartes { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .leg-carte, .leg-carte__lien { gap: 20px; }
  .leg-carte--actuel, .leg-carte__lien { padding: 32px; }
  .leg-carte__picto { width: 52px; height: 52px; }
  .leg-carte__picto .icon { width: 24px; height: 24px; }
  .leg-carte h3 { font-size: 26px; letter-spacing: -.5px; }
}
@media (hover: hover) and (pointer: fine) {
  .leg-sommaire a:hover { color: var(--orange-fonce); }
  .leg-carte__lien:hover .lien-fleche .icon, .leg-question .lien-fleche:hover .icon { transform: translateX(3px); }
}

/* Page 404 : visuel « 4 ● 4 » (anneau jaune, disque orange), texte, liens utiles */
.err { position: relative; overflow: hidden; }
.err__anneau { left: 280px; top: -80px; width: 150px; background: var(--vert); }
.err__grille { position: relative; display: flex; flex-direction: column; gap: 28px; padding-block: 40px 56px; }
.err__visuel { position: relative; width: 350px; max-width: 100%; height: 250px; }
.err__visuel > * { position: absolute; }
.err__jaune { left: 124px; top: 12px; width: 128px; background: var(--jaune); }
.err__disque { left: 126px; top: 35px; width: 124px; aspect-ratio: 1; background: var(--orange); }
.err__chiffre { top: 0; font-family: var(--f-titre); font-weight: 800; font-size: 180px; line-height: 1; letter-spacing: -5px; color: var(--encre); }
.err__chiffre--g { left: 4px; }
.err__chiffre--d { left: 228px; }
.err__note { left: 90px; top: 196px; rotate: 6deg; white-space: nowrap; font-size: 30px; color: var(--vert); }
.err__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.err__texte .surtitre { margin: 0; }
.err__titre { font-family: var(--f-titre); font-weight: 800; font-size: 40px; line-height: 1.02; letter-spacing: -1.1px; }
.err__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.1em; line-height: 1.04; letter-spacing: 0; color: var(--orange); }
.err__chapo { max-width: 520px; color: var(--texte); font-size: 16px; line-height: 26px; }
.err__boutons { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 6px; }
.err .btn--vert .btn__rond { background: var(--blanc); color: var(--vert); }
.err__liens { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.err__liens p { color: var(--texte); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.err__liens ul { display: flex; flex-wrap: wrap; gap: 8px; }
.err__liens a { display: inline-block; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .2); font-size: 14px; font-weight: 600; line-height: 1.2; transition: background-color 160ms ease, color 160ms ease; }
@media (min-width: 900px) {
  .err__anneau { left: auto; right: -110px; top: -150px; width: 240px; }
  .err__grille { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 640px); justify-content: space-between; align-items: start; gap: 40px; min-height: 760px; padding-block: 112px 64px; }
  .err__visuel { order: 2; width: 640px; height: 560px; margin-top: -16px; }
  .err__jaune { left: 231px; top: 40px; width: 248px; }
  .err__disque { left: 235px; top: 85px; width: 240px; }
  .err__chiffre { top: 20px; font-size: 340px; letter-spacing: -10px; }
  .err__chiffre--g { left: 20px; }
  .err__chiffre--d { left: 440px; }
  .err__note { left: 150px; top: 410px; font-size: 48px; }
  .err__texte { gap: 24px; }
  .err__titre { font-size: 72px; letter-spacing: -2px; }
  .err__chapo { font-size: 18px; line-height: 1.6; }
  .err__boutons { flex-direction: row; align-items: center; padding-top: 8px; }
  .err__liens { padding-top: 20px; }
}
@media (hover: hover) and (pointer: fine) {
  .err__liens a:hover { background: var(--encre); color: var(--blanc); }
}

/* 25. Lettre d'information ------------------------------------------------------------------
   États de la carte du pied de page et page de désinscription (écrans « Lettre d'information —
   états du formulaire » et « Désinscription » de la maquette). */

/* Carte du pied de page : message après l'envoi, erreur */
.lettre__message { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .12); }
.lettre__message > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lettre__message strong { color: var(--blanc); font-size: 15px; font-weight: 700; line-height: 1.35; }
.lettre__message span:not(.lettre__picto) { color: rgba(255, 255, 255, .7); font-size: 13px; line-height: 1.45; }
.lettre__picto { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; }
.lettre__picto .icon { width: 18px; height: 18px; }
.lettre__picto--reussie { background: var(--jaune); color: var(--vert-profond); }
.lettre__picto--reussie .icon { stroke-width: 3; }
.lettre__picto--deja { background: rgba(255, 255, 255, .15); color: var(--jaune); }
.lettre__form--erreur { box-shadow: inset 0 0 0 1.5px #FF9B6B; }
.lettre .lettre__erreur { display: flex; align-items: center; gap: 8px; color: #FFB894; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.lettre__erreur .icon { width: 15px; height: 15px; color: #FF9B6B; }

/* Page de désinscription : mise en page de la page 404 (section 24), pictogramme au centre
   du disque (même centre que l'anneau et le disque), couleurs propres à chaque étape. */
.err__picto { display: grid; place-items: center; left: 160px; top: 69px; width: 56px; height: 56px; color: var(--blanc); }
.err__picto .icon { width: 100%; height: 100%; stroke-width: 1.75; }
.err--desinscription .err__note { left: 96px; }
.err--fait .err__anneau { background: var(--orange); }
.err--fait .err__disque { background: var(--vert); }
.err--fait .err__note { color: var(--orange-fonce); }
.err__info { display: flex; align-items: center; gap: 10px; padding-top: 16px; color: var(--texte); font-size: 14px; line-height: 1.5; }
.err__info .icon { flex: none; width: 16px; height: 16px; }
@media (min-width: 900px) {
  .err__picto { left: 300px; top: 150px; width: 110px; height: 110px; }
  .err--desinscription .err__note { left: 200px; }
  .err__info { padding-top: 20px; }
}

/* 27. Forme UCIV des heros (maquette d'octobre 2026) ------------------------------------------
   La forme du logo remplace les cercles décoratifs. Positions en pixels de la maquette (content.FORMES_HEROS),
   dans un calque à la taille de la maquette centré dans le hero : 1 px de maquette = --u.
   Desktop : 1440 px (réduit en dessous, sans grossir au-delà) ; mobile : 390 px. */
.hero, .qs-hero, .np-hero, .gd-hero, .lead-hero, .eng-hero, .par-hero, .con-hero, .eq-hero, .ph, .art-hero, .pl-hero {
  isolation: isolate;
}
.formes-uciv {
  --u: min(100vw / 1440, 1px);
  position: absolute; z-index: -1; top: 0; left: 50%; width: calc(1440 * var(--u)); height: 100%;
  translate: -50% 0; pointer-events: none;
}
.formes-uciv--mobile { display: none; }
.forme-uciv {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  transform-origin: 0 0; rotate: calc(var(--r) * -1deg);
  background: var(--c);
  -webkit-mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
  mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
}
@media (max-width: 719px) {
  .formes-uciv--desktop { display: none; }
  .formes-uciv--mobile { --u: calc(100vw / 390); display: block; width: 100%; }
}

/* 28. Mise à jour d'octobre 2026 (consignes UCIV) ---------------------------------------------
   Témoignages, galerie, programmes d'UCIV Leadership, photos des partenaires, équipe par rôle,
   pages « De la vision à l'action » et « Les RH ont la parole », recherche. Valeurs de la maquette (1440 / 390 px). */

/* Menu : programmes rattachés à UCIV Leadership, en retrait */
.sousmenu .est-sous-programme a, .menu-mobile__sous .est-sous-programme a { padding-left: 32px; font-size: .94em; }

/* UCIV Leadership : nouvelle couverture (photo détourée 780 x 414 collée au bas du hero) et plaque du logo */
.lead-hero__logo { width: 230px; padding: 16px 20px; border-radius: 18px; background: var(--vert-profond); }
@media (min-width: 900px) {
  .lead-hero__visuel { width: min(100%, 54.2vw, 780px); margin-right: calc(-1 * var(--marge)); }
  .lead-hero__logo {
    top: max(-10.7vw, -154px); right: min(5vw, 72px); width: min(25vw, 360px);
    padding: min(1.67vw, 24px) min(2.08vw, 30px); border-radius: 24px;
  }
}
@media (max-width: 719px) {
  .lead-hero__logo { display: block; position: static; margin-bottom: 26px; }
}

/* Témoignages */
.temo { background: var(--creme); }
.temo--blanc { background: var(--blanc); }
.temo-une { display: grid; overflow: hidden; border-radius: var(--rayon-lg); background: var(--vert-profond); color: var(--blanc); }
.temo-une { margin: 0; }
.temo-une blockquote, .temo-carte blockquote, .eq-president__citation { margin: 0; }
.temo-une__photo { position: relative; aspect-ratio: 350 / 300; }
.temo-une__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.temo-une__texte { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px 24px 32px; }
.temo-une__badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 999px;
  background: var(--jaune); color: var(--encre); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.temo-une__badge .icon { width: 16px; height: 16px; }
.temo-une .temo-une__citation { margin-top: 18px; font-size: 17px; line-height: 1.6; }
.temo-une__signature { display: flex; flex-direction: column; gap: 4px; }
.temo-une__signature strong { font-family: var(--f-titre); font-weight: 800; font-size: 24px; letter-spacing: -.4px; }
.temo-une__signature span { color: var(--jaune); font-size: 14px; font-weight: 600; }
.temo-une + .temo-cartes { margin-top: 24px; }
.temo-cartes { display: grid; gap: 20px; }
.temo-carte {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 22px;
  border-radius: var(--rayon-lg); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1);
}
.temo--blanc .temo-carte { background: var(--creme); }
.temo-carte__guillemets { color: var(--orange); }
.temo-carte__guillemets .icon { width: 32px; height: 32px; }
.temo-carte blockquote { margin: 18px 0 0; color: var(--encre); font-size: 17px; line-height: 1.6; }
.temo-carte__personne { display: flex; align-items: center; gap: 14px; }
.temo-carte__photo {
  display: grid; flex: none; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%;
  background: var(--sable); color: rgba(23, 18, 12, .35);
}
.temo-carte__photo img { width: 100%; height: 100%; object-fit: cover; }
.temo-carte__personne strong { display: block; font-size: 16px; font-weight: 700; }
.temo-carte__personne span span { display: block; color: var(--texte); font-size: 14px; }
@media (min-width: 900px) {
  .temo-une { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); min-height: 440px; }
  .temo-une__photo { aspect-ratio: auto; }
  .temo-une__texte { padding: 48px 56px; }
  .temo-une .temo-une__citation { font-size: 20px; line-height: 1.55; }
  .temo-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .temo-carte { padding: 36px; }
}

/* Galerie « En images » : 3 photos (380 · reste · 300) puis 4 photos égales */
.galerie__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galerie__photo { overflow: hidden; border-radius: 18px; aspect-ratio: 1 / 1.25; }
.galerie__photo img { width: 100%; height: 100%; object-fit: cover; }
.galerie__photo--haut-2 { grid-column: 1 / -1; aspect-ratio: 350 / 180; }
@media (max-width: 899px) {
  /* Mobile (maquette) : deux photos, la photo de groupe en pleine largeur, puis les autres par deux */
  .galerie__photo--haut-2 { order: 1; }
  .galerie__photo--bas { order: 2; }
}
@media (min-width: 900px) {
  .galerie__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .galerie__photo { border-radius: 24px; aspect-ratio: auto; }
  .galerie__photo--haut-1 { grid-column: span 4; height: min(29.2vw, 420px); }
  .galerie__photo--haut-2 { grid-column: span 5; height: min(29.2vw, 420px); }
  .galerie__photo--haut-3 { grid-column: span 3; height: min(29.2vw, 420px); }
  .galerie__photo--bas { grid-column: span 3; height: min(20.8vw, 300px); }
}

/* UCIV Leadership : « Les programmes d'UCIV Leadership » */
.lead-programmes__liste { display: grid; gap: 24px; }
.lead-prog__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--rayon-lg);
  background: var(--creme); color: var(--encre); transition: transform 200ms var(--ease-out);
}
.lead-prog__lien:active { transform: scale(.99); }
.lead-prog__visuel { display: block; height: 220px; }
.lead-prog__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.lead-prog__texte { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 24px 32px; }
.lead-prog__tag {
  padding: 6px 12px; border-radius: 999px; background: var(--jaune);
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
}
.lead-prog__nom { font-family: var(--f-titre); font-weight: 800; font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -.8px; line-height: 1.05; }
.lead-prog__accroche { font-family: var(--f-accent); font-style: italic; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; color: var(--orange-fonce); }
.lead-prog__desc { color: var(--texte); font-size: 16px; line-height: 1.6; }
.lead-prog .lien-fleche { margin-top: auto; padding-top: 8px; color: var(--vert-profond); }
@media (min-width: 900px) {
  .lead-programmes__liste { grid-template-columns: 1fr 1fr; }
  .lead-prog__visuel { height: 320px; }
  .lead-prog__texte { padding: 36px 40px 40px; }
}
@media (hover: hover) and (pointer: fine) {
  .lead-prog__lien:hover .lien-fleche .icon { transform: translateX(3px); }
}

/* Nos programmes : programmes rattachés à UCIV Leadership */
.np-sous { margin-top: 20px; }
.np-sous__label { color: var(--orange-fonce); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.np-sous__liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.np-sous__liens a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .2); font-size: 14px; font-weight: 700;
  transition: background-color 200ms ease;
}
.np-sous__liens .icon { width: 16px; height: 16px; }
.np-sous + .btn { margin-top: 28px; }
@media (hover: hover) and (pointer: fine) { .np-sous__liens a:hover { background: var(--creme); } }

/* Partenaires : photo de la collaboration, nom en dessous */
.carte-partenaire--photo { gap: 0; padding: 0; overflow: hidden; }
.carte-partenaire__photo { display: block; height: 160px; }
.carte-partenaire__photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-partenaire__infos { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.par-carte--photo { gap: 0; min-height: 0; padding: 0; overflow: hidden; }
.par-carte__photo { display: block; height: 220px; }
.par-carte__photo img { width: 100%; height: 100%; object-fit: cover; }
.par-carte__infos { padding: 22px 26px 26px; }
@media (min-width: 900px) {
  .carte-partenaire__photo { height: 150px; }
  .carte-partenaire__infos { padding: 22px 26px 26px; }
  .par-carte__photo { height: 260px; }
}

/* Équipe : citation du président, puis une grille par rôle (5 colonnes, liseré coloré sous chaque portrait) */
.eq-president__citation {
  padding: 4px 0 4px 24px; border-left: 3px solid var(--orange);
  font-family: var(--f-accent); font-style: italic; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.25;
}
.eq-groupe__entete .texte { margin-top: 24px; }
.eq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: 40px; }
.eq-carte { --lisere: var(--orange); }
.eq-carte--vert { --lisere: var(--vert); }
.eq-carte--jaune { --lisere: var(--jaune); }
.eq-carte--profond { --lisere: var(--vert-profond); }
.eq-carte--orange-fonce { --lisere: var(--orange-fonce); }
.eq-carte__photo {
  position: relative; display: block; overflow: hidden; aspect-ratio: 169 / 210; border-radius: 16px; background: var(--sable);
}
.eq-carte__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--lisere); }
.eq-carte__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.eq-carte h3 { margin-top: 18px; font-family: var(--f-titre); font-weight: 800; font-size: 17px; line-height: 1.15; }
.eq-carte p { margin-top: 4px; color: var(--orange-fonce); font-size: 13px; font-weight: 600; line-height: 1.4; }
@media (min-width: 720px) { .eq-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1100px) {
  .eq-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 56px; }
  .eq-carte__photo { aspect-ratio: auto; height: 300px; border-radius: 20px; }
  .eq-carte__photo::after { height: 6px; }
  .eq-carte h3 { margin-top: 22px; font-size: 21px; letter-spacing: -.3px; }
  .eq-carte p { font-size: 15px; }
  /* Ambassadrices : titre à gauche, deux portraits à droite */
  .eq-groupe--ambassadrices .eq-groupe__cadre { display: flex; align-items: center; justify-content: space-between; gap: 80px; }
  .eq-groupe--ambassadrices .eq-grille { flex: none; width: 528px; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .eq-groupe--ambassadrices .texte { max-width: 420px; }
}

/* Pages des programmes d'UCIV Leadership */
.pl-hero--profond { background: var(--vert-profond); }
.titre em.pl-vert { color: var(--vert); }
.pl-apropos__grille { display: grid; gap: 28px; }
.pl-apropos__texte { display: flex; flex-direction: column; gap: 20px; color: var(--texte); font-size: 17px; line-height: 1.65; }
.pl-apropos__chapo { color: var(--encre); font-size: clamp(17px, 1.46vw, 21px); font-weight: 600; line-height: 1.5; }
.pl-objectifs li { align-items: flex-start; }
.pl-objectif { display: flex; flex-direction: column; gap: 6px; }
.pl-objectif span { font-family: var(--f-texte); font-weight: 400; font-size: 16px; letter-spacing: 0; line-height: 1.6; color: var(--texte); }
.pl-cartes__grille { display: grid; gap: 20px; }
.pl-carte {
  display: flex; flex-direction: column; gap: 24px; padding: 32px 24px;
  border-radius: var(--rayon-lg); background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1);
}
.pl-carte .surtitre { margin: 0; }
.pl-carte__titre { font-family: var(--f-titre); font-weight: 800; font-size: clamp(28px, 2.64vw, 38px); letter-spacing: -.9px; line-height: 1.05; }
.pl-carte__titre em { display: block; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: 0; color: var(--vert); }
.pl-carte p:not(.surtitre) { color: var(--texte); font-size: 17px; line-height: 1.65; }
.pl-carte--vert { background: var(--vert); box-shadow: none; color: var(--blanc); }
.pl-carte--vert .pl-carte__titre em { color: var(--jaune); }
.pl-carte--vert p:not(.surtitre) { color: rgba(255, 255, 255, .9); }
.pl-conviction { overflow: hidden; text-align: center; }
.pl-conviction__cadre { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.pl-conviction .surtitre { margin: 0; }
.pl-conviction__intro { max-width: 820px; color: rgba(255, 255, 255, .9); font-size: clamp(17px, 1.32vw, 19px); line-height: 1.6; }
.pl-conviction__titre { max-width: 1040px; text-wrap: balance; font-family: var(--f-titre); font-weight: 800; font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -.03em; line-height: 1.05; }
.pl-conviction__titre em { display: block; margin-top: 6px; font-family: var(--f-accent); font-style: italic; font-weight: 400; font-size: 1.26em; letter-spacing: 0; color: var(--jaune); }
.pl-conviction__fin { max-width: 720px; color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.65; }
.pl-conviction__signature { color: var(--jaune); font-size: clamp(22px, 2.1vw, 30px); }
@media (min-width: 900px) {
  .pl-apropos__grille { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(40px, 5.6vw, 80px); }
  .pl-apropos__texte { padding-top: 56px; }
  .pl-cartes__grille { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pl-carte { padding: 48px; }
}

/* Recherche */
.rch-form { display: flex; flex-wrap: wrap; gap: 12px; }
.rch-form__champ {
  flex: 1 1 280px; min-width: 0; height: 56px; padding: 0 22px; border: 1px solid rgba(23, 18, 12, .2); border-radius: 999px;
  background: var(--blanc); color: var(--encre); font: inherit; font-size: 17px;
}
.rch-form__champ:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rch-compte { margin-top: 32px; color: var(--texte); font-size: 15px; }
.rch-liste { display: grid; gap: 12px; margin-top: 20px; }
.rch-resultat a {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--rayon);
  background: var(--blanc); box-shadow: inset 0 0 0 1px rgba(23, 18, 12, .1); transition: box-shadow 200ms ease;
}
.rch-resultat__type { color: var(--orange-fonce); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.rch-resultat__titre { font-family: var(--f-titre); font-weight: 800; font-size: 22px; letter-spacing: -.3px; line-height: 1.2; }
.rch-resultat__texte { color: var(--texte); font-size: 15px; line-height: 1.55; }
.rch-pistes { margin-top: 40px; color: var(--texte); }
.rch-pistes .qs-chips { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) { .rch-resultat a:hover { box-shadow: inset 0 0 0 1px var(--orange); } }

/* Actualités (consigne 7) : les photos des cartes et des articles gardent les visages (cadrage vers le haut) */
.lst-article__image img, .lst-une__image img, .art-corps__image img { object-position: center 20%; }

/* 29. Heros sur ordinateur : valeurs exactes de la maquette (1440 px) -----------------------------------
   À partir de 1100 px, chaque hero reprend la hauteur, les positions et les tailles de la maquette.
   1 px de maquette = --u (réduit en proportion sous 1440 px, jamais agrandi au-delà).
   Textes manuscrits : point d'ancrage et rotation de la maquette (rotation autour du coin haut gauche). */
.fil ol { line-height: 16px; }
@media (min-width: 1100px) {
  .hero, .qs-hero, .np-hero, .gd-hero, .lead-hero, .eng-hero, .par-hero, .con-hero, .ph, .art-hero {
    --u: min(100vw / 1440, 1px);
  }
  .hero__signature, .gd-hero__note, .eng-hero__note, .con-hero__note, .np-hero__note, .ph-note {
    transform-origin: 0 0; translate: none; line-height: 1.25;
  }

  /* Boutons des heros : à l'échelle du reste du hero (56 de haut, rond de 40) */
  :is(.hero, .qs-hero, .np-hero, .gd-hero, .lead-hero, .eng-hero, .par-hero, .con-hero) .btn {
    gap: calc(14 * var(--u)); min-height: calc(56 * var(--u));
    padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(26 * var(--u));
    font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u));
  }
  :is(.hero, .qs-hero, .np-hero, .gd-hero, .lead-hero, .eng-hero, .par-hero, .con-hero) :is(.btn--contour, .btn--contour-blanc) {
    padding: calc(8 * var(--u)) calc(26 * var(--u));
  }
  :is(.hero, .qs-hero, .np-hero, .gd-hero, .lead-hero, .eng-hero, .par-hero, .con-hero) .btn__rond {
    width: calc(40 * var(--u)); height: calc(40 * var(--u));
  }
  :is(.hero__cta, .gd-hero__cta, .lead-hero__cta, .par-hero__cta) { gap: calc(14 * var(--u)); }

  /* Colonne de texte commune : fil d'Ariane (16 + 26), puis blocs espacés de 22 */
  .qs-hero__texte, .np-hero__texte, .lead-hero__texte {
    display: flex; flex-direction: column; align-items: flex-start; gap: calc(22 * var(--u));
    align-self: start; padding: calc(52 * var(--u)) 0 0;
  }
  .qs-hero .fil, .np-hero .fil, .lead-hero .fil { margin: 0; padding-bottom: calc(26 * var(--u)); }
  .qs-hero .surtitre, .np-hero .surtitre, .lead-hero .surtitre { margin: 0; }
  .qs-hero__chapo, .np-hero__chapo, .lead-hero__chapo { margin: 0; font-size: calc(19 * var(--u)); line-height: 1.55; }
  .qs-hero__titre em, .np-hero__titre em, .lead-hero__titre em { margin-top: 0; line-height: 1.04; }
  .gd-hero__texte, .par-hero__texte { padding-top: calc(52 * var(--u)); }
  .eng-hero__grille, .con-hero__grille, .ph-grille { padding-top: calc(52 * var(--u)); }

  /* Accueil : 780 de haut ; texte en (72, 104) ; photo 820 x 584 en (620, 196) */
  .hero__cadre { height: calc(780 * var(--u)); }
  .hero__texte { top: calc(104 * var(--u)); translate: none; width: calc(620 * var(--u)); gap: calc(26 * var(--u)); }
  .hero__titre { font-size: calc(96 * var(--u)); line-height: .958; letter-spacing: -.028em; }
  .hero__titre em { font-size: 1.125em; line-height: .98; letter-spacing: -.009em; }
  .hero__chapo { width: calc(520 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.526; }
  .hero__cta { padding-top: calc(6 * var(--u)); }
  .hero__parcours { top: calc(712 * var(--u)); bottom: auto; }
  .hero__visuel { inset: 0; width: auto; height: auto; transform: none; }
  .hero__photo { left: calc(620 * var(--u)); top: calc(196 * var(--u)); width: calc(820 * var(--u)); height: calc(584 * var(--u)); }
  .hero__signature { left: calc(1010 * var(--u)); top: calc(92 * var(--u)); font-size: calc(48 * var(--u)); }

  /* Qui sommes-nous ? : 580 de haut ; titre 60 / 66 ; photo 608 x 506 en (770, 74), collée en bas */
  .qs-hero__grille { min-height: calc(580 * var(--u)); padding-top: 0; }
  .qs-hero__titre { font-size: calc(60 * var(--u)); line-height: 1.02; letter-spacing: -.0278em; }
  .qs-hero__titre em { font-size: 1.1em; }
  .qs-hero__chapo { max-width: calc(560 * var(--u)); }
  .qs-hero__texte { max-width: calc(700 * var(--u)); }
  .qs-hero__visuel { width: calc(608 * var(--u)); margin-right: calc(-10 * var(--u)); }

  /* Nos programmes : 560 de haut ; titre 64 / 70 ; « apprendre en faisant » ancré en (1010, 300), 8° */
  .np-hero__grille { min-height: calc(560 * var(--u)); }
  .np-hero__texte { max-width: calc(760 * var(--u)); }
  .np-hero__titre { font-size: calc(64 * var(--u)); line-height: 1.02; letter-spacing: -.0278em; }
  .np-hero__titre em { font-size: 1.094em; }
  .np-hero__chapo { max-width: calc(600 * var(--u)); }
  .np-hero__note { left: calc(1010 * var(--u)); top: calc(300 * var(--u)); rotate: -8deg; font-size: calc(46 * var(--u)); }

  /* Les Go du Digital, Experience Lab, programmes d'UCIV Leadership : 640 de haut, photo ronde 480 en (790, 120).
     Le bloc visuel (540) commence en (760, 90) ; note ancrée à (10, -34) ou (40, -34) de ce bloc, 5°. */
  .gd-hero__grille { min-height: calc(640 * var(--u)); }
  .gd-hero__note { left: calc(40 * var(--u)); top: calc(-34 * var(--u)); rotate: -5deg; font-size: calc(40 * var(--u)); }
  .gd-hero:not(.gd-hero--vert):not(.pl-hero) .gd-hero__note { left: calc(10 * var(--u)); }

  /* UCIV Leadership : 640 de haut ; titre 68 / 75 ; photo détourée 780 x 414 collée en bas à droite ;
     logo seul (318 x 118) en (891, 34) */
  .lead-hero__grille { display: block; min-height: calc(640 * var(--u)); padding-top: 0; }
  .lead-hero__texte { max-width: calc(640 * var(--u)); }
  .lead-hero__titre { font-size: calc(68 * var(--u)); line-height: 1.02; letter-spacing: -.0278em; }
  .lead-hero__titre em { font-size: 1.103em; }
  .lead-hero__chapo { max-width: calc(560 * var(--u)); }
  .lead-hero__cta { margin-top: 0; padding-top: calc(8 * var(--u)); }
  .lead-hero__visuel { position: absolute; right: 0; bottom: 0; width: calc(780 * var(--u)); max-width: none; margin: 0; }
  .lead-hero__logo {
    top: calc(-192 * var(--u)); left: calc(231 * var(--u)); right: auto;
    width: calc(318 * var(--u)); height: calc(118 * var(--u)); padding: 0 calc(20 * var(--u));
    border-radius: 0; background: none;
  }
  .lead-hero__logo img { width: 100%; height: 100%; object-fit: contain; }

  /* Je veux m'engager : 580 de haut ; titre sur 700 ; photo ronde 460 en (830, 90) ; note ancrée en (770, 500), 6° */
  .eng-hero__grille { display: block; min-height: calc(580 * var(--u)); }
  .eng-hero__texte { max-width: calc(700 * var(--u)); padding-top: 0; }
  .eng-hero__titre { font-size: calc(72 * var(--u)); }
  .eng-hero__chapo { max-width: calc(580 * var(--u)); }
  .eng-hero__visuel { position: absolute; left: calc(800 * var(--u)); top: calc(60 * var(--u)); width: calc(520 * var(--u)); margin: 0; }
  .eng-hero__note { left: calc(-30 * var(--u)); top: calc(440 * var(--u)); rotate: -6deg; font-size: calc(42 * var(--u)); }

  /* Partenaires : 620 de haut */
  .par-hero__grille { min-height: calc(620 * var(--u)); }

  /* Contact : 500 de haut ; titre 112 / 123 ; « on vous répond ! » ancré en (882, 247), 7° */
  .con-hero__grille { min-height: calc(500 * var(--u)); padding-bottom: 0; }
  .con-hero__titre { font-size: calc(112 * var(--u)); }
  .con-hero__note { left: calc(882 * var(--u)); top: calc(247 * var(--u)); rotate: -7deg; font-size: calc(48 * var(--u)); }

  /* Bandeaux des pages alimentées par la base et des pages légales */
  .ph-grille { padding-bottom: 0; min-height: calc(var(--h) * var(--u)); }
  .ph-note { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font-size: calc(var(--fs) * var(--u)); }

  /* Article : colonne de 960 centrée, 400 de haut ; fil, étiquette, titre 54 / 59 puis infos, espacés de 22 */
  .art-hero__grille { width: calc(960 * var(--u)); max-width: none; margin-inline: auto; padding: calc(52 * var(--u)) 0 0; min-height: calc(400 * var(--u)); }
  .art-hero .fil { padding-bottom: calc(14 * var(--u)); }
  .art-hero__titre { font-size: calc(54 * var(--u)); }
}

/* 30. Heros sur mobile : écarts restants avec la maquette (390 px) */
@media (max-width: 719px) {
  .hero .hero__titre { font-size: 52px; line-height: 50px; letter-spacing: -1.4px; }
  .hero .hero__titre em { font-size: 52px; line-height: 51px; }
  .qs-hero__texte, .np-hero__texte, .lead-hero__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
  .qs-hero .fil, .np-hero .fil, .lead-hero .fil { margin: 0; padding-bottom: 26px; }
  .qs-hero .surtitre, .np-hero .surtitre, .lead-hero .surtitre, .qs-hero__chapo, .np-hero__chapo, .lead-hero__chapo { margin: 0; }
  .lead-hero__cta { margin-top: 8px; }
  .qs-hero__titre, .np-hero__titre { line-height: 1.02; }
  .qs-hero__titre em, .np-hero__titre em, .par-hero__titre em, .ph--opportunites .ph-titre em { margin-top: 0; font-size: 1em; line-height: 1.04; }
  .eng-hero .eng-hero__titre em { font-size: 44px; line-height: 1.04; }
  .qs-hero__chapo, .np-hero__chapo, .lead-hero__chapo { font-size: 17px; line-height: 26px; }
  .lead-hero__titre { line-height: 1.02; }
  .qs-hero__grille, .lead-hero__grille { gap: 26px; }
  .lead-hero__titre em { margin-top: 0; line-height: 1.04; }
  .lead-hero__logo { width: 115px; height: 54px; padding: 10px 11px; border-radius: 14px; }
  .lead-hero__logo img { width: 100%; height: 100%; object-fit: contain; }
}

/* 29. Forme du logo dans les sections ----------------------------------------------------------
   Les anneaux et demi-cercles décoratifs des sections (appels à l'action, vision, inscriptions, impact, contact, légal,
   pourquoi Leadership) prennent la forme du logo des bandeaux. Chaque élément garde sa position, sa largeur et sa teinte
   (d'abord un anneau translucide, désormais la forme pleine de la même teinte) ; la hauteur suit la proportion du logo. */
:is(.vision__anneau, .lead-pourquoi__anneau, .np-appel__anneau, .gd-inscriptions__disque, .imp-carte__anneau,
    .con-coord__anneau, .leg-question__anneau) {
  height: auto; aspect-ratio: 236.25 / 313.61; border: 0; border-radius: 0;
  -webkit-mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
  mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
}
.vision__anneau { background: rgba(255, 255, 255, .12); }
.lead-pourquoi__anneau { background: rgba(247, 197, 72, .15); }
.np-appel__anneau { background: rgba(255, 255, 255, .1); }
.gd-inscriptions__disque { background: rgba(255, 255, 255, .12); }
.imp-carte__anneau { background: rgba(255, 255, 255, .14); }
.imp-carte--jaune .imp-carte__anneau, .imp-carte--sable .imp-carte__anneau { background: rgba(23, 18, 12, .08); }
.con-coord__anneau, .leg-question__anneau { background: rgba(255, 255, 255, .08); }
/* Pseudo-éléments : carte « Notre vision » de Qui sommes-nous ? et citation orange / verte (Qui sommes-nous ?, Notre impact) */
.qs-vision::before, .qs-citation::before {
  height: auto; aspect-ratio: 236.25 / 313.61; border-radius: 0;
  -webkit-mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
  mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
}
.qs-vision::before { background: rgba(255, 255, 255, .08); }
.qs-citation::before { background: rgba(255, 255, 255, .12); }
/* Bandeaux en mobile : l'ancien anneau (::before) doublait la forme du logo posée par {% formes_hero %} */
.ph::before, .eng-hero::before, .par-hero::before, .gd-hero::before, .art-hero::before, .con-hero::before { display: none; }

/* 30. Pages d'erreur (404, 429, désinscription) : les anneaux prennent la forme du logo ---------------------------------
   L'anneau de la page et celui qui entoure le « 0 » orange deviennent la forme du logo (même masque que les bandeaux). Le disque orange,
   qui fait le « 0 » de « 404 », reste un disque. Position, couleur et hauteur sont celles des anciens anneaux (voir les règles .err__* plus haut). */
.err__anneau, .err__jaune {
  height: auto; aspect-ratio: 236.25 / 313.61; border-radius: 0;
  -webkit-mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
  mask: url("../img/forme-uciv.svg") center / 100% 100% no-repeat;
}

/* 31. Bandeau Partenaires en tablette (720 à 899 px) ---------------------------------------------------------------------
   Le bandeau est empilé jusqu'à 899 px, mais les formes du bureau (grande forme crème à droite) restaient posées : le titre et le paragraphe
   blancs passaient dessus et devenaient illisibles. Dans cette plage on utilise la forme translucide des écrans étroits, comme en mobile. */
@media (min-width: 720px) and (max-width: 899px) {
  .par-hero .formes-uciv--desktop { display: none; }
  .par-hero .formes-uciv--mobile { --u: calc(100vw / 390); display: block; width: 100%; }
}