/* =====================================================================
   ESS — Interior pages: prose, table of contents, filters, fiche, sitemap
   ===================================================================== */

/* Shared helpers also used on the home page (kept here so interior
   pages that don't load home.css still get them). */
.mt-3 { margin-top: var(--sp-3); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---- Two-column doc layout (content + sticky TOC) ------------------
   NB : classe .docpage (et non .doc) car .doc est déjà utilisée plus bas
   pour les lignes « fichier téléchargeable » (flex/centré) — collision. */
.docpage { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.docpage__aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.toc__title { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .12em; color: var(--c-slate); font-weight: 700; margin-bottom: var(--sp-3); }
.toc a { display: block; padding: .4rem 0; color: var(--c-slate); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: color var(--dur-fast) var(--ease); }
.toc a:hover { color: var(--c-blue); }
.toc a.is-active { color: var(--c-blue); font-weight: var(--fw-semi); }
@media (max-width: 900px) { .docpage { grid-template-columns: 1fr; } .docpage__aside { display: none; } }

/* ---- Médias & illustrations dans le contenu documentaire ----------- */
.docpage-hero-media { margin-top: var(--sp-6); }
.docpage-hero-media img { width: 100%; aspect-ratio: 21 / 7; object-fit: cover; object-position: center; border-radius: var(--r-xl); box-shadow: var(--sh-md); display: block; }
@media (max-width: 720px) { .docpage-hero-media img { aspect-ratio: 16 / 9; } }

/* Page « Découvrir l'ESS » : pas de trait sous le chapô du hero,
   et chiffres-clés à une échelle plus discrète dans la colonne de lecture. */
body[data-page="decouvrir"] .page-hero,
body[data-page="projets"] .page-hero,
body[data-page="accompagnement"] .page-hero,
body[data-page="academie"] .page-hero,
body[data-page="ressources"] .page-hero,
body[data-page="medias"] .page-hero { border-bottom: 0; }
.prose .stat__num { font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.35rem); }

.prose figure { margin-top: 2.2em; }
.prose figure img { width: 100%; display: block; border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--sh-sm); }
.prose figure img { aspect-ratio: 16 / 9; }
.prose figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-slate); font-style: italic; line-height: 1.5; }

/* ---- L'ESS dans le monde : carte du monde + réseau animé ---------- */
/* Inspiré du composant Framer « World Map Network UI », en tons clairs ESS. */
.prose .wmap {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F4F8FC 0%, #E9F1F9 100%);
  border: 1px solid var(--c-line); border-radius: 16px;
  padding: clamp(1.25rem, .8rem + 2vw, 2rem);
  box-shadow: var(--sh-sm);
}
.wmap__stage { position: relative; width: 100%; aspect-ratio: 1016.371 / 514.609; }
.prose .wmap .wmap__base {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  aspect-ratio: auto; border-radius: 0; box-shadow: none; opacity: 1;
}
.wmap__net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Arcs : tracé progressif au chargement, puis stables */
.wmap__arcs .arc {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: wmDraw 1.6s ease forwards;
}
@keyframes wmDraw { to { stroke-dashoffset: 0; } }
.wmap__sparks circle { opacity: .95; }

/* Nœuds pays (couleurs ESS) */
.wm-node { fill: #ffffff; stroke: var(--c-blue); stroke-width: 1.4; }
.wm-node--hub { fill: var(--c-yellow); stroke: var(--c-blue); stroke-width: 1.6; }
.wm-node title { pointer-events: none; }
.wm-halo { fill: var(--c-sky); opacity: .5; transform-box: fill-box; transform-origin: center; animation: wmPulse 2.4s ease-out infinite; }
@keyframes wmPulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

/* Chiffres — KPI compacts */
.world__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3) var(--sp-4); margin-top: clamp(1rem, .8rem + 1vw, 1.5rem); }
.wstat b { display: block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(1.05rem, .9rem + .55vw, 1.35rem); line-height: 1; letter-spacing: -.01em; color: var(--c-blue); }
.wstat span { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--c-slate); line-height: 1.3; font-style: normal; }
.prose .wmap figcaption { margin-top: var(--sp-4); color: var(--c-slate); }
.prose .wmap figcaption a { color: var(--c-sky); }
@media (max-width: 720px) { .world__stats { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .wmap__arcs .arc { animation: none; stroke-dashoffset: 0; }
  .wmap__sparks { display: none; }
  .wm-halo { animation: none; opacity: 0; }
}

/* Découvrir l'ESS : retirer la bande « Participer / Vous pouvez agir » (footer) */
/* Le bloc « Participer » du pied de page (ex-.footer-cta, devenu .footer-hi
   au passage au modèle Open Society). Ces deux pages portent déjà leur propre
   appel à l'action ; on masque le bloc entier, la newsletter comprise, comme
   auparavant. */
body[data-page="decouvrir"] .footer-hi,
body[data-page="accompagnement"] .footer-hi { display: none; }

/* ---- Prose (rich editorial text) ----------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 2.2em; scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.7em; }
.prose p, .prose li { color: var(--c-ink-700, #33414d); line-height: 1.72; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul li { list-style: none; position: relative; padding-left: 1.4em; margin-top: .5em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--c-green); transform: rotate(45deg); }
.prose ol { list-style: decimal; }
.prose ol li { margin-top: .5em; padding-left: .3em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--c-ink); }
.prose blockquote { border-left: 4px solid var(--c-sky); padding: var(--sp-2) var(--sp-5); color: var(--c-slate); font-style: italic; font-size: var(--fs-lead); }
.prose .lead { font-size: var(--fs-lead); color: var(--c-slate); }

/* Definition split cards */
.def-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 620px) { .def-grid { grid-template-columns: 1fr; } }
.def { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--c-paper); }
.def__ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--tag-blue-bg); color: var(--c-blue); margin-bottom: var(--sp-3); }
.def h4 { font-size: 1.05rem; margin-bottom: 6px; }
.def p { font-size: var(--fs-sm); color: var(--c-slate); }

/* "Pour aller plus loin" list */
.golist { display: grid; gap: var(--sp-3); }
.golink { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); transition: all var(--dur-fast) var(--ease); }
.golink:hover { border-color: var(--c-blue); box-shadow: var(--sh-sm); }
.golink .ico-lead { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--tag-green-bg); color: var(--c-green-700); display: grid; place-items: center; flex: none; }
.golink b { color: var(--c-ink); }
.golink small { color: var(--c-slate); display: block; }
.golink .ico-end { margin-left: auto; color: var(--c-blue); }

/* ---- Filter toolbar (directory pages) ------------------------------ */
.toolbar { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.toolbar__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.toolbar .field { flex: 1; min-width: 170px; }
.toolbar__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Compact filter: slim search + format chips (no heavy card) */
.events-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.events-filter__search { flex: 1 1 260px; max-width: 340px; }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-block: var(--sp-6) var(--sp-5); }
.results-bar__count { font-weight: var(--fw-semi); color: var(--c-ink); }
.results-bar__count b { color: var(--c-blue); }
.empty-state { text-align: center; padding: var(--sp-9) var(--sp-4); color: var(--c-slate); }
.empty-state .ico { width: 48px; height: 48px; margin: 0 auto var(--sp-3); color: var(--c-line-strong); }

/* ---- Fiche (detail) header ----------------------------------------- */
.fiche-hero { background: linear-gradient(160deg, var(--c-mist) 0%, #eef6fc 100%); padding-block: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.fiche-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: center; }
@media (max-width: 860px) { .fiche-hero__grid { grid-template-columns: 1fr; } }
.fiche-hero__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 16/11; }
.fiche-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-4); }
.fiche-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem,1rem+4vw,4rem); align-items: start; }
@media (max-width: 900px) { .fiche-layout { grid-template-columns: 1fr; } }
.side-card { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--c-paper); box-shadow: var(--sh-sm); }
.side-card + .side-card { margin-top: var(--sp-4); }
.side-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-3); }
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .6rem 0; border-bottom: 1px dashed var(--c-line); font-size: var(--fs-sm); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--c-slate); }
.kv b { color: var(--c-ink); text-align: right; }

/* Pièces jointes (fiche événement — Annexe A) */
.attach-list { display: grid; gap: var(--sp-2); }
.attach-list a { display: flex; align-items: center; gap: var(--sp-2); padding: .6rem .75rem; border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-blue); font-size: var(--fs-sm); font-weight: var(--fw-semi); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.attach-list a:hover { border-color: var(--c-sky); background: var(--c-mist); }
.attach-list a .ico { width: 18px; height: 18px; color: var(--c-green-700); flex: none; }
.attach-list a em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .04em; color: var(--c-slate); }

/* ---- Parcours / stepper (Accompagnement) --------------------------- */
.parcours { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); counter-reset: step; }
@media (max-width: 900px) { .parcours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .parcours { grid-template-columns: 1fr; } }
.parcours__step { position: relative; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--c-paper); }
.parcours__step .n { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-blue); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: var(--sp-3); }
.parcours__step:nth-child(2) .n { background: var(--c-sky); }
.parcours__step:nth-child(3) .n { background: var(--c-green); }
.parcours__step:nth-child(4) .n { background: var(--c-orange); }
.parcours__step h4 { font-size: 1.05rem; margin-bottom: 6px; }
.parcours__step p { font-size: var(--fs-sm); color: var(--c-slate); }

/* ---- Dispositif / actor row --------------------------------------- */
.disp-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); transition: all var(--dur-fast) var(--ease); }
.disp-row:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-sm); }
.disp-row__ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--tag-blue-bg); color: var(--c-blue); display: grid; place-items: center; flex: none; }
.disp-row h4 { font-size: 1.02rem; }
.disp-row__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 4px; }

@media (max-width: 620px) { .disp-row { grid-template-columns: auto 1fr; } .disp-row > .btn, .disp-row > .tag:last-child { grid-column: 2; justify-self: start; } }

/* ---- Orientation cards (Que cherchez-vous ?) ---------------------- */
.orient { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 720px) { .orient { grid-template-columns: 1fr; } }
.orient-card { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-paper); transition: all var(--dur-fast) var(--ease); }
.orient-card:hover { border-color: var(--c-blue); box-shadow: var(--sh-md); transform: translateY(-3px); }
.orient-card__ico { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--tag-green-bg); color: var(--c-green-700); display: grid; place-items: center; flex: none; }
.orient-card h4 { font-size: 1.1rem; margin-bottom: 4px; }
.orient-card p { font-size: var(--fs-sm); color: var(--c-slate); }
.orient-card .badge { margin-top: var(--sp-2); }

/* ---- Sous-navigation d'espace (Académie : Formation / Participation) --- */
/* `scroll-margin-top` : la barre étant collée sous l'en-tête, un
   scrollIntoView la placerait DERRIÈRE lui au changement d'onglet. */
.subnav { background: var(--c-paper); border-bottom: 1px solid var(--c-line); position: sticky; top: var(--header-h, 76px); z-index: 90; scroll-margin-top: var(--header-h, 76px); }
.subnav .container { display: flex; gap: var(--sp-6); overflow-x: auto; }
.subnav__link { padding: var(--sp-4) 0; font-weight: var(--fw-semi); color: var(--c-slate); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subnav__link:hover { color: var(--c-blue); }
.subnav__link.is-active { color: var(--c-blue); border-bottom-color: var(--c-blue); }
/* Cible d'ancre. Sans ce décalage, la section visée se range sous
   l'en-tête collant ET sous la .subnav elle-même, également collante :
   l'utilisateur saute et ne voit pas le titre qu'il visait. Même remède
   que .prose h2 plus haut, en tenant compte des deux barres. */
.subnav ~ section[id] { scroll-margin-top: calc(var(--header-h, 76px) + 4.5rem); }

/* ---- Fiche projet éditoriale (image + Problème/Solution/Rôle/Impacts) --- */
.fiche2 { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
/* Masthead éditorial (centré) */
.fiche2__masthead { max-width: 860px; margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) auto 0; text-align: center; }
.fiche2__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; margin-top: clamp(2rem, 1.5rem + 3vw, 3.5rem); }

/* Masthead : méta + titre + pitch + CTA (centrés) */
.fiche2__meta-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }
.fiche2__cat { font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue); border: 1.5px solid var(--c-blue); padding: 4px 12px; border-radius: var(--r-sm); }
.fiche2__year { color: var(--c-slate); font-weight: var(--fw-semi); }
.fiche2__title { margin-top: var(--sp-5); font-size: clamp(2.3rem, 1.6rem + 3vw, 4rem); line-height: 1.06; letter-spacing: -0.025em; }
.fiche2__hl { background: none; color: inherit; padding: 0; border-radius: 0; }
.fiche2__desc { font-size: var(--fs-lead); color: var(--c-slate); margin: var(--sp-5) auto 0; line-height: 1.55; max-width: 60ch; }
.fiche2__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); justify-content: center; }

/* Grande image éditoriale (pleine largeur) */
.fiche2__media { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); background: var(--c-mist-200); }
.fiche2__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }

/* Article éditorial (colonne principale) */
.fiche2__panel { background: none; padding: 0; display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); max-width: 72ch; }
.fiche2__block + .fiche2__block { border-top: 1px solid var(--c-line); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.fiche2__label {
  display: block; font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
  font-weight: var(--fw-bold); color: var(--c-ink); letter-spacing: -.01em; margin-bottom: var(--sp-4);
  padding-left: var(--sp-4); border-left: 3px solid var(--c-blue);
}
.fiche2__block p { color: var(--c-ink); line-height: 1.75; font-size: 1.05rem; }
.fiche2__block p + p { margin-top: var(--sp-3); }
.fiche2__block b { font-weight: var(--fw-semi); }
.fiche2__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.fiche2__block li { position: relative; padding-left: 1.6rem; color: var(--c-ink); line-height: 1.6; }
.fiche2__block li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-blue); }

/* Fiche d'identité (colonne latérale, sticky) */
.fiche2__aside { position: sticky; top: calc(var(--header-h, 76px) + var(--sp-4)); }
.fiche2__factcard { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-paper); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.fiche2__factcard-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-slate); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.fiche2__facts { margin: 0; padding: 0; display: grid; gap: 0; }
.fiche2__facts > div { padding: var(--sp-3) 0; border-top: 1px solid var(--c-line); }
.fiche2__facts > div:first-child { border-top: 0; padding-top: 0; }
.fiche2__facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-slate); font-weight: var(--fw-semi); }
.fiche2__facts dd { margin: 3px 0 0; font-weight: var(--fw-semi); color: var(--c-ink); }
.fiche2__factcta { display: flex; justify-content: center; width: 100%; margin-top: var(--sp-5); }
.fiche2__factnote { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-slate); line-height: 1.5; text-align: center; }
a.card__media { display: block; }

/* ---- Inscription (sans compte) ------------------------------------ */
.inscription { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.inscription__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.inscription__submit { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); }
.inscription__aside { position: sticky; top: calc(var(--header-h, 76px) + var(--sp-4)); }
.inscription__card { border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-mist); padding: var(--sp-5); }
.inscription__card-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-slate); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
/* Variante portant une pastille d'état à droite du titre. La pastille
   garde sa casse et son interlettrage propres : les capitales espacées
   du sur-titre rendraient « Résultats disponibles » illisible. */
.inscription__card-title--badged { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.inscription__card-title--badged .badge { text-transform: none; letter-spacing: 0; font-weight: var(--fw-semi); }
.inscription__fname { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 1.15rem; color: var(--c-blue); line-height: 1.2; margin-bottom: var(--sp-3); }
.inscription__card .fiche2__facts { margin: 0; }
.inscription__note { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-slate); line-height: 1.5; }
.inscription__note .ico { width: 15px; height: 15px; color: var(--c-green-700); flex: none; margin-top: 2px; }
@media (max-width: 860px) {
  .inscription { grid-template-columns: 1fr; }
  .inscription__aside { position: static; order: -1; }
}
@media (max-width: 560px) { .inscription__form { grid-template-columns: 1fr; } }

/* ---- Sondage / consultation --------------------------------------- */
/* Une seule colonne depuis que le panneau latéral a été retiré : il
   répétait le thème, le statut et l'échéance déjà affichés en pastilles
   dans le chapeau. La largeur est bornée à la colonne de lecture — un
   questionnaire étalé sur 1200px se parcourt mal. */
.poll-wrap { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--container-text); margin-inline: auto; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.poll { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.poll__q { display: grid; gap: var(--sp-3); }
.poll__label { font-weight: var(--fw-bold); color: var(--c-ink); font-size: 1.05rem; }
.poll__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.poll__opt {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md);
  cursor: pointer; font-size: var(--fs-sm); color: var(--c-ink); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.poll__opt:hover { border-color: var(--c-sky); }
.poll__opt input { accent-color: var(--c-blue); width: 18px; height: 18px; flex: none; }
.poll__opt:has(input:checked) { border-color: var(--c-blue); background: var(--tag-blue-bg); }
.poll__submit { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.poll-aside { position: sticky; top: calc(var(--header-h, 76px) + var(--sp-4)); }

/* Assistant multi-étapes */
.poll__progress { display: grid; gap: 8px; margin-bottom: var(--sp-5); }
.poll__progress-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-slate); }
.poll__progress-track { height: 8px; border-radius: var(--r-pill); background: var(--c-mist-200); overflow: hidden; }
/* Remplissage animé par `transform`, pas par `width` : une largeur qui
   change relance la mise en page à chaque image. Même recette que
   `.ix-qstepper__bar i` (intranet.css) — la barre occupe 100 % et on la
   comprime, `--pct` allant de 0 à 1. */
.poll__progress-track i { display: block; height: 100%; width: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-blue), var(--c-sky));
  transform: scaleX(var(--pct, 0)); transform-origin: left;
  transition: transform var(--dur) var(--ease); }
.poll__step { display: none; }
.poll__step.is-active { display: block; }
.poll__step .poll__label { margin-bottom: var(--sp-4); }
.poll__nav { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.poll__nav [data-poll-next] { margin-left: auto; }

/* ---- Envoi du sondage, dans le panneau « À propos » ------------------
   L'action finale reste visible pendant tout le questionnaire : on voit
   ce qui reste à répondre ET où l'on validera. Le bouton est désactivé
   tant que toutes les questions obligatoires ne sont pas traitées — son
   état porte la contrainte, plutôt qu'un message d'erreur après coup. */
.poll-send { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.poll-send__count { font-size: var(--fs-sm); color: var(--c-slate); margin-bottom: var(--sp-2); }
.poll-send__count b { color: var(--c-ink); font-weight: var(--fw-bold); }
.poll-send__track { height: 6px; border-radius: var(--r-pill); background: var(--c-mist-200);
  overflow: hidden; margin-bottom: var(--sp-4); }
.poll-send__track i { display: block; height: 100%; width: 100%; background: var(--c-green);
  border-radius: var(--r-pill);
  transform: scaleX(var(--pct, 0)); transform-origin: left;
  transition: transform var(--dur) var(--ease); }
.poll-send [data-poll-submit][disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.poll-send__hint { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-slate); }
.poll-send__hint.is-ready { color: var(--c-green-700); font-weight: var(--fw-semi); }

/* Résultats */
.poll-results { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.poll-results__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.poll-results__head h2 { font-size: var(--fs-h3); }
.poll-results__head .ico { width: 26px; height: 26px; color: var(--c-blue); flex: none; }
.poll-result { margin-bottom: var(--sp-6); }
.poll-result .poll__label { margin-bottom: var(--sp-3); }
.poll-bar { margin-top: var(--sp-3); }
.poll-bar__head { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: 4px; }
.poll-bar__head b { color: var(--c-blue); }
.poll-bar__track { height: 10px; border-radius: 999px; background: var(--c-mist-200); overflow: hidden; }
.poll-bar__track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c-blue), var(--c-sky)); }
.poll-results__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-slate); font-style: italic; }

@media (max-width: 860px) {
  .poll-wrap { grid-template-columns: 1fr; }
  .poll-aside { position: static; order: -1; }
}
@media (max-width: 560px) { .poll__opts { grid-template-columns: 1fr; } }

.fiche2__related { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* Vidéo optionnelle (sous l'image) */
.fiche2__video { margin-top: var(--sp-4); }
.fiche2__video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); background: #000; }
.fiche2__video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Documents téléchargeables (pitch deck, note) */
.doc-list { display: grid; gap: var(--sp-3); }
.doc { display: flex; align-items: center; gap: var(--sp-3); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.doc:hover { border-color: var(--c-green-700); box-shadow: var(--sh-sm); }
.doc__ico { flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--tag-green-bg); color: var(--c-green-700); display: grid; place-items: center; }
.doc__ico .ico { width: 20px; height: 20px; }
.doc__txt { display: flex; flex-direction: column; line-height: 1.2; }
.doc__txt b { color: var(--c-ink); font-weight: var(--fw-semi); }
.doc__txt small { color: var(--c-slate); font-size: var(--fs-xs); margin-top: 2px; }
.doc__dl { margin-left: auto; color: var(--c-green-700); }
.doc__dl .ico { width: 18px; height: 18px; }

/* Contact : coordonnées masquées + formulaire */
.fiche-contact { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--c-line); }
.fiche-contact__grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.fiche-contact__coords { margin: 0; display: grid; gap: var(--sp-4); background: var(--c-mist); border-radius: var(--r-lg); padding: var(--sp-5); }
.fiche-contact__coords dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-slate); font-weight: var(--fw-semi); }
.fiche-contact__coords dd { margin: 2px 0 0; font-weight: var(--fw-semi); color: var(--c-ink); letter-spacing: .04em; }
.fiche-contact__note { display: flex; align-items: flex-start; gap: 8px; color: var(--c-slate); font-size: var(--fs-xs); margin: 0; line-height: 1.5; }
.fiche-contact__note .ico { width: 15px; height: 15px; color: var(--c-green-700); flex: none; margin-top: 2px; }
.fiche-contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.fiche-contact__submit { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 900px) {
  .fiche2__grid { grid-template-columns: 1fr; }
  .fiche2__aside { position: static; }
  .fiche2__panel { max-width: none; }
}
@media (max-width: 620px) {
  .fiche2__media img { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .fiche-contact__grid { grid-template-columns: 1fr; }
  .fiche-contact__form { grid-template-columns: 1fr; }
}

/* ---- Centre de ressources : layout filtres + liste ----------------- */
.res-layout { display: grid; grid-template-columns: 264px 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }

/* Barre latérale de filtres */
.res-filters { position: sticky; top: calc(var(--header-h, 76px) + var(--sp-4)); }
.res-filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.res-filters__title { font-size: 1.15rem; }
.res-filters__reset { background: none; border: none; padding: 0; cursor: pointer; color: var(--c-blue); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.res-filters__reset:hover { text-decoration: underline; }

/* Filtres projets en barre latérale (réutilise .res-filters) */
.proj-filters .field { margin-top: var(--sp-4); }
.proj-filters .field__grouplabel { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-ink); }
.proj-filters .toolbar__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.facet { border-bottom: 1px solid var(--c-line); }
.facet > summary { list-style: none; cursor: pointer; padding: var(--sp-4) 0; font-weight: var(--fw-semi); color: var(--c-ink); display: flex; align-items: center; justify-content: space-between; }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: "+"; color: var(--c-blue); font-size: 1.2rem; line-height: 1; }
.facet[open] > summary::after { content: "\2212"; }
.facet__list { display: grid; gap: 2px; padding-bottom: var(--sp-4); }
.facet__opt { display: flex; align-items: center; gap: var(--sp-3); padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); color: var(--c-slate); }
.facet__opt:hover { background: var(--c-mist); }
.facet__opt input { accent-color: var(--c-blue); width: 16px; height: 16px; flex: none; }
.facet__name { flex: 1; }
.facet__count { color: var(--c-slate); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.facet__opt input:checked ~ .facet__name { color: var(--c-ink); font-weight: var(--fw-semi); }

/* Barre du haut : compteur + recherche + tri */
.res-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.res-topbar__count { font-weight: var(--fw-bold); font-size: 1.15rem; color: var(--c-ink); }
.res-topbar__count b { color: var(--c-blue); }
.res-topbar__tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.res-search { min-width: 240px; }
.res-sort { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-slate); white-space: nowrap; }
.res-sort .select { min-width: 150px; }

/* Liste de publications */
.res-list { display: grid; gap: var(--sp-4); }
/* ---- Médiathèque ----------------------------------------------------
   js/medias.js posait déjà .gallery, .g-wide et .g-tall, mais AUCUNE
   règle ne les habillait : les figures s'empilaient en pleine largeur,
   une par écran. Mosaïque à deux colonnes — .g-wide prend la ligne
   entière, .g-tall double sa hauteur.
   `dense` comble les trous que laisse une vignette haute en fin de
   rangée ; sans lui la mosaïque se troue. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: var(--sp-3);
}
.gallery figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); background: var(--c-mist-200);
}
.gallery img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.gallery figure:hover img { transform: scale(1.04); }
/* Légende posée SUR l'image, sur un dégradé : hors de l'image elle
   aurait cassé la trame de la mosaïque, chaque figure devenant plus
   haute que sa piste. */
.gallery figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  font-size: var(--fs-xs); line-height: 1.3; color: #fff;
  background: linear-gradient(to top, rgba(0, 51, 95, .85), transparent);
}
.gallery .g-wide { grid-column: span 2; }
.gallery .g-tall { grid-row: span 2; }
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; }
}

.pub {
  display: grid; grid-template-columns: 92px 1fr auto; gap: var(--sp-5); align-items: center;
  padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-paper); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pub:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-sm); }
/* Vignette « couverture » de publication */
.pub__cover { position: relative; width: 92px; height: 120px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; overflow: hidden; background: linear-gradient(150deg, var(--c-blue), var(--c-sky)); }
.pub__cover .ico { width: 30px; height: 30px; opacity: .95; }
.pub__cover-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: var(--fs-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: .04em; background: rgba(0,0,0,.28); text-align: center; }
.pub__cover--loi { background: linear-gradient(150deg, #0a3d6b, #0a63ad); }
.pub__cover--etude { background: linear-gradient(150deg, #1c7c46, #48a26a); }
.pub__cover--outils { background: linear-gradient(150deg, #b8611a, #e08a3c); }
.pub__cat { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-semi); color: var(--c-slate); }
.pub__title { font-size: 1.1rem; line-height: 1.25; margin-top: 4px; }
.pub__desc { color: var(--c-slate); font-size: var(--fs-sm); margin-top: 6px; max-width: 60ch; }
.pub__meta { display: grid; gap: 4px; justify-items: end; text-align: right; min-width: 132px; }
.pub__year { font-weight: var(--fw-semi); color: var(--c-ink); }
.pub__lang, .pub__file { color: var(--c-slate); font-size: var(--fs-sm); }
.pub__dl { margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .res-layout { grid-template-columns: 1fr; }
  .res-filters { position: static; }
}
@media (max-width: 640px) {
  .pub { grid-template-columns: 68px 1fr; grid-auto-rows: min-content; }
  .pub__cover { width: 68px; height: 90px; }
  .pub__meta { grid-column: 1 / -1; justify-items: start; text-align: left; flex-direction: row; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
  .pub__dl { margin-top: 0; margin-left: auto; }
}

/* ---- Replays (cartes vidéo) ---------------------------------------- */
.replay { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.replay:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-md); }
.replay__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--c-mist-200); }
.replay__media img { width: 100%; height: 100%; object-fit: cover; }
.replay__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,20,38,.05), rgba(3,20,38,.45)); }
.replay__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; z-index: 1; display: grid; place-items: center; color: #fff; background: rgba(6,43,77,.55); border: 2px solid rgba(255,255,255,.85); border-radius: 50%; }
.replay__play .ico { width: 26px; height: 26px; }
.replay:hover .replay__play { background: var(--c-blue); }
.replay__time { position: absolute; right: 10px; bottom: 10px; z-index: 1; background: rgba(3,20,38,.8); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semi); padding: 3px 8px; border-radius: var(--r-pill); }
.replay__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.replay__title { font-size: 1.1rem; line-height: 1.25; margin-top: var(--sp-3); }
.replay__title a { color: inherit; }
.replay__title a:hover { color: var(--c-blue); }
.replay__theme { color: var(--c-slate); font-size: var(--fs-sm); margin-top: 6px; }
/* Qui anime le webinaire : souvent ce nom qui décide de le regarder. */
.replay__by { display: flex; align-items: center; gap: 6px; margin-top: 8px;
  color: var(--c-ink); font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.replay__by .ico { width: 16px; height: 16px; flex: none; color: var(--c-blue); }

/* ---- Fiche replay : le lecteur ------------------------------------
   La vignette EST le bouton de lecture (un <button>, pas une image
   décorative sous un lien) : c'est la surface entière qu'on vise, et
   au clavier il n'y a qu'une seule cible à atteindre. */
.rp-player { position: relative; aspect-ratio: 16 / 9; margin-top: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  border-radius: var(--r-xl); overflow: hidden; background: #000; box-shadow: var(--sh-lg); }
.rp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rp-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  padding: 0; border: 0; background: var(--c-mist-200); cursor: pointer; }
.rp-player__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-player__poster::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,20,38,.05), rgba(3,20,38,.45)); }
.rp-player__poster:focus-visible { outline: 3px solid var(--c-sky); outline-offset: -3px; }
.rp-player__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; z-index: 1;
  display: grid; place-items: center; color: #fff; background: rgba(6,43,77,.55);
  border: 2px solid rgba(255,255,255,.85); border-radius: 50%;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.rp-player__play .ico { width: 32px; height: 32px; }
.rp-player__poster:hover .rp-player__play { background: var(--c-blue); transform: scale(1.06); }
.rp-player__dur { position: absolute; right: 12px; bottom: 12px; z-index: 1;
  background: rgba(3,20,38,.8); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  padding: 4px 10px; border-radius: var(--r-pill); }
/* Vidéo pas encore rattachée : le lecteur le dit lui-même, à la place du
   bouton — un bouton de lecture qui ne lance rien serait pire. */
.rp-player__msg { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center;
  justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-6);
  background: rgba(3,20,38,.8); }
.rp-player__msg .ico { width: 30px; height: 30px; color: rgba(255,255,255,.85); }
.rp-player__msg p { max-width: 44ch; line-height: 1.6; font-size: var(--fs-sm); color: rgba(255,255,255,.85); }

/* ---- Fiche replay : l'intervenant·e -------------------------------- */
.rp-speaker { display: flex; align-items: center; gap: var(--sp-4); }
.rp-speaker__av { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--c-mist-200); }
.rp-speaker__name { font-weight: var(--fw-bold); color: var(--c-ink); }
.rp-speaker__role { color: var(--c-slate); font-size: var(--fs-sm); margin-top: 2px; }

@media (max-width: 640px) {
  .rp-player__play { width: 56px; height: 56px; }
  .rp-player__play .ico { width: 24px; height: 24px; }
}

/* ---- Segmented audience selector (Académie) ----------------------- */
.segmented { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.segment { flex: 1; min-width: 200px; display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-paper); transition: all var(--dur-fast) var(--ease); text-align: left; }
.segment:hover { border-color: var(--c-blue); box-shadow: var(--sh-sm); }
.segment__ico { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--tag-blue-bg); color: var(--c-blue); display: grid; place-items: center; flex: none; }
.segment b { display: block; }
.segment small { color: var(--c-slate); font-size: var(--fs-xs); }
.segment { cursor: pointer; }
.segment.is-selected { border-color: var(--c-blue); background: var(--tag-blue-bg); box-shadow: var(--sh-sm); }
.segment.is-selected .segment__ico { background: var(--c-blue); color: #fff; }
.field--error .segmented { outline: 1.5px solid var(--c-wine); outline-offset: 4px; border-radius: var(--r-lg); }

/* ---- Register: profile dropdown with a 3D (emoji) icon ------------ */
.select-3d { display: flex; align-items: center; gap: var(--sp-3); }
.select-3d__ico {
  flex: none; width: 60px; height: 60px; display: grid; place-items: center;
  font-size: 2rem; line-height: 1; border-radius: var(--r-md);
  background: radial-gradient(circle at 30% 25%, #ffffff, var(--c-mist-200));
  border: 1.5px solid var(--c-line-strong);
  box-shadow: inset 0 -3px 6px rgba(18,33,46,.08), 0 3px 8px rgba(18,33,46,.10);
  transition: transform var(--dur-fast) var(--ease);
}
.select-3d__ico.is-pop { transform: scale(1.08); }
.select-3d .select { flex: 1; height: 60px; }

/* ---- Auth (connexion / inscription) ------------------------------- */
/* Une seule colonne, formulaire d'abord. Le bloc d'argumentaire occupait
   la moitié de la carte AVANT le champ de connexion : sur cette page, la
   tâche est de se connecter, pas de se laisser convaincre. Il passe
   dessous, en information de soutien.
   Largeur ramenée de 960 à 560px : un formulaire d'une colonne n'a pas
   besoin de la pleine mesure. */
.auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--c-line); }
/* Fond teinté clair et non plus dégradé plein : sous le formulaire, un
   aplat bleu saturé pèserait plus lourd que la tâche qu'il accompagne.
   `order: 2` le fait passer après le panneau, sans toucher au HTML —
   le balisage garde l'argumentaire en tête pour les lecteurs d'écran. */
.auth__aside { order: 2; padding: var(--sp-5); background: var(--tag-blue-bg); border-top: 1px solid var(--c-line); }
.auth__aside h2 { font-size: var(--fs-h4); color: var(--c-ink); }
.auth__aside ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.auth__aside li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--c-ink); font-size: var(--fs-sm); }
.auth__aside li .ico { color: var(--c-green-700); flex: none; }
.auth__panel { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--c-paper); }
.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-5); }
.tab { padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semi); color: var(--c-slate); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab.is-active { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---- FAQ accordion ------------------------------------------------- */
.faq { display: grid; gap: var(--sp-3); }
.faq details { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); overflow: hidden; }
.faq summary { padding: var(--sp-4) var(--sp-5); font-weight: var(--fw-semi); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--c-blue); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { color: var(--c-blue); }
.faq p { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-slate); font-size: var(--fs-sm); }

/* ---- Testimonials -------------------------------------------------- */
.quote-card { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: var(--sp-6); background: var(--c-paper); }
.quote-card .ico-quote { color: var(--c-sky); width: 34px; height: 34px; margin-bottom: var(--sp-2); }
.quote-card blockquote { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink); }
.quote-card__by { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.quote-card__av { width: 46px; height: 46px; border-radius: 50%; background: var(--c-mist-200); overflow: hidden; flex: none; }
.quote-card__av img { width: 100%; height: 100%; object-fit: cover; }
.quote-card__by b { display: block; }
.quote-card__by small { color: var(--c-slate); }

/* ---- Status badges (consultations) -------------------------------- */
.badge--ouvert { color: var(--c-green-700); }
.badge--avenir { color: var(--tag-orange-fg); }
.badge--clos { color: var(--c-slate); }
.badge--resultats { color: var(--c-sky-600); }

/* ---- Contact split ------------------------------------------------- */
/* Un message de statut VIDE ne doit pas occuper de place. `.stack > * + *`
   (base.css) donne 16px de marge haute à TOUT frère, y compris au <p> de
   statut resté vide en bas du formulaire : sous « Envoyer », cet espace mort
   s'ajoutait à la gouttière de grille, si bien que l'écart réel avant
   « Coordonnées » ne valait jamais celui qui avait été réglé.

   On annule la MARGE, on ne masque pas l'élément — alors qu'intranet.css
   applique `display:none` à ses modales. La différence compte : ce <p> est
   une région `aria-live`. Une région live retirée de l'arbre d'accessibilité
   puis réaffichée en même temps qu'on y écrit n'est pas annoncée de façon
   fiable ; laissée en place et vide, elle l'est. Un bloc vide sans marge ne
   génère aucune boîte de ligne : sa hauteur est nulle de toute façon. */
.form-msg:empty { margin-top: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,1rem+4vw,4rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: var(--sp-4); }
.contact-info__row { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-info__ico { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--tag-blue-bg); color: var(--c-blue); display: grid; place-items: center; flex: none; }
/* `display: block` et non `grid/place-items:center` : le conteneur porte
   désormais une vraie carte Leaflet, qui se dimensionne sur son parent.
   Centrer son contenu écrasait le panneau de tuiles. `z-index: 0` isole
   son empilement — Leaflet numérote ses calques jusqu'à 700 et passerait
   sinon par-dessus l'en-tête collant. */
.map-embed { margin-top: var(--sp-5); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line); aspect-ratio: 16/9; background: var(--c-mist-200); position: relative; z-index: 0; color: var(--c-slate); }

/* ---- Article / event detail --------------------------------------- */
.article-hero__media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16/8; box-shadow: var(--sh-md); margin-top: var(--sp-5); }
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: 72ch; margin-inline: auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; color: var(--c-slate); font-size: var(--fs-sm); }

/* ---- Sitemap / routes hub ------------------------------------------ */
.route-group { margin-top: var(--sp-7); }
.route-group__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.route-group__head .n { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--c-blue); color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800; flex: none; }
.route-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-paper); transition: all var(--dur-fast) var(--ease); height: 100%; }
.route-card:hover { border-color: var(--c-blue); box-shadow: var(--sh-md); transform: translateY(-2px); }
.route-card__ico { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--tag-blue-bg); color: var(--c-blue); display: grid; place-items: center; flex: none; }
.route-card b { display: block; color: var(--c-ink); }
.route-card code { font-size: var(--fs-xs); color: var(--c-slate); }
.route-card .st { margin-left: auto; flex: none; }
.st-badge { font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: .04em; }
.st-ready { background: var(--tag-green-bg); color: var(--c-green-700); }
.st-stub { background: var(--tag-orange-bg); color: var(--tag-orange-fg); }

/* =====================================================================
   CARTOGRAPHIE DES STRUCTURES D'APPUI (decouvrir.html › Typologie)

   Composition reprise de « Square UI — Maps », avec une différence : les
   catégories passent EN TÊTE, sur une seule rangée, au lieu d'un rail
   latéral. Dans une colonne d'article, un rail de 176 px prend un tiers
   de la largeur pour six libellés — la carte, elle, s'en sert.

   La liste montre TROIS FICHES puis défile : c'est ce qu'il faut pour
   comprendre de quoi la liste est faite sans qu'elle pousse la carte
   hors de l'écran.
   ===================================================================== */
.dzm { margin-top: var(--sp-5); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper); }

/* ---- Catégories, en tête ---- */
.dzm-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.dzm-cats { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex: 1; min-width: 0; }
.dzm-cat { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--chip-h);
  padding: 0 var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong); background: var(--c-paper);
  font-size: var(--fs-sm); color: var(--c-slate);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.dzm-cat:hover:not(:disabled) { border-color: var(--c-blue); color: var(--c-blue); }
.dzm-cat.is-active { background: var(--c-mist-200); border-color: var(--c-line-strong); color: var(--c-ink); font-weight: var(--fw-semi); }
.dzm-cat:disabled { opacity: .45; cursor: default; }
.dzm-cat__ico { display: grid; place-items: center; flex: none; }
.dzm-cat__ico .ico { width: 15px; height: 15px; }
.dzm-cat__n { font-size: var(--fs-xs); color: var(--c-slate); font-variant-numeric: tabular-nums; }
.dzm-cat.is-active .dzm-cat__n { color: var(--c-slate); }
.dzm-search { flex: none; width: min(260px, 100%); }

/* ---- Corps : fiches à gauche, carte à droite ---- */
.dzm-body { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 1px; background: var(--c-line); height: 440px; }
.dzm-panel { background: var(--c-paper); display: flex; flex-direction: column; min-height: 0; }
.dzm-panel__head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.dzm-panel__head h4 { margin: 0; font-size: var(--fs-base); }
.dzm-panel__n { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-slate); }
/* Trois fiches visibles, le reste au défilement — la hauteur du corps est
   calée dessus, pas l'inverse. */
.dzm-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.dzm-empty { margin: 0; padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--c-slate); font-size: var(--fs-sm); }

.dzm-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3);
  align-items: start; padding: var(--sp-3); border: 1px solid var(--c-line);
  border-radius: var(--r-md); background: var(--c-paper); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.dzm-card:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-sm); }
.dzm-card.is-active { border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue); }
.dzm-card:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.dzm-card__ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--r-md); background: var(--c-mist); }
.dzm-card__ico .ico { width: 18px; height: 18px; }
.dzm-card__body { min-width: 0; }
.dzm-card__title { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-ink); }
.dzm-card__loc { display: flex; align-items: center; gap: 4px; margin: 2px 0 0;
  font-size: var(--fs-xs); color: var(--c-slate); }
.dzm-card__loc .ico { width: 13px; height: 13px; }
.dzm-card__desc { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-slate);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dzm-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: var(--sp-2) 0 0; }
.dzm-card__tags .tag { font-size: var(--fs-xs); padding: .2em .6em; }
.dzm-card__go { display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: var(--r-pill); color: var(--c-slate); }
.dzm-card__go:hover { background: var(--c-mist); color: var(--c-blue); }
.dzm-card__go .ico { width: 15px; height: 15px; }

/* ---- Carte Leaflet ---- */
/* LA CARTE NE DOIT PAS PASSER PAR-DESSUS L'EN-TÊTE. Leaflet numérote ses
   propres calques de 200 à 1000 (tuiles, ombres, marqueurs, popups,
   contrôles) ; l'en-tête collant du site est à 100. Sans contexte
   d'empilement, ces valeurs se comparent DIRECTEMENT à la sienne dans la
   racine du document — et la carte gagnait, recouvrant la navigation au
   défilement.

   `position: relative` seul n'y suffit pas : il faut un z-index CHIFFRÉ
   (ou `isolation`) pour créer le contexte. À partir de là, les 1000 de
   Leaflet ne valent plus qu'à l'intérieur du cadre, et c'est le cadre
   entier — à 0 — qui se compare à l'en-tête. */
.dzm-map { position: relative; z-index: 0; isolation: isolate;
  background: var(--c-mist); }
.dzm-leaflet { position: absolute; inset: 0; }
/* Leaflet pose ses propres styles ; on ne reprend la main que sur ce qui
   doit suivre la charte du site. */
.dzm-leaflet .leaflet-container { font: inherit; background: var(--c-mist); }
.dzm-leaflet .leaflet-popup-content { margin: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: 1.5; }
.dzm-leaflet .leaflet-popup-content a { color: var(--c-blue); font-weight: var(--fw-semi); }
.dzm-leaflet .leaflet-popup-content-wrapper { border-radius: var(--r-md); }

/* Épingle : goutte pleine + pastille blanche, teintée par catégorie.
   `--pin` est posée par le JS sur chaque marqueur. */
.dzm-mk__pin { display: block; width: 26px; height: 34px; }
.dzm-mk__pin::before { content: ""; display: block; width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0; background: var(--pin); transform: rotate(-45deg);
  box-shadow: 0 2px 5px rgba(18, 33, 46, .35); transition: transform var(--dur-fast) var(--ease); }
.dzm-mk__pin::after { content: ""; position: absolute; left: 8px; top: 8px;
  width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--c-paper); }
.dzm-mk.is-active .dzm-mk__pin::before { transform: rotate(-45deg) scale(1.25); }

/* Les structures nationales n'ont pas de point : sans ce repère, le compte
   des épingles contredirait celui de la liste. */
/* Coin haut-DROIT : le haut-gauche est celui des boutons de zoom de
   Leaflet, et les deux s'y superposaient. */
.dzm-nat { position: absolute; z-index: 500; top: var(--sp-3); right: var(--sp-3);
  display: inline-flex; align-items: center; gap: 5px; padding: 5px var(--sp-3);
  border-radius: var(--r-pill); border: 1px solid var(--c-line);
  background: var(--c-paper); box-shadow: var(--sh-sm);
  font-size: var(--fs-xs); color: var(--c-slate); }
.dzm-nat:hover { border-color: var(--c-blue); color: var(--c-blue); }
.dzm-nat .ico { width: 14px; height: 14px; }
.dzm-nat b { color: var(--c-ink); }

/* Le bloc SORT de la colonne de prose : une carte dans 640 px ne se lit pas. */
@media (min-width: 1120px) {
  .prose > .dzm { width: calc(100% + 180px); margin-inline: -90px; }
}
@media (max-width: 860px) {
  /* La carte passe en tête — c'est l'objet du bloc — et la liste dessous. */
  .dzm-body { grid-template-columns: 1fr; height: auto; }
  .dzm-map { order: -1; height: 320px; }
  .dzm-list { max-height: 360px; }
  .dzm-search { width: 100%; }
}