/* ==========================================================================
   Refonte — compléments
   --------------------------------------------------------------------------
   Classes introduites par l'intégration WordPress et absentes de la maquette,
   qui ne couvrait pas ces cas : lien d'évitement, sous-navigation des pages
   stratégie, conteneur des blocs ACF, bloc de partage, grilles de conseillers,
   coordonnées du pied de page, portraits manquants.

   Écrit sur les tokens de assets/css/tokens.css.
   ========================================================================== */

/* ---- Carrousel du hero --------------------------------------------------
   La maquette React ne montait qu'une copie à la fois : elle n'avait donc
   besoin d'aucune règle pour masquer les autres. En PHP les copies sont
   toutes dans le document, il faut les superposer et ne révéler que
   l'active. */
.hero-copy-stack {
  display: grid;
}

.hero-copy-stack > .hero-copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.6s var(--po-ease), transform 0.6s var(--po-ease), visibility 0.6s;
  pointer-events: none;
}

.hero-copy-stack > .hero-copy.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy-stack > .hero-copy { transition: none; transform: none; }
}

/* ---- Carte : état neutre au chargement ---------------------------------
   Aucun pays n'est actif tant que le visiteur n'a rien survolé. La fiche
   affiche alors une invite plutôt qu'un pays choisi arbitrairement. */
.country-fiche.is-empty .cf-head > div::after,
.me-fiche.is-empty .cf-head > div::after {
  content: "Survolez la carte";
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--po-muted);
}

.country-fiche.is-empty .cf-meta,
.me-fiche.is-empty .cf-meta {
  opacity: 0.35;
}

.country-fiche.is-empty .cf-fact::after,
.me-fiche.is-empty .cf-fact::after {
  content: "Choisissez un pays pour afficher sa fiche.";
  color: var(--po-muted);
}

/* ---- Galerie « Sur le terrain » : emplacements vides --------------------
   La maquette utilisait un composant image-slot qui affichait une zone de
   dépôt tant qu'aucune photo n'était fournie. Même principe ici, pour que la
   section garde sa place dans la page avant que les photos ne soient
   chargées. */
.tslot-empty {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  background: var(--po-gold-050);
  border: 1px dashed var(--po-gold-200);
  color: var(--po-gold-600);
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Pied de page : logo -------------------------------------------------
   La maquette posait un cartouche blanc arrondi derrière un logo en couleur.
   Le logo est désormais la version blanche : plus besoin de cartouche. */
.ft .ft-logo {
  height: 56px;
  width: auto;
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* ---- reCAPTCHA -----------------------------------------------------------
   La vignette de Google mesure 304 px et ne se réduit pas. Partout où elle est
   posée dans une colonne plus étroite — pied de page, bandeau newsletter,
   formulaire de contact — sa largeur intrinsèque remontait jusqu'au conteneur
   et faisait défiler tout le site horizontalement sous 340 px. contain coupe
   ce lien entre la largeur du champ et celle de son contenu ; sous 420 px la
   vignette est mise à l'échelle pour rester entière. */
.gform_wrapper .gfield--type-captcha {
  min-width: 0;
  overflow: hidden;
  contain: inline-size;
}

.gform_wrapper .ginput_recaptcha { min-width: 0; }

@media (max-width: 420px) {
  /* La place réservée reste celle de la vignette à sa taille d'origine : une
     dizaine de pixels de blanc sous elle, plutôt qu'une hauteur imposée qui la
     rognerait dès qu'elle affiche un message. */
  .gform_wrapper .ginput_recaptcha {
    transform: scale(.82);
    transform-origin: 0 0;
  }
}

/* ---- Pied de page : formulaire newsletter -------------------------------
   Gravity Forms remplace le formulaire de la maquette (connexion Mailchimp).
   Son balisage est ramené à l'apparence .ftD-news : champ et bouton réunis
   dans une même pastille blanche.

   Les sélecteurs reprennent .gform_wrapper.gravity-theme pour atteindre la
   spécificité des règles du plugin ; sans cela ses paddings verticaux
   l'emportaient et le champ faisait deux fois la hauteur prévue. */
.ftD-news-gf {
  margin-bottom: 1.7rem;
}

.ftD-news-gf .gform_wrapper,
.ftD-news-gf .gform_wrapper.gravity-theme form {
  margin: 0;
  padding: 0;
}

/* Champ et bouton sur une seule ligne, dans une pastille blanche. */
.ftD-news-gf .gform_wrapper.gravity-theme form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--white);
  border: 1.5px solid transparent;
  border-radius: var(--po-radius);
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ftD-news-gf .gform_wrapper.gravity-theme form:focus-within {
  border-color: var(--po-gold);
  box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / 0.28);
}

/* Étiquettes, descriptions et pot de miel : rien à afficher ici. */
.ftD-news-gf .gform_wrapper.gravity-theme .gfield_label,
.ftD-news-gf .gform_wrapper.gravity-theme .gfield_description,
.ftD-news-gf .gform_wrapper.gravity-theme .gform_validation_container,
.ftD-news-gf .gform_wrapper.gravity-theme .gfield--type-honeypot {
  display: none !important;
}

/* Toutes les sources d'espacement vertical du plugin. */
.ftD-news-gf .gform_wrapper.gravity-theme .gform_body,
.ftD-news-gf .gform_wrapper.gravity-theme .gform_footer,
.ftD-news-gf .gform_wrapper.gravity-theme .gfield,
.ftD-news-gf .gform_wrapper.gravity-theme .ginput_container,
.ftD-news-gf .gform_wrapper.gravity-theme .ginput_container_email {
  margin: 0 !important;
  padding: 0 !important;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gform_fields {
  display: block;
  grid-row-gap: 0;
  row-gap: 0;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gform_body {
  flex: 1;
  min-width: 0;
}

/* Le champ : hauteur fixe, aucun padding vertical. */
.ftD-news-gf .gform_wrapper.gravity-theme .gfield input[type="email"],
.ftD-news-gf .gform_wrapper.gravity-theme .gfield input[type="text"],
.ftD-news-gf .gform_wrapper.gravity-theme input.large {
  width: 100%;
  height: 42px;
  min-height: 0;
  line-height: 42px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent;
  color: var(--ink-800);
  font-size: 0.95rem;
  border-radius: 0;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gfield input:focus {
  outline: none;
  box-shadow: none;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gfield input::placeholder {
  color: rgb(var(--ink-800-rgb) / 0.5);
}

/* Le bouton. */
.ftD-news-gf .gform_wrapper.gravity-theme .gform_footer {
  flex: none;
  width: auto;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.ftD-news-gf .gform_wrapper.gravity-theme .gform_footer button.gform_button {
  height: 42px;
  min-height: 0;
  line-height: 1;
  padding: 0 1.15rem !important;
  margin: 0 !important;
  border: 0;
  cursor: pointer;
  background: var(--po-gold);
  color: var(--po-navy-900);
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: background 0.2s;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.ftD-news-gf .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover {
  background: var(--gold-light);
}

/* ---- Pied de page : le champ reCAPTCHA -----------------------------------
   Le widget de Google mesure 304 px et ne se réduit pas. Posé dans la pastille
   avec le champ et le bouton sur une seule ligne, il portait la colonne du pied
   de page à 440 px : sous 480 px de large, tout le site défilait
   horizontalement — le pied de page est sur toutes les pages.

   Les conteneurs intermédiaires du plugin passent en display:contents pour que
   le champ, la vignette et le bouton deviennent les éléments de la pastille :
   la vignette prend alors sa propre ligne, sous le champ. */
.ftD-news-gf .gform_wrapper.gravity-theme form { flex-wrap: wrap; }

.ftD-news-gf .gform_wrapper.gravity-theme .gform_body,
.ftD-news-gf .gform_wrapper.gravity-theme .gform_fields {
  display: contents;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gfield--type-email {
  flex: 1 1 12rem;
  min-width: 0;
}

/* La vignette prend sa propre ligne, sous le champ et le bouton. Son
   confinement est traité plus haut, avec les autres reCAPTCHA. */
.ftD-news-gf .gform_wrapper.gravity-theme .gfield--type-captcha {
  flex: 1 1 100%;
  order: 1; /* après le bouton, qui reste calé sur le champ */
  margin-top: .35rem !important;
}

/* Confirmation et erreurs, lisibles sur le fond marine. */
.ftD-news-gf .gform_confirmation_message {
  color: var(--po-gold);
  font-weight: 600;
}

.ftD-news-gf .gform_wrapper.gravity-theme .gfield_validation_message,
.ftD-news-gf .gform_wrapper.gravity-theme .validation_message {
  background: none;
  border: 0;
  padding: 0.3rem 0 0 !important;
  color: var(--po-gold-200);
  font-size: 0.8rem;
}

/* ---- Sélecteurs de langue -----------------------------------------------
   Rendus en liens plutôt qu'en boutons : ce sont de vraies navigations vers
   les URL traduites de Weglot. La maquette ne stylait que des <button>. */
.lang-switch a,
.ft-lang a {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--po-font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.lang-switch a {
  font-size: 0.78rem;
  padding: 0.28rem 0.6rem;
  color: rgb(var(--white-rgb) / 0.72);
}

.lang-switch a:hover { color: var(--white); }
.lang-switch a.on { background: var(--po-gold); color: var(--po-navy-900); }

.ft-lang a {
  font-size: 0.76rem;
  padding: 0.3rem 0.7rem;
  color: rgb(var(--white-rgb) / 0.65);
}

.ft-lang a:hover { color: var(--white); }
.ft-lang a.on { background: var(--po-gold); color: var(--po-navy-900); }

/* ---- Accessibilité : lien d'évitement ---------------------------------- */
.po-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--po-navy);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 var(--po-radius) 0;
}

.po-skip-link:focus {
  left: 0;
  outline: 3px solid var(--po-gold);
  outline-offset: 2px;
}

/* ---- Sous-navigation des pages stratégie ------------------------------- */
.axes-nav {
  background: var(--po-paper);
  border-bottom: 1px solid var(--po-line);
}

.axes-nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding-block: 0.9rem;
}

.axes-link {
  padding: 0.55rem 1rem;
  border-radius: var(--po-radius);
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--po-gold-600);
  transition: background 0.2s, color 0.2s;
}

.axes-link:hover {
  background: var(--po-gold-050);
}

.axes-link.is-current {
  background: var(--po-navy);
  color: var(--white);
}

@media (max-width: 780px) {
  .axes-nav-inner {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .axes-nav-inner::-webkit-scrollbar { display: none; }
  .axes-link { flex: none; white-space: nowrap; }
}

/* ---- Conteneur des blocs ACF -------------------------------------------
   Les blocs conservent leur mise en page propre ; ce conteneur rétablit le
   fond blanc de la charte autour d'eux.

   Le bord déchiré du hero (.ph-torn) est un aplat marine ajouré : il n'est
   lisible que sur du blanc. Les sections héritées des blocs n'ont pas de
   fond propre, le crème du body remontait donc derrière la découpe. */
.po-blocks {
  position: relative;
  background: var(--po-paper);
}

/* Neutralise la marge haute du premier bloc, qui laissait apparaître le fond
   du body juste sous la découpe. */
.po-blocks > *:first-child {
  margin-top: 0;
}

.po-blocks > section:first-child > .container:first-child > .mt-5:first-child {
  margin-top: 0 !important;
}

/* ---- Bloc de partage ---------------------------------------------------- */
.po-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-block: 1.6rem;
  background: var(--po-cream);
}

.po-share-label {
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--po-navy);
}

/* ---- Grille des conseillers -------------------------------------------- */
.cgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--po-gap);
}

@media (max-width: 980px) { .cgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cgrid { grid-template-columns: 1fr; } }

.cm-role {
  display: block;
  font-size: 0.86rem;
  color: var(--po-muted);
  margin-top: 0.2rem;
}

/* ---- Portrait manquant : initiales sur aplat marine --------------------- */
.profil-initials,
.team-avatar:empty::after {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 5 / 6;
  background: var(--po-navy);
  color: var(--po-gold);
  font-family: var(--po-font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  letter-spacing: 0.04em;
}

/* ---- Adresse e-mail sous un portrait ------------------------------------ */
.team-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--po-muted);
  word-break: break-all;
}

.team-mail:hover { color: var(--po-gold-600); }
.team-mail svg { width: 14px; height: 14px; flex: none; color: var(--po-gold-600); }

/* ---- Coordonnées du pied de page ---------------------------------------- */
.ftD-contact {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ftD-contact li,
.ftD-contact a {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgb(var(--white-rgb) / 0.8);
}

.ftD-contact a:hover { color: var(--po-gold); }

.ftD-contact .ic {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--po-radius);
  background: rgb(var(--white-rgb) / 0.08);
  border: 1px solid rgb(var(--white-rgb) / 0.14);
  color: var(--po-gold);
}

.ftD-contact .ic svg { width: 15px; height: 15px; }

/* ---- Onglets du formulaire de contact ----------------------------------- */
.c2-pane[hidden] { display: none; }

/* ---- Pagination des archives -------------------------------------------- */
.news-actions .nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.news-actions .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 0.7rem;
  border: 1px solid var(--po-line);
  border-radius: var(--po-radius);
  font-weight: 700;
  color: var(--po-navy);
  background: var(--po-paper);
  transition: all 0.2s;
}

.news-actions .page-numbers:hover {
  border-color: var(--po-gold);
  color: var(--po-gold-600);
}

.news-actions .page-numbers.current {
  background: var(--po-navy);
  border-color: var(--po-navy);
  color: var(--white);
}

/* ---- Formulaire de recherche des pages dédiées -------------------------- */
.srch-form { margin-bottom: 1.5rem; }
.srch-form .header-search { margin-inline: auto; }

/* ---- FACE : encart de droite du bloc contexte ---------------------------
   La maquette place à droite du texte principal une image puis une liste
   numérotée. Le bloc ACF n'expose qu'un titre et un texte libre : l'encart
   reprend l'aspect de cette colonne, listes comprises. */
.fce-aside {
  background: var(--po-gold-050);
  border-left: 3px solid var(--po-gold);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}

.fce-aside-title {
  font-family: var(--po-font-display);
  font-weight: 700;
  color: var(--po-navy);
  margin: 0 0 0.7rem;
}

.fce-aside-body { color: var(--po-muted); }
.fce-aside-body > *:last-child { margin-bottom: 0; }

.fce-aside-body ol,
.fce-aside-body ul {
  counter-reset: fceaside;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.fce-aside-body li {
  counter-increment: fceaside;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
  line-height: 1.5;
}

.fce-aside-body li::before {
  content: counter(fceaside);
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--po-gold);
  color: var(--po-navy-900);
  font-family: var(--po-font-display);
  font-weight: 800;
  font-size: 0.8rem;
}

/* ---- FACE : panneaux à onglets ------------------------------------------ */
.fce-tab-pane[hidden] { display: none; }
.fce-tab-pane { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ---- FACE : section Contexte -------------------------------------------- */
.fce-context .section-title { color: var(--po-navy); margin-top: 0.6rem; }

.fce-context-sub {
  display: block;
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--po-gold-600);
  margin-top: 0.4rem;
}

.fce-context-body {
  margin-top: 1.2rem;
  color: var(--po-muted);
  columns: 2;
  column-gap: clamp(1.6rem, 4vw, 3.2rem);
}

.fce-context-body > *:first-child { margin-top: 0; }
.fce-context-body p { break-inside: avoid; margin: 0 0 1rem; }

@media (max-width: 860px) {
  .fce-context-body { columns: 1; }
}

/* ---- FACE : contenu riche des deux panneaux ----------------------------
   Les listes viennent d'un champ WYSIWYG : les puces sont remplacées par la
   coche ou la croix de la maquette. */
.fce-panel-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fce-panel-body li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.94rem;
  line-height: 1.5;
}

.fce-panel-body li::before {
  position: absolute;
  left: 0;
  top: 0.1em;
  font-weight: 800;
}

.fce-panel.yes .fce-panel-body li::before { content: "✓"; color: var(--po-gold-600); }
.fce-panel.no .fce-panel-body li::before { content: "✕"; color: var(--po-muted); }

.fce-panel-body > p:first-child { color: var(--po-muted); margin-top: 0; }

/* Les deux panneaux reprennent l'arrondi du bouton du header (« RAPO 2025 »,
   .btn-hdr) : 8px, au lieu des 40px de --radius-lg que la direction
   « organique » impose. */
.fce-panel { border-radius: 8px; }

/* ---- FACE : astérisque doré de « Le FACE finance » ---------------------- */
.fce-star { color: var(--po-gold-600); margin-left: 0; }

/* ---- FACE : bande d'appel à candidature --------------------------------- */
.fce-cta-band { background: var(--po-gold); }
.fce-cta-band .face-cta h2 { color: var(--po-navy-900); }
.fce-cta-band .face-cta p { color: rgb(var(--navy-900-rgb) / 0.78); }
.fce-cta-band .fcta-note { color: rgb(var(--navy-900-rgb) / 0.6); }

/* ---- Boutons du header : le texte reste blanc au survol -----------------
   La règle générique a:hover de la feuille de la refonte passait le libellé
   en doré, y compris sur le bouton marine. */
.hv2-actions .btn-navy,
.hv2-actions .btn-navy:hover,
.hv2-actions .btn-navy:focus {
  color: var(--white);
}

.hv2-actions .btn-gold,
.hv2-actions .btn-gold:hover,
.hv2-actions .btn-gold:focus {
  color: var(--po-navy-900);
}

/* ---- Bloc image+description : listes du champ riche ---------------------
   .fce-list de la maquette est directement le <ul>, avec une coche <svg>
   dans chaque <li>. Ici la liste vient d'un champ WYSIWYG : elle est
   imbriquée dans un conteneur et ne contient aucune icône. Ces règles lui
   redonnent la grille et la coche dorée. */
.po-imgdesc-body ul {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.6rem;
}

.po-imgdesc-body li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.98rem;
  line-height: 1.55;
}

.po-imgdesc-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 17px;
  height: 17px;
  background: var(--po-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Sur la bande marine, texte clair et coche dorée. */
.fce-navy .po-imgdesc-body,
.fce-navy .po-imgdesc-body li { color: rgb(var(--white-rgb) / 0.9); }
.fce-navy .po-imgdesc-body li::before { background: var(--po-gold); }
.fce-navy h2, .fce-navy .kicker { color: var(--white); }

/* ---- FACE : section Contexte, deux colonnes ---------------------------- */
.fce-context-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .fce-context-grid { grid-template-columns: 1fr; }
}

.fce-context-grid .section-title { color: var(--po-navy); margin-top: 0.6rem; }
.fce-context-grid .fce-context-body { columns: 1; margin-top: 1.1rem; color: var(--po-muted); }

.fce-context-media { overflow: hidden; margin-bottom: 1.2rem; }
.fce-context-media img { width: 100%; height: auto; display: block; }

/* Colonne de droite : image puis texte, sans cartouche — ni fond, ni bordure,
   ni ombre. */
.fce-steps-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.fce-steps-intro {
  font-family: var(--po-font-display);
  font-weight: 700;
  color: var(--po-navy);
  margin: 0 0 0.9rem;
}

/* Pastilles numérotées : le compteur CSS suit l'ordre des lignes. */
.fce-steps {
  counter-reset: fcestep;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.fce-steps li {
  /* Cartouche conservé sur chaque item : bordure et angles arrondis, comme la
     maquette. C'est le conteneur .fce-steps-card qui, lui, reste nu. */
  background: var(--po-paper);
  border: 1px solid var(--po-line);
  /* Même arrondi que les cartes des critères d'éligibilité : elles suivent
     --radius, que la direction « organique » porte à 26px. */
  border-radius: var(--radius);
  box-shadow: none;
  padding: 0.85rem 1rem;
  counter-increment: fcestep;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--po-muted);
}

.fce-steps li::before {
  content: counter(fcestep);
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--po-navy);
  color: var(--white);
  font-family: var(--po-font-display);
  font-weight: 800;
  font-size: 0.82rem;
}

.fce-steps li > * { margin: 0; }

/* ---- FACE : critères d'éligibilité --------------------------------------
   La maquette présente les critères en cartes sur deux colonnes, sans
   numérotation ni ponctuation finale. La feuille portée de la maquette les
   numérotait et repassait en une colonne : ces règles reprennent la main. */
.fce-crit ul,
.fce-crit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1.2rem;
}

.fce-crit ul { display: contents; }

.fce-crit li {
  counter-increment: none;
  background: var(--po-paper);
  border: 1px solid var(--po-line);
  padding: 1rem 1.1rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--po-ink);
  box-shadow: var(--po-shadow-sm);
  position: static;
}

/* Ni pastille numérotée, ni point final. */
.fce-crit li::before { content: none; }
.fce-crit li::marker { content: none; }

@media (max-width: 820px) {
  .fce-crit,
  .fce-crit ul { grid-template-columns: 1fr; }
}

/* ---- FACE : astérisque et note de bas de panneau ------------------------ */
.fce-star {
  color: var(--po-gold-600);
  font-weight: 800;
  margin-left: 0;
}

.fce-panel .fce-foot,
.fce-panel-body em,
.fce-panel-body p:last-child {
  display: block;
  margin-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--po-muted);
  font-style: normal;
}

/* ---- Page contact : colonne de gauche ------------------------------------
   Le sélecteur d'intention et les deux étapes sont décrits dans
   refonte-pages.css ; ne restent ici que les réglages liés au balisage réel
   de la page (Gravity Forms). */
.c2-step-2 { margin-top: 2.4rem; }

.c2-form .c2-privacy { margin-top: 1.1rem; }

/* ---- Page contact : carte des coordonnées --------------------------------
   Le sur-titre « Unité de Coordination » de la maquette n'apparaît pas : les
   .kicker sont masqués sur tout le site depuis les retours client v2. Le
   balisage est conservé pour qu'il revienne avec eux si la décision change. */

/* Intitulé au-dessus de la valeur, comme dans la maquette. */
.c2-coords .tx {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.c2-coords a:hover .tx > span { color: var(--white); }

/* ---- Formulaires Gravity Forms -------------------------------------------
   Habillage commun à tous les formulaires du site : questionnaires, appels à
   propositions, engagement de la société civile, page contact. Le conteneur
   .po-form est posé automatiquement autour de chaque formulaire par
   function/front/gravity-forms.php — les formulaires appartiennent au client,
   leur structure n'est pas touchée, seule leur apparence rejoint la charte.

   Les deux bandeaux d'inscription à la newsletter gardent leur mise en page
   compacte : ils sont exclus du conteneur commun.

   Les sélecteurs répètent .gform_wrapper.gravity-theme pour passer devant les
   règles du plugin, chargées après cette feuille. Ce qui reste en .c2-form est
   propre à la page contact : zone de dépôt de fichier, mention de
   confidentialité, largeurs de colonnes du formulaire 29.

   Le bouton d'envoi est vise deux fois : Gravity Forms le rendait en
   input[type=submit], il le rend en <button class="gform_button"> depuis la
   version 2.9. La regle ne s'appliquait plus a aucun formulaire du site. */
.po-form .gform_wrapper { margin: 0; }

.po-form .gform_wrapper.gravity-theme .gform_fields {
  grid-column-gap: 1rem;
  grid-row-gap: 1.1rem;
}

/* Nom et e-mail sur une même ligne, comme dans la maquette. Le formulaire de
   partenariat garde ses champs pleine largeur : ils sont bien plus nombreux. */
.c2-form #gform_wrapper_29 .gfield--type-name,
.c2-form #gform_wrapper_29 .gfield--type-email { grid-column: span 6; }

/* Étiquettes : le formulaire les masque au profit des seuls textes
   indicatifs, la maquette les affiche au-dessus du champ. */
.po-form .gform_wrapper.gravity-theme .gfield_label,
.po-form .gform_wrapper.gravity-theme .hidden_label .gfield_label {
  position: static;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0 0 0.4rem;
  padding: 0;
  overflow: visible;
  display: block;
  font-family: var(--po-font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--po-navy);
}

/* La mention « (Nécessaire) » n'apparaît pas dans la maquette : tous les
   champs affichés sont obligatoires. Elle reste lue par les lecteurs
   d'écran. */
.po-form .gform_wrapper.gravity-theme .gfield_required_text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/* Le groupe de cases à cocher n'a pas d'intitulé dans la maquette : la case
   se suffit à elle-même. */
.po-form .gform_wrapper.gravity-theme .gfield--type-checkbox > .gfield_label { display: none; }

/* Pot de miel anti-robots. */
.po-form .gform_wrapper.gravity-theme .gform_validation_container { display: none !important; }

/* Champs : fond crème, coins arrondis, filet doré à la saisie. */
.po-form .gform_wrapper.gravity-theme input[type="text"],
.po-form .gform_wrapper.gravity-theme input[type="email"],
.po-form .gform_wrapper.gravity-theme input[type="tel"],
.po-form .gform_wrapper.gravity-theme input[type="url"],
.po-form .gform_wrapper.gravity-theme input[type="number"],
.po-form .gform_wrapper.gravity-theme select,
.po-form .gform_wrapper.gravity-theme textarea {
  width: 100%;
  font-family: var(--po-font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--po-ink);
  background: var(--po-cream);
  border: 1.5px solid transparent;
  border-radius: var(--po-radius);
  padding: 0.75rem 0.95rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.po-form .gform_wrapper.gravity-theme input:focus,
.po-form .gform_wrapper.gravity-theme select:focus,
.po-form .gform_wrapper.gravity-theme textarea:focus {
  border-color: var(--po-gold);
  background: var(--white);
}

.po-form .gform_wrapper.gravity-theme input::placeholder,
.po-form .gform_wrapper.gravity-theme textarea::placeholder {
  color: rgb(var(--ink-800-rgb) / 0.45);
}

/* Une liste déroulante vide affiche son intitulé indicatif comme une vraie
   invite de saisie : même graisse et même gris que les autres textes
   indicatifs, alors que l'élément <select> les rend en pleine encre.
   La classe est posée par assets/js/main.js, le :has couvre le cas où le
   script n'a pas encore tourné. */
.po-form .gform_wrapper.gravity-theme select.kl-is-empty {
  font-weight: 400;
  color: rgb(var(--ink-800-rgb) / 0.45);
}

/* Règle séparée : un navigateur qui ignore :has() écarterait sinon la
   déclaration ci-dessus avec elle. */
.po-form .gform_wrapper.gravity-theme select:has(option.gf_placeholder:checked) {
  font-weight: 400;
  color: rgb(var(--ink-800-rgb) / 0.45);
}

/* Les options déroulées restent lisibles en pleine encre. */
.po-form .gform_wrapper.gravity-theme select option {
  font-weight: 400;
  color: var(--po-ink);
}

.po-form .gform_wrapper.gravity-theme .gfield textarea,
.po-form .gform_wrapper.gravity-theme .gfield textarea.small {
  height: auto;
  min-height: 140px;
  resize: vertical;
}

/* Deux champs libres partagent souvent une rangée alors que leur intitulé ne
   tient pas sur le même nombre de lignes (« Domaines d'intervention de
   l'organisation partenaire » passe sur deux lignes, « Type de l'organisation
   partenaire » sur une). Les zones de saisie sont donc calées sur le bas de la
   rangée : à hauteur égale, leurs bords hauts se rejoignent. */
.po-form .gform_wrapper.gravity-theme .gfield--type-textarea {
  display: flex;
  flex-direction: column;
}

.po-form .gform_wrapper.gravity-theme .gfield--type-textarea > .ginput_container {
  margin-top: auto;
}

/* Champ « Nom » : Gravity Forms le rend dans une grille interne. */
.po-form .gform_wrapper.gravity-theme .ginput_container_name .name_last { width: 100%; }

/* Case à cocher de la newsletter. */
.po-form .gform_wrapper.gravity-theme .gfield_checkbox .gchoice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.po-form .gform_wrapper.gravity-theme .gfield-choice-input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--po-gold-600);
}

.po-form .gform_wrapper.gravity-theme .gfield_checkbox label {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--po-muted);
}

/* Lien « Avis de confidentialité » du formulaire. */
.c2-form .kl-gform-link {
  font-size: 0.82rem;
  color: var(--po-gold-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Le CAPTCHA reste tel quel, il ne lui faut qu'un peu d'air. */
.po-form .gform_wrapper.gravity-theme .gfield--type-captcha .gfield_label { display: none; }

/* Bouton d'envoi : la pastille dorée de la maquette, flèche comprise. */
.po-form .gform_wrapper.gravity-theme .gform_footer {
  margin: 0.4rem 0 0;
  padding: 0;
}

.po-form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.po-form .gform_wrapper.gravity-theme .gform_footer button.gform_button {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  border: 1.5px solid transparent;
  border-radius: var(--po-radius);
  padding: 0.92rem 3.1rem 0.92rem 1.5rem;
  font-family: var(--po-font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--po-navy-900);
  background: var(--po-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F122D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-7 7 7-7 7'/%3E%3C/svg%3E") no-repeat right 1.2rem center;
  background-size: 18px 18px;
  box-shadow: 0 8px 20px rgb(var(--gold-rgb) / 0.32);
  cursor: pointer;
  transition: transform 0.25s var(--po-ease), background-color 0.25s, box-shadow 0.25s;
}

.po-form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.po-form .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover {
  transform: translateY(-2px);
  background-color: var(--gold-light);
  box-shadow: 0 12px 28px rgb(var(--gold-rgb) / 0.42);
}

/* ---- Devenir partenaire : zones de téléversement -------------------------
   Le champ natif est conservé — il porte le fichier posté et prend en charge le
   glisser-déposer — mais il est rendu transparent et étendu sur tout l'encadré
   pointillé construit par assets/js/refonte.js. */
.c2-form .c2-field-upload .ginput_container_fileupload { position: relative; }

/* Hauteur fixe plutôt qu'étirée sur la rangée : les deux encadrés restent
   jumeaux même lorsqu'un seul des deux champs porte un fichier, la ligne
   récapitulative venant alors s'ajouter dessous. */
.c2-form .c2-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* Assez haut pour absorber une mention de trois ou quatre lignes : les deux
     encadrés gardent alors la même hauteur sans dépendre l'un de l'autre. */
  min-height: 200px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  background: var(--po-cream);
  border: 1.5px dashed rgb(var(--gold-rgb) / 0.6);
  border-radius: var(--po-radius);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

/* Sans mention à afficher, le contenu se recentre. */
.c2-form .c2-drop:not(:has(.c2-drop-hint)) { justify-content: center; }

/* Survol du fichier glissé, et mise au point au clavier. */
.c2-form .c2-drop:hover,
.c2-form .c2-drop.is-drag,
.c2-form .c2-drop:focus-within {
  border-color: var(--po-gold);
  background: var(--white);
}

.c2-form .c2-drop.is-drag,
.c2-form .c2-drop:focus-within {
  border-style: solid;
  box-shadow: 0 10px 24px rgb(var(--gold-rgb) / 0.2);
}

/* Pastille dorée : même vocabulaire que le bouton d'envoi. */
.c2-form .c2-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  background: var(--po-gold);
  color: var(--po-navy-900);
  font-family: var(--po-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: 0 6px 16px rgb(var(--gold-rgb) / 0.3);
  transition: transform 0.25s var(--po-ease);
}

.c2-form .c2-drop-btn svg { width: 17px; height: 17px; }

.c2-form .c2-drop:hover .c2-drop-btn,
.c2-form .c2-drop.is-drag .c2-drop-btn { transform: translateY(-2px); }

.c2-form .c2-drop-lead {
  font-family: var(--po-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--po-navy);
}

/* Contraintes du champ (poids maximum, ratio attendu) : elles vivent dans
   l'encadré plutôt qu'en dessous. */
.c2-form .gform_wrapper.gravity-theme .c2-drop-hint {
  /* Calée sur le bas de l'encadré : la pastille et l'invite restent alors à la
     même hauteur d'un encadré à l'autre, quel que soit le nombre de lignes de
     la mention. */
  margin: auto 0 0;
  padding: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--po-muted);
}

/* Le champ natif couvre l'encadré : clic, tabulation et dépôt de fichier
   restent pris en charge par le navigateur. */
.c2-form .gform_wrapper.gravity-theme .c2-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--po-radius);
  opacity: 0;
  cursor: pointer;
}

/* Le décor ne doit pas intercepter le clic destiné au champ. */
.c2-form .c2-drop > :not(input) { pointer-events: none; }

/* Mention de règles doublonnée par la description du champ : conservée pour
   les lecteurs d'écran, retirée de l'affichage. */
.c2-form .gform_wrapper.gravity-theme .c2-drop-muted {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
}

/* Fichier retenu : une ligne récapitulative sous l'encadré, avec son poids et
   un bouton de retrait. Le même habillage sert à l'aperçu que Gravity Forms
   affiche lorsqu'un envoi repart en erreur. */
.c2-form .c2-drop-file,
.c2-form .c2-field-upload .ginput_preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.85rem;
  background: var(--white);
  border: 1.5px solid rgb(var(--navy-950-rgb) / 0.08);
  border-radius: var(--po-radius);
  font-size: 0.85rem;
  color: var(--po-navy);
}

.c2-form .c2-drop-file[hidden] { display: none; }

.c2-form .c2-drop-fic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgb(var(--gold-rgb) / 0.16);
  color: var(--po-gold-600);
}

.c2-form .c2-drop-fic svg { width: 17px; height: 17px; }

.c2-form .c2-drop-fmeta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.c2-form .c2-drop-fname {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--po-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c2-form .c2-drop-fsize {
  font-size: 0.75rem;
  color: var(--po-muted);
}

.c2-form .c2-drop-fdel {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--navy-950-rgb) / 0.06);
  color: var(--po-navy);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.c2-form .c2-drop-fdel:hover,
.c2-form .c2-drop-fdel:focus-visible {
  background: var(--state-error);
  color: var(--white);
}

.c2-form .c2-drop-fdel svg { width: 14px; height: 14px; }

/* Messages de validation et de confirmation. */
.po-form .gform_wrapper.gravity-theme .gform_validation_errors {
  border: 1px solid rgb(var(--state-error-rgb) / 0.35);
  border-radius: var(--po-radius);
  background: rgb(var(--state-error-rgb) / 0.07);
  box-shadow: none;
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
}

.po-form .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
  font-family: var(--po-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--state-error);
  margin: 0;
}

.po-form .gform_wrapper.gravity-theme .gfield_validation_message,
.po-form .gform_wrapper.gravity-theme .validation_message {
  background: none;
  border: 0;
  border-left: 2px solid var(--state-error);
  padding: 0 0 0 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--state-error);
}

.po-form .gform_confirmation_message {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--po-navy);
  text-align: center;
  padding: 2.2rem 1rem;
}

@media (max-width: 540px) {
  .c2-form #gform_wrapper_29 .gfield--type-name,
  .c2-form #gform_wrapper_29 .gfield--type-email { grid-column: span 12; }
}

/* ---- FACE : bande « Niveaux de financements » ---------------------------
   Fond beige de la page, et à l'intérieur un cartouche marine arrondi et
   centré : le montant doré à gauche, le texte à droite. */
.fce-amount-band {
  background: var(--po-cream);
}

.fce-amount-band > .wrap {
  max-width: 1040px;
  background: var(--po-navy);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) 1.7fr;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  color: rgb(var(--white-rgb) / 0.85);
}

.fce-amount-band .fce-amount {
  font-family: var(--po-font-title);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--po-gold);
}

.fce-amount-band .fce-amount span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--po-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgb(var(--white-rgb) / 0.7);
}

.fce-amount-band h2,
.fce-amount-band .kicker { color: var(--white); }
.fce-amount-band p { color: rgb(var(--white-rgb) / 0.85); }
.fce-amount-band p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .fce-amount-band > .wrap { grid-template-columns: 1fr; text-align: left; }
}

/* ---- FACE : sections sans image, sur toute la largeur ------------------- */
.fce-split.fce-split--full { display: block; }
.fce-split.fce-split--full .po-imgdesc-body ul { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 820px) {
  .fce-split.fce-split--full .po-imgdesc-body ul { grid-template-columns: 1fr; }
}

/* ---- Colonne média : vidéo à la place de l'image ------------------------ */
.fce-split-media.is-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--po-navy-900);
}

.fce-split-media.is-video iframe,
.fce-split-media.is-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- FACE : liste des bénéficiaires ------------------------------------- */
.fce-benef-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.fce-split--full .fce-benef-list { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.6rem; }

@media (max-width: 820px) {
  .fce-split--full .fce-benef-list { grid-template-columns: 1fr; }
}

/* Les pastilles d'icônes laissent la place à la coche dorée du panneau
   « Le FACE finance » : même glyphe, même graisse, même or. */
.fce-benef-list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--po-ink);
}

.fce-benef-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1em;
  font-weight: 800;
  color: var(--po-gold-600);
}

/* ---- FACE : appel à candidature ----------------------------------------
   Tout le contenu tient dans la colonne de gauche : la grille garde ses deux
   colonnes, la droite reste vide, comme sur la maquette. */
.fce-cta-band .face-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  /* Le gap de la grille servait à séparer deux colonnes ; ici tout est
     empilé dans la première, il n'a plus à écarter autant. */
  row-gap: 0;
}

.fce-cta-band .fcta-body,
.fce-cta-band .fcta-action {
  grid-column: 1;
}

.fce-cta-band .fcta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1rem;
}

@media (max-width: 760px) {
  .fce-cta-band .face-cta { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Réunions annuelles (RAPO)
   Hero pleine largeur, bandeau de navigation Ressources, prochaine édition
   mise en avant et frise alternée des éditions passées.
   ========================================================================== */

/* Hero « cover » : le texte se centre sur la photo. Le fond, lui, est celui de
   tous les heros de pages internes (.ph-bg / .ph-scrim, refonte-pages.css) :
   photo en niveaux de gris sous le voile marine de la page d'accueil. Seul le
   voile est repris ici, plus symétrique, le texte étant centré. */
.page-hero.ph-cover .ph-scrim {
  background:
    linear-gradient(180deg, rgb(var(--navy-900-rgb) / .88) 0%, rgb(var(--navy-900-rgb) / .66) 50%, rgb(var(--navy-900-rgb) / .86) 100%),
    rgb(var(--blue-veil-rgb) / .28);
}
.page-hero.ph-cover .wrap { position: relative; z-index: 2; text-align: center; padding-block: clamp(3.2rem,7vw,5.6rem); }
.page-hero.ph-cover .ph-copy { max-width: 60rem; margin-inline: auto; }
/* Le titre des pages internes est bridé à 18ch pour tenir dans une colonne ;
   ici il occupe toute la largeur et se centre. */
.page-hero.ph-cover h1 { max-width: none; }
.page-hero.ph-cover .ph-lead { margin-inline: auto; }
.page-hero.ph-cover .ph-stats { justify-content: center; gap: clamp(2rem,5vw,4.2rem); margin-top: 2.2rem; }
.page-hero.ph-cover .ph-stats .s { text-align: center; }
.page-hero.ph-cover .ph-stats .s b { font-size: clamp(2rem,1.4rem + 2vw,3rem); }
.page-hero.ph-cover .ph-stats .s span { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; }
/* Les pastilles décoratives et le bord déchiré n'ont pas lieu d'être : le
   bandeau doré vient se coller sous la photo. */
.page-hero.ph-cover::after,
.page-hero.ph-cover .ph-torn { display: none; }

/* Fiches conseiller / membre : le bandeau reprend le dégradé des heros de
   pages internes et le même filigrane, au lieu d'un aplat marine où la moitié
   droite restait vide. La photo, elle, garde sa colonne : un portrait ne se
   recadre pas en fond. */
.profil-hero {
  background:
    radial-gradient(118% 150% at 78% 6%, rgb(var(--blue-glow-rgb) / .5) 0%, rgb(var(--navy-rgb) / 0) 62%),
    linear-gradient(102deg, var(--navy-900) 0%, var(--navy) 54%, var(--navy-700) 100%);
}
.profil-hero::before {
  right: clamp(1.5rem,5vw,4rem);
  top: 46%;
  transform: translateY(-50%);
  width: min(28%, 330px);
  height: auto;
  aspect-ratio: 667 / 722;
  border-radius: 0;
  background: url("../img/refonte/africa_vector.svg") no-repeat center / contain;
  opacity: .09;
}
@media (max-width: 960px) {
  .profil-hero::before { opacity: .05; width: 40%; right: -8%; }
}

/* Bandeau de navigation entre les pages Ressources.
   Bandeau de 54 px sur un or uni : la maquette ne distingue pas le fond de
   « Ressources », seul un filet le sépare des onglets. Les liens occupent
   toute la hauteur pour que la barre de l'onglet actif touche le bas. */
.res-nav { background: var(--gold); position: relative; z-index: 3; }
.res-nav .wrap { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 clamp(1rem,3vw,2.4rem); min-height: 54px; }
.res-nav-label {
  display: flex;
  align-items: center;
  padding-right: clamp(1rem,3vw,2.2rem);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  font-size: 1.1rem;
  /* Bleu, car on est bien sur une page Ressources — mais sans barre : ce
     n'est pas un onglet. */
  color: var(--navy);
  border-right: 1px solid rgb(var(--navy-rgb) / .16);
}
.res-nav-list { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 clamp(1rem,3vw,2.4rem); list-style: none; margin: 0; padding: 0; }
.res-nav-list li { display: flex; }
.res-nav-link {
  display: flex;
  align-items: center;
  position: relative;
  color: var(--white);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s var(--ease);
}
.res-nav-link:hover,
.res-nav-link:focus-visible { color: var(--navy); }
.res-nav-link.on { color: var(--navy); }
.res-nav-link.on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--navy);
}

/* Prochaine édition. La maquette donne 53 % au texte et 47 % à la photo. */
.rapo-next {
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  align-items: stretch;
  background: var(--white);
  /* La maquette arrondit à ~8 px, pas aux 26 px que prend --radius en mode
     organique : on reste donc sur --po-radius. */
  border-radius: var(--po-radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.rapo-next-body { padding: clamp(1.6rem,4vw,3.2rem); }
.rapo-next-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rapo-next-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: var(--po-radius);
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .9rem;
  /* Légèrement de travers, comme sur la maquette. */
  transform: rotate(-2.6deg);
}
.rapo-next-badge svg { width: 16px; height: 16px; }
.rapo-next h2 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  color: var(--navy);
  font-size: clamp(1.55rem,1.15rem + 1.7vw,2.35rem);
  line-height: 1.18;
}
.rapo-next-text { margin-top: 1rem; color: var(--muted); line-height: 1.72; }
.rapo-next .btn { margin-top: 1.8rem; }

/* Ligne de repères (lieu, dates, précision), commune à l'encart et à la frise. */
.rapo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  margin-top: .9rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
}
.rapo-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.rapo-meta svg { width: 17px; height: 17px; flex: none; color: var(--gold); }

/* Frise des éditions passées.
   Cotes relevées sur la maquette (export à 2×, conteneur de 1240 px comme le
   .wrap du thème) : frise de 970 px, gouttière de 68 px de part et d'autre du
   trait, images de 330 px en 3/4. La frise est donc nettement plus étroite que
   le conteneur, c'est ce qui lui donne son air aéré. */
.rapo-tl {
  position: relative;
  list-style: none;
  max-width: 970px;
  margin: 0 auto;
  padding: 0;
}
.rapo-tl::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line);
}
.rapo-ev {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 68px;
  align-items: start;
  padding-block: clamp(1.6rem,4vw,3.1rem);
}
/* Le trait part du haut de la première image, pas du titre de section. */
.rapo-ev:first-child { padding-top: 0; }
.rapo-ev:last-child { padding-bottom: 0; }
.rapo-ev::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%,-50%);
}
.rapo-ev-media { grid-column: 1; grid-row: 1; justify-self: end; position: relative; width: 100%; max-width: 330px; }
.rapo-ev-body { grid-column: 2; grid-row: 1; }
/* Une ligne sur deux, l'image passe à droite et le texte se cale sur le trait. */
.rapo-ev.alt .rapo-ev-media { grid-column: 2; justify-self: start; }
.rapo-ev.alt .rapo-ev-body { grid-column: 1; text-align: right; }
.rapo-ev.alt .rapo-meta { justify-content: flex-end; }

.rapo-ev-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: var(--po-radius);
  box-shadow: var(--shadow-md);
}
.rapo-ev-badge {
  position: absolute;
  top: .85rem; left: .85rem;
  padding: .32rem .7rem;
  border-radius: var(--po-radius);
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .8rem;
}
.rapo-ev-kicker {
  display: block;
  color: var(--gold-600);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rapo-ev-year {
  display: block;
  margin-top: .15rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  color: var(--navy);
  font-size: clamp(2.6rem,1.6rem + 3vw,4.2rem);
  line-height: 1;
}
.rapo-ev-quote {
  margin-top: 1rem;
  color: var(--navy-700);
  font-style: italic;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.5;
}
.rapo-ev-text { margin-top: .8rem; color: var(--muted); line-height: 1.72; }
.rapo-ev-more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  color: var(--gold-600);
  font-weight: 700;
  transition: color .2s var(--ease);
}
.rapo-ev-more svg { width: 16px; height: 16px; }
.rapo-ev-more:hover,
.rapo-ev-more:focus-visible { color: var(--navy); }

@media (max-width: 860px) {
  .rapo-next { grid-template-columns: 1fr; }
  .rapo-next-media { order: -1; }
  .rapo-next-media img { height: auto; aspect-ratio: 16 / 10; }
}

@media (max-width: 900px) {
  /* Le trait rejoint le bord gauche, toutes les éditions s'alignent dessus. */
  .rapo-tl { max-width: 560px; }
  .rapo-tl::before { left: 4px; transform: none; }
  .rapo-ev,
  .rapo-ev.alt { grid-template-columns: 1fr; row-gap: 1.2rem; padding-left: clamp(1.4rem,5vw,2.2rem); }
  .rapo-ev .rapo-ev-media,
  .rapo-ev.alt .rapo-ev-media { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
  .rapo-ev .rapo-ev-body,
  .rapo-ev.alt .rapo-ev-body { grid-column: 1; grid-row: 2; text-align: left; }
  .rapo-ev.alt .rapo-meta { justify-content: flex-start; }
  .rapo-ev::after { left: 4px; top: 2.6rem; }
}

/* Le titre de la frise est centré, contrairement aux autres têtes de section ;
   le trait de pinceau suit. */
#editions .section-head { text-align: center; }
[data-dir="organique"] #editions .section-head h2::after { background-position: center bottom; }

/* Sur la bande marine, la maquette dessine des pastilles dorées avec une coche
   bleue, et non une coche dorée : le rond est le fond du pseudo-élément, la
   coche une image de fond centrée. */
.fce-navy .po-imgdesc-body li::before {
  width: 20px;
  height: 20px;
  top: 0.18em;
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  background: var(--po-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23212650' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

.fce-navy .po-imgdesc-body li { padding-left: 2rem; }

/* ---- Titrage en Chelsea Market ------------------------------------------
   La police n'a qu'une graisse (400). Une cinquantaine de règles de la
   refonte demandent encore 700 ou 800 à côté de --font-display, héritées du
   temps où cette variable pointait sur Bricolage Grotesque : sans cette
   consigne le navigateur les grossirait artificiellement, ce qui épaissit et
   salit le dessin des lettres. On laisse le faux italique actif, les polices
   de texte ayant de vraies italiques. */
:root {
  font-synthesis-weight: none;
}

/* ---- Accueil : bandeau newsletter ---------------------------------------
   La maquette place la photo à gauche, le discours et le formulaire à droite,
   avec un sur-titre doré à icône. Gravity Forms fournit le formulaire : son
   balisage est remis à plat pour tenir champ et bouton sur une seule ligne. */
.nl-grid { grid-template-columns: 0.95fr 1.05fr; }

/* refonte.css repasse le bandeau sur une colonne sous 820 px, mais la règle
   ci-dessus est chargée après : elle l'écrasait, media query comprise, et le
   bandeau gardait ses deux colonnes sur mobile — photo et formulaire écrasés,
   et la page débordait horizontalement sous 340 px. */
@media (max-width: 820px) {
  .nl-grid { grid-template-columns: 1fr; }
}

/* Les sur-titres ont été masqués partout (« Retours client v2 » dans
   refonte.css) ; celui-ci est explicitement demandé sur le bandeau newsletter. */
.nl-copy .kicker {
  display: inline-flex !important;
  margin-bottom: 0.7rem;
}

/* Sur-titre à icône : le trait du kicker cède la place au picto. */
.kicker-ico::before { display: none; }
.kicker-ico svg { width: 1.15em; height: 1.15em; }

.nl-form .gform_wrapper,
.nl-form .gform_wrapper.gravity-theme form {
  margin: 0;
  padding: 0;
}

/* Étiquette du champ (elle répétait le titre de la section), description et
   pot de miel : rien à afficher. */
.nl-form .gform_wrapper.gravity-theme .gfield_label,
.nl-form .gform_wrapper.gravity-theme .gfield_description,
.nl-form .gform_wrapper.gravity-theme .gform_validation_container,
.nl-form .gform_wrapper.gravity-theme .gfield--type-honeypot {
  display: none !important;
}

/* Champ et bouton sur une ligne ; le reCAPTCHA reste sous le champ. */
.nl-form .gform_wrapper.gravity-theme form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem;
}

.nl-form .gform_wrapper.gravity-theme .gform_body {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* La case de consentement passe avant le reCAPTCHA, juste sous la ligne
   champ + bouton. */
.nl-form .gform_wrapper.gravity-theme .gform_fields {
  display: flex;
  flex-direction: column;
  row-gap: 0;
}

.nl-form .gform_wrapper.gravity-theme .gfield--type-consent { order: 1; }
.nl-form .gform_wrapper.gravity-theme .gfield--type-captcha { order: 2; }

.nl-form .gform_wrapper.gravity-theme .gfield,
.nl-form .gform_wrapper.gravity-theme .ginput_container {
  margin: 0;
  padding: 0;
}

.nl-form .gform_wrapper.gravity-theme .gfield--type-captcha { margin-top: 0.8rem; }

/* Champ blanc sur le fond marine, texte foncé pour rester lisible. */
.nl-form .gform_wrapper.gravity-theme .gfield input[type="email"],
.nl-form .gform_wrapper.gravity-theme .gfield input[type="text"],
.nl-form .gform_wrapper.gravity-theme input.large {
  width: 100%;
  min-width: 0;
  height: 52px;
  min-height: 0;
  padding: 0 1.1rem !important;
  margin: 0 !important;
  border-radius: 8px;
  border-color: transparent;
  background: var(--white);
  color: var(--po-ink);
  font-size: 1rem;
}

.nl-form .gform_wrapper.gravity-theme .gfield input::placeholder {
  color: var(--po-muted);
}

.nl-form .gform_wrapper.gravity-theme .gfield input:focus {
  background: var(--white);
  border-color: var(--po-gold);
}

.nl-form .gform_wrapper.gravity-theme .gform_footer {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.nl-form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.nl-form .gform_wrapper.gravity-theme .gform_footer button.gform_button {
  height: 52px;
  min-height: 0;
  margin: 0;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 8px;
  background: var(--po-gold);
  color: var(--po-navy-900);
  font-family: var(--po-font-display);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.nl-form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.nl-form .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover {
  background: var(--gold-light);
}

/* Tant que le consentement n'est pas coché, l'envoi reste hors de portée. */
.nl-form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.nl-form .gform_wrapper.gravity-theme .gform_footer button.gform_button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.nl-form .gform_confirmation_message { color: var(--po-gold); font-weight: 600; }

.nl-form .gform_wrapper.gravity-theme .gfield_validation_message,
.nl-form .gform_wrapper.gravity-theme .validation_message {
  background: none;
  border: 0;
  padding: 0.3rem 0 0 !important;
  color: var(--po-gold-200);
  font-size: 0.8rem;
}

/* Case de consentement (champ RGPD du formulaire). */
.nl-form .gform_wrapper.gravity-theme .gfield--type-consent { margin-top: 0.9rem; }

.nl-form .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.nl-form .ginput_container_consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0.1rem 0 0 !important;
  padding: 0 !important;
  border: 0;
  background: none;
  accent-color: var(--po-gold);
  cursor: pointer;
}

.nl-form .ginput_container_consent label {
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgb(var(--white-rgb) / 0.75);
  cursor: pointer;
}

@media (max-width: 520px) {
  .nl-form .gform_wrapper.gravity-theme .gform_footer,
  .nl-form .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.nl-form .gform_wrapper.gravity-theme .gform_footer button.gform_button { width: 100%; }
}

/* ---- Page d'accueil : sur-titres de section ------------------------------
   La maquette pose un petit texte doré, précédé d'une feuille, au-dessus de
   chaque titre de section. Ces sur-titres viennent de champs de la page ; ils
   n'utilisent pas .kicker, masquée sur tout le site depuis les retours
   client v2. */
.sec-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  font-family: var(--po-font-body);
  font-size: var(--po-kicker);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--po-gold-600);
}

.sec-kicker::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--po-leaf) center / contain no-repeat;
}

/* Titres centrés : le sur-titre se centre avec eux. */
.sec-kicker.is-centre { justify-content: center; }

/* Sur le bandeau doré, la feuille dorée disparaîtrait : texte marine, sans
   glyphe, comme dans la maquette. */
.sec-kicker.on-gold { color: var(--po-navy-900); }
.sec-kicker.on-gold::before { display: none; }

/* Sur le fond marine de la newsletter. */
.sec-kicker.on-navy { color: var(--po-gold); }

/* ==========================================================================
   Blocs de contenu convertis
   --------------------------------------------------------------------------
   Les blocs ACF des pages Stratégie et FACE reprennent ici le vocabulaire de
   la page d'accueil : .section pour le rythme, .wrap pour la largeur, .rte
   pour le contenu riche. Voir templates/kit.php.
   ========================================================================== */

/* ---- Bloc « Texte & image » ---------------------------------------------
   Deux colonnes égales, image et texte alignés sur leur milieu. Le fond est
   optionnel : quand le rédacteur en choisit un, la section le prend et le
   texte bascule en clair si ce fond est sombre. */
.po-ti.has-bg { background: var(--po-ti-bg, transparent); }
.po-ti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}
.po-ti.media-right .po-ti-media { order: 2; }
.po-ti-media { margin: 0; }
.po-ti-media img {
  display: block;
  width: 100%;
  /* wp_get_attachment_image() pose width et height sur la balise : sans
     height:auto, cette hauteur explicite l'emporte et aspect-ratio n'a plus
     aucun effet — l'image reprend ses proportions d'origine. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.po-ti-copy > :first-child { margin-top: 0; }
.po-ti-copy > :last-child { margin-bottom: 0; }

/* Sur fond sombre, le contenu riche s'inverse : le titrage passe en doré,
   comme dans les bandeaux marine du reste du site. */
.po-ti.is-dark .rte p,
.po-ti.is-dark .rte li,
.po-ti.is-dark .rte ul,
.po-ti.is-dark .rte ol { color: rgb(var(--white-rgb) / .88); }
.po-ti.is-dark .rte h2,
.po-ti.is-dark .rte h3,
.po-ti.is-dark .rte h4 { color: var(--gold); }
.po-ti.is-dark .rte a { color: var(--gold-200); }
.po-ti.is-dark .rte a:hover { color: var(--white); }
.po-ti.is-dark .rte blockquote { color: var(--white); border-left-color: var(--gold); }

/* Une colonne sous 860 px : l'image repasse toujours au-dessus du texte,
   quel que soit son côté sur grand écran. */
@media (max-width: 860px) {
  .po-ti-grid { grid-template-columns: 1fr; }
  .po-ti.media-right .po-ti-media { order: 0; }
}

/* ---- Bloc « Newsletter » -------------------------------------------------
   Le bandeau est celui de l'accueil (.nl-grid) ; seule la couleur de fond
   reste réglable dans l'admin. */
.po-nl.has-bg { background: var(--po-nl-bg, var(--cream)); }
.po-nl.is-dark .nl-copy h2 { color: var(--white); }
.po-nl.is-dark .nl-copy p { color: rgb(var(--white-rgb) / .84); }

/* ---- Blocs de texte sur fond marine -------------------------------------
   Deux colonnes de lecture au-delà de 900 px, une seule en dessous : sur un
   téléphone, deux colonnes obligent à remonter à chaque paragraphe. */
.po-cols { column-count: 2; column-gap: clamp(1.6rem, 4vw, 3.2rem); }
.po-cols > :first-child { margin-top: 0; }
/* Pas de break-inside sur les paragraphes : les contenus de l'éditeur sont
   souvent un seul paragraphe coupé par des <br>. Rendu insécable, il occupait
   la première colonne et laissait la seconde vide. */
.po-cols li { break-inside: avoid; }
.po-cols h2, .po-cols h3, .po-cols h4 { break-after: avoid; }
@media (max-width: 900px) {
  .po-cols { column-count: 1; }
}

/* Contenu riche sur fond marine : le texte s'éclaircit, le titrage passe en
   doré — les mêmes règles que les bandeaux marine du reste du site. */
.section.navy .rte p,
.section.navy .rte li,
.section.navy .rte ul,
.section.navy .rte ol { color: rgb(var(--white-rgb) / .88); }
.section.navy .rte h2,
.section.navy .rte h3,
.section.navy .rte h4 { color: var(--gold); }
.section.navy .rte a { color: var(--gold-200); }
.section.navy .rte a:hover { color: var(--white); }
.section.navy .rte blockquote { color: var(--white); border-left-color: var(--gold); }
.section.navy .section-head h2 { color: var(--gold); }
.section.navy .section-head .lede { color: rgb(var(--white-rgb) / .8); }

/* ---- Bloc « Texte » : volets à onglets -----------------------------------
   La barre reprend les pastilles de filtre des listes (.lib-filters), en
   version sombre. Sans JavaScript, les volets restent tous affichés : c'est
   le script qui pose l'attribut hidden. */
.po-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
/* Les pastilles s'accordent au fond de leur section : claires sur marine,
   marine sur papier ou crème. La pastille active passe toujours en plein. */
.po-tab {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--po-radius-pill);
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.po-tab:hover { color: var(--gold-600); border-color: var(--gold); }
.po-tab.on {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.section.navy .po-tab {
  color: rgb(var(--white-rgb) / .78);
  background: rgb(var(--white-rgb) / .08);
  border-color: rgb(var(--white-rgb) / .18);
}
.section.navy .po-tab:hover { color: var(--white); border-color: rgb(var(--gold-rgb) / .6); }
.section.navy .po-tab.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}
.po-tabpanel[hidden] { display: none; }

/* ---- Ligne de profil ----------------------------------------------------
   Portrait à gauche, propos à droite. Partagée par les blocs « Information
   membre » et « Liste d'institutions ». */
.po-profil {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-top: 1px solid rgb(var(--white-rgb) / .14);
}
.po-profil:first-of-type { border-top: 0; }
.po-profil-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: rgb(var(--white-rgb) / .08); }
.po-profil-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-profil-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(var(--white-rgb) / .35); }
.po-profil-empty svg { width: 38%; height: 38%; }
.po-profil-socials { display: flex; gap: .5rem; margin-top: .8rem; }
.po-profil-socials a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgb(var(--white-rgb) / .28);
  border-radius: var(--po-radius-pill);
  color: rgb(var(--white-rgb) / .8);
  transition: background .2s, color .2s, border-color .2s;
}
.po-profil-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.po-profil-socials svg { width: 16px; height: 16px; }
.po-profil-body h3 { font-size: var(--h3); color: var(--white); margin-bottom: .3rem; }
.po-profil-role {
  display: block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}

/* ---- Bloc « Liste d'institutions » --------------------------------------- */
.po-institut-head {
  display: grid;
  grid-template-columns: 1fr minmax(0, 220px);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.po-institut-logo { background: var(--white); padding: 1rem; display: grid; place-items: center; }
.po-institut-logo img { max-width: 100%; height: auto; }
.po-institut-presentation { margin-top: clamp(1.8rem, 4vw, 3rem); }
.po-institut-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

/* ---- Bloc « Stratégie institutionnelle » --------------------------------- */
.po-inst-strat-top {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.po-inst-strat-media { margin-top: clamp(2rem, 4vw, 3.2rem); }

/* Tableau de la charte : filets clairs, en-tête marine, lignes alternées. */
.po-table-wrap { overflow-x: auto; }
.po-table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--paper); }
.po-table th {
  background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-align: left; padding: .75rem 1rem;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.po-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.po-table tbody tr:nth-child(even) { background: var(--cream); }
.po-table tbody tr:last-child td { border-bottom: 0; }

/* Étapes de planification : des cartes numérotées, à angles droits. */
.po-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.po-etape { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--po-shadow-card); padding: 1.4rem 1.4rem 1.6rem; }
.po-etape-num {
  display: block;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
  color: var(--gold); margin-bottom: .6rem;
}
.po-etape h3 { font-size: var(--h3); color: var(--navy); margin-bottom: .5rem; }

/* ---- Blocs « Membres » et « Points focaux » ------------------------------ */
.po-membres-sur {
  display: block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.po-membres-grid { margin-top: clamp(1.8rem, 4vw, 2.8rem); }
.po-membres .team-card { background: rgb(var(--white-rgb) / .06); border-color: rgb(var(--white-rgb) / .14); }
.po-membres .team-nm { color: var(--white); }
.po-membres .team-ti { color: rgb(var(--white-rgb) / .7); }
.team-lieu { display: flex; align-items: flex-start; gap: .4rem; font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.team-lieu svg { width: 14px; height: 14px; flex: none; color: var(--gold-600); margin-top: .15rem; }

/* ---- Bouton de téléchargement posé sur une image ------------------------- */
.po-ti-media { position: relative; }
.po-ti-dl { position: absolute; right: 0; bottom: 0; border-radius: 0; }

/* ---- Bloc « Questionnaire » ---------------------------------------------- */
.po-quest-form { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

@media (max-width: 900px) {
  .po-profil,
  .po-institut-head,
  .po-institut-cols,
  .po-inst-strat-top { grid-template-columns: 1fr; }
  .po-profil-photo { max-width: 260px; }
  .po-ti-dl { position: static; margin-top: .8rem; display: inline-flex; }
}

/* ==========================================================================
   Réunion annuelle (RAPO) — page d'une édition
   --------------------------------------------------------------------------
   Le gabarit le plus riche du site : résumé, webinaire, logistique,
   présentations, galerie, vidéos. Il reprend ici le vocabulaire commun ;
   seules les particularités de la page sont décrites.
   ========================================================================== */

/* Fond doré : le troisième aplat de la charte, après le papier et le marine. */
.section.gold { background: var(--gold); color: var(--navy-900); }
.section.gold .section-head h2 { color: var(--navy); }
.section.gold .rte p,
.section.gold .rte li { color: var(--navy-900); }
.section.gold .rte a { color: var(--navy); }
.section.gold .rte h2, .section.gold .rte h3, .section.gold .rte h4 { color: var(--navy); }

/* ---- Résumé -------------------------------------------------------------- */
.rapo-edition {
  display: block;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: .5rem;
}
.rapo-resume-grid { align-items: start; }
.rapo-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.4rem,3vw,2.2rem); }
.rapo-actions.center { justify-content: center; }

/* ---- Webinaire et calendrier --------------------------------------------- */
.rapo-cal-titre {
  font-size: var(--h3); color: var(--navy);
  text-align: center;
  margin: clamp(1.8rem,4vw,2.6rem) 0 clamp(1rem,2vw,1.4rem);
}
.rapo-cal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.rapo-cal-jour {
  display: flex; flex-direction: column; align-items: stretch; gap: .6rem;
  background: rgb(var(--white-rgb) / .3);
  padding: 1.1rem;
}
.rapo-cal-jour .btn { justify-content: center; }
.rapo-cal-date {
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--navy);
  text-align: center; margin-bottom: .2rem;
}

/* ---- Booklet ------------------------------------------------------------- */
.rapo-booklet-grid { grid-template-columns: minmax(0, .8fr) 1.2fr; }

/* ---- Présentations ------------------------------------------------------- */
.rapo-prez-panel {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem,4vw,3rem);
  align-items: start;
}
.rapo-prez-list { list-style: none; margin: 0; padding: 0; }
.rapo-prez-list li { border-bottom: 1px solid var(--line); }
.rapo-prez-list li:last-child { border-bottom: 0; }
.rapo-prez-list a {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 0;
  color: var(--navy);
  font-family: var(--font-display);
  transition: color .2s;
}
.rapo-prez-list a:hover { color: var(--gold-600); }
.rapo-prez-list svg { width: 18px; height: 18px; flex: none; color: var(--gold-600); }

/* ---- Galerie ------------------------------------------------------------- */
.rapo-galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.rapo-galerie-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(var(--white-rgb) / .06); }
.rapo-galerie-item img,
.rapo-galerie-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rapo-galerie .rapo-actions { justify-content: flex-end; }

/* ---- Vidéos -------------------------------------------------------------- */
.rapo-videos-grid {
  display: grid;
  /* min() : sous 320 px de large, la colonne suit la place disponible au lieu
     d'imposer ses 320 px et de faire déborder la page. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--gap);
}
.rapo-video { margin: 0; }
.rapo-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--navy-900); }
.rapo-video-frame iframe,
.rapo-video-frame video,
.rapo-video-frame > :is(div, p) > iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.rapo-video figcaption {
  margin-top: .6rem;
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 1rem;
}

@media (max-width: 900px) {
  .rapo-prez-panel,
  .rapo-booklet-grid { grid-template-columns: 1fr; }
}

/* ---- Toutes les éditions -------------------------------------------------
   Rail d'accès aux autres RAPO, en bas de fiche. Les onze éditions tiennent
   tout juste dans la colonne : au-delà, le rail défile horizontalement, et
   initEditionsRail() amène l'édition affichée dans le champ de vision. */
.rapo-ed-rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: .5rem;
}
.rapo-ed-list {
  display: flex;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rapo-ed-list li { display: flex; }
.rapo-ed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  min-width: 104px;
  padding: .7rem .95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
}
.rapo-ed-annee {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.15rem;
  line-height: 1;
}
.rapo-ed-meta {
  font-size: .72rem;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}
a.rapo-ed:hover,
a.rapo-ed:focus-visible { border-color: var(--gold); color: var(--gold-600); }
a.rapo-ed:hover .rapo-ed-meta,
a.rapo-ed:focus-visible .rapo-ed-meta { color: var(--navy); }
/* L'édition affichée : même pastille, en plein marine. */
.rapo-ed.is-on { background: var(--navy); border-color: var(--navy); }
.rapo-ed.is-on .rapo-ed-annee { color: var(--gold); }
.rapo-ed.is-on .rapo-ed-meta { color: rgb(var(--white-rgb) / .72); }

/* ---- Lauréats du concours d'excellence médiatique ------------------------
   Une carte par lauréat ; le détail s'ouvre dans la carte, qui grandit dans
   la grille. L'ancien gabarit positionnait un panneau flottant à la main. */
.rapo-laureats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
  align-items: start;
}
.rapo-laureat { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--po-shadow-card); }
.rapo-laureat-tete {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  background: none;
  border: 0;
  text-align: left;
}
.rapo-laureat-texte { display: block; }
.rapo-laureat-cat {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold-600);
  margin-bottom: .15rem;
}
.rapo-laureat-role {
  display: block;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}
.rapo-laureat-nom {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
  line-height: 1.15;
}
.rapo-laureat-photo { width: 84px; height: 84px; overflow: hidden; flex: none; }
.rapo-laureat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rapo-laureat.is-open { border-color: var(--gold); }
.rapo-laureat-detail { padding: 0 1.2rem 1.3rem; }
.rapo-laureat-detail h3 { font-size: 1rem; color: var(--gold-600); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; }
.rapo-laureat-cat-bloc { border-top: 1px solid var(--line); padding-top: .9rem; margin-top: .9rem; }
.rapo-laureat-cat-bloc:first-of-type { border-top: 0; margin-top: 0; }
.rapo-laureat-cat-nom { font-size: .9rem; color: var(--muted); }
.rapo-laureat-cat-nom b { color: var(--navy); }
.rapo-laureat-detail audio,
.rapo-laureat-detail video,
.rapo-laureat-detail img { width: 100%; margin: .7rem 0; display: block; }

/* ---- Chiffres clés ------------------------------------------------------- */
.rapo-chiffres-grid { justify-content: center; gap: clamp(2rem,5vw,4rem); }
.rapo-chiffres .s b { color: var(--gold-600); font-size: clamp(2rem,1.4rem + 2vw,3rem); }
.rapo-chiffres .s span { color: var(--muted); }

/* ---- Informations logistiques -------------------------------------------- */
.rapo-log-titre {
  font-family: var(--font-display);
  font-size: var(--h3);
  color: var(--navy);
  margin-bottom: .8rem;
}
.section.navy .rapo-log-titre { color: var(--gold); }
.rapo-log-media img { aspect-ratio: auto; max-height: 460px; object-fit: contain; }
.rapo-log-bloc + .rapo-log-bloc { margin-top: clamp(1.6rem,3vw,2.4rem); }

/* Cartes dépliantes : transports et bons plans. */
.rapo-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
  align-items: start;
}
.rapo-carte { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--po-shadow-card); }
.rapo-carte.is-open { border-color: var(--gold); }
.rapo-carte-tete {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: none; border: 0; text-align: left;
}
.rapo-carte-icone { width: 56px; height: auto; flex: none; }
.rapo-carte-nom {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
  text-transform: capitalize;
}
.rapo-carte-detail { padding: 0 1.2rem 1.3rem; }
.rapo-carte-detail h4 { font-size: 1.05rem; color: var(--gold-600); margin: .8rem 0 .4rem; }
.rapo-lieu { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .8rem; }
.rapo-lieu:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.rapo-lieu b { display: block; color: var(--navy); font-family: var(--font-display); font-size: 1.02rem; }
.rapo-lieu-label {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  margin-right: .3rem;
}

/* Hôtels : la carte document, avec un pied d'informations. */
.rapo-hotels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}
.rapo-hotel { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--po-shadow-card); }
.rapo-hotel-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream); }
.rapo-hotel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rapo-hotel-badge {
  position: absolute; left: 0; bottom: 0;
  background: var(--gold); color: var(--navy-900);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .35rem .7rem;
}
.rapo-hotel-corps { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.rapo-hotel-corps h3 { font-size: 1.15rem; color: var(--navy); }
.rapo-hotel-infos { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; font-size: .88rem; }
.rapo-hotel-infos dt { font-weight: 700; color: var(--muted); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.rapo-hotel-infos dd { margin: 0; color: var(--ink); }
.rapo-hotel-infos a { color: var(--gold-600); }
.rapo-hotel .btn { margin-top: auto; align-self: flex-start; }

/* Météo : le script remplit les deux conteneurs. */
.rapo-meteo { display: grid; grid-template-columns: minmax(120px, .25fr) 1fr; gap: 1rem; align-items: stretch; min-height: 280px; }
.rapo-meteo-fond { background-size: cover; background-position: center; background-repeat: no-repeat; }
.rapo-meteo-infos { display: flex; align-items: center; justify-content: center; }

/* Carte du lieu. */
.rapo-carte-plan { position: relative; aspect-ratio: 16 / 9; background: var(--cream); }
.rapo-carte-plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rapo-contact { list-style: none; margin: clamp(1.2rem,2.4vw,1.8rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.rapo-contact li { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; color: var(--ink); }
.rapo-contact svg { width: 18px; height: 18px; flex: none; color: var(--gold-600); margin-top: .15rem; }
.rapo-contact address { font-style: normal; margin: 0; }
.rapo-contact a { color: var(--navy); }
.rapo-contact a:hover { color: var(--gold-600); }

/* ---- Programme ----------------------------------------------------------- */
.rapo-session {
  display: grid;
  grid-template-columns: minmax(150px, .22fr) 1fr;
  gap: clamp(1rem,2.4vw,1.8rem);
  background: var(--paper);
  border: 1px solid var(--line);
  margin-bottom: clamp(.8rem,1.6vw,1.2rem);
}
.rapo-session-quand {
  background: var(--navy);
  color: var(--white);
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: .35rem;
  text-align: center;
}
.rapo-session-heure { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); line-height: 1; }
.rapo-session-fin,
.rapo-session-duree { font-size: .85rem; color: rgb(var(--white-rgb) / .8); }
.rapo-session-lieu {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  font-size: .8rem; color: rgb(var(--white-rgb) / .8);
  margin-top: .3rem;
}
.rapo-session-lieu svg { width: 14px; height: 14px; color: var(--gold); }
.rapo-session-invit {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-900); background: var(--gold);
  padding: .2rem .5rem; margin-top: .4rem;
}
.rapo-session-corps { padding: 1.1rem 1.2rem 1.2rem 0; }
.rapo-session-corps h3 { font-size: var(--h3); color: var(--navy); margin-bottom: .5rem; }
.rapo-session-intervenants { margin-top: .9rem; }
.rapo-session-intervenants ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem 1.2rem; }
.rapo-session-intervenants b { display: block; color: var(--navy); font-size: .95rem; }
.rapo-session-intervenants small { color: var(--muted); font-size: .82rem; }
.rapo-vide { color: var(--muted); text-align: center; padding: 2rem 0; }

@media (max-width: 760px) {
  .rapo-session { grid-template-columns: 1fr; }
  .rapo-session-quand { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .6rem 1rem; }
  .rapo-session-corps { padding: 0 1.2rem 1.2rem; }
  .rapo-meteo { grid-template-columns: 1fr; }
  .rapo-meteo-fond { min-height: 120px; }
}

/* ---- Carte des acteurs : champ, filtre et carte --------------------------
   Ces règles vivaient dans style.css, qui portait le squelette des contrôles
   (hauteurs, alignements) pendant que refonte-pages.css n'en reprenait que la
   peinture. Elles sont ramenées ici, en une seule définition. */
.carte-acteurs .ca-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 47px;
  padding: 0 .4rem 0 .9rem;
}
.carte-acteurs .ca-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-family: inherit;
}
.carte-acteurs .ca-search-input:focus { outline: none; }
.carte-acteurs .ca-search button { display: grid; place-items: center; width: 38px; height: 38px; cursor: pointer; }
.carte-acteurs .ca-search svg,
.carte-acteurs .ca-filtre svg { width: 18px; height: 18px; }
.carte-acteurs .ca-filtre { display: flex; align-items: stretch; }
.carte-acteurs .ca-filtre button { height: 47px; border: 0; cursor: pointer; }
.carte-acteurs .ca-map { width: 100%; height: clamp(360px, 52vh, 560px); }

/* ---- Boîte de dialogue ---------------------------------------------------
   Un <dialog> natif remplace la modale Bootstrap : c'était la dernière
   dépendance du site à cette bibliothèque. */
.po-dialog {
  border: 1px solid var(--line);
  border-radius: var(--po-radius);
  padding: 0;
  max-width: min(92vw, 420px);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.po-dialog::backdrop { background: rgb(var(--navy-900-rgb) / .55); }
.po-dialog-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.po-dialog-tete h2 { font-size: 1.05rem; color: var(--navy); }
.po-dialog-fermer {
  background: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--muted);
}
.po-dialog-fermer:hover { color: var(--navy); }
.po-dialog-fermer svg { width: 16px; height: 16px; }
.po-dialog-corps { padding: 1.2rem; font-size: .95rem; }

/* ==========================================================================
   Formulaires Gravity Forms — classes saisies dans l'administration
   --------------------------------------------------------------------------
   Ces classes sont posées sur les champs depuis les réglages des formulaires,
   pas par un gabarit : on ne peut pas les renommer depuis le code. Les règles
   qui les concernaient vivaient dans style.css ; elles sont reprises ici, ce
   qui libère l'ancienne feuille.

   Seules les regles qui s'appliquaient reellement sont reprises : celles que
   style.css portait sous un conteneur .kl-wrapper-gform ou
   .kl-form-engagement-strategy n'ont jamais eu d'effet, ces conteneurs
   n'existant sur aucune page.
   ========================================================================== */
.kl-color-yellow { color: var(--gold) !important; }
.kl-lh-2 { line-height: 2 !important; }
.kl-mt-30 { margin-top: 30px !important; }

/* Zone de dépôt de fichier : le champ natif est masqué derrière elle. */
.kl-input-file-gravity-form {
  position: relative;
  height: 150px;
  border: 4px solid var(--gold);
  padding: 14px 24px;
  overflow: hidden;
  cursor: pointer;
}
.kl-input-file-gravity-form .kl-download-file-custom-input { line-height: 1; }
.kl-input-file-gravity-form .kl-file-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: var(--grey-500);
}
.kl-input-file-gravity-form .kl-file-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
select.kl-is-empty { color: var(--muted); }
.kl-lh-1 { line-height: 1 !important; }
.kl-text-20 { font-size: 1.125rem; line-height: 1.5em; }
.js-trigger-input-file { margin-bottom: -26px; }
.gform_validation_errors,
.gfield_validation_message { background: transparent !important; box-shadow: none !important; border: none !important; }