/* ==========================================================================
   FDS Normandie — styles métier
   Principe : la carte SANS image est le modèle par défaut. L'image est un bonus.
   Couleurs : les 6 familles de la charte officielle 2026.
   ========================================================================== */

:root {
  --fds-orange: #FF9940;
  --fds-bleu:   #5770BE;
  --fds-rouge:  #E1000F;
  --fds-vert:   #169B62;
  --fds-jaune:  #FFE800;
  --fds-noir:   #000000;

  --fds-creme:  #F4EFE6;
  --fds-encre:  #16130F;
  --fds-gris:   #6B6459;
  --fds-trait:  #E2DACE;

  --fds-r:      10px;
  --fds-gap:    clamp(1rem, 2.5vw, 1.75rem);
  --fds-pad:    clamp(1rem, 4vw, 2rem);
}

/* ------------------------------------------------------------------ Layout */
.fds-wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--fds-pad); }

.fds-grid {
  display: grid;
  gap: var(--fds-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.fds-section { margin-block: clamp(2.5rem, 7vw, 4.5rem); }

.fds-section__title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 .35em;
  letter-spacing: -.02em;
}

.fds-section__intro { color: var(--fds-gris); max-width: 62ch; margin: 0 0 1.75rem; }

/* ------------------------------------------------------- Carte (défaut = sans image) */
.fds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fds-trait);
  border-radius: var(--fds-r);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.fds-card:hover,
.fds-card:focus-within { transform: translateY(-3px); box-shadow: 0 10px 26px rgb(22 19 15 / .1); }

/* Le filet de couleur remplace l'image : c'est lui qui identifie la famille. */
.fds-card__rule { height: 5px; background: var(--fds-bleu); flex: none; }

.fds-card__media { aspect-ratio: 16 / 10; background: var(--fds-creme); }
.fds-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fds-card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }

.fds-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fds-gris);
}

.fds-card__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--fds-bleu); flex: none; }

.fds-card__date { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--fds-encre); }
.fds-card__hour { font-weight: 500; color: var(--fds-gris); }

.fds-card__title { font-size: 1.12rem; line-height: 1.28; margin: 0; letter-spacing: -.01em; }
.fds-card__title a { color: inherit; text-decoration: none; }
.fds-card__title a::after { content: ""; position: absolute; inset: 0; }
.fds-card__title a:hover { text-decoration: underline; text-underline-offset: .15em; }

.fds-card__excerpt { font-size: .93rem; line-height: 1.5; color: var(--fds-gris); margin: 0; }

.fds-card__foot {
  margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--fds-trait);
  font-size: .82rem; color: var(--fds-gris);
  display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center;
}

/* ------------------------------------------------------------------ Badges */
.fds-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--fds-creme); color: var(--fds-encre);
}
.fds-badge--gratuit  { background: #E7F5EC; color: #0B6B3A; }
.fds-badge--complet  { background: #FFF1E0; color: #8A4B00; }
.fds-badge--annule   { background: #FDE7E9; color: #A1000B; }

/* ------------------------------------------------------------------ Filtres */
.fds-filters {
  background: var(--fds-creme);
  border-radius: var(--fds-r);
  padding: 1.1rem;
  margin-bottom: 1.75rem;
}

.fds-filters__row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }

.fds-field { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 170px; min-width: 0; }
.fds-field label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fds-gris); }

.fds-field select,
.fds-field input {
  width: 100%; padding: .6rem .7rem; font-size: 1rem;
  border: 1px solid var(--fds-trait); border-radius: 8px; background: #fff; color: var(--fds-encre);
  min-height: 44px;
}

.fds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.15rem; min-height: 44px;
  border: 1px solid var(--fds-encre); border-radius: 8px;
  background: var(--fds-encre); color: #fff;
  font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
}
.fds-btn:hover { background: #000; color: #fff; }
.fds-btn--ghost { background: transparent; color: var(--fds-encre); }
.fds-btn--ghost:hover { background: var(--fds-encre); color: #fff; }

.fds-count { font-size: .9rem; color: var(--fds-gris); margin-bottom: 1rem; }

/* ------------------------------------------------------------------- Fiche */
.fds-hero { border-bottom: 1px solid var(--fds-trait); padding-block: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 2rem; }
.fds-hero__rule { height: 6px; border-radius: 3px; background: var(--fds-bleu); width: 88px; margin-bottom: 1.1rem; }
.fds-hero__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fds-gris); margin-bottom: .5rem; }
.fds-hero__title { font-size: clamp(1.9rem, 5.5vw, 3.1rem); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .5rem; }
.fds-hero__lede { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5; color: var(--fds-gris); max-width: 60ch; margin: 0; }

/* Informations pratiques : toujours avant le récit. */
.fds-practical {
  display: grid; gap: 1px; background: var(--fds-trait);
  border: 1px solid var(--fds-trait); border-radius: var(--fds-r); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: 2rem;
}
.fds-practical__item { background: #fff; padding: 1rem 1.1rem; }
.fds-practical__label { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fds-gris); margin-bottom: .3rem; }
.fds-practical__value { font-size: 1rem; line-height: 1.4; color: var(--fds-encre); }
.fds-practical__value a { color: inherit; }

.fds-columns { display: grid; gap: var(--fds-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fds-columns { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* La colonne latérale empile des encadrés distincts : qui organise d'un côté,
   comment venir de l'autre. Fondus dans un seul cadre, ils se lisaient comme
   une même information. */
.fds-aside { display: grid; gap: 1rem; align-content: start; }
.fds-aside__carte { background: var(--fds-creme); border-radius: var(--fds-r); padding: 1.25rem; }
.fds-aside h2 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .75rem; }
.fds-aside__carte > p { margin: 0 0 .75rem; }
.fds-aside__carte > p:last-child { margin-bottom: 0; }
.fds-aside__contact { font-size: .92rem; color: var(--fds-gris); }

/* Liste de séances */
.fds-seances { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fds-seances li {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  padding: .6rem .8rem; background: #fff; border: 1px solid var(--fds-trait); border-radius: 8px;
}
.fds-seances strong { font-size: 1rem; }

/* --------------------------------------------------------------- Accueil */
/* Bande pleine largeur, sur le dégradé rose relevé sur l'affiche officielle 2026 :
   #FFC5C6 en haut et en bas, #FBB1B5 en bande centrale. Le visuel s'y fond sans couture. */
.fds-home-hero {
  background: linear-gradient(180deg, #FFC6C7 0%, #FBB2B6 50%, #FEC4C6 100%);
  padding-block: clamp(2.5rem, 8vw, 5rem);
}
.fds-home-hero__title { font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 .4em; max-width: 16ch; }
.fds-home-hero__title em { font-style: italic; font-weight: 400; }
.fds-home-hero__lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--fds-gris); max-width: 54ch; margin: 0 0 1.75rem; }

/* -------------------------------------------------------------- Vide / a11y */
.fds-empty { background: var(--fds-creme); border-radius: var(--fds-r); padding: 2rem; text-align: center; }
.fds-empty p { margin: 0 0 1rem; color: var(--fds-gris); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--fds-bleu); outline-offset: 2px;
}

.fds-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .fds-card { transition: none; }
  .fds-card:hover { transform: none; }
}

/* ==========================================================================
   SPRINT 5 — En-tête et héros uniquement.
   Ajouts en fin de fichier : aucune règle existante n'est modifiée.
   ========================================================================== */

:root {
  --fds-header-bg: #1F1B17;              /* anthracite chaud — jamais noir pur */
  --fds-header-line: rgb(255 255 255 / .13);
}

/* ----------------------------------------------------------------- EN-TÊTE */
.fds-header {
  background: var(--fds-header-bg);
  color: #fff;
  position: relative;
  border-bottom: 1px solid var(--fds-header-line);
}

.fds-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 72px;
  max-width: 1240px; margin-inline: auto; padding-inline: var(--fds-pad);
}

.fds-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; flex: none; }
.fds-brand img { height: 38px; width: auto; display: block; }
.fds-brand__region {
  font-size: .67rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: rgb(255 255 255 / .7); line-height: 1.3;
  padding-left: .8rem; border-left: 1px solid var(--fds-header-line);
}

.fds-nav { margin-left: auto; }
.fds-nav ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }

/* Spacing plus généreux + zone cliquable confortable */
.fds-nav a {
  display: block; padding: .6rem .85rem; border-radius: 6px;
  color: rgb(255 255 255 / .8); text-decoration: none;
  font-size: .94rem; font-weight: 500; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.fds-nav a:hover { color: #fff; background: rgb(255 255 255 / .07); }

/* État actif : un filet rouge sous l'onglet. Lisible, sobre, jamais criard. */
.fds-nav .current-menu-item > a,
.fds-nav .current_page_item > a,
.fds-nav .current-menu-parent > a {
  color: #fff; font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--fds-rouge);
  border-radius: 6px 6px 0 0;
}

.fds-burger {
  display: none; margin-left: auto; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--fds-header-line); border-radius: 6px;
  color: #fff; padding: .55rem .8rem; font: inherit; font-size: .9rem; font-weight: 700;
  cursor: pointer; min-height: 44px;
}

@media (max-width: 900px) {
  .fds-burger { display: inline-flex; }
  .fds-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 90;
    background: var(--fds-header-bg); border-bottom: 1px solid var(--fds-header-line);
    padding: .5rem var(--fds-pad) 1rem;
  }
  .fds-nav.is-open { display: block; }
  .fds-nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  .fds-nav a { padding: .85rem .6rem; font-size: 1.02rem; }
  .fds-nav .current-menu-item > a { box-shadow: inset 3px 0 0 var(--fds-rouge); border-radius: 6px; }
}

.fds-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #fff; color: var(--fds-encre); padding: .8rem 1.2rem; font-weight: 700;
}
.fds-skip:focus { left: 0; }

.fds-header :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ HÉROS */
/* La composition, les proportions et les espacements d'origine sont conservés :
   on ajoute seulement une colonne étroite pour le médaillon. */
.fds-home-hero__head {
  display: flex; align-items: center;
  gap: clamp(1.1rem, 3vw, 2.5rem);
  justify-content: space-between;
}
.fds-home-hero__text { min-width: 0; }

/* Le thème de l'édition, en emphase discrète dans le chapô */
.fds-theme-name { color: var(--fds-encre); font-weight: 700; }
.fds-theme-name em { font-style: italic; font-weight: 400; }

/* Signature visuelle : détail de l'affiche officielle en médaillon.
   Le cercle est le motif fondateur de la charte. Petit, jamais dominant. */
/* Le visuel officiel n'est plus un objet posé : ses bords se dissolvent dans
   le rose du Hero. Ni cercle, ni cadre, ni ombre — une composition d'affiche. */
.fds-home-hero__visual {
  flex: none;
  width: clamp(230px, 38vw, 545px);
  aspect-ratio: 4 / 3;
  align-self: center;
  overflow: hidden;
  /* Le fondu part tôt : seul le cœur de l'image reste opaque, tout le rose
     périphérique se dissout dans le fond. Aucune arête, aucun rectangle. */
  -webkit-mask-image: radial-gradient(74% 82% at 54% 45%, #000 18%, transparent 74%);
          mask-image: radial-gradient(74% 82% at 54% 45%, #000 18%, transparent 74%);
}

.fds-home-hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% 46%;
  display: block;
  /* Rapproché : le bras et le cupcake occupent réellement la composition. */
  transform: scale(1.34);
}

/* Lisibilité sur fond rose : les gris d'origine tombaient à 3,4:1.
   Ce brun chaud atteint 4,9:1 — conforme AA — et reste dans l'univers de l'affiche. */
.fds-home-hero .fds-hero__kicker,
.fds-home-hero__lede { color: #6B4044; }
.fds-home-hero__title,
.fds-theme-name { color: #1C1815; }

/* Tablette : le visuel se réduit mais reste dans la composition. */
@media (max-width: 900px) {
  .fds-home-hero__visual { width: clamp(200px, 32vw, 300px); }
}

/* Mobile : empilement — le texte d'abord, le visuel dessous, pleine largeur
   et sans recadrage serré. Le moteur de recherche reste en dernier. */
@media (max-width: 660px) {
  .fds-home-hero__head { display: block; }
  .fds-home-hero__visual {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: 1.25rem;
  }
  .fds-home-hero__visual {
    -webkit-mask-image: radial-gradient(66% 96% at 52% 48%, #000 16%, transparent 76%);
            mask-image: radial-gradient(66% 96% at 52% 48%, #000 16%, transparent 76%);
  }
  .fds-home-hero__visual img { object-position: 52% 47%; transform: scale(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  .fds-nav a { transition: none; }
}

/* ------------------------------------------------- Robustesse de l'en-tête */
/* L'en-tête ne se réorganise jamais : logo à gauche, action à droite. */
.fds-header__inner { flex-wrap: nowrap; }
.fds-brand { min-width: 0; }
.fds-brand img { flex: none; }
.fds-brand__region { white-space: nowrap; }

/* Sous 420 px, le logo seul suffit : la mention région serrerait le bouton. */
@media (max-width: 420px) {
  .fds-brand__region { display: none; }
}

/* ==========================================================================
   PIED DE PAGE — composant global
   Même univers que l'en-tête : anthracite chaud, filets discrets, sobriété.
   Toutes les règles sont préfixées .fds-footer — aucun autre composant touché.
   ========================================================================== */

.fds-footer {
  background: var(--fds-header-bg);            /* #1F1B17 — identique à l'en-tête */
  color: #B5AEA8;                              /* 7,8:1 sur le fond — AA large */
  margin-top: clamp(3rem, 8vw, 5.5rem);
  padding-block: clamp(2.5rem, 6vw, 4rem) 0;
  font-size: .95rem;
  line-height: 1.55;
}

.fds-footer a { color: #E8E4E0; text-decoration: none; }   /* 12,9:1 — AAA */
.fds-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: .22em; }
.fds-footer :focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* ------------------------------------------------------------------ Grille */
.fds-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  grid-template-columns: 1fr;                  /* mobile : une colonne */
}
@media (min-width: 600px) {                    /* tablette : deux colonnes */
  .fds-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fds-footer__identity { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {                   /* desktop : quatre zones */
  .fds-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.15fr; }
  .fds-footer__identity { grid-column: auto; }
}

/* ------------------------------------------------------- Zone 1 · identité */
.fds-footer__brand { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; }
.fds-footer__brand img { height: 38px; width: auto; display: block; }
.fds-footer__brand:hover { text-decoration: none; }

.fds-footer__region {
  font-size: .67rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: #B5AEA8; white-space: nowrap;
  padding-left: .8rem; border-left: 1px solid rgb(255 255 255 / .16);
}

.fds-footer__claim {
  color: #fff; font-size: 1.06rem; line-height: 1.4; font-weight: 700;
  letter-spacing: -.01em; max-width: 26ch; margin: 0 0 .7rem;
}
.fds-footer__dates { margin: 0 0 1rem; color: #E8E4E0; font-weight: 500; }
.fds-footer__coord { margin: 0 0 1.5rem; max-width: 34ch; }

/* Réseaux sociaux : sobres, jamais géants, cible tactile de 44 px */
.fds-social { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.fds-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .18);
  transition: background-color .18s ease, border-color .18s ease;
}
.fds-social a:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .38); text-decoration: none; }
.fds-social svg { width: 19px; height: 19px; fill: #E8E4E0; }
.fds-social a:hover svg { fill: #fff; }

/* --------------------------------------------- Zones 2, 3 et 4 · colonnes */
.fds-footer__col h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin: 0 0 1rem;
}
.fds-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.fds-footer__col a {
  display: flex; align-items: center;
  min-height: 44px;                            /* cible tactile confortable */
  padding-block: .1rem;
}
@media (min-width: 1000px) {
  .fds-footer__col ul { gap: .55rem; }
  .fds-footer__col a { min-height: 0; }        /* au clavier/souris, pas besoin de 44 px */
}

/* ------------------------------------------------------ Bandeau inférieur */
.fds-footer__bottom {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-block: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / .13);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.75rem; justify-content: space-between;
  font-size: .86rem;
}
.fds-footer__copy { margin: 0; color: #9A938C; }

.fds-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem 1.5rem; list-style: none; margin: 0; padding: 0;
}
@media (max-width: 599px) {
  .fds-footer__legal { gap: 0 1.25rem; }
  .fds-footer__legal a { display: flex; align-items: center; min-height: 44px; }
}
/* Mention d'état, pas un lien : elle ne doit pas se lire comme cliquable. */
.fds-footer__note { color: #9A938C; }

/* ==========================================================================
   ACTUALITÉS + COORDINATION RÉGIONALE
   Ajouts en fin de fichier. Aucune règle existante n'est modifiée.
   ========================================================================== */

/* ------------------------------------------------------------- Actualités */
.fds-news { display: grid; gap: var(--fds-gap); grid-template-columns: 1fr; }
@media (min-width: 860px) { .fds-news { grid-template-columns: 1.3fr 1fr; align-items: start; } }

.fds-news__lead,
.fds-news__item { position: relative; }

.fds-news__media { aspect-ratio: 16 / 10; border-radius: var(--fds-r); overflow: hidden; background: var(--fds-creme); margin-bottom: 1rem; }
.fds-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.fds-news__lead:hover .fds-news__media img { transform: scale(1.03); }

.fds-news__side { display: grid; gap: 1.15rem; align-content: start; }

.fds-news__item {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 1rem; align-items: start;
  padding-bottom: 1.15rem; border-bottom: 1px solid var(--fds-trait);
}
.fds-news__item:last-child { border-bottom: 0; padding-bottom: 0; }

.fds-news__thumb { aspect-ratio: 1; border-radius: var(--fds-r); overflow: hidden; background: var(--fds-creme); }
.fds-news__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fds-news__date {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fds-gris); margin: 0 0 .4rem;
}

.fds-news__title { margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -.01em; }
.fds-news__lead .fds-news__title { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.fds-news__item .fds-news__title { font-size: 1.02rem; margin-bottom: 0; }

.fds-news__title a { color: inherit; text-decoration: none; }
.fds-news__title a::after { content: ""; position: absolute; inset: 0; }
.fds-news__title a:hover { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 2px; }

.fds-news__excerpt { font-size: .97rem; line-height: 1.55; color: var(--fds-gris); margin: 0; max-width: 52ch; }

/* -------------------------------------------- Coordination institutionnelle */
/* Objectif : expliquer l'organisation, pas exposer des partenaires.
   Très peu de logos, beaucoup de blanc, une hiérarchie de lecture nette. */
.fds-coord {
  background: #FBF9F5;
  border-top: 1px solid var(--fds-trait);
  padding-block: clamp(2.75rem, 7vw, 5rem);
  margin-top: clamp(2.5rem, 7vw, 4.5rem);
  text-align: center;
}

.fds-coord__title {
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.18; letter-spacing: -.02em;
  margin: 0 auto clamp(2rem, 5vw, 3.25rem); max-width: 22ch;
}

.fds-coord__block { max-width: 780px; margin-inline: auto; padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.fds-coord__block + .fds-coord__block { border-top: 1px solid var(--fds-trait); }

.fds-coord__lede {
  font-size: 1.02rem; line-height: 1.6; color: var(--fds-gris);
  max-width: 60ch; margin: 0 auto 1.75rem;
}
.fds-coord__lede strong { color: var(--fds-encre); font-weight: 700; }

.fds-coord__logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}
/* Hauteur optique harmonisée : les logos larges sont bridés en largeur,
   les logos hauts en hauteur — sinon un logo carré écrase les autres. */
.fds-coord__logos img { height: 56px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.fds-coord__logos--sm img { height: 46px; max-width: 165px; }

@media (max-width: 560px) {
  .fds-coord__logos { gap: 1.5rem 2rem; }
  .fds-coord__logos img { height: 42px; max-width: 130px; }
  .fds-coord__logos--sm img { height: 36px; max-width: 115px; }
  .fds-news__item { grid-template-columns: 84px minmax(0, 1fr); }
}

/* ==========================================================================
   SECTION EXPLORER — traitement éditorial
   Plus de respiration et d'image que les cartes événement, pas d'ombre,
   séparations discrètes. Préfixe .fds-explore : rien d'autre n'est touché.
   ========================================================================== */

.fds-explore .fds-section__intro { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------- Exploration principale */
.fds-explore__lead {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--fds-trait);
}
@media (min-width: 880px) { .fds-explore__lead { grid-template-columns: 1.15fr 1fr; } }

.fds-explore__lead-media {
  position: relative; aspect-ratio: 5 / 4;
  border-radius: var(--fds-r); overflow: hidden; background: var(--fds-creme);
}
@media (min-width: 880px) { .fds-explore__lead-media { aspect-ratio: 4 / 3; } }
.fds-explore__lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fds-explore__flag {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--fds-encre); color: #fff;
  font-size: .71rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .75rem; border-radius: 999px;
}

.fds-explore__label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fds-gris); margin: 0 0 .7rem;
}
.fds-explore__dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; }

.fds-explore__lead-title {
  font-size: clamp(1.75rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -.025em;
  margin: 0 0 .75rem;
}
.fds-explore__lead-lede {
  font-size: clamp(1.02rem, 1.9vw, 1.16rem); line-height: 1.6;
  color: var(--fds-gris); margin: 0 0 1.25rem; max-width: 46ch;
}

.fds-explore__quote {
  margin: 0 0 1.25rem; padding: .2rem 0 .2rem 1.1rem;
  /* Kadence pose une bordure sur les quatre côtés des citations : on la neutralise
     pour ne garder que le filet de gauche, aux couleurs de l'exploration. */
  background: none; border: 0;
  border-left: 3px solid var(--fds-bleu);
  font-size: 1.06rem; font-style: italic; line-height: 1.45; color: var(--fds-encre);
  max-width: 40ch;
}

.fds-explore__count {
  font-size: .84rem; font-weight: 700; letter-spacing: .05em;
  color: var(--fds-gris); margin: 0 0 1.25rem;
}
.fds-explore__cta { margin: 0; }

/* --------------------------------------------------- Les 8 autres, en grille */
.fds-explore__grid {
  display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem);
  grid-template-columns: 1fr;                                    /* mobile */
}
@media (min-width: 620px)  { .fds-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .fds-explore__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Pas de carte encadrée : l'image porte, le texte respire. Aucune ombre. */
.fds-explore__card { position: relative; display: flex; flex-direction: column; }
/* Sans ancêtre positionné, une surcouche « inset: 0 » se cale sur le bloc
   englobant initial et recouvre la page entière. Garde-fou explicite. */
.fds-explore__lead { position: relative; }

.fds-explore__media {
  aspect-ratio: 4 / 3; border-radius: var(--fds-r); overflow: hidden;
  background: var(--fds-creme); margin-bottom: .95rem;
}
.fds-explore__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.fds-explore__card:hover .fds-explore__media img,
.fds-explore__card:focus-within .fds-explore__media img { transform: scale(1.04); }

.fds-explore__body { display: flex; flex-direction: column; flex: 1; }

.fds-explore__title { font-size: 1.16rem; line-height: 1.24; letter-spacing: -.01em; margin: 0 0 .45rem; }
.fds-explore__title a,
.fds-explore__lead-title a { color: inherit; text-decoration: none; }
/* Seules les petites cartes de la grille sont cliquables dans leur entier :
   elles sont visuellement identifiées comme des cartes et n'ont pas de bouton.
   L'exploration principale, elle, est une zone éditoriale : son titre est un
   lien normal, et c'est le bouton qui mène à la page. */
.fds-explore__title a::after { content: ""; position: absolute; inset: 0; }
.fds-explore__title a:hover,
.fds-explore__lead-title a:hover { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 2px; }

.fds-explore__desc { font-size: .93rem; line-height: 1.5; color: var(--fds-gris); margin: 0 0 .8rem; }
.fds-explore__card .fds-explore__count { margin: auto 0 0; padding-top: .55rem; border-top: 1px solid var(--fds-trait); }

/* Le lien recouvre la carte : le focus doit se voir sur la carte entière. */
.fds-explore__card:focus-within { outline: 3px solid var(--fds-rouge); outline-offset: 6px; border-radius: var(--fds-r); }
.fds-explore__card a:focus-visible { outline: none; }

/* Le titre de l'exploration principale se comporte comme un lien ordinaire :
   soulignement au survol, focus visible sur le mot, curseur explicite. */
.fds-explore__lead-title a { text-decoration-color: transparent; transition: text-decoration-color .15s ease; }
.fds-explore__lead-title a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: .14em; text-decoration-thickness: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fds-explore__media img { transition: none; }
  .fds-explore__card:hover .fds-explore__media img { transform: none; }
}

/* ==========================================================================
   GRANDS RENDEZ-VOUS — révision
   Préfixes .fds-ambiance / .fds-presentation / .fds-hero--motif / --auto.
   Aucun composant partagé n'est modifié.
   ========================================================================== */

/* ------------------------------------------------ Métadonnées : une ligne */
/* Cinq informations au maximum : elles tiennent sur une ligne dès 900 px.
   Le fond reste transparent, chaque cellule dessine son filet — une ligne
   incomplète ne laisse donc jamais de case colorée vide. */
.fds-practical--auto { background: transparent; gap: 0; grid-template-columns: 1fr; }
.fds-practical--auto .fds-practical__item { outline: 1px solid var(--fds-trait); }

@media (min-width: 560px) {
  .fds-practical--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .fds-practical--auto { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
}

/* ---------------------------------------------------- Photo d'ambiance */
/* Panoramique 2:1, plafonnée en hauteur : elle accompagne, elle n'écrase pas. */
.fds-ambiance {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  border-radius: var(--fds-r);
  overflow: hidden; background: var(--fds-creme); position: relative;
}
.fds-ambiance img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 1; max-height: 400px; object-fit: cover; object-position: center;
}
.fds-ambiance__credit {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 2.25rem .95rem .65rem;
  font-size: .73rem; color: rgb(255 255 255 / .8);
  background: linear-gradient(to top, rgb(22 19 15 / .6), transparent);
}
@media (max-width: 620px) { .fds-ambiance img { aspect-ratio: 3 / 2; max-height: 260px; } }

/* -------------------------------------------- Présentation éditoriale */
.fds-presentation { max-width: 68ch; }
.fds-presentation > p { font-size: 1.04rem; line-height: 1.68; margin: 0 0 1.15rem; }
.fds-presentation > p:first-of-type { font-size: 1.14rem; line-height: 1.6; color: var(--fds-encre); }
.fds-presentation > p:last-child { margin-bottom: 0; }
.fds-columns > div:empty { display: none; }

/* ------------------------------------- Motif de cercles dans le héros */
/* Purement décoratif : cinq disques de la charte, discrets, à droite du titre.
   Le titre garde toute sa place ; le motif s'efface sous 900 px. */
.fds-hero--motif { position: relative; overflow: hidden; }
.fds-hero--motif > * { position: relative; z-index: 1; }

.fds-hero__cercles {
  display: none;
  position: absolute; z-index: 0; top: 50%; right: 0;
  width: 340px; height: 210px; transform: translateY(-50%);
  pointer-events: none; opacity: .9;
}
@media (min-width: 900px) { .fds-hero__cercles { display: block; } }
@media (min-width: 1120px) { .fds-hero__cercles { width: 420px; height: 240px; } }

.fds-hero__cercles::before,
.fds-hero__cercles::after { content: ""; position: absolute; inset: 0; }

/* Chaque motif combine des disques pleins et un anneau.
   L'anneau doit se refermer sur du transparent, sinon sa dernière couleur
   s'étend et remplit tout le cadre. */

/* Village des sciences — rouge dominant, disques groupés */
.fds-hero--village .fds-hero__cercles::before {
  background:
    radial-gradient(circle at 82% 40%, #E1000F 0 46px, transparent 46px),
    radial-gradient(circle at 55% 72%, #FF9940 0 26px, transparent 26px),
    radial-gradient(circle at 36% 32%, #FFE800 0 15px, transparent 15px);
}
.fds-hero--village .fds-hero__cercles::after {
  background: radial-gradient(circle at 62% 14%, transparent 0 17px, #5770BE 17px 21px, transparent 21px);
}

/* Festival — bleu dominant, composition plus étalée */
.fds-hero--festival .fds-hero__cercles::before {
  background:
    radial-gradient(circle at 80% 60%, #5770BE 0 44px, transparent 44px),
    radial-gradient(circle at 52% 26%, #169B62 0 23px, transparent 23px),
    radial-gradient(circle at 31% 64%, #FF9940 0 14px, transparent 14px);
}
.fds-hero--festival .fds-hero__cercles::after {
  background: radial-gradient(circle at 64% 84%, transparent 0 18px, #E1000F 18px 22px, transparent 22px);
}

/* Parcours scientifique — vert dominant, disques alignés comme un cheminement */
.fds-hero--parcours .fds-hero__cercles::before {
  background:
    radial-gradient(circle at 84% 48%, #169B62 0 40px, transparent 40px),
    radial-gradient(circle at 58% 48%, #5770BE 0 21px, transparent 21px),
    radial-gradient(circle at 38% 48%, #FFE800 0 12px, transparent 12px);
}
.fds-hero--parcours .fds-hero__cercles::after {
  background: radial-gradient(circle at 20% 48%, transparent 0 12px, #E1000F 12px 15px, transparent 15px);
}

@media (prefers-reduced-motion: reduce) { .fds-hero__cercles { opacity: .8; } }

/* Le motif ne doit jamais chevaucher le texte, quelle que soit la longueur
   du titre : on lui réserve sa zone à droite dès que la composition l'affiche. */
@media (min-width: 900px) {
  .fds-hero--motif .fds-hero__kicker,
  .fds-hero--motif .fds-hero__title,
  .fds-hero--motif .fds-hero__lede { max-width: calc(100% - 380px); }
}
@media (min-width: 1120px) {
  .fds-hero--motif .fds-hero__kicker,
  .fds-hero--motif .fds-hero__title,
  .fds-hero--motif .fds-hero__lede { max-width: calc(100% - 460px); }
}

/* ==========================================================================
   FICHE EXPLORATION — identité éditoriale
   Uniquement le héros, le visuel et la citation. Le bloc « À ne pas manquer »,
   la grille et les cartes ne sont pas touchés.
   ========================================================================== */

/* Surtitre : « EXPLORATION • 18 RENDEZ-VOUS », séparateur à la couleur. */
.fds-hero--explo .fds-hero__kicker { margin-bottom: .85rem; }
.fds-hero__sep { padding-inline: .45rem; font-weight: 700; }

/* Titre : la fin du titre passe dans la couleur de l'exploration, en italique.
   Même police que partout ailleurs — seules la couleur et l'inclinaison changent. */
.fds-explo-title {
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 .6rem;
  max-width: 18ch;
}
.fds-explo-title__debut { color: var(--fds-encre); }
.fds-explo-title__accent { font-style: italic; font-weight: 400; }

/* Empilement sur deux lignes quand le premier morceau le supporte. */
.fds-explo-title--pile .fds-explo-title__debut,
.fds-explo-title--pile .fds-explo-title__accent { display: block; }

/* Chapô : plus présent, plus aéré. */
.fds-explo-lede {
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: 1.1rem;
}

/* Visuel : illustration, pas sujet principal. Pleine largeur, hauteur bridée. */
.fds-explo-media {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--fds-r);
  overflow: hidden;
  background: var(--fds-creme);
}
.fds-explo-media img {
  display: block; width: 100%; height: auto;
  max-height: 340px; object-fit: cover; object-position: center;
}
@media (max-width: 620px) { .fds-explo-media img { max-height: 220px; } }

/* Citation : filet plus affirmé, davantage de respiration. */
.fds-explo-quote {
  background: none; border: 0;
  border-left: 6px solid var(--fds-bleu);
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: .5rem 0 .5rem 1.6rem;
  font-size: clamp(1.2rem, 2.7vw, 1.7rem);
  font-style: italic;
  line-height: 1.38;
  letter-spacing: -.01em;
  color: var(--fds-encre);
  max-width: 44ch;
}
.fds-explo-quote::before { content: "« "; }
.fds-explo-quote::after  { content: " »"; }

/* ==========================================================================
   FICHE ÉVÉNEMENT — valeur éditoriale
   Préfixes .fds-hero--event / .fds-ev-. Aucun autre gabarit n'est touché.
   ========================================================================== */

.fds-hero--event { position: relative; overflow: hidden; padding-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.fds-hero--event > * { position: relative; z-index: 1; }

/* Filet de tête plus affirmé : c'est lui qui porte la couleur du format. */
.fds-hero__rule--fort { height: 8px; width: 120px; border-radius: 4px; }

/* Motif : trois disques à la couleur du format, très en retrait.
   Purement décoratif, masqué aux lecteurs d'écran, absent sous 900 px. */
.fds-ev-motif {
  display: none; position: absolute; z-index: 0; top: 50%; right: 0;
  width: 260px; height: 150px; transform: translateY(-50%); pointer-events: none;
  background:
    radial-gradient(circle at 84% 40%, var(--fds-c) 0 40px, transparent 40px),
    radial-gradient(circle at 54% 70%, var(--fds-c) 0 20px, transparent 20px),
    radial-gradient(circle at 32% 30%, var(--fds-c) 0 11px, transparent 11px);
  opacity: .16;
}
@media (min-width: 900px) { .fds-ev-motif { display: block; } }

/* Surtitre : la famille d'événement prend la couleur, le rattachement suit. */
.fds-ev-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .8rem; }
.fds-ev-famille { font-weight: 700; }
.fds-ev-sep { color: var(--fds-trait); }
.fds-ev-kicker a { color: var(--fds-gris); text-decoration: none; border-bottom: 1px solid var(--fds-trait); }
.fds-ev-kicker a:hover { color: var(--fds-encre); border-color: currentColor; }

.fds-ev-title { max-width: 20ch; margin-bottom: .55rem; }
.fds-ev-lede { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; max-width: 54ch; margin-top: .9rem; }
.fds-ev-etat { margin: 1rem 0 0; }
@media (min-width: 900px) { .fds-hero--event .fds-ev-title, .fds-hero--event .fds-ev-lede { max-width: min(54ch, calc(100% - 300px)); } }

/* Le cadre auquel appartient l'événement : une ligne, pas un bloc. */
.fds-ev-cadre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  border-left: 4px solid var(--fds-c);
  background: var(--fds-creme);
  border-radius: 0 var(--fds-r) var(--fds-r) 0;
  padding: .85rem 1.1rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.fds-ev-cadre__label {
  margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fds-gris);
}
.fds-ev-cadre__lien { margin: 0; font-size: 1.02rem; font-weight: 700; }
.fds-ev-cadre__lien a { color: var(--fds-encre); text-decoration: none; }
.fds-ev-cadre__lien a:hover { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 2px; }

/* Visuel de la fiche : illustration, hauteur bridée. */
.fds-ev-media { margin: 0 0 1.75rem; border-radius: var(--fds-r); overflow: hidden; background: var(--fds-creme); }
.fds-ev-media img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; }

/* ------------------------------------------------- Tags de contexte du héros */
/* Deux repères lus d'un coup d'œil, juste sous le chapô : la thématique et le
   territoire. Même vocabulaire que les autres badges du site — fond teinté,
   coins arrondis, corps discret — mais cliquables, donc avec un état de survol. */
.fds-ev-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; }

.fds-ev-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .75rem; border-radius: 999px;
  font-size: .84rem; font-weight: 700; line-height: 1.4;
  color: var(--fds-encre); text-decoration: none;
  background: var(--fds-creme);
  transition: background-color .15s ease;
}
.fds-ev-tag__pastille { width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--fds-gris-clair, #9C948A); }

/* La thématique prend la couleur de son exploration, en fond très dilué. */
.fds-ev-tag--thematique { background: color-mix(in srgb, var(--t) 12%, #fff); }
.fds-ev-tag--thematique:hover { background: color-mix(in srgb, var(--t) 22%, #fff); }
.fds-ev-tag--thematique .fds-ev-tag__pastille { background: var(--t); }

/* Le territoire reste neutre : il situe, il ne catégorise pas. */
.fds-ev-tag--lieu:hover { background: var(--fds-trait); }


/* ==========================================================================
   RESSOURCES COMPLÉMENTAIRES — bloc optionnel
   Le composant ne produit rien lorsqu'aucune ressource n'est saisie :
   il n'y a donc rien à masquer ici, et aucun espace n'est réservé.
   ========================================================================== */
.fds-ressources__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.fds-ressources__liste a {
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1.1rem; min-height: 56px;
  border: 1px solid var(--fds-trait); border-radius: var(--fds-r);
  background: #fff; color: var(--fds-encre); text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.fds-ressources__liste a:hover { border-color: var(--fds-gris); background: var(--fds-creme); }
.fds-ressources__signe { font-size: 1.25rem; line-height: 1; flex: none; }
.fds-ressources__texte { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fds-ressources__type {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fds-gris);
}
.fds-ressources__titre { font-weight: 700; line-height: 1.3; }

/* ==========================================================================
   PROGRAMME DES GRANDS RENDEZ-VOUS — filtres rapides
   Entièrement en CSS : aucun script, aucun rechargement, aucune animation.
   Si le navigateur ne connaît pas :has(), toutes les cartes restent affichées —
   le comportement actuel, jamais une page cassée.
   ========================================================================== */
.fds-prog__item { display: contents; }

.fds-prog__chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.75rem;
}
.fds-prog__chips label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem; min-height: 42px;
  border: 1px solid var(--fds-trait); border-radius: 999px;
  background: #fff; color: var(--fds-encre);
  font-size: .92rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.fds-prog__chips label span { font-size: .78rem; color: var(--fds-gris); font-variant-numeric: tabular-nums; }
.fds-prog__chips label:hover { border-color: var(--fds-gris); }
.fds-prog__chips input:checked + label {
  background: var(--fds-encre); border-color: var(--fds-encre); color: #fff; font-weight: 700;
}
.fds-prog__chips input:checked + label span { color: rgb(255 255 255 / .7); }
.fds-prog__chips input:focus-visible + label { outline: 3px solid var(--fds-rouge); outline-offset: 2px; }

/* Une règle par famille : la sélection masque tout le reste. */
.fds-prog--filtrable:has(#fds-prog-adolescents:checked) .fds-prog__item:not([data-f~="adolescents"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-adultes:checked) .fds-prog__item:not([data-f~="adultes"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-atelier:checked) .fds-prog__item:not([data-f~="atelier"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-enfants:checked) .fds-prog__item:not([data-f~="enfants"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-exposition:checked) .fds-prog__item:not([data-f~="exposition"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-famille:checked) .fds-prog__item:not([data-f~="famille"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-jeu-famille:checked) .fds-prog__item:not([data-f~="jeu-famille"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-rencontre-debat:checked) .fds-prog__item:not([data-f~="rencontre-debat"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-scolaires:checked) .fds-prog__item:not([data-f~="scolaires"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-spectacle-soiree:checked) .fds-prog__item:not([data-f~="spectacle-soiree"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-tout-public:checked) .fds-prog__item:not([data-f~="tout-public"]) { display: none; }
.fds-prog--filtrable:has(#fds-prog-visite:checked) .fds-prog__item:not([data-f~="visite"]) { display: none; }

/* ==========================================================================
   PAGE D'ACCUEIL — direction artistique
   Aucun jeton du design system n'est modifié. Les interventions portent
   uniquement sur la typographie et le rythme des blocs existants.
   ========================================================================== */

/* -------------------------------------------------- La bande, signature */
/* Les six couleurs officielles réunies pour la première fois : c'est ce qui
   rend la page immédiatement identifiable. Un seul dégradé, aucun balisage
   supplémentaire. Employée trois fois sur la page, jamais davantage. */
.fds-bande {
  display: block; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg,
    var(--fds-rouge)  0     16.66%,
    var(--fds-orange) 16.66% 33.33%,
    var(--fds-jaune)  33.33% 50%,
    var(--fds-vert)   50%    66.66%,
    var(--fds-bleu)   66.66% 83.33%,
    var(--fds-noir)   83.33% 100%);
}

/* --------------------------------------------------------- Les surtitres */
/* Ils deviennent de vrais repères de lecture : un filet aux couleurs de la
   charte, des capitales affirmées, l'encre plutôt que le gris. */
.fds-eyebrow {
  display: block;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--fds-encre);
  margin: 0 0 .9rem;
}
.fds-eyebrow::before {
  content: ""; display: block;
  width: 46px; height: 4px; border-radius: 2px; margin-bottom: .8rem;
  background: linear-gradient(90deg,
    var(--fds-rouge)  0     16.66%,
    var(--fds-orange) 16.66% 33.33%,
    var(--fds-jaune)  33.33% 50%,
    var(--fds-vert)   50%    66.66%,
    var(--fds-bleu)   66.66% 83.33%,
    var(--fds-noir)   83.33% 100%);
}

/* ------------------------------------------------ Manifeste + chiffres */
/* Une seule colonne de texte, puis les chiffres en bandeau : plus d'air,
   et le regard n'a plus à choisir entre deux colonnes concurrentes. */
.fds-manifeste__texte { max-width: 64ch; }
.fds-manifeste__texte p { font-size: 1.06rem; line-height: 1.72; color: var(--fds-gris); margin: 0 0 1.15rem; }
.fds-manifeste__texte p:last-child { margin-bottom: 0; }
.fds-manifeste__texte strong { color: var(--fds-encre); }

.fds-chiffres {
  list-style: none; padding: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  border-top: 1px solid var(--fds-trait);
  display: flex; flex-wrap: wrap;
  gap: clamp(1.75rem, 5vw, 4rem);
}
.fds-chiffres li { display: flex; flex-direction: column; gap: .35rem; }

/* Le chiffre est le sujet : c'est lui que l'œil doit voir en premier. */
.fds-chiffres__valeur {
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  font-weight: 700; line-height: .92; letter-spacing: -.045em;
  color: var(--fds-encre);
}
.fds-chiffres__valeur sup { font-size: .48em; top: -.55em; }
.fds-chiffres__libelle {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fds-gris-clair, #9C948A);
}

/* ------------------------------------------------ Le thème de l'édition */
.fds-theme2026 {
  background: var(--fds-creme);
  border-block: 1px solid var(--fds-trait);
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  margin-block: clamp(3rem, 8vw, 5rem);
}
.fds-theme2026__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 900px) { .fds-theme2026__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.fds-theme2026__media { margin: 0; }
.fds-theme2026__media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--fds-r) var(--fds-r) 0 0;
}
.fds-theme2026__media .fds-bande { border-radius: 0 0 3px 3px; }

.fds-theme2026__titre {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.035em; margin: 0 0 .85rem;
}
.fds-theme2026__titre em { font-style: italic; font-weight: 400; color: #CC7A33; }
.fds-theme2026__texte p { font-size: 1.04rem; line-height: 1.7; color: var(--fds-gris); margin: 0 0 1.15rem; max-width: 50ch; }
.fds-theme2026__lien { margin: 1.6rem 0 0; }

/* ----------------------------------------------------- Le héros : l'édition */
/* Deux unités typographiques séparées par un filet vertical : on lit
   « quelle édition » puis « quand », au lieu d'une seule ligne indistincte. */
.fds-hero__edition { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.fds-hero__edition-num,
.fds-hero__edition-dates {
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fds-encre);
}
.fds-hero__edition-dates {
  padding-left: .75rem; border-left: 2px solid var(--fds-rouge);
  color: var(--fds-gris);
}
.fds-hero__edition sup { font-size: .62em; }

/* Le thème dans le chapô : l'élément le plus fort de la phrase. */
.fds-theme-name {
  font-size: 1.14em; letter-spacing: -.015em; color: var(--fds-encre); font-weight: 700;
}
.fds-theme-name em { font-style: italic; font-weight: 400; color: #CC7A33; }

/* ==========================================================================
   FINITION — hiérarchie éditoriale
   ========================================================================== */

/* Le mot du thème passe au rouge de la charte : sur le rose du héros,
   l'orange plafonnait à 2,1:1. Le rouge officiel atteint 3,4:1. */
.fds-theme-name em { color: var(--fds-rouge); }

/* ------------------------------- Les grands rendez-vous, contenus « parents » */
/* Aucun composant nouveau : la même carte, dans un contexte qui la distingue.
   Fond crème plutôt que blanc, filet plus épais, titre plus fort, et le
   nombre de rendez-vous promu au rang d'information principale. */
.fds-grands { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }

.fds-grands .fds-card { background: var(--fds-creme); border-color: var(--fds-trait); }
.fds-grands .fds-card__rule { height: 9px; }
.fds-grands .fds-card__title { font-size: 1.3rem; line-height: 1.22; }
.fds-grands .fds-card__meta { font-size: .68rem; letter-spacing: .14em; }
.fds-grands .fds-card__foot { border-top-color: rgb(22 19 15 / .1); }

/* Le compteur devient le signal : c'est lui qui dit « ceci regroupe ». */
.fds-grands .fds-card__compte {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--fds-encre);
}
.fds-grands .fds-card__compte::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 2px;
  background: currentColor; opacity: .55;
}

/* Le visuel du thème : sujet en bas de cadre, cadrage sur le dégradé de légumes. */
/* La photo est déjà recadrée sur la ligne de légumes : plus besoin de
   la décaler vers le bas. */
.fds-theme2026__media img { object-position: 50% 50%; }

/* Le cadre de rattachement et les liaisons sont désormais contigus, juste
   sous le héros : on resserre l'espace entre eux et on aère avant la
   grille d'informations pratiques. */
.fds-ev-cadre { margin-bottom: .75rem; }
.fds-ev-liens { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

/* ------------------------------------------------- Acteurs d'un rendez-vous */
/* Deux rôles, deux traitements : le porteur se lit d'un coup d'œil, les
   partenaires se parcourent. Une liste à puces de douze structures se saute ;
   une énumération au fil du texte se lit. */
.fds-acteurs__bloc + .fds-acteurs__bloc { margin-top: 1.25rem; }
.fds-acteurs__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fds-gris);
  margin: 0 0 .5rem;
}
.fds-acteurs__porteurs {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem;
  font-weight: 600; line-height: 1.35;
}
.fds-acteurs__partenaires { margin: 0; line-height: 1.6; color: var(--fds-encre); }
.fds-acteurs__partenaires span { color: var(--fds-gris); }

/* ---------------------------------------------------------- Projets phares */
/* La sélection du programme régional. Trois ou quatre entrées, sur fond crème
   pour se détacher du programme complet qui suit — sans reprendre la carte
   événement, qui ferait doublon avec la grille juste en dessous. */
.fds-phares { background: var(--fds-creme); border-radius: var(--fds-r); padding: 1.75rem 1.5rem; }
.fds-phares .fds-section__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 1.25rem; }
.fds-phares__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fds-phares__item { padding-top: .9rem; border-top: 3px solid var(--fds-trait); }
.fds-phares__format {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 .4rem;
}
.fds-phares__titre { font-size: 1.05rem; line-height: 1.25; margin: 0 0 .45rem; }
.fds-phares__titre a { color: inherit; text-decoration: none; }
.fds-phares__titre a:hover,
.fds-phares__titre a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.fds-phares__extrait { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--fds-gris); }

/* Les personnes qui animent : le nom porte, la fonction accompagne. */
.fds-acteurs__intervenants { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fds-acteurs__intervenants li { line-height: 1.35; }
.fds-acteurs__personne { display: block; font-weight: 600; }
.fds-acteurs__fonction { display: block; font-size: .88rem; color: var(--fds-gris); }

/* --------------------------------------------- Prolonger la lecture */
/* Au bas d'un article : où aller ensuite. Discret, mais visible. */
.fds-suite {
  margin: 2.5rem 0 0; padding: 1.5rem;
  background: var(--fds-creme); border-radius: var(--fds-r);
}
.fds-suite__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fds-gris); margin: 0 0 .75rem;
}
.fds-suite__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fds-suite__liens a { color: var(--fds-encre); font-weight: 600; text-underline-offset: 3px; }

/* ------------------------------------------------ Documents à télécharger */
/* Une liste de PDF n'est pas une liste d'idées : on retire la puce, on donne
   à chaque ligne la surface d'un bouton, et on annonce le format et le poids.
   Un visiteur en 4G a le droit de savoir qu'il s'apprête à charger 10 Mo. */
.fds-docs { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1px; }
.fds-docs li { border-top: 1px solid var(--fds-trait); }
.fds-docs li:last-child { border-bottom: 1px solid var(--fds-trait); }

/* Trois colonnes fixes plutôt qu'un flex : la flèche, le titre, le poids.
   Une grille ne se replie pas, le poids reste donc aligné à droite quelle
   que soit la longueur du nom du document. */
.fds-docs li a {
  display: grid; grid-template-columns: 1.2em 1fr auto;
  align-items: baseline; gap: .75rem;
  padding: .8rem .25rem;
  color: var(--fds-encre); font-weight: 600; text-decoration: none;
}
.fds-docs li a::before {
  content: "↓"; font-weight: 700; color: var(--fds-rouge);
}
.fds-docs li a:hover,
.fds-docs li a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Le poids reste une mention de service : il ne fait pas partie du titre. */
.fds-docs .fds-doc__poids {
  font-weight: 400; font-size: .82rem;
  color: var(--fds-gris); white-space: nowrap;
}

/* Sur mobile, le poids passe sous le titre plutôt que de l'écraser. */
@media (max-width: 30rem) {
  .fds-docs li a { grid-template-columns: 1.2em 1fr; }
  .fds-docs .fds-doc__poids { grid-column: 2; }
}

/* ------------------------------------------------ Ressources externes */
/* Un contenu qui n'est pas hébergé ici doit le dire avant qu'on clique.
   Le cadre et la mention l'annoncent ; le lien ouvre un nouvel onglet, si
   bien que le visiteur ne perd jamais le site de vue. */
.fds-externe {
  margin: 0 0 2rem;
  padding: 1.5rem;
  background: var(--fds-creme);
  border-radius: var(--fds-r);
  border-left: 4px solid var(--fds-trait);
}
.fds-externe__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fds-gris);
  margin: 0 0 .6rem;
}
.fds-externe p { margin: 0 0 1rem; }
.fds-externe__action { margin: 0; }

/* La flèche oblique dit « ailleurs », là où la flèche droite dit « plus loin
   sur ce site ». */
.fds-externe__action .fds-btn::after { content: " ↗"; }

/* Le bloc de téléchargement au bas du programme : le même vocabulaire que
   la page Ressources, dans une taille adaptée à une fin de page. */
.fds-emporter { border-top: 3px solid var(--fds-trait); padding-top: 2rem; }
.fds-emporter__intro { max-width: 46ch; color: var(--fds-gris); margin: 0 0 1.5rem; }
.fds-docs--large { max-width: 46rem; }

/* ============================================================================
   FINITION AVANT MISE EN PRODUCTION
   ========================================================================== */

/* ------------------------------------------- « Saveurs Savantes », une couleur */
/* Le héros écrit « Savantes » en rouge, le bloc du thème l'écrivait en orange —
   deux fois le même mot sur la même page, dans deux teintes. Le rouge de la
   charte l'emporte partout. */
.fds-theme2026__titre em { color: var(--fds-rouge); }

/* ------------------------------------------ Cartes : chacune sa hauteur */
/* Par défaut, une grille CSS étire toutes les cartes d'une rangée à la
   hauteur de la plus haute. Une carte sans photo se retrouvait donc avec un
   grand vide sous son texte, comme s'il manquait quelque chose. On les laisse
   prendre leur hauteur naturelle : une carte courte est courte, et cela se
   lit comme un choix plutôt que comme un oubli. */
.fds-grid { align-items: start; }

/* ------------------------------------------------------- Page introuvable */
/* Le champ occupe la largeur du texte, pas celle de l'écran : un champ de
   1 200 px pour trois mots donne l'impression d'un formulaire inachevé. */
.fds-404__recherche { max-width: 34rem; margin: 0 0 1.5rem; }
.fds-404__ligne { display: flex; gap: .6rem; }
.fds-404__ligne input { flex: 1 1 auto; min-width: 0; }
.fds-404__ligne .fds-btn { flex: 0 0 auto; }

/* Les deux chemins de repli sont secondaires : la recherche reste l'action
   principale, eux se contentent du bouton à contour déjà défini plus haut. */
.fds-404__liens { display: flex; flex-wrap: wrap; gap: .75rem; }