/* ═══════════════════════════════════════════════════════════
   ithaque-asso.fr — page d'accueil (maquette)
   Reprend le système du catalogue de formations : fond craie,
   encre profonde, bleu Ithaque, ocre sable comme unique accent.
   Les jetons ci-dessous sont copiés à l'identique du catalogue,
   pour que les deux sites restent une seule et même maison.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --encre:   #10262e;
  --encre-2: #3d5560;
  --encre-3: #60727a;

  --ithaque:       #00597b;
  --ithaque-fonce: #003d56;
  --ithaque-clair: #e2eef3;

  --surligne:       #e8c56a;
  --surligne-fonce: #cfa848;

  /* Familles reprises du catalogue et du RA 2025 : les dispositifs
     d'Ithaque sont codés de la même façon d'un support à l'autre. */
  --fam-fondamentaux: #00597b;
  --fam-medicales:    #e07820;
  --fam-publics:      #7b52ab;
  --fam-postures:     #2aaa8a;
  --fam-medicales-txt: #b35f19;
  --fam-postures-txt:  #20846b;

  --craie:       #f5f6f2;
  --blanc:       #ffffff;
  --trait:       #dfe3da;
  --craie-fonce: #eff1ea;
  --trait-fort:  #c3cabb;

  --ombre-m: 0 4px 18px rgba(16,38,46,.10);
  --ombre-l: 0 10px 34px rgba(16,38,46,.14);

  --header-h: 62px;
  --ic-enveloppe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='1' y='1' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M1.8 2.6L10 9l8.2-6.4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --page: 1080px;

  --display: 'Archivo', 'Archivo Expanded', 'Helvetica Neue', Arial, sans-serif;
  --texte:   'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--texte);
  background: var(--craie);
  color: var(--encre);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ithaque); }
img { max-width: 100%; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--ithaque); color: var(--blanc);
  padding: 10px 18px; border-radius: 0 0 7px 0; z-index: 100;
}
.saut-contenu:focus { left: 0; top: 0; }
.hors-ecran {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Le geste signature du catalogue : un trait de surligneur derrière le texte. */
.surligne {
  background-image: linear-gradient(var(--surligne), var(--surligne));
  background-repeat: no-repeat;
  background-size: 100% .42em;
  background-position: 0 88%;
  padding: 0 .08em;
}

.page { max-width: var(--page); margin: 0 auto; padding: 0 24px; }

/* ── EN-TÊTE ─────────────────────────────────────────────── */

/* `body > header` et non `header` : la règle s'appliquait à TOUT élément
   <header>, y compris celui des articles (`<header class="art-tete">`). Ceux-ci
   héritaient donc d'une hauteur fixe de 62 px — d'où le titre qui débordait par
   dessus la photo — et d'un `position: sticky` avec z-index 50, qui les faisait
   flotter au-dessus du reste au défilement en recouvrant l'en-tête du site. */
body > header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(245,246,242,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.hd-in {
  max-width: var(--page); margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 14px;
}
.hd-logo img { width: 104px; height: auto; display: block; }
.hd-liens { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hd-lien {
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  color: var(--encre-2); text-decoration: none;
  padding: 7px 11px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.hd-lien:hover { background: var(--blanc); color: var(--encre); }
.hd-cta {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  background: var(--ithaque); color: var(--blanc); text-decoration: none;
  padding: 8px 15px; border-radius: 7px; margin-left: 6px;
  transition: background .15s;
}
.hd-cta:hover { background: var(--ithaque-fonce); }

/* ── BOUTONS ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: .88rem; font-weight: 600;
  letter-spacing: .02em; padding: 12px 22px; border-radius: 7px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-plein { background: var(--ithaque); color: var(--blanc); }
.btn-plein:hover { background: var(--ithaque-fonce); }
.btn-vide { background: var(--blanc); color: var(--encre); border-color: var(--trait-fort); }
.btn-vide:hover { border-color: var(--ithaque); color: var(--ithaque); }
.ic { width: 20px; height: 20px; flex-shrink: 0; }

.eyebrow {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3);
  margin-bottom: 10px;
}

/* ── ACCROCHE ────────────────────────────────────────────── */

/* Bandeau d'accroche pleine largeur. Le fond bleu très clair détache
   l'ouverture du reste de la page et donne au texte de quoi s'appuyer :
   sur fond craie, la colonne de texte flottait dans le vide. */
.bandeau-accroche {
  background: var(--ithaque-clair);
  border-bottom: 1px solid #cfe0e8;
}
.accroche { padding-block: 52px 46px; }
.accroche-grille {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 54px; align-items: start;
}

/* Les chiffres, repris du composant « faits » du catalogue : même
   graisse, même bleu, mêmes filets. Empilés ici plutôt qu'en ligne,
   parce qu'ils occupent une colonne et non toute la largeur. */
.faits {
  border-top: 1px solid #cfe0e8;
  margin-top: 6px;
}
.fait { padding: 13px 0; border-bottom: 1px solid #cfe0e8; }
.fait-val {
  font-family: var(--display); font-size: 1.62rem; font-weight: 700;
  font-variation-settings: 'wdth' 105; color: var(--ithaque); line-height: 1.05;
}
.fait-lib { font-size: .84rem; color: var(--encre-2); line-height: 1.4; margin-top: 2px; }
.faits-note {
  font-size: .74rem; color: var(--encre-3); margin-top: 9px;
  font-style: italic;
}

.accroche h1 {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: 'wdth' 106;
  font-size: clamp(2.1rem, 5.2vw, 3.3rem);
  line-height: 1.08; letter-spacing: -.022em; margin-bottom: 18px;
}
.accroche .chapo {
  font-size: 1.12rem; line-height: 1.7; color: var(--encre-2);
  max-width: 58ch;
}

/* Les deux portes d'entrée usager. Ce sont les seuls blocs de la page à
   porter une photo en fond : sur un site d'addictologie, la personne qui
   cherche de l'aide doit trouver son chemin avant tout le reste. */
.portes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 40px 0 4px;
}
.porte {
  position: relative; display: block; overflow: hidden;
  border-radius: 12px; min-height: 212px;
  text-decoration: none; color: var(--blanc);
  box-shadow: var(--ombre-m);
  transition: transform .2s, box-shadow .2s;
}
.porte:hover { transform: translateY(-3px); box-shadow: var(--ombre-l); }
.porte img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.porte::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(0,61,86,.62) 0%, rgba(16,38,46,.90) 78%);
}
.porte-txt { position: relative; z-index: 2; padding: 24px; }
.porte h2 {
  font-family: var(--display); font-size: 1.44rem; font-weight: 700;
  font-variation-settings: 'wdth' 104; line-height: 1.16;
  letter-spacing: -.012em; margin-bottom: 8px;
}
.porte p { font-size: .96rem; line-height: 1.55; color: rgba(255,255,255,.88); }
.porte-fleche {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--display); font-size: .84rem; font-weight: 600;
  color: var(--surligne);
}

/* ── SECTIONS ────────────────────────────────────────────── */

section { padding: 46px 0; }
.sec-tete { margin-bottom: 26px; }
.sec-tete h2 {
  font-family: var(--display); font-size: 1.62rem; font-weight: 700;
  font-variation-settings: 'wdth' 104; letter-spacing: -.015em;
  padding-bottom: 12px; border-bottom: 2px solid var(--encre);
}
.sec-tete p { margin-top: 14px; color: var(--encre-2); max-width: 64ch; }

/* ── ÉVÉNEMENT À LA UNE ──────────────────────────────────── */

.une {
  background: var(--encre); color: var(--blanc);
  border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr;
}
.une-txt { padding: 34px 34px 30px; }
.une-date {
  display: inline-block; background: var(--surligne); color: var(--encre);
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 5px; margin-bottom: 15px;
}
.une h2 {
  font-family: var(--display); font-size: 2.05rem; font-weight: 700;
  font-variation-settings: 'wdth' 106; line-height: 1.1;
  letter-spacing: -.02em; margin-bottom: 12px;
}
.une p { color: rgba(255,255,255,.84); font-size: 1.02rem; max-width: 46ch; }
.une-infos {
  display: flex; flex-wrap: wrap; gap: 22px; margin: 20px 0 24px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
}
.une-info-lib {
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 3px;
}
.une-info-val { font-size: .98rem; font-weight: 600; }
.une-img { position: relative; min-height: 270px; }
.une-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.btn-une { background: var(--surligne); color: var(--encre); }
.btn-une:hover { background: var(--surligne-fonce); }

/* ── DISPOSITIFS ─────────────────────────────────────────── */

.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte {
  background: var(--blanc); border: 1px solid var(--trait);
  border-top: 3px solid var(--fam-fondamentaux);
  border-radius: 10px; padding: 20px; text-decoration: none;
  display: block; color: var(--encre);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.carte:hover { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.carte[data-fam="medicales"] { border-top-color: var(--fam-medicales); }
.carte[data-fam="publics"]   { border-top-color: var(--fam-publics); }
.carte[data-fam="postures"]  { border-top-color: var(--fam-postures); }
.carte-sigle {
  font-family: var(--display); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fam-fondamentaux); margin-bottom: 9px;
}
.carte[data-fam="medicales"] .carte-sigle { color: var(--fam-medicales-txt); }
.carte[data-fam="publics"]   .carte-sigle { color: var(--fam-publics); }
.carte[data-fam="postures"]  .carte-sigle { color: var(--fam-postures-txt); }
.carte h3 {
  font-family: var(--display); font-size: 1.14rem; font-weight: 700;
  font-variation-settings: 'wdth' 103; line-height: 1.2;
  letter-spacing: -.01em; margin-bottom: 7px;
}
.carte p { font-size: .92rem; line-height: 1.55; color: var(--encre-2); }

/* ── ACTUALITÉS ──────────────────────────────────────────── */

.actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.actu {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 10px; overflow: hidden; text-decoration: none;
  color: var(--encre); display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.actu:hover { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.actu-img { aspect-ratio: 16/9; max-width: 100%; background: var(--craie-fonce); overflow: hidden; }
.actu-img img { width: 100%; height: 100%; object-fit: cover; }
.actu-txt { padding: 16px 17px 18px; }
.actu-cat {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ithaque); margin-bottom: 7px;
}
.actu h3 {
  font-family: var(--display); font-size: 1.04rem; font-weight: 700;
  line-height: 1.24; letter-spacing: -.008em;
}

/* ── SOUTENIR ────────────────────────────────────────────── */

.soutien {
  background: var(--ithaque-clair); border-radius: 14px;
  padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
  align-items: start;
}
.soutien h2 {
  font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  font-variation-settings: 'wdth' 105; letter-spacing: -.018em;
  line-height: 1.14; margin-bottom: 14px;
}
.soutien p { color: var(--encre-2); margin-bottom: 13px; }
.soutien-fiscal {
  background: var(--blanc); border-left: 3px solid var(--surligne);
  padding: 13px 16px; border-radius: 0 7px 7px 0;
  font-size: .93rem; color: var(--encre-2);
}

/* Le formulaire HelloAsso n'est inséré qu'au clic : aucun cookie tiers
   n'est déposé tant que le visiteur n'a pas demandé à donner.
   Voir la note « Intégration HelloAsso ». */
.ha-boite {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 10px; padding: 26px; text-align: center;
}
.ha-boite h3 {
  font-family: var(--display); font-size: 1.12rem; font-weight: 700;
  margin-bottom: 8px;
}
.ha-boite p { font-size: .9rem; color: var(--encre-2); margin-bottom: 16px; }
.ha-note {
  font-size: .78rem; color: var(--encre-3); margin-top: 14px;
  line-height: 1.5;
}
#ha-wrapper iframe { width: 100%; border: none; display: block; min-height: 600px; }

/* ── BANDE FORMATIONS ────────────────────────────────────── */

.bande {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 12px; padding: 28px 32px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.bande-txt { flex: 1 1 320px; }
.bande h2 {
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  letter-spacing: -.012em; margin-bottom: 8px;
}
.bande p { color: var(--encre-2); font-size: .98rem; }

/* ── PIED DE PAGE ────────────────────────────────────────── */

body > footer {
  background: var(--encre); color: rgba(255,255,255,.76);
  margin-top: 54px; padding: 44px 0 26px; font-size: .93rem;
}
.ft-grille {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.14);
}
body > footer h3 {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.52); margin-bottom: 13px;
}
body > footer a { color: rgba(255,255,255,.86); text-decoration: none; }
body > footer a:hover { color: var(--surligne); text-decoration: underline; }
body > footer ul { list-style: none; }
body > footer li { margin-bottom: 7px; }
.ft-bas {
  padding-top: 20px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.5);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .grille, .actus { grid-template-columns: repeat(2, 1fr); }
  .une { grid-template-columns: 1fr; }
  .une-img { min-height: 190px; order: -1; }
  .soutien { grid-template-columns: 1fr; }
  .ft-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .accroche-grille { grid-template-columns: 1fr; gap: 30px; }
  /* En une seule colonne, les chiffres reprennent la disposition en ligne
     du catalogue : deux par deux plutôt qu'empilés sur quatre rangs. */
  .faits { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .faits-note { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .portes { grid-template-columns: 1fr; }
  .accroche { padding-block: 34px 32px; }
  section { padding: 34px 0; }
}
@media (max-width: 460px) {
  .faits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grille, .actus, .ft-grille { grid-template-columns: 1fr; }
  .soutien, .bande { padding: 22px; }
  .une-txt { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── MENUS DÉROULANTS ────────────────────────────────────
   Ouverture au CLIC, jamais au seul survol : un menu qui s'ouvre au
   passage de la souris se déclenche par accident, se referme dès qu'on
   dévie du chemin, et n'existe pas pour un écran tactile. Le clic donne
   le même comportement à la souris, au clavier et au doigt. */

.hd-menu { position: relative; }
.hd-bouton {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  color: var(--encre-2); background: none; border: none; cursor: pointer;
  padding: 7px 11px; border-radius: 6px; font-feature-settings: inherit;
  transition: background .15s, color .15s;
}
.hd-bouton:hover { background: var(--blanc); color: var(--encre); }
.hd-bouton[aria-expanded="true"] { background: var(--blanc); color: var(--encre); }
.hd-chevron { width: 13px; height: 13px; transition: transform .18s; }
.hd-bouton[aria-expanded="true"] .hd-chevron { transform: rotate(180deg); }

.hd-panneau {
  position: absolute; top: calc(100% + 9px); left: 0;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 11px; box-shadow: var(--ombre-l);
  padding: 20px 22px; z-index: 60;
}
/* Le panneau à trois colonnes est plus large que le bouton qui l'ouvre :
   ancré à gauche, il sortait de l'écran. Ancré à droite, il se déploie
   vers l'intérieur de la page. */
.hd-panneau-large {
  left: auto; right: 0;
  display: grid; grid-template-columns: repeat(3, minmax(168px, 1fr));
  gap: 20px 26px;
  max-width: calc(100vw - 48px);
}
.hd-panneau-etroit { min-width: 268px; }
.hd-grp h3 {
  font-family: var(--display); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); margin-bottom: 9px;
  padding-bottom: 7px; border-bottom: 1px solid var(--trait);
}
.hd-grp ul { list-style: none; }
.hd-grp li { margin-bottom: 1px; }
.hd-grp a {
  display: block; padding: 5px 8px; margin-left: -8px;
  font-size: .9rem; color: var(--encre); text-decoration: none;
  border-radius: 5px; line-height: 1.35;
  transition: background .13s, color .13s;
}
.hd-grp a:hover { background: var(--craie); color: var(--ithaque); }
.hd-grp a small { display: block; font-size: .78rem; color: var(--encre-3); }
.hd-panneau-pied {
  grid-column: 1 / -1; margin-top: 4px; padding-top: 13px;
  border-top: 1px solid var(--trait);
}
.hd-panneau-pied a {
  font-family: var(--display); font-size: .84rem; font-weight: 600;
  color: var(--ithaque); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.hd-panneau-pied a:hover { text-decoration: underline; }

/* ── MENU MOBILE ─────────────────────────────────────────── */

.hd-burger {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--trait-fort); border-radius: 7px;
  padding: 7px 9px; cursor: pointer; color: var(--encre);
}
.hd-burger svg { width: 21px; height: 21px; display: block; }

@media (max-width: 860px) {
  /* Pas de flou sous l'en-tête en mobile : `backdrop-filter` fait de l'en-tête
     le repère des éléments `position: fixed` qu'il contient. Le menu, censé
     couvrir l'écran sous l'en-tête, se retrouvait enfermé dans ses 62 px —
     seule la première entrée restait visible. Fond opaque à la place. */
  body > header { backdrop-filter: none; background: rgb(245,246,242); }
  .hd-burger { display: block; }
  .hd-liens {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--craie); border-top: 1px solid var(--trait);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px 24px 40px; overflow-y: auto; margin-left: 0;
  }
  .hd-liens[hidden] { display: none !important; }
  .hd-liens .hd-lien {
    display: block; font-size: 1.02rem; padding: 13px 0;
    border-bottom: 1px solid var(--trait); border-radius: 0;
  }
  .hd-menu { position: static; }
  .hd-bouton {
    width: 100%; justify-content: space-between;
    font-size: 1.02rem; padding: 13px 0; border-bottom: 1px solid var(--trait);
    border-radius: 0;
  }
  .hd-bouton:hover, .hd-bouton[aria-expanded="true"] { background: none; }
  .hd-panneau {
    position: static; box-shadow: none; border: none;
    border-bottom: 1px solid var(--trait); border-radius: 0;
    padding: 6px 0 16px; background: none;
  }
  .hd-panneau-large { grid-template-columns: 1fr; gap: 16px; }
  .hd-cta { margin: 20px 0 0; text-align: center; padding: 13px; font-size: .95rem; }
}

/* ── BANDE PROFESSIONNELS ────────────────────────────────── */

.bande-pro { display: grid; grid-template-columns: .92fr 1.08fr; gap: 34px; align-items: start; }
.bande-pro h2 {
  font-size: 1.5rem; line-height: 1.2; margin-bottom: 10px;
  font-variation-settings: 'wdth' 104;
}
.pro-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pro-lien {
  display: block; padding: 14px 15px; border-radius: 9px;
  background: var(--craie); border: 1px solid transparent;
  text-decoration: none; transition: border-color .15s, background .15s;
}
.pro-lien:hover { background: var(--blanc); border-color: var(--ithaque); }
.pro-lien-nom {
  display: block; font-family: var(--display); font-size: .98rem;
  font-weight: 700; color: var(--encre); margin-bottom: 3px;
}
.pro-lien-des { display: block; font-size: .83rem; line-height: 1.45; color: var(--encre-2); }

@media (max-width: 900px) {
  .bande-pro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pro-liens { grid-template-columns: 1fr; }
}

/* ── LOGO DU PIED DE PAGE ────────────────────────────────── */

.ft-identite { display: flex; gap: 18px; align-items: flex-start; }
.ft-logo {
  width: 84px; height: 84px; flex-shrink: 0;
  /* Aucune retouche de couleur : le médaillon clair du logo est fait
     pour se poser sur un fond sombre. */
}
@media (max-width: 560px) {
  .ft-identite { flex-direction: column; gap: 14px; }
}

/* Lien de suite de section : « voir tout » sous une grille tronquée. */
.sec-suite { margin-top: 20px; }
.sec-suite a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: .92rem; font-weight: 600;
  color: var(--ithaque); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: border-color .15s;
}
.sec-suite a:hover { border-bottom-color: var(--ithaque); }

/* ── DÉFILEMENT DES DISPOSITIFS ──────────────────────────────
   Un défilement horizontal natif plutôt qu'un carrousel scripté : la
   molette, le doigt et les flèches du clavier fonctionnent sans qu'on
   ait à les reprogrammer, et le scroll-snap cale les cartes au bord.
   Les deux boutons ne font qu'ajouter une commande à la souris. */

.tourniquet { position: relative; }

.tq-piste {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  /* place pour l'ombre des cartes au survol, sinon rognée par overflow */
  padding: 4px 2px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--trait-fort) transparent;
}
.tq-piste::-webkit-scrollbar { height: 7px; }
.tq-piste::-webkit-scrollbar-track { background: var(--trait); border-radius: 4px; }
.tq-piste::-webkit-scrollbar-thumb { background: var(--trait-fort); border-radius: 4px; }
.tq-piste:focus-visible { outline: 3px solid var(--ithaque); outline-offset: 4px; border-radius: 10px; }

.tq-piste .carte {
  flex: 0 0 288px; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.tq-piste .carte p { flex: 1; }

.tq-fleche {
  position: absolute; top: 44%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanc); border: 1px solid var(--trait-fort);
  color: var(--encre); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--ombre-m);
  transition: border-color .15s, color .15s, opacity .15s;
}
.tq-fleche svg { width: 19px; height: 19px; }
.tq-fleche:hover { border-color: var(--ithaque); color: var(--ithaque); }
.tq-prec { left: -19px; }
.tq-suiv { right: -19px; }

/* Sur écran tactile, le doigt suffit : les boutons encombreraient. Les
   deux conditions sont exigées ensemble — « hover: none » seul est aussi
   rapporté par des navigateurs de bureau sans souris détectée, qui
   perdraient alors toute commande de défilement. */
@media (hover: none) and (pointer: coarse) {
  .tq-fleche { display: none; }
}
@media (max-width: 1160px) {
  .tq-prec { left: 4px; }
  .tq-suiv { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-piste { scroll-behavior: auto; }
}

/* ── PAGE ÉVÉNEMENT ──────────────────────────────────────── */

.bandeau-evt {
  background: var(--encre); color: var(--blanc);
  padding-block: 34px 44px; margin-bottom: 8px;
}
.fil-ariane { margin-bottom: 20px; font-size: .86rem; }
/* Le fil d'Ariane était écrit en blanc, ce qui ne vaut que sur les deux
   bandeaux sombres. Sur les pages d'article, sur les bandeaux clairs et sur
   les fiches de dispositif, il devenait illisible. On part donc de l'encre —
   le cas le plus fréquent — et on passe au blanc là où le fond est sombre. */
.fil-ariane a { color: var(--encre-2); text-decoration: none; }
.bandeau-evt .fil-ariane a,
.bandeau-dc .fil-ariane a { color: rgba(255,255,255,.62); }
.fil-ariane a:hover { color: var(--ithaque); }
.bandeau-evt .fil-ariane a:hover,
.bandeau-dc .fil-ariane a:hover { color: var(--surligne); }
.fil-ariane a::before { content: '← '; }

.bandeau-evt h1 {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: 'wdth' 106;
  font-size: clamp(2.2rem, 5.6vw, 3.5rem);
  line-height: 1.05; letter-spacing: -.024em; margin: 4px 0 10px;
}
.evt-sous {
  font-family: var(--display); font-size: 1.24rem; font-weight: 600;
  color: var(--surligne); margin-bottom: 10px;
}
.evt-chapo { color: rgba(255,255,255,.82); font-size: 1.04rem; max-width: 54ch; }

.evt-infos {
  display: flex; flex-wrap: wrap; gap: 38px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.evt-intro { font-size: 1.12rem; line-height: 1.7; }
section p { margin-bottom: 14px; line-height: 1.75; }

/* Les deux fils du programme, côte à côte : ce qui se passe au parc et
   les visites qui tournent en parallèle. */
.prog-grille { display: grid; grid-template-columns: 1.35fr .65fr; gap: 34px; align-items: start; }
.prog-fil-tete {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3);
  padding-bottom: 10px; border-bottom: 2px solid var(--trait-fort); margin-bottom: 6px;
}
.prog-fil-note { font-size: .92rem; color: var(--encre-2); margin: 14px 0 8px; }

.prog-item {
  display: grid; grid-template-columns: 116px 1fr; gap: 18px;
  padding: 17px 0; border-bottom: 1px solid var(--trait);
}
.prog-h {
  font-family: var(--display); font-size: .84rem; font-weight: 700;
  color: var(--ithaque); letter-spacing: .02em; padding-top: 2px;
}
.prog-c h4 {
  font-family: var(--display); font-size: 1.06rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -.008em; margin-bottom: 5px;
}
.prog-c p { font-size: .96rem; margin-bottom: 8px; }
.prog-c p:last-child { margin-bottom: 0; }
.prog-c ul { margin: 0 0 8px 18px; font-size: .95rem; color: var(--encre-2); }
.prog-c li { margin-bottom: 3px; }

.prog-fil-visites .prog-item { grid-template-columns: 1fr; gap: 3px; }
.prog-fil-visites .prog-h { padding-top: 0; }

.encadre {
  background: var(--ithaque-clair); border-radius: 9px;
  padding: 17px 19px; margin-top: 20px; font-size: .93rem;
}
.encadre p { margin-bottom: 9px; line-height: 1.6; }
.encadre p:last-child { margin-bottom: 0; }

.evt-pratique { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.evt-pratique h3 {
  font-family: var(--display); font-size: 1.04rem; font-weight: 700;
  margin-bottom: 8px;
}
.ft-note { font-size: .86rem; color: var(--encre-3); }

@media (max-width: 860px) {
  .prog-grille, .evt-pratique { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .prog-item { grid-template-columns: 1fr; gap: 4px; }
  .evt-infos { gap: 22px; }
}

/* ── PAGE DISPOSITIF ─────────────────────────────────────── */

/* Le bandeau reprend la couleur de famille du dispositif, celle des
   cartes de la page d'accueil et du catalogue : un même dispositif garde
   sa teinte d'un support à l'autre. */
.bandeau-disp {
  background: var(--craie-fonce);
  border-top: 4px solid var(--fam-fondamentaux);
  border-bottom: 1px solid var(--trait);
  padding-block: 30px 34px;
}
.bandeau-disp[data-fam="medicales"] { border-top-color: var(--fam-medicales); }
.bandeau-disp[data-fam="publics"]   { border-top-color: var(--fam-publics); }
.bandeau-disp[data-fam="postures"]  { border-top-color: var(--fam-postures); }

.bandeau-disp .fil-ariane a { color: var(--encre-3); }
.bandeau-disp .fil-ariane a:hover { color: var(--ithaque); }

.disp-sigle {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fam-fondamentaux); margin-bottom: 7px;
}
.bandeau-disp[data-fam="medicales"] .disp-sigle { color: var(--fam-medicales-txt); }
.bandeau-disp[data-fam="publics"]   .disp-sigle { color: var(--fam-publics); }
.bandeau-disp[data-fam="postures"]  .disp-sigle { color: var(--fam-postures-txt); }

.bandeau-disp h1 {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: 'wdth' 105;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.1; letter-spacing: -.02em; margin-bottom: 12px;
}
.disp-chapo { font-size: 1.08rem; line-height: 1.65; color: var(--encre-2); max-width: 62ch; }
.actions { margin-top: 20px; }

/* Texte à gauche, informations pratiques à droite : on doit pouvoir
   trouver l'adresse et les horaires sans lire la page. */
.disp-corps {
  display: grid; grid-template-columns: 1fr 322px; gap: 44px;
  align-items: start; padding: 42px 0 10px;
}
.disp-texte section { padding: 0 0 26px; }
.disp-texte h2 {
  font-family: var(--display); font-size: 1.36rem; font-weight: 700;
  font-variation-settings: 'wdth' 104; letter-spacing: -.012em;
  margin-bottom: 11px;
}
.disp-texte ul { margin: 0 0 12px 20px; }
.disp-texte li { margin-bottom: 5px; }
.disp-photo { margin: 6px 0 30px; }
.disp-photo img { width: 100%; height: auto; border-radius: 11px; display: block; }
/* Photo en hauteur : bridée en largeur, sinon elle occuperait tout un écran. */
.disp-photo-portrait { max-width: 440px; }
.disp-photo-petite { max-width: 300px; }

.encadre-fort {
  background: var(--ithaque-clair); padding: 24px 26px; font-size: 1rem;
}
.encadre-fort h2 { margin-bottom: 10px; }
.encadre-fort ul { margin: 0 0 12px 20px; }

/* Colonne pratique : collante sur grand écran, elle suit la lecture. */
.disp-pratique { position: sticky; top: calc(var(--header-h) + 18px); }
.pratique-bloc {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 11px; padding: 20px 22px; margin-bottom: 14px;
}
.pratique-bloc h2 {
  font-family: var(--display); font-size: 1.14rem; font-weight: 700;
  margin-bottom: 10px;
}
.pratique-bloc h3 {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
  margin-bottom: 11px;
}
.pratique-adresse { font-size: 1.02rem; font-weight: 600; margin-bottom: 7px; line-height: 1.45; }
.pratique-note { font-size: .88rem; color: var(--encre-2); margin-bottom: 9px; }

.horaires { width: 100%; border-collapse: collapse; font-size: .92rem; }
.horaires th {
  text-align: left; font-weight: 600; color: var(--encre);
  padding: 7px 10px 7px 0; vertical-align: top; white-space: nowrap;
}
.horaires td { padding: 7px 0; color: var(--encre-2); text-align: right; }
.horaires tr + tr th, .horaires tr + tr td { border-top: 1px solid var(--trait); }
.horaires-note {
  display: block; font-size: .78rem; font-style: italic; color: var(--encre-3);
}

.faits-compact { border-top: none; margin-top: 0; }
.faits-compact .fait:first-child { padding-top: 0; }
.faits-compact .fait:last-child { border-bottom: none; padding-bottom: 0; }

@media (max-width: 980px) {
  .disp-corps { grid-template-columns: 1fr; gap: 30px; }
  .disp-pratique { position: static; }
  .pratique-bloc { margin-bottom: 12px; }
}

.liste-objectifs { list-style: none; margin-left: 0 !important; }
.liste-objectifs li {
  padding: 11px 0 11px 30px; border-bottom: 1px solid var(--trait);
  position: relative;
}
.liste-objectifs li::before {
  content: ''; position: absolute; left: 4px; top: 19px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--surligne);
}

.grille-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .grille-2 { grid-template-columns: 1fr; } }

.bloc-outil {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 10px; padding: 17px 18px;
}
.bloc-outil h3 {
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  margin-bottom: 5px;
}
.bloc-outil p { font-size: .92rem; color: var(--encre-2); margin-bottom: 0; }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.etape { border-top: 3px solid var(--surligne); padding-top: 13px; }
.etape-num {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
  margin-bottom: 6px;
}
.etape p { font-size: .94rem; margin-bottom: 0; }
@media (max-width: 720px) { .etapes { grid-template-columns: 1fr; } }

.citation {
  border-left: 3px solid var(--surligne);
  padding: 4px 0 4px 20px; margin: 4px 0 6px;
}
.citation p { font-size: 1.05rem; font-style: italic; color: var(--encre); }
/* Signature : le nom, puis la fonction en dessous. Le style du pied de page
   du site est limité à `body > footer`, il ne déborde plus ici. */
.citation footer { margin-top: 12px; font-size: .9rem; line-height: 1.4; color: var(--encre-3); }
.citation-nom { display: block; font-weight: 700; color: var(--encre); font-size: .98rem; }
.citation-nom::before { content: "— "; }
.citation-role { display: block; padding-left: 1.15em; }

.temoignage {
  background: var(--craie-fonce); border-radius: 11px;
  padding: 24px 26px; font-size: 1rem; line-height: 1.8;
}
.temoignage p { margin-bottom: 15px; }
.temoignage-signature {
  font-family: var(--display); font-weight: 700; color: var(--encre-3);
  margin-bottom: 0 !important;
}

.horaires-ferme {
  display: block; font-size: .84rem; color: var(--encre-3);
  font-style: italic; margin-bottom: 2px;
}
.horaires-legende {
  font-size: .82rem; color: var(--encre-2); line-height: 1.5;
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--trait);
}

/* Horaires par créneau (12 rue Kuhn). Chaque créneau est nommé — matin,
   après-midi, soir — et porte sa condition d'accueil sur sa propre ligne.
   Dans l'ancienne présentation, « sur rendez-vous » tombait sous le bloc
   d'heures sans qu'on sache à quel créneau il s'appliquait, et « fermé le
   matin » se lisait comme une étiquette de l'horaire placé juste dessous.
   Le jour passe au-dessus de ses créneaux : la carte est trop étroite pour
   quatre colonnes (jour, moment, heures, condition). */
.horaires-creneaux, .horaires-creneaux tbody,
.horaires-creneaux tr, .horaires-creneaux th, .horaires-creneaux td { display: block; }
.horaires-creneaux tr { padding: 9px 0; }
.horaires-creneaux tr + tr { border-top: 1px solid var(--trait); }
.horaires-creneaux tr + tr th, .horaires-creneaux tr + tr td { border-top: none; }
.horaires-creneaux th { padding: 0 0 3px; }
.horaires-creneaux td { padding: 0; text-align: left; }
.creneaux { list-style: none; margin: 0; padding: 0; }
.creneaux li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px;
  align-items: baseline; padding: 2px 0;
}
.cr-moment { color: var(--encre-3); font-size: .86rem; }
.cr-heures { text-align: right; color: var(--encre); font-variant-numeric: tabular-nums; }
.cr-ferme .cr-heures { color: var(--encre-3); font-style: italic; }
.cr-tag {
  grid-column: 2; justify-self: end; margin-top: 2px;
  font-size: .74rem; font-weight: 600; line-height: 1.3;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.cr-rdv    { background: var(--ithaque-clair); color: var(--ithaque-fonce); }
.cr-femmes { background: #efe8f7; color: #5e3d88; }
.cr-exception { background: var(--craie-fonce); color: var(--encre-2); font-weight: 500; }

.lieu { padding: 15px 0; border-bottom: 1px solid var(--trait); }
.lieu h3 {
  font-family: var(--display); font-size: 1.06rem; font-weight: 700;
  margin-bottom: 5px;
}
.lieu-quand { margin-bottom: 4px !important; }
.lieu-ou { color: var(--encre-2); font-size: .95rem; margin-bottom: 4px !important; }
.lieu-note { font-size: .88rem; color: var(--encre-3); font-style: italic; margin-bottom: 0 !important; }

/* Bandeau d'un dispositif suspendu : l'information doit précéder la
   lecture, pas la conclure. */
.alerte-dispositif {
  background: #fdf4e3; border: 1px solid #e8d5a8;
  border-left: 4px solid var(--surligne-fonce);
  border-radius: 0 9px 9px 0; padding: 16px 20px; margin-top: 26px;
}
.alerte-dispositif p { margin-bottom: 0; font-size: .97rem; }

.liste-signaux { list-style: none; margin: 0 0 18px; }
.liste-signaux li {
  padding: 12px 0 12px 32px; border-bottom: 1px solid var(--trait);
  position: relative; line-height: 1.65;
}
.liste-signaux li::before {
  content: ''; position: absolute; left: 6px; top: 21px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ithaque); opacity: .55;
}
.bandeau-accroche .fil-ariane { margin-bottom: 14px; }
.bandeau-accroche .fil-ariane a { color: var(--encre-3); }
.bandeau-accroche .fil-ariane a:hover { color: var(--ithaque); }
.actions .btn { margin: 0 8px 8px 0; }

.exemple {
  background: var(--craie); border-radius: 7px; padding: 10px 12px;
  font-size: .9rem; margin-bottom: 0 !important;
}
.disp-pratique .ha-boite { margin-bottom: 14px; text-align: left; }
.disp-pratique .ha-boite h3 { letter-spacing: 0; text-transform: none; font-size: 1.14rem; color: var(--encre); }

.contact-tel { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin-bottom: 18px; }
.contact-tel a { text-decoration: none; }
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; }
.reseaux a {
  display: inline-block; padding: 9px 16px; border-radius: 7px;
  background: var(--blanc); border: 1px solid var(--trait-fort);
  text-decoration: none; font-family: var(--display); font-size: .88rem; font-weight: 600;
  color: var(--encre); transition: border-color .15s, color .15s;
}
.reseaux a:hover { border-color: var(--ithaque); color: var(--ithaque); }

.note-has {
  font-size: .93rem; font-style: italic; color: var(--encre-2);
  border-left: 2px solid var(--trait-fort); padding-left: 16px;
}

/* ---------- Cartes non cliquables (missions, faits) ---------- */
.carte-stat { cursor: default; }
.carte-stat:hover { transform: none; box-shadow: none; }

/* ---------- Chronologie (Notre histoire) ---------- */
.chrono {
  list-style: none; margin: 40px 0 0; padding: 0 0 0 0;
  position: relative;
}
.chrono-item {
  position: relative;
  display: grid; grid-template-columns: 96px 1fr; gap: 28px;
  padding: 0 0 34px 0;
}
.chrono-item::before {
  content: ""; position: absolute;
  left: 107px; top: 26px; bottom: -8px; width: 2px;
  background: var(--trait);
}
.chrono-item:last-child::before { display: none; }
.chrono-an {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  color: var(--ithaque); text-align: right; margin: 0;
  position: relative;
}
.chrono-an::after {
  content: ""; position: absolute;
  right: -17px; top: .42em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ithaque); border: 2px solid var(--craie);
  box-shadow: 0 0 0 3px var(--craie);
}
.chrono-txt h2 {
  font-size: 1.12rem; margin: 0 0 8px; line-height: 1.3;
}
.chrono-txt p { font-size: .96rem; line-height: 1.65; color: var(--encre-2); margin: 0 0 10px; }
.chrono-txt p:last-child { margin-bottom: 0; }
.chrono-fort .chrono-an { font-size: 1.6rem; }
.chrono-fort .chrono-an::after { background: var(--surligne); width: 14px; height: 14px; right: -19px; }
.chrono-fort .chrono-txt {
  background: var(--blanc); border: 1px solid var(--trait);
  border-left: 3px solid var(--surligne);
  border-radius: 10px; padding: 18px 20px;
}
.chrono-lien a { font-weight: 600; text-decoration: none; }
.chrono-lien a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .chrono-item { grid-template-columns: 1fr; gap: 6px; padding-bottom: 28px; }
  .chrono-item::before { display: none; }
  .chrono-an { text-align: left; }
  .chrono-an::after { display: none; }
  .chrono-txt { border-left: 2px solid var(--trait); padding-left: 16px; }
  .chrono-fort .chrono-txt { padding-left: 18px; }
}

/* ---------- Bandeau de logos partenaires ---------- */
.logos {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 40px;
}
.logos li { margin: 0; }
.logos img {
  max-height: 56px; width: auto; max-width: 160px;
  filter: grayscale(1); opacity: .72;
  transition: filter .18s, opacity .18s;
}
.logos a:hover img, .logos img:hover { filter: none; opacity: 1; }
/* Variante en couleur, pour les logos de financeurs affichés au titre d'une
   obligation de publicité : l'emblème de l'Union européenne doit rester en
   couleur, et au moins aussi visible que les logos qui l'accompagnent. */
.logos-couleur { margin-left: 0 !important; }
.logos-couleur li { padding-left: 0; }
.logos-couleur li::before { content: none; }
.logos-couleur img { filter: none; opacity: 1; max-width: 240px; max-height: 50px; }

/* ---------- Tableau de tarifs ---------- */
.tarifs {
  width: 100%; border-collapse: collapse; margin: 18px 0 0;
  font-size: .95rem;
}
.tarifs th, .tarifs td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--trait);
}
.tarifs thead th {
  font-family: var(--display); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-2); border-bottom-width: 2px;
}
.tarifs tbody th { font-weight: 500; }
.tarifs tbody td { font-weight: 600; white-space: nowrap; }
.tarifs tr:last-child th, .tarifs tr:last-child td { border-bottom: none; }

/* ---------- Offres d'emploi ---------- */
.offres { display: grid; gap: 12px; margin: 18px 0 20px; }
.offre {
  display: block; text-decoration: none; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait);
  border-left: 3px solid var(--fam-medicales);
  border-radius: 10px; padding: 16px 18px;
  transition: transform .18s, box-shadow .18s;
}
.offre:hover { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.offre-tag {
  display: inline-block; font-family: var(--display); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--fam-medicales-txt); margin-bottom: 6px;
}
.offre-nom {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; line-height: 1.35;
}
.offre-lieu { display: block; font-size: .9rem; color: var(--encre-2); margin-top: 4px; }

/* ---------- Listes de documents ---------- */
.ress-annee {
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--encre-2);
  margin: 26px 0 10px;
}
.docs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.docs li { margin: 0; }
.doc {
  display: block; text-decoration: none; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 10px; padding: 14px 16px 14px 48px;
  position: relative;
  transition: border-color .18s, box-shadow .18s;
}
.doc::before {
  content: ""; position: absolute; left: 16px; top: 15px;
  width: 18px; height: 22px;
  background: var(--ithaque);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M11 1H3.5A1.5 1.5 0 0 0 2 2.5v17A1.5 1.5 0 0 0 3.5 21h11a1.5 1.5 0 0 0 1.5-1.5V6l-5-5z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M11 1v5h5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5.5 12h7M5.5 15.5h7' stroke='%23000' stroke-width='1.6' stroke-linecap='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 18 22'%3E%3Cpath d='M11 1H3.5A1.5 1.5 0 0 0 2 2.5v17A1.5 1.5 0 0 0 3.5 21h11a1.5 1.5 0 0 0 1.5-1.5V6l-5-5z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M11 1v5h5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5.5 12h7M5.5 15.5h7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc:hover { border-color: var(--ithaque); box-shadow: var(--ombre-m); }
.doc-type {
  display: block; font-family: var(--display); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--encre-2);
  margin-bottom: 3px;
}
.doc-nom { display: block; font-weight: 600; line-height: 1.35; }
.doc-info { display: block; font-size: .85rem; color: var(--encre-2); margin-top: 3px; }
.doc-web::before { background: #8a6d1f; }
.doc-ext .doc-nom::after { content: " ↗"; color: var(--encre-2); font-weight: 400; }

/* La une de la rubrique Ressources n'a pas d'image */
.une-ressource { grid-template-columns: 1fr; text-decoration: none; }
.une-lien { font-weight: 600; color: var(--surligne); margin-top: 14px; }

/* ---------- Droit de citer ---------- */
.bandeau-dc {
  background: var(--encre); color: var(--blanc);
  padding-block: 56px 50px; margin-bottom: 0;
}
.bandeau-dc .eyebrow { color: var(--surligne); }
.bandeau-dc h1 {
  font-family: var(--display); font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700; font-variation-settings: 'wdth' 108;
  line-height: .98; letter-spacing: -.03em; margin: 8px 0 6px;
}
.dc-sur {
  font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.75rem);
  font-weight: 400; color: var(--surligne); margin: 0 0 18px;
}
.dc-credits { font-size: .92rem; color: rgba(255,255,255,.72); max-width: 60ch; }

.page-dc { padding-block: 44px 60px; }
.dc-intro, .parole, .dc-photo, .dc-dessin, .dc-duo, .dc-fin {
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.dc-intro { margin-bottom: 38px; }
.dc-intro h2 {
  font-size: 1.5rem; margin: 0 0 14px;
}
.dc-intro p { font-size: 1.02rem; line-height: 1.7; color: var(--encre-2); margin: 0 0 14px; }
.dc-questions { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 10px; }
.dc-questions li {
  background: var(--blanc); border-left: 3px solid var(--ithaque);
  border-radius: 0 8px 8px 0; padding: 12px 16px;
  font-size: .98rem; line-height: 1.6; font-style: italic; color: var(--encre);
}
.dc-merci { font-weight: 600; color: var(--encre) !important; }

.dc-photo, .dc-dessin { margin-block: 34px; }
.dc-photo img, .dc-dessin img {
  width: 100%; height: auto; border-radius: 10px; display: block;
}
.dc-photo-portrait img { max-height: 780px; width: auto; margin-inline: auto; }
.dc-dessin img { background: var(--blanc); }
.dc-dessin figcaption {
  font-size: .8rem; color: var(--encre-2); margin-top: 8px; text-align: right;
}
.dc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dc-duo .dc-photo { margin-block: 34px 0; }

.parole { margin-block: 34px; }
.parole-nom {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  color: var(--ithaque); margin: 0 0 12px;
  display: inline-block; border-bottom: 2px solid var(--surligne); padding-bottom: 3px;
}
.parole blockquote {
  margin: 0; padding: 22px 26px;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 12px;
}
.parole blockquote p {
  font-size: 1.03rem; line-height: 1.72; margin: 0 0 13px; color: var(--encre);
}
.parole blockquote p:last-child { margin-bottom: 0; }
.parole blockquote strong { font-weight: 600; background: linear-gradient(transparent 62%, rgba(232,197,106,.55) 62%); }
.parole-contexte { font-size: .9rem; color: var(--encre-2); font-style: italic; margin: 0 0 8px; }
.parole-question { font-style: italic; color: var(--encre-2); }
.parole-sep {
  border: none; border-top: 1px solid var(--trait);
  width: 60px; margin: 20px 0;
}
.parole-poeme blockquote p { line-height: 1.85; }
.poeme-decale { display: inline-block; margin-left: 5em; }
.parole-dessin .dc-dessin { max-width: 100%; margin-block: 0 18px; }

.dc-fin { margin-top: 48px; padding-top: 30px; border-top: 2px solid var(--trait); text-align: center; }
.dc-fin .dc-merci { font-size: 1.05rem; margin-bottom: 20px; }

@media (max-width: 720px) {
  .dc-duo { grid-template-columns: 1fr; }
  .parole blockquote { padding: 18px 18px; }
}

/* ---------- Vidéos YouTube à la demande ---------- */
.grille-video {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 20px;
}
.video { position: relative; }
.video-lancer {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 4px; text-align: left;
  background: var(--encre); color: var(--blanc);
  border: none; border-radius: 12px; padding: 20px;
  cursor: pointer; font: inherit;
  transition: box-shadow .18s, transform .18s;
}
.video-lancer:hover { transform: translateY(-2px); box-shadow: var(--ombre-l); }
.video-play {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--surligne);
  display: block;
}
.video-play::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 17px solid var(--encre);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.video-titre {
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  line-height: 1.35; position: relative;
}
.video-note {
  font-size: .8rem; color: rgba(255,255,255,.7); position: relative;
}
.video iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: 12px; display: block;
}
.video-mention { font-size: .85rem; color: var(--encre-2); margin-top: 14px; }

/* ---------- Programme d'un événement passé ---------- */
.prog-jour {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 14px; padding: 26px 28px; margin-bottom: 18px;
}
.prog-jour-tete { grid-column: 1 / -1; margin-bottom: 18px; }
.prog-jour-date {
  font-family: var(--display); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ithaque);
  margin: 0 0 5px;
}
.prog-jour-tete h3 { font-size: 1.28rem; margin: 0 0 5px; line-height: 1.25; }
.prog-jour-lieu { font-size: .92rem; color: var(--encre-2); margin: 0; }
.prog-jour-img { margin: 0; }
.prog-jour-img img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; display: block; }
.prog-jour-txt p { font-size: .97rem; line-height: 1.65; color: var(--encre-2); margin: 0 0 12px; }
.prog-jour-txt p:last-child { margin-bottom: 0; }
.evt-intro-sec { max-width: 74ch; margin-bottom: 32px; }
.evt-intro-sec h2 { font-size: 1.45rem; margin: 0 0 12px; }
.evt-intro-sec p { font-size: 1rem; line-height: 1.7; color: var(--encre-2); margin: 0 0 14px; }

@media (max-width: 760px) {
  .prog-jour { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .prog-jour-img img { max-height: 220px; }
}

/* ---------- Pages de texte long (légal) ---------- */
.page-texte { max-width: 860px; padding-block: 44px 60px; }
.page-texte section { margin-bottom: 38px; }
.page-texte h2 {
  font-size: 1.4rem; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--trait);
}
.page-texte h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.page-texte p { font-size: 1rem; line-height: 1.7; color: var(--encre-2); margin: 0 0 14px; }
.page-texte p:last-child { margin-bottom: 0; }
.page-texte .encadre p { margin-bottom: 10px; }

.sommaire {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 38px;
}
.sommaire-titre {
  font-family: var(--display); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--encre-2);
  margin: 0 0 10px !important;
}
.sommaire ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.sommaire li { margin: 0 0 6px; font-size: .95rem; break-inside: avoid; }

.fiche-legale { margin: 0; }
.fiche-legale dt {
  font-family: var(--display); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ithaque);
  margin-top: 16px;
}
.fiche-legale dt:first-child { margin-top: 0; }
.fiche-legale dd { margin: 5px 0 0; line-height: 1.6; color: var(--encre-2); }

.encadre-note {
  background: var(--blanc); border-left: 3px solid var(--surligne);
  border-radius: 0 8px 8px 0; padding: 14px 18px;
  font-size: .95rem !important;
}
.maj { font-size: .9rem !important; color: var(--encre-2); margin-top: 20px !important; }

@media (max-width: 620px) { .sommaire ol { columns: 1; } }

/* ---------- Article ---------- */
.page-article { max-width: 780px; padding-block: 40px 60px; }
.art-tete { margin-bottom: 26px; }
.art-meta {
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ithaque);
  margin: 0 0 10px;
}
.art-tete h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  font-weight: 700; font-variation-settings: 'wdth' 104;
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
}
.art-img { margin: 0 0 30px; }
.art-img img { width: 100%; height: auto; border-radius: 12px; display: block; }
.art-img figcaption { font-size: .82rem; color: var(--encre-2); margin-top: 8px; }
.art-corps { margin-bottom: 26px; }
.art-corps h2 { font-size: 1.35rem; margin: 30px 0 12px; }
.art-corps h3 { font-size: 1.08rem; margin: 24px 0 10px; }
.art-corps > *:first-child { margin-top: 0; }
.art-corps p { font-size: 1.04rem; line-height: 1.72; color: var(--encre-2); margin: 0 0 15px; }
.art-chapo { font-size: 1.15rem !important; color: var(--encre) !important; font-weight: 500; }
.art-corps .citation {
  margin: 0 0 14px; padding: 14px 20px;
  background: var(--blanc); border-left: 3px solid var(--surligne);
  border-radius: 0 8px 8px 0;
}
.art-corps .citation p { margin: 0; font-style: italic; color: var(--encre); }
.rdv {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 8px; padding: 12px 16px; font-size: .98rem !important;
}
.art-corps .grille-video { margin: 22px 0; }
/* `.art-pied` est un <footer> : on annule le style du pied de page du site
   (fond sombre, marges, taille de texte) qui s'y appliquerait sinon. */
.art-pied {
  background: none; color: inherit; font-size: inherit;
  border-top: 2px solid var(--trait); padding: 22px 0 0; margin-top: 34px;
}
.art-pied p { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.galerie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 30px;
}
.galerie img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* ---------- Podcast à la demande ---------- */
.podcast { margin: 22px 0; }
.podcast-lancer {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  background: var(--blanc); border: 1px solid var(--trait);
  border-left: 3px solid var(--ithaque);
  border-radius: 10px; padding: 16px 18px;
  cursor: pointer; font: inherit; color: var(--encre);
  transition: box-shadow .18s, transform .18s;
}
.podcast-lancer:hover { transform: translateY(-2px); box-shadow: var(--ombre-m); }
.podcast-icone {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ithaque); position: relative;
}
.podcast-icone::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 12px solid var(--blanc);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.podcast-titre { display: block; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.podcast-note { display: block; font-size: .84rem; color: var(--encre-2); margin-top: 3px; }
.podcast iframe { width: 100%; height: 150px; border: 0; border-radius: 10px; display: block; }

/* La une est cliquable dans son ensemble */
a.une { text-decoration: none; color: inherit; }
a.une:hover .une-lien { text-decoration: underline; }

/* ---------- Barre de rubrique du Pôle Formation ---------- */
/* Deux barres collantes mangent 108 px d'écran. Celle-ci ne colle donc
   qu'à partir de 900 px de large, là où la place ne manque pas. */
.pf-barre {
  background: var(--encre); color: var(--blanc);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pf-barre-in {
  max-width: var(--page); margin: 0 auto; padding: 0 24px;
  height: 46px; display: flex; align-items: center; gap: 22px;
}
.pf-barre-nom {
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: var(--blanc); text-decoration: none; white-space: nowrap;
  padding-right: 20px; border-right: 1px solid rgba(255,255,255,.2);
}
.pf-barre-liens {
  display: flex; gap: 22px; align-items: center;
  overflow-x: auto; scrollbar-width: none; flex: 1;
}
.pf-barre-liens::-webkit-scrollbar { display: none; }
.pf-barre-liens a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: .92rem; white-space: nowrap; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.pf-barre-liens a:hover { color: var(--blanc); border-bottom-color: var(--surligne); }
.pf-barre-cta {
  background: var(--surligne); color: var(--encre);
  font-family: var(--display); font-weight: 600; font-size: .86rem;
  text-decoration: none; padding: 7px 14px; border-radius: 6px;
  white-space: nowrap;
}
.pf-barre-cta:hover { filter: brightness(1.06); }

@media (min-width: 900px) {
  .pf-barre { position: sticky; top: var(--header-h); z-index: 45; }
  .page-formations { scroll-padding-top: calc(var(--header-h) + 46px + 12px); }
}
@media (max-width: 899px) {
  .page-formations { scroll-padding-top: calc(var(--header-h) + 12px); }
  .pf-barre-nom { display: none; }
  .pf-barre-in { padding: 0 16px; gap: 16px; }
}
@media (max-width: 560px) {
  .pf-barre-cta { display: none; }
}

/* Le catalogue portait son propre en-tête, fixe, et réservait de la place
   sous lui. Ici l'en-tête du site et la barre de rubrique occupent déjà le
   flux : on remet une gouttière normale. */
.pf {
  max-width: var(--page); margin: 0 auto;
  padding: 40px 32px 90px;
}
.pf .sur-page { top: calc(var(--header-h) + 46px); }
/* Les ancres doivent dégager les deux barres, pas seulement l'en-tête. */
.pf #catalogue, .pf #agenda, .pf #modalites, .pf #documents { scroll-margin-top: calc(var(--header-h) + 46px + 16px); }
@media (max-width: 899px) {
  .pf #catalogue, .pf #agenda, .pf #modalites, .pf #documents { scroll-margin-top: calc(var(--header-h) + 16px); }
}
@media (max-width: 720px) { .pf { padding: 32px 20px 70px; } }

/* ---------- Boutons « nous écrire » ---------- */
/* Les adresses ne sont plus affichées : un libellé d'action les remplace.
   Le trait discret et l'icône d'enveloppe signalent qu'il s'agit bien d'un
   lien de messagerie et non d'une page — sans quoi le lecteur ne saurait pas
   ce qui va s'ouvrir. */
.btn-ecrire {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  color: var(--ithaque); text-decoration: none;
  border: 1px solid var(--trait); border-radius: 8px;
  padding: 8px 14px; background: var(--blanc);
  transition: border-color .18s, box-shadow .18s;
}
.btn-ecrire::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--ic-enveloppe) center / contain no-repeat;
          mask: var(--ic-enveloppe) center / contain no-repeat;
}
.btn-ecrire:hover { border-color: var(--ithaque); box-shadow: var(--ombre-m); }

/* Sur fond sombre — pied de page, bandeaux de dispositif. */
body > footer .btn-ecrire, .bandeau-disp .btn-ecrire, .bandeau-evt .btn-ecrire, .une .btn-ecrire {
  background: transparent; color: var(--blanc);
  border-color: rgba(255,255,255,.34);
}
body > footer .btn-ecrire:hover, .bandeau-disp .btn-ecrire:hover,
.bandeau-evt .btn-ecrire:hover, .une .btn-ecrire:hover {
  border-color: var(--surligne); box-shadow: none;
}

/* Un bouton principal garde son apparence : seule l'icône s'ajoute. */
.btn.lien-mail::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  display: inline-block; vertical-align: -3px; margin-right: 8px;
  background: currentColor;
  -webkit-mask: var(--ic-enveloppe) center / contain no-repeat;
          mask: var(--ic-enveloppe) center / contain no-repeat;
}

/* Aucun poste ouvert : l'information doit se lire aussi vite qu'une offre. */
.aucune-offre {
  background: var(--blanc); border: 1px solid var(--trait);
  border-left: 3px solid var(--encre-2);
  border-radius: 0 8px 8px 0; padding: 14px 18px;
  font-weight: 600; color: var(--encre) !important;
}

/* ---------- Respiration autour des boutons ---------- */
/* Deux causes à l'étroitesse constatée :
   1. l'espacement des paragraphes vient de `section p`, or la colonne de
      droite est un <aside> : ses paragraphes n'avaient aucune marge, seuls
      .pratique-note et .pratique-adresse en portaient une ;
   2. un bouton fait 45 px de haut. La marge de 14 px prévue pour séparer
      deux lignes de texte le laisse collé à ce qui l'entoure. */

/* 1. La colonne de droite retrouve un rythme. */
.pratique-bloc p { margin-bottom: 12px; }
.pratique-bloc p:last-child { margin-bottom: 0; }

/* 2. Un paragraphe qui ne porte qu'un bouton respire davantage qu'un
      paragraphe de texte. `.actions` est exclu : il gère déjà son propre
      espacement, et regroupe souvent plusieurs boutons côte à côte. */
p:not(.actions):has(> .btn),
p:not(.actions):has(> .btn-ecrire) { margin-block: 26px 22px; }

/* Dans la colonne de droite, plus étroite, on reste plus serré. */
.pratique-bloc p:not(.actions):has(> .btn),
.pratique-bloc p:not(.actions):has(> .btn-ecrire) { margin-block: 16px 14px; }
.pratique-bloc p:last-child:has(> .btn),
.pratique-bloc p:last-child:has(> .btn-ecrire) { margin-bottom: 0; }

/* Plusieurs boutons à la suite dans un même paragraphe : ils s'espacent
   entre eux et passent à la ligne proprement sur petit écran. */
p:has(> .btn + .btn), p:has(> .btn-ecrire + .btn-ecrire),
p:has(> .btn + .btn-ecrire), p:has(> .btn-ecrire + .btn) {
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* Un bouton en fin d'encadré ne doit pas toucher le bord. */
.encadre p:last-child:has(> .btn),
.encadre p:last-child:has(> .btn-ecrire) { margin-bottom: 2px; }

/* ---------- Tableau de l'index d'égalité ---------- */
.index-eg {
  width: 100%; border-collapse: collapse; margin: 18px 0 12px;
  font-size: .92rem;
}
.index-eg caption {
  text-align: left; font-family: var(--display); font-size: .76rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--encre-2); padding-bottom: 10px;
}
.index-eg th, .index-eg td {
  padding: 10px 12px; border-bottom: 1px solid var(--trait);
  text-align: right; vertical-align: top;
}
.index-eg thead th {
  font-family: var(--display); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--encre-2); border-bottom-width: 2px;
}
.index-eg th:first-child { text-align: left; font-weight: 500; }
.index-eg thead th:first-child { font-weight: 700; }
/* Une ligne non retenue reste lisible, mais ne se lit pas comme un résultat. */
.index-nc { color: var(--encre-3); }
.index-eg tfoot th, .index-eg tfoot td { font-weight: 700; border-bottom: none; }
.index-eg tfoot tr:first-child th, .index-eg tfoot tr:first-child td {
  border-top: 2px solid var(--trait);
}
/* Sur petit écran, le tableau défile plutôt que d'écraser ses colonnes. */
@media (max-width: 720px) {
  .index-eg { display: block; overflow-x: auto; white-space: nowrap; }
  .index-eg th:first-child { white-space: normal; min-width: 210px; }
}

/* ---------- Bandeau de certification, pied de page ---------- */
.ft-certif {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 0 4px; flex-wrap: wrap;
}
.ft-certif-logo {
  flex: 0 0 auto; background: var(--blanc);
  border-radius: 8px; padding: 10px 14px; line-height: 0;
}
.ft-certif-logo img { width: 190px; height: auto; display: block; }
.ft-certif p {
  font-size: .85rem; color: rgba(255,255,255,.62);
  max-width: 62ch; margin: 0;
}
@media (max-width: 560px) {
  .ft-certif { gap: 14px; }
  .ft-certif-logo img { width: 160px; }
}

/* Précision sous les boutons d'un bandeau d'événement. */
.evt-inscription-note {
  font-size: .86rem; color: rgba(255,255,255,.62);
  max-width: 64ch; margin-top: 12px;
}

/* ---------- Photographies d'une page d'événement ---------- */
/* Deux images côte à côte, une panoramique et une verticale : la grille les
   met à la même hauteur plutôt que de laisser la verticale dépasser. */
.evt-photos {
  display: grid; grid-template-columns: 1.85fr 1fr; gap: 16px;
  margin: 8px 0 34px;
}
.evt-photo { margin: 0; }
.evt-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
}
.evt-photos .evt-photo img { height: 340px; object-fit: cover; }
/* L'image verticale est recadrée vers le haut : le sommet du phare est le
   sujet, un recadrage centré le décapite. */
.evt-photo-haute img { object-position: center 18%; }
.evt-photo figcaption {
  font-size: .84rem; color: var(--encre-2); margin-top: 8px; line-height: 1.45;
}
/* Dans la colonne des visites, l'image s'insère dans le fil du programme. */
.prog-fil .evt-photo { margin: 4px 0 18px; }
.prog-fil .evt-photo img { border-radius: 10px; }

@media (max-width: 760px) {
  .evt-photos { grid-template-columns: 1fr; }
  .evt-photos .evt-photo img { height: auto; }
}

/* Deux groupes empilés dans une même colonne du menu déroulant : « Médecine de
   ville » ne compte qu'une entrée, le panneau reste ainsi sur trois colonnes. */
.hd-col { display: grid; gap: 18px; align-content: start; }

/* ---------- Le catalogue sous deux barres, pas une ---------- */
/* Les règles collantes du catalogue supposent un en-tête unique de 62 px :
   c'est vrai quand il est publié seul, ce n'est plus le cas ici, où la barre
   de rubrique ajoute 46 px. Sans correction, la barre de filtres se colle au
   même endroit que la barre de rubrique et passe par-dessus — son z-index de
   100 la faisait même recouvrir l'en-tête du site.

   Ces règles corrigent l'intégration, pas le catalogue : sa feuille reste
   juste pour un usage autonome. D'où la surcharge par `.page-formations`,
   plus spécifique, plutôt qu'une modification de `formations.css` — qui est
   de toute façon régénérée par integrer_catalogue.py. */
@media (min-width: 900px) {
  .page-formations .pf .filtres {
    top: calc(var(--header-h) + 46px);
    z-index: 40;                 /* sous la barre de rubrique (45) et l'en-tête (50) */
  }
  .page-formations .pf .sommaire { top: calc(var(--header-h) + 46px + 18px); }
}
@media (max-width: 899px) {
  /* En dessous de 900 px la barre de rubrique n'est plus collante :
     les filtres retrouvent leur position d'origine. */
  .page-formations .pf .filtres { top: var(--header-h); z-index: 40; }
}