/* ============================================================
   Mallette pédagogique numérique — Chambre d'agriculture AURA
   Feuille de style applicative.

   Entrée globale : importe les tokens du design system puis
   déclare les composants partagés (header, footer, boutons,
   chips, badges, cartes) aux valeurs exactes du handoff
   « design_handoff_catalogue ».

   Ordre d'import obligatoire : fonts → colors → typography →
   spacing → base (les composants consomment ces variables).
   ============================================================ */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/base.css");

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Section pleine largeur dont le contenu s'aligne sur celui du bandeau
   d'accueil : le retrait latéral est porté par la section, le conteneur
   de 1200px est centré à l'intérieur — exactement comme .hero/.hero__inner.
   C'est ce qui garantit que le titre du hero et la grille partagent la
   même marge gauche. */
.section {
  padding: var(--space-6) var(--space-8) var(--space-2);
}

.section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1;
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
  text-decoration: none;
}

/* ------------------------------------------------------------
   SiteHeader — 84px, blanc, filet gray-200
   ------------------------------------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-h);
  padding: 0 var(--space-6);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xs);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 52px;
  width: auto;
}

/* Navigation, loupe et menu forment un bloc : les écarts internes ne
   dépendent plus de la gouttière de l'en-tête, qui change avec la
   largeur d'écran. */
.site-header__end {
  display: flex;
  align-items: center;
  /* 14px reprend au pixel l'écart d'origine, quand la loupe était dans
     la navigation : 6px de gouttière plus les 8px de sa marge gauche.
     La maquette de bureau ne bouge donc pas d'un cheveu. */
  gap: 14px;
  margin-left: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  /* 15px / 0.05em : le handoff « Recherche » tranche la divergence
     qu'avait le premier jeu de fichiers (README 14px, JSX 15px). */
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-nav__link:hover {
  color: var(--green-700);
  text-decoration: none;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime-500);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.site-nav__link.is-active {
  color: var(--green-700);
}

.site-nav__link.is-active::after {
  opacity: 1;
}

.site-nav__search {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-050);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  color: var(--green-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.site-nav__search:hover {
  background: var(--green-100);
}

/* ============================================================
   Menu de navigation mobile
   ------------------------------------------------------------
   Un <details> : le navigateur ouvre et ferme tout seul, et
   annonce l'état déplié sans qu'on ait à le lui dire. Le script
   n'ajoute que le confort — animation de fermeture, verrou de
   défilement, Échap, retour du focus.

   Les états d'ouverture et de fermeture s'excluent l'un l'autre
   (`[open]:not(.is-closing)` d'un côté, `.is-closing` de l'autre) :
   aucune règle n'a besoin d'en écraser une autre.
   ============================================================ */

/* Au-dessus de 760px, la navigation de bureau tient dans la barre. */
.nav-mobile { display: none; }

.nav-mobile__burger {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-050);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  cursor: pointer;
  /* Le chevron par défaut du <summary>, dans ses deux écritures. */
  list-style: none;
  transition: background var(--dur-fast) var(--ease-standard);
}

.nav-mobile__burger::-webkit-details-marker { display: none; }
.nav-mobile__burger::marker { content: ""; }
.nav-mobile__burger:hover { background: var(--green-100); }

.nav-mobile__burger:focus-visible {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}

.nav-mobile__bars {
  display: block;
  width: 22px;
}

.nav-mobile__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--green-800);
  transition:
    transform var(--dur-base) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}

.nav-mobile__bars span + span { margin-top: 5px; }

/* Les barres se rejoignent en croix : 2px de haut, 5px d'écart —
   le centre est donc à 7px de chacune des extrêmes. */
.nav-mobile[open]:not(.is-closing) .nav-mobile__bars span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-mobile[open]:not(.is-closing) .nav-mobile__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-mobile[open]:not(.is-closing) .nav-mobile__bars span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Voile ------------------------------------------------------
   Réservé à la version animée : sans script, rien ne le refermerait
   au toucher, et sa hauteur allongerait la zone défilable puisque le
   verrou de défilement ne serait pas posé non plus. */
.nav-mobile__veil {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(28, 58, 40, 0.34);
}

html.menu-anime .nav-mobile__veil { display: block; }

.nav-mobile[open]:not(.is-closing) .nav-mobile__veil {
  animation: menu-voile var(--dur-base) var(--ease-standard) both;
}

/* --- Panneau ----------------------------------------------------- */

.nav-mobile__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-4) var(--space-3);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
}

.nav-mobile[open]:not(.is-closing) .nav-mobile__panel {
  animation: menu-panneau 220ms var(--ease-standard) both;
}

.nav-mobile__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--gray-100);
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-700);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}

.nav-mobile__link:last-child { border-bottom: 0; }
.nav-mobile__link:hover { background: var(--green-050); text-decoration: none; }

/* Le filet lime de l'entrée active, porté par une ombre intérieure
   plutôt que par un élément supplémentaire. */
.nav-mobile__link.is-active {
  color: var(--green-700);
  box-shadow: inset 3px 0 0 var(--lime-500);
}

/* Les entrées montent l'une après l'autre, comme les cartes du
   catalogue : une seule grammaire de mouvement sur tout le site. */
.nav-mobile[open]:not(.is-closing) .nav-mobile__link {
  animation: menu-entree 220ms var(--ease-standard) backwards;
}

.nav-mobile[open]:not(.is-closing) .nav-mobile__link:nth-child(1)   { animation-delay:  60ms; }
.nav-mobile[open]:not(.is-closing) .nav-mobile__link:nth-child(2)   { animation-delay: 100ms; }
.nav-mobile[open]:not(.is-closing) .nav-mobile__link:nth-child(3)   { animation-delay: 140ms; }
.nav-mobile[open]:not(.is-closing) .nav-mobile__link:nth-child(n+4) { animation-delay: 180ms; }

/* --- Fermeture ---------------------------------------------------
   Le mouvement inverse, plus bref : une sortie qui s'attarde donne
   l'impression que l'interface traîne. Même parti que la recherche
   plein écran. */
.nav-mobile.is-closing .nav-mobile__panel {
  animation: menu-panneau-sortie 160ms var(--ease-standard) both;
}

.nav-mobile.is-closing .nav-mobile__veil {
  animation: menu-voile-sortie 160ms var(--ease-standard) both;
}

@keyframes menu-panneau {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes menu-panneau-sortie {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes menu-entree {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes menu-voile        { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-voile-sortie { from { opacity: 1; } to { opacity: 0; } }

/* Verrou de défilement, sur le modèle de la recherche plein écran —
   mais borné au palier où le menu existe.

   Si la fenêtre s'élargit alors que le menu est ouvert, la règle cesse
   d'elle-même de s'appliquer : la page redevient défilable sans que
   personne ait eu à s'en occuper. Le script referme bien le menu dans
   ce cas, mais il le fait sur un événement de redimensionnement — et
   une page qu'on ne peut plus faire défiler, sans rien à l'écran qui
   l'explique, est une panne trop coûteuse pour reposer sur la bonne
   arrivée d'un événement. */
@media (max-width: 760px) {
  html.menu-ouvert,
  body.menu-ouvert {
    overflow: hidden;
  }

  html.menu-ouvert body {
    padding-right: var(--largeur-ascenseur, 0px);
  }
}

/* ------------------------------------------------------------
   Hero — l'unique dégradé du système
   ------------------------------------------------------------ */

.hero {
  background: linear-gradient(160deg, var(--green-800), var(--green-600));
  color: var(--white);
  padding: 44px var(--space-8);
}

.hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.hero__col {
  flex: 1;
  min-width: 340px;
}

.hero__eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--lime-300);
  margin-bottom: 10px;
}

.hero__title {
  font-family: var(--font-title);
  color: var(--white);
  font-size: 36px;
  line-height: 1.14;
  margin: 0;
}

/* Variante pour un intitulé long (page « Activités ») : le corps
   descend d'un cran pour que le titre tienne sur deux lignes. */
.hero__title--long { font-size: 29px; }

/* Entrée du bandeau, au chargement — même grammaire que la page
   « À propos ». Le champ de recherche du catalogue en est exclu à
   dessein : c'est l'action première de la page, il n'a pas à se
   faire attendre ni à devenir cliquable avant d'être visible. */
.hero__eyebrow,
.hero__title,
.hero__lead {
  animation: apparition-bloc 420ms var(--ease-standard) backwards;
}

.hero__title { animation-delay:  70ms; }
.hero__lead  { animation-delay: 140ms; }

/* ------------------------------------------------------------
   Button
   ------------------------------------------------------------ */

.btn {
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 20px;
  font-size: var(--fs-label);
  transition:
    background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.btn:hover {
  text-decoration: none;
}

.btn--sm { padding: 7px 14px; font-size: 13px; }
.btn--lg { padding: 13px 26px; font-size: 16px; }

.btn--primary {
  background: var(--green-700);
  color: var(--white);
  border: 1px solid var(--green-700);
}
.btn--primary:hover { background: var(--green-800); color: var(--white); }

.btn--secondary {
  background: var(--white);
  color: var(--green-700);
  border: 1px solid var(--green-600);
}
.btn--secondary:hover { background: var(--green-050); color: var(--green-700); }

.btn--ghost {
  background: transparent;
  color: var(--green-700);
  border: 1px solid transparent;
}
.btn--ghost:hover { background: var(--green-050); color: var(--green-700); }

.btn--danger {
  background: var(--red-600);
  color: var(--white);
  border: 1px solid var(--red-600);
}
.btn--danger:hover { background: var(--red-700); color: var(--white); }

.btn[disabled],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--block { width: 100%; }

/* ------------------------------------------------------------
   SearchBar
   ------------------------------------------------------------ */

.search-bar {
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  padding: 0 var(--space-4);
  gap: 10px;
}

.search-bar--lg {
  height: 60px;
  padding: 0 22px;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--gray-700);
}

.search-bar--lg .search-bar__input { font-size: 18px; }

.search-bar__input::-webkit-search-cancel-button { cursor: pointer; }

.search-bar__submit {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green-700);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.search-bar--lg .search-bar__submit {
  width: 48px;
  height: 48px;
}

.search-bar__submit:hover { background: var(--green-800); }

/* ------------------------------------------------------------
   FilterChip
   ------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}

.chip:hover {
  border-color: var(--green-600);
  color: var(--green-700);
  text-decoration: none;
}

.chip[aria-pressed="true"],
.chip.is-selected {
  background: var(--green-700);
  color: var(--white);
  border-color: var(--green-700);
}

.chip__count {
  font-size: 12px;
  font-weight: var(--fw-bold);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
  color: var(--gray-600);
}

.chip[aria-pressed="true"] .chip__count,
.chip.is-selected .chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

/* ------------------------------------------------------------
   CategoryBadge
   ------------------------------------------------------------ */

.badge {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  color: var(--cat-vegetal-fg);
  background: var(--cat-vegetal-bg);
}

.badge--sm { font-size: 11px; padding: 3px 9px; }

.badge--vegetal    { color: var(--cat-vegetal-fg);    background: var(--cat-vegetal-bg); }
.badge--animal     { color: var(--cat-animal-fg);     background: var(--cat-animal-bg); }
.badge--eau        { color: var(--cat-eau-fg);        background: var(--cat-eau-bg); }
.badge--formation  { color: var(--cat-formation-fg);  background: var(--cat-formation-bg); }
.badge--territoire { color: var(--cat-territoire-fg); background: var(--cat-territoire-bg); }
.badge--commerce   { color: var(--cat-commerce-fg);   background: var(--cat-commerce-bg); }

/* ------------------------------------------------------------
   Grille + carte ressource
   ------------------------------------------------------------ */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.resource-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.resource-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--green-050);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gray-200);
  color: var(--green-500);
}

.resource-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-card__type {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-block;
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-xs);
  color: var(--red-700);
}

/* --red-700 et non --red-600 : le rouge clair échoue au contraste
   sur son fond à cette taille (précision du handoff « Recherche »). */
.resource-card__type--pdf  { color: var(--red-700); }
.resource-card__type--docx { color: var(--cat-eau-fg); }
.resource-card__type--pptx { color: var(--cat-commerce-fg); }

.resource-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.resource-card__title {
  font-family: var(--font-title);
  font-size: 19px;
  line-height: var(--lh-snug);
  color: var(--green-800);
  margin: 0;
}

.resource-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: var(--lh-normal);
  color: var(--gray-600);
  margin: 0;
}

.resource-card__meta {
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--gray-500);
}

.resource-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.resource-card__consult { flex: 1; text-decoration: none; }

.resource-card__download {
  flex: 0 0 auto;
  width: 40px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--green-600);
  border-radius: var(--radius-pill);
  color: var(--green-700);
  transition: background var(--dur-fast) var(--ease-standard);
}

.resource-card__download:hover {
  background: var(--green-050);
  text-decoration: none;
}

/* ------------------------------------------------------------
   SiteFooter
   ------------------------------------------------------------ */

.site-footer {
  background: var(--gray-100);
  border-top: 3px solid var(--green-700);
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}

.site-footer__logo {
  height: 58px;
  width: auto;
  margin-bottom: var(--space-4);
}

.site-footer__address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--gray-600);
}

.site-footer__heading {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--green-800);
  margin: 0 0 14px;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer__list a {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
  text-decoration: none;
}

.site-footer__list a:hover {
  color: var(--green-700);
  text-decoration: none;
}

/* Bandeau de financement : logo CASDAR et mention obligatoire. Le logo
   est un bloc de texte dense — sous 68px de haut, la ligne « Liberté /
   Égalité / Fraternité » n'est plus lisible. Le fichier est servi au
   double de cette hauteur pour rester net sur les écrans à forte
   densité. */
.site-footer__funding {
  border-top: 1px solid var(--gray-200);
}

.site-footer__funding-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.site-footer__funding-logo {
  height: 68px;
  width: auto;
  flex: none;
}

.site-footer__funding-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 44ch;
}

.site-footer__legal {
  border-top: 1px solid var(--gray-200);
}

.site-footer__legal-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--gray-500);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ------------------------------------------------------------
   Barre d'outils du catalogue
   ------------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.toolbar__count {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--green-800);
  margin: 0;
}

.filters {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

/* Bandeau de contexte (activité filtrée, fiche activité) */
.context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 14px 20px;
  margin-bottom: var(--space-5);
  background: var(--green-050);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-md);
}

.context-bar--accent {
  background: var(--lime-100);
  border-color: var(--lime-300);
}

.context-bar__title {
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--green-800);
  margin: 0;
}

/* ------------------------------------------------------------
   Apparition et transition des ressources
   Politique de mouvement du design system : fondus et petites
   translations uniquement, jamais de rebond.
   ------------------------------------------------------------ */

[data-results] {
  transition: opacity var(--dur-fast) var(--ease-standard);
}

/* Sortie : les cartes s'effacent sans disparaître complètement —
   garder une trace du contenu évite l'impression de page vide et
   supprime tout saut de mise en page pendant l'attente. */
[data-results].is-leaving {
  opacity: 0.3;
  pointer-events: none;
}

/* Entrée : léger fondu montant, décalé carte par carte. */
@keyframes resultat-apparait {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* L'animation porte sur la carte elle-même, sans classe posée par un
   script : elle se rejoue donc d'elle-même chaque fois que la grille est
   construite — à l'arrivée sur la page comme après un filtrage, puisque
   le remplacement du fragment crée des éléments neufs.

   Rien n'est masqué au repos : aucune règle ne met les cartes à
   opacité nulle en attendant qu'un script les révèle. Si l'animation
   n'est pas jouée — navigateur ancien, feuille interrompue, script
   absent — les cartes s'affichent simplement sans mouvement. Le repli
   est l'absence d'animation, jamais l'absence de contenu.

   « backwards » plutôt que « both » : l'état initial s'applique pendant
   le délai, mais aucune valeur ne persiste après coup — le survol des
   cartes (translateY(-3px)) reste donc opérant.

   Les repères de chargement en sont exclus : ils annoncent déjà une
   attente, les faire patienter davantage serait à contresens. */
.resource-grid > .resource-card:not(.resource-card--skeleton),
[data-results] > .state-panel {
  animation: resultat-apparait var(--dur-base) var(--ease-standard) backwards;
}

/* La cascade se propage de la première carte à la dernière. Au-delà de
   la huitième le délai est figé : sur une page pleine, la fin de la
   grille ne doit pas se faire attendre. */
.resource-grid > .resource-card:nth-child(2)   { animation-delay:  30ms; }
.resource-grid > .resource-card:nth-child(3)   { animation-delay:  60ms; }
.resource-grid > .resource-card:nth-child(4)   { animation-delay:  90ms; }
.resource-grid > .resource-card:nth-child(5)   { animation-delay: 120ms; }
.resource-grid > .resource-card:nth-child(6)   { animation-delay: 150ms; }
.resource-grid > .resource-card:nth-child(7)   { animation-delay: 180ms; }
.resource-grid > .resource-card:nth-child(8)   { animation-delay: 210ms; }
.resource-grid > .resource-card:nth-child(n+9) { animation-delay: 240ms; }

/* Le décompte change en même temps que la grille. */
.toolbar__count {
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.toolbar__count.is-updating { opacity: 0.35; }

/* ------------------------------------------------------------
   Repères de chargement
   ------------------------------------------------------------ */

.resource-card--skeleton { pointer-events: none; }
.resource-card--skeleton:hover { transform: none; box-shadow: var(--shadow-xs); }

.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: skeleton-sweep 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

.resource-card__thumb.skeleton { border-radius: 0; }

.skeleton--badge { width: 90px;  height: 22px; border-radius: var(--radius-pill); }
.skeleton--title { width: 80%;   height: 19px; }
.skeleton--line  { width: 100%;  height: 13px; }
.skeleton--short { width: 55%; }

@keyframes skeleton-sweep {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ------------------------------------------------------------
   États vide / erreur
   ------------------------------------------------------------ */

.state-panel {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--green-050);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.state-panel__icon {
  width: 40px;
  height: 40px;
  color: var(--green-500);
  margin: 0 auto var(--space-4);
}

.state-panel__title {
  font-size: 24px;
  margin-bottom: var(--space-3);
}

.state-panel__text {
  font-family: var(--font-body);
  color: var(--gray-600);
  max-width: 60ch;
  margin: 0 auto var(--space-5);
}

/* ------------------------------------------------------------
   Pagination publique
   ------------------------------------------------------------ */

.pagination--public {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-7);
}

.pagination--public .pagination__link {
  min-width: 42px;
  height: 42px;
}

.pagination__gap {
  font-family: var(--font-label);
  color: var(--gray-400);
  padding: 0 4px;
}

/* ------------------------------------------------------------
   Fil d'Ariane
   ------------------------------------------------------------ */

.breadcrumb {
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-050);
}

.breadcrumb__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--space-8);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--gray-500);
}

.breadcrumb__inner a { color: var(--green-700); text-decoration: none; }
.breadcrumb__inner a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Hero — colonne de texte d'accompagnement
   ------------------------------------------------------------ */

.hero__lead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--green-100);
  margin: 0;
}

/* ------------------------------------------------------------
   Fiche ressource
   ------------------------------------------------------------ */

.resource-detail {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.resource-detail__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--green-050);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-detail__actions { margin-top: var(--space-4); }

.resource-detail__hint {
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--gray-500);
  text-align: center;
  margin: 10px 0 0;
}

.resource-detail__media .definition { margin-top: var(--space-5); }

.resource-detail__title {
  font-size: 32px;
  line-height: 1.2;
  margin: var(--space-3) 0 0;
}

.resource-detail__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--gray-600);
  margin: var(--space-4) 0 0;
}

.resource-detail__block {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--gray-200);
}

.resource-detail__subtitle {
  font-size: var(--fs-h3);
  margin-bottom: 4px;
}

.resource-detail__note {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-500);
  margin: 0 0 var(--space-4);
}

.resource-detail__back {
  margin-top: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}

/* Liste des activités rattachées */
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activity-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 12px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}

.activity-list__item:hover {
  border-color: var(--green-600);
  background: var(--green-050);
  text-decoration: none;
}

.activity-list__code {
  flex: 0 0 auto;
  min-width: 38px;
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--green-700);
}

.activity-list__name {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
}

.activity-list__arrow { color: var(--green-600); flex: 0 0 auto; }

/* Ressources liées */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.related-item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}

.related-item:hover {
  border-color: var(--green-600);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.related-item__thumb {
  flex: 0 0 74px;
  height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--green-050);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.related-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.related-item__type {
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--red-600);
}

.related-item__type--docx { color: var(--cat-eau-fg); }
.related-item__type--pptx { color: var(--cat-commerce-fg); }

.related-item__title {
  font-family: var(--font-title);
  font-size: 15px;
  line-height: 1.3;
  color: var(--green-800);
}

.related-item__meta {
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  color: var(--gray-500);
}

/* ------------------------------------------------------------
   Liste de définitions — partagée front-office / back-office
   ------------------------------------------------------------ */

.definition {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  margin: 0;
}

.definition div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-200);
}

.definition div:last-child { border-bottom: none; }

.definition dt {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  font-size: var(--fs-eyebrow);
  color: var(--gray-500);
  white-space: nowrap;
}

.definition dd {
  margin: 0;
  color: var(--gray-700);
  text-align: right;
  word-break: break-word;
}

/* ------------------------------------------------------------
   Bande d'appel (activités, partenaires)
   ------------------------------------------------------------ */

/* Bande de fin de page : elle se termine au contact du pied de page.
   Le retrait de 56px prévu par la maquette entre le contenu et le pied
   passe donc AU-DESSUS de la bande, sous forme de marge haute — d'où
   l'absence de bordure basse, le filet vert du pied de page assurant
   déjà la séparation. */
.section--band {
  background: var(--green-050);
  border-top: 1px solid var(--gray-200);
  margin-top: var(--space-9);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.band__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-2);
}

.band__text {
  font-family: var(--font-body);
  color: var(--gray-600);
  max-width: 68ch;
  margin: 0 0 var(--space-5);
}

.activity-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.activity-chip {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-standard);
}

.activity-chip:hover {
  border-color: var(--green-600);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.activity-chip__code {
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--green-700);
  min-width: 30px;
}

.activity-chip__name {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--gray-700);
}

.activity-chip__count {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--gray-500);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Déroulé des activités
   ------------------------------------------------------------ */

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-standard);
}

.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-300);
  text-decoration: none;
}

.activity-card__code {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-800);
  font-family: var(--font-label);
  font-weight: var(--fw-bold);
  font-size: 19px;
}

.activity-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.activity-card__name {
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--green-800);
}

.activity-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-600);
}

.activity-card__meta {
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--gray-500);
}

.activity-card__arrow { color: var(--green-600); flex: 0 0 auto; }

/* Navigation activité précédente / suivante */
.step-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--gray-200);
}

.step-nav__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 46%;
  text-decoration: none;
}

.step-nav__link--next { text-align: right; margin-left: auto; }

.step-nav__label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--green-700);
}

.step-nav__name {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-600);
}

/* ------------------------------------------------------------
   Thématiques
   ------------------------------------------------------------ */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-standard);
}

.theme-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.theme-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--gray-600);
}

.theme-card__count {
  margin-top: auto;
  font-family: var(--font-label);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  color: var(--gray-500);
}

.theme-note {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-500);
}

/* ------------------------------------------------------------
   Contenu éditorial
   ------------------------------------------------------------ */

.prose {
  max-width: var(--container-narrow);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--gray-700);
}

.prose h2 {
  font-size: var(--fs-h3);
  margin: var(--space-7) 0 var(--space-3);
}

.prose h2:first-child { margin-top: 0; }

.prose__address {
  font-style: normal;
  color: var(--gray-600);
}

.stat-row {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.stat-row__item { display: flex; flex-direction: column; gap: 2px; }

.stat-row__value {
  font-family: var(--font-title);
  font-size: 32px;
  line-height: 1;
  color: var(--green-800);
}

.stat-row__label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  font-size: var(--fs-eyebrow);
  color: var(--gray-500);
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-5);
  align-items: center;
}

.partner-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  min-height: 96px;
}

.partner-grid__item img {
  max-width: 100%;
  max-height: 62px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   Recherche plein écran

   Feuille blanche ancrée en haut de la fenêtre, glissant sur un
   voile assombri — pas une fenêtre modale centrée.
   ============================================================ */

.search-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  animation: recherche-voile var(--dur-base) var(--ease-standard) both;
}

.search-sheet[hidden] { display: none; }

.search-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 58, 40, 0.34);
  /* Le flou est une exception assumée à la règle « pas de
     glassmorphisme » du design system, demandée par le client.
     Purement décoratif : sans lui, la feuille reste lisible. */
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  border: none;
  padding: 0;
  cursor: pointer;
}

.search-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -26px rgba(20, 40, 25, 0.34);
  animation: recherche-feuille 280ms var(--ease-standard) both;
}

/* Fermeture : le mouvement inverse, plus bref — une sortie qui
   s'attarde donne l'impression que l'interface traîne. */
.search-sheet.is-closing {
  animation: recherche-voile-sortie 160ms var(--ease-standard) both;
  pointer-events: none;
}

.search-sheet.is-closing .search-sheet__panel {
  animation: recherche-feuille-sortie 200ms var(--ease-standard) both;
}

@keyframes recherche-voile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes recherche-voile-sortie {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes recherche-feuille {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes recherche-feuille-sortie {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-14px); }
}

/* --- En-tête de la feuille --- */

.search-sheet__head {
  width: 100%;
  max-width: 1128px;
  margin: 0 auto;
  padding: 26px 48px 0;
  flex: 0 0 auto;
}

.search-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 14px;
}

.search-sheet__eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: var(--fw-bold);
  font-size: 12px;
  color: var(--green-700);
  margin: 0;
}

.search-sheet__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.search-sheet__close:hover { background: var(--gray-100); }

.search-sheet__field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  padding: 0 0 14px;
  border-bottom: 2px solid var(--green-600);
}

.search-sheet__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 25px;
  color: var(--gray-900);
}

.search-sheet__input::-webkit-search-cancel-button { display: none; }

.search-sheet__clear {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.search-sheet__clear[hidden] { display: none; }

.search-sheet__clear-dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: rgba(20, 40, 25, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-standard);
}

.search-sheet__clear:hover .search-sheet__clear-dot { background: rgba(20, 40, 25, 0.18); }

.search-sheet__submit { flex: 0 0 auto; min-height: 44px; }

/* --- Zone de résultats --- */

.search-sheet__scroll {
  overflow-y: auto;
  width: 100%;
  max-width: 1128px;
  margin: 0 auto;
  padding: 22px 48px 30px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.search-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 0 10px;
}

.search-section__label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: var(--fw-bold);
  font-size: 12px;
  color: var(--gray-600);
}

.search-section__count {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-sm);
  color: var(--gray-600);
}

.search-section__link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--green-700);
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
}

.search-terms {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.search-term {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}

.search-term:hover {
  border-color: var(--green-600);
  color: var(--green-700);
}

/* --- Lignes de résultat --- */

.search-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.search-row {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 10px;
  padding: 12px 14px;
  /* Marge négative : le survol déborde de la colonne de texte. */
  margin: 0 -14px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
  animation: recherche-ligne 300ms var(--ease-standard) backwards;
  animation-delay: calc(var(--rang, 0) * 32ms);
}

.search-row:hover { background: var(--green-050); text-decoration: none; }

@keyframes recherche-ligne {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.search-row__cover {
  flex: 0 0 46px;
  width: 46px;
  height: 60px;
  border-radius: 3px;
  background: var(--green-050);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.search-row__cover img { width: 100%; height: 100%; object-fit: cover; }

.search-row__chip {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(41, 139, 85, 0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-row--page .search-row__body { gap: 2px; }

.search-row__title {
  font-family: var(--font-title);
  font-size: 17px;
  line-height: 1.3;
  color: var(--gray-900);
}

.search-row__title--page { font-size: 16px; }

.search-row__title mark,
.search-row__desc mark {
  background: transparent;
  color: var(--green-700);
  font-weight: var(--fw-semibold);
}

.search-row__desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray-600);
}

.search-row__context {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.03em;
  /* --gray-700 et non --gray-500 : à cette taille, le gris clair
     échoue au contraste (rappel du handoff). */
  color: var(--gray-700);
}

.search-row__pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-bold);
  font-size: 11px;
  color: var(--green-700);
  background: var(--lime-100);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}

.search-row__path {
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--gray-600);
  background: rgba(20, 40, 25, 0.06);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* --- Appel à l'action et état vide --- */

.search-cta {
  display: flex;
  justify-content: center;
  padding: 26px 0 8px;
}

.search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 46px 28px 42px;
  animation: recherche-ligne 300ms var(--ease-standard) backwards;
}

.search-empty__title {
  font-family: var(--font-title);
  font-size: 18px;
  color: var(--gray-900);
  margin: 14px 0 0;
}

.search-empty__text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gray-600);
  margin: 7px 0 18px;
  max-width: 400px;
}

.search-empty__reset {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-sm);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  color: var(--green-700);
  background: rgba(41, 139, 85, 0.10);
  border: 1px solid rgba(41, 139, 85, 0.22);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.search-empty__reset:hover { background: rgba(41, 139, 85, 0.18); }

/* --- Repères de chargement --- */

.search-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 18px 0;
}

.search-skeleton__row {
  display: flex;
  gap: 18px;
  align-items: center;
}

.search-skeleton__cover {
  flex: 0 0 46px;
  width: 46px;
  height: 60px;
  border-radius: 3px;
}

.search-skeleton__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Verrou de défilement de la page ---
   La classe est posée sur <html> ET <body> : selon le document, c'est
   l'un ou l'autre qui porte le défilement, et ne verrouiller que <body>
   laisserait la page glisser derrière le panneau.

   --largeur-ascenseur est mesurée par le script : sans cette
   compensation, la disparition de la barre de défilement décalerait
   toute la page vers la droite au moment de l'ouverture. */

html.recherche-ouverte,
body.recherche-ouverte {
  overflow: hidden;
}

html.recherche-ouverte body {
  padding-right: var(--largeur-ascenseur, 0px);
}

/* ------------------------------------------------------------
   Icônes (Lucide, SVG inline)
   ------------------------------------------------------------ */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
   Focus visible — anneau vert du design system
   ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* ------------------------------------------------------------
   Focus des champs de recherche

   Les deux champs de recherche ne sont pas des contrôles isolés :
   ce sont des saisies transparentes posées dans un conteneur qui
   porte, lui, toute l'apparence (la pilule du bandeau, le filet
   vert du panneau). Cerner la saisie elle-même dessinerait un
   rectangle à l'intérieur de ce conteneur.

   L'indication n'est donc pas supprimée mais déplacée sur le
   conteneur, via :focus-within — ce qui la rend même plus lisible,
   puisque c'est l'ensemble du contrôle qui se signale.
   ------------------------------------------------------------ */

.search-bar__input:focus,
.search-bar__input:focus-visible,
.search-sheet__input:focus,
.search-sheet__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.search-bar:focus-within {
  border-color: var(--green-600);
  box-shadow: var(--shadow-focus);
}

/* Le panneau n'a qu'un filet inférieur : on l'assombrit et on le
   double par une ombre portée plutôt que d'épaissir la bordure,
   qui décalerait la mise en page d'un pixel. */
.search-sheet__field:focus-within {
  border-bottom-color: var(--green-700);
  box-shadow: 0 2px 0 0 var(--green-700);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .resource-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .resource-detail { grid-template-columns: minmax(0, 1fr); }
  .resource-detail__media { max-width: 420px; }
}

@media (max-width: 760px) {
  /* La maquette ne couvre que le bureau. Sous 760px les entrées passent
     dans un menu déroulant : l'en-tête tient alors sur une seule rangée
     — logo, loupe, menu — au lieu des deux qu'imposait la navigation
     dépliée, et aucune entrée ne se retrouve hors écran comme le faisait
     le défilement horizontal qui la remplaçait.

     `position: relative` ancre le panneau sous la barre ; `z-index` le
     place au-dessus du contenu de la page, et sous la recherche plein
     écran (200), qui reste ouvrable par-dessus. */
  .site-header {
    position: relative;
    z-index: 150;
    height: auto;
    min-height: var(--header-h);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .site-header__logo img { height: 42px; }

  .site-nav { display: none; }
  .nav-mobile { display: block; }

  .hero { padding: var(--space-6) var(--space-4); }
  .hero__title { font-size: 28px; }
  .hero__title--long { font-size: 24px; }
  .hero__col { min-width: 100%; }
  .section { padding: var(--space-5) var(--space-4) var(--space-2); }
  .resource-grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; padding: var(--space-6) var(--space-4) 24px; }
  /* Le logo et la mention s'empilent : côte à côte, il ne resterait
     qu'une vingtaine de caractères par ligne au texte. */
  .site-footer__funding-inner { padding: var(--space-4); gap: var(--space-3); }
  .site-footer__legal-inner { padding: var(--space-4); }

  .breadcrumb__inner { padding: 10px var(--space-4); }
  .resource-detail__title { font-size: 26px; }
  .band__title { font-size: 26px; }

  /* La barre d'outils empile le décompte au-dessus des puces. */
  .toolbar { align-items: flex-start; }

  /* Le déroulé passe en carte verticale. */
  .activity-card { align-items: flex-start; gap: var(--space-4); padding: 16px; }
  .activity-card__code { width: 44px; height: 44px; font-size: 16px; }
  .activity-card__arrow { display: none; }

  .step-nav { flex-direction: column; gap: var(--space-5); }
  .step-nav__link { max-width: 100%; }
  .step-nav__link--next { text-align: left; margin-left: 0; }

  .stat-row { gap: var(--space-5); }

  /* Recherche plein écran sur mobile : la feuille occupe l'écran,
     le champ redescend d'un cran et le bouton passe sous le champ. */
  .search-sheet__panel { max-height: 100vh; border-radius: 0; }
  .search-sheet__head { padding: 16px var(--space-4) 0; }
  .search-sheet__scroll { padding: 16px var(--space-4) 24px; }
  .search-sheet__field { flex-wrap: wrap; gap: var(--space-3); }
  .search-sheet__input { font-size: 20px; }
  .search-sheet__submit { width: 100%; order: 3; }

  .search-row { gap: 12px; padding: 12px 10px; margin: 0 -10px; }
  .search-row__path { display: none; }
  .search-row__pin { display: none; }
}

/* ------------------------------------------------------------
   Mouvement réduit
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .resource-card:hover { transform: none; }

  /* Les ressources s'affichent d'emblée, sans cascade ni fondu de
     sortie : ni à l'arrivée sur la page, ni au changement de filtre. */
  [data-results].is-leaving { opacity: 1; }
  .resource-grid > .resource-card,
  [data-results] > .state-panel { animation: none; }

  /* Les blocs sont là d'emblée. `revelation.js` ne pose alors ni classe
     ni observateur : ces règles ne sont qu'un filet, pour le cas où la
     préférence système changerait en cours de visite. */
  .a-reveler,
  .a-reveler:not(.est-revele) { opacity: 1 !important; transform: none !important; }
  .a-reveler.est-revele,
  [data-apparait],
  [data-apparait-groupe] > *,
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .about-hero__eyebrow,
  .about-hero__title,
  .about-hero__lead,
  .about-figures__chip,
  [data-apparait="photo"] img { animation: none !important; }
  [data-apparait="photo"].a-reveler:not(.est-revele) img { transform: none !important; }
  .about-stage:hover,
  .about-partners__tile:hover { transform: none; }

  /* Le menu s'ouvre et se ferme d'un coup. Les barres rejoignent la
     croix sans transition : l'état reste lisible, le mouvement part. */
  .nav-mobile__panel,
  .nav-mobile__veil,
  .nav-mobile__link { animation: none !important; }
  .nav-mobile__bars span { transition: none !important; }

  /* La recherche apparaît et disparaît sans glissement ni cascade. */
  .search-sheet,
  .search-sheet__panel,
  .search-sheet.is-closing,
  .search-sheet.is-closing .search-sheet__panel,
  .search-row,
  .search-empty { animation: none !important; }
}

/* ============================================================
   Apparition des blocs
   ------------------------------------------------------------
   Mécanisme commun à toutes les pages publiques : les vues
   marquent ce qui doit entrer — `data-apparait`,
   `data-apparait-groupe`, `data-compte` — et `revelation.js`
   s'occupe du reste.

   Une seule chose gouverne l'ensemble : ce qui est visible au
   chargement ne doit jamais être masqué après coup. Le script est
   différé, le navigateur a pu peindre avant qu'il ne s'exécute —
   escamoter alors un bloc que l'on voit déjà le ferait clignoter.

   • L'entrée de tout bloc marqué est déclarée ici, en CSS : elle
     s'applique dès la première peinture, sans clignotement possible.

   • `revelation.js` se contente d'annuler cette entrée pour les
     blocs hors de l'écran, qu'il révèle ensuite au défilement.
     Script absent : rien n'est masqué, la page se lit telle quelle.

   Un bloc entre donc au chargement ou à son arrivée dans l'écran
   selon la hauteur de la fenêtre — mais il entre, toujours.

   420 ms, et 150 ms de retard avant la première entrée.

   Le réglage d'origine — 480 ms de retard, 560 ms de mouvement,
   cascades de 90 ms — donnait sur une fiche ressource un contenu
   entièrement posé à 1,4 s. Cette page n'a pas de bandeau : après
   le fil d'Ariane, l'écran restait vide assez longtemps pour qu'on
   croie à une panne. Un mouvement d'apparition doit accompagner
   l'arrivée du contenu, jamais la faire attendre : au-delà d'une
   demi-seconde d'attente, il cesse d'être perçu comme une intention
   et devient un symptôme.

   Reste plus ample que les 320 ms du système, qui cadencent des
   retours d'interface — un survol, un basculement.
   ------------------------------------------------------------ */

@keyframes apparition-bloc {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Tout bloc marqué entre au chargement. L'animation étant déclarée en
   CSS, elle s'applique dès la première peinture : aucun clignotement
   n'est possible.

   Le script annule cette entrée pour les blocs hors de l'écran et la
   remplace par une révélation au défilement. Un bloc n'est donc jamais
   figé, quelle que soit la hauteur de la fenêtre — c'est exactement ce
   qui manquait à la première bande, trop basse pour appartenir au
   bandeau de titre, trop haute pour être révélée au défilement. */
[data-apparait],
[data-apparait-groupe] > * {
  animation: apparition-bloc 420ms var(--ease-standard) backwards;
  animation-delay: 150ms;
}

/* Sur un très grand écran, un groupe peut être visible dès l'arrivée :
   il garde alors sa cascade. */
[data-apparait-groupe] > *:nth-child(2)   { animation-delay: 210ms; }
[data-apparait-groupe] > *:nth-child(3)   { animation-delay: 270ms; }
[data-apparait-groupe] > *:nth-child(4)   { animation-delay: 330ms; }
[data-apparait-groupe] > *:nth-child(n+5) { animation-delay: 390ms; }

/* Masquage posé par le script — cette règle est inerte sans lui, et
   annule l'entrée au chargement du bloc qu'elle escamote. */
.a-reveler:not(.est-revele) {
  animation: none;
  opacity: 0;
}

.a-reveler.est-revele {
  animation: apparition-bloc 420ms var(--ease-standard) backwards;
  animation-delay: calc(var(--rang, 0) * 80ms);
}

/* La photographie se pose en se rapprochant : le cadre monte comme
   les autres blocs, l'image se détend lentement à l'intérieur. Deux
   transformations sur deux éléments distincts, qui ne se gênent pas. */
@keyframes apparition-photo {
  from { transform: scale(1.045); }
  to   { transform: none; }
}

[data-apparait="photo"] img {
  animation: apparition-photo 700ms var(--ease-standard) backwards;
  animation-delay: 150ms;
}

[data-apparait="photo"].a-reveler:not(.est-revele) img {
  animation: none;
  transform: scale(1.045);
}

/* La forme courte remet le retard à zéro : révélée au défilement, la
   photographie n'a pas à attendre le cadencement du chargement. */
[data-apparait="photo"].a-reveler.est-revele img {
  animation: apparition-photo 700ms var(--ease-standard) backwards;
}


/* ============================================================
   Page « À propos »
   ------------------------------------------------------------
   Mise en page issue du handoff « design_handoff_a_propos ».

   Elle remplace l'ancien gabarit, qui coulait toute la page dans
   un unique bloc .prose plafonné à 800 px : sur un écran large, le
   texte se tassait à gauche d'une bande vide, et les chiffres clés
   se perdaient au milieu du corps de texte.

   Six bandes pleine largeur, conteneur interne de 1200 px,
   alternance blanc / --green-050. La mesure de lecture (640 px) ne
   s'applique plus qu'aux blocs de prose, pas aux grilles.
   ============================================================ */

.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--green-600);
  margin: 0 0 var(--space-2);
}

/* --- Bandeau de titre ---------------------------------------- */

/* Le seul dégradé du site. Le handoff insiste : ne pas le rejouer
   ailleurs, sous peine de lui faire perdre sa fonction de repère. */
.about-hero {
  background: linear-gradient(160deg, var(--green-800), var(--green-600));
  color: var(--white);
  padding: 56px var(--space-8) var(--space-8);
}

.about-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.about-hero__top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-9);
  align-items: start;
}

.about-hero__eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--lime-300);
  margin: 0 0 14px;
}

.about-hero__title {
  font-family: var(--font-title);
  font-size: 44px;
  line-height: 1.1;
  color: var(--white);
  margin: 0;
}

.about-hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* Entrée du bandeau : surtitre, titre, chapeau, puis les pastilles.
   L'ordre de lecture et l'ordre d'apparition sont les mêmes. */
.about-hero__eyebrow,
.about-hero__title,
.about-hero__lead {
  animation: apparition-bloc 420ms var(--ease-standard) backwards;
}

.about-hero__title { animation-delay:  70ms; }
.about-hero__lead  { animation-delay: 140ms; }

/* Pastilles translucides : la seule transparence que la charte
   autorise, et seulement au-dessus du dégradé. */
.about-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.about-figures__chip {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  min-width: 168px;
}

.about-figures__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--white);
}

.about-figures__label {
  display: block;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--lime-300);
  margin-top: 7px;
}

/* Les pastilles suivent le chapeau. Le retard de la première (200 ms)
   est celui sur lequel `revelation.js` cale le défilé des nombres :
   ils se mettent en marche au moment où la pastille paraît. */
.about-figures__chip {
  animation: apparition-bloc 420ms var(--ease-standard) backwards;
}

.about-figures__chip:nth-child(1)   { animation-delay: 200ms; }
.about-figures__chip:nth-child(2)   { animation-delay: 260ms; }
.about-figures__chip:nth-child(3)   { animation-delay: 320ms; }
.about-figures__chip:nth-child(4)   { animation-delay: 380ms; }
.about-figures__chip:nth-child(n+5) { animation-delay: 440ms; }

/* Le nombre ne doit pas faire sauter la pastille pendant qu'il défile :
   les chiffres n'ont pas tous la même largeur dans cette fonte. */
.about-figures__value { font-variant-numeric: tabular-nums; }

/* --- Bandes ---------------------------------------------------- */

.about-band {
  padding: var(--space-9) var(--space-8);
}

.about-band--tinted {
  background: var(--green-050);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

/* Les conditions d'utilisation prolongent la bande précédente :
   elles n'ont pas à rouvrir un espacement complet au-dessus. */
.about-band--tight { padding-top: 0; }

.about-band--closing {
  border-bottom: 0;
  padding: 56px var(--space-8) 60px;
}

.about-band__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.about-band__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: var(--space-9);
  align-items: start;
}

.about-band__inner--aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-9);
  align-items: start;
}

.about-band__inner--contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--space-9);
  align-items: start;
}

/* Mesure de lecture : elle borne la prose, jamais les grilles. */
.about-measure { max-width: 640px; }

.about-h2 {
  font-family: var(--font-title);
  font-size: 30px;
  line-height: 1.22;
  color: var(--green-700);
  margin: 0 0 18px;
}

.about-h2--small { font-size: 27px; }

.about-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--gray-700);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.about-p--last { margin-bottom: 0; }
.about-p--intro { max-width: 680px; margin-bottom: 0; }

.about-terms {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--space-7);
}

/* --- Photographie ---------------------------------------------- */

/* Le cadre borne l'image : elle entre en se rapprochant, et ne doit pas
   déborder de ses coins arrondis pendant qu'elle se détend. */
.about-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.about-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
}

.about-figure figcaption {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--gray-600);
  margin-top: 10px;
}

/* --- Les trois étapes ------------------------------------------ */

.about-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: 34px;
}

.about-stage {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  /* Même geste que les cartes du catalogue : le site n'a qu'une
     manière de répondre au survol d'une carte. */
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

.about-stage:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.about-stage__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-600);
  margin: 0;
}

.about-stage__title {
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.25;
  color: var(--green-800);
  margin: 10px 0;
}

.about-stage__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0;
}

/* margin-top:auto colle le décompte au bas de la carte : les trois
   descriptions n'ont pas la même longueur, les compteurs s'alignent
   quand même. */
.about-stage__count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: auto 0 0;
  padding-top: 18px;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--gray-600);
}

.about-stage__count .icon { color: var(--green-600); flex: 0 0 auto; }

/* --- Ce que vous trouverez ici --------------------------------- */

.about-features {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 26px;
}

.about-feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.about-feature__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--green-100);
  color: var(--green-700);
}

.about-feature__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-feature__title {
  font-family: var(--font-title);
  font-size: 18px;
  line-height: 1.3;
  color: var(--green-800);
}

.about-feature__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
}

.about-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* --- À qui s'adresse la mallette -------------------------------- */

.about-audience {
  background: var(--green-050);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 26px;
}

.about-audience__title {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--green-800);
  margin: 0 0 14px;
}

.about-audience__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.about-audience__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--gray-700);
}

.about-audience__list .icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--green-600);
}

.about-audience__note {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--gray-600);
  margin: 18px 0 0;
  border-top: 1px solid var(--gray-200);
  padding-top: var(--space-4);
}

/* --- Objectifs apprenants --------------------------------------- */

/* Sous la bande « La démarche » : les capacités visées, reprises de
   la fiche de présentation de la mallette. Même grammaire de liste à
   coches que « À qui s'adresse la mallette », sur deux colonnes. */
.about-goals { margin-top: var(--space-7); }

.about-goals__title {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--green-800);
  margin: 0 0 16px;
}

.about-goals__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
}

.about-goals__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--gray-700);
}

.about-goals__list .icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--green-600);
}

@media (max-width: 900px) {
  .about-goals__list { grid-template-columns: minmax(0, 1fr); }
}

/* --- Partenaires ------------------------------------------------ */

.about-partners {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
}

.about-partners__tile {
  width: 162px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}

/* Soulèvement plus discret que celui des cartes : une tuile de logo
   n'est pas cliquable, le mouvement signale la matière, pas l'action. */
.about-partners__tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* contain, jamais cover : un logo officiel ne se recadre pas. */
.about-partners__tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- Carte de contact ------------------------------------------- */

.about-contact {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-xs);
}

.about-contact__title {
  font-family: var(--font-title);
  font-size: 22px;
  line-height: 1.25;
  color: var(--green-800);
  margin: 0 0 6px;
}

.about-contact__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 var(--space-5);
}

.about-contact__address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
  border-top: 1px solid var(--gray-200);
  padding-top: 18px;
}

.about-contact__org {
  display: block;
  color: var(--green-800);
}

.about-contact__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--space-5);
}

/* 44 px de hauteur minimale : le public visé n'est pas toujours à
   l'aise avec le numérique, et une cible plus petite se rate. */
.about-contact__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--green-800);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.about-contact__link:hover,
.about-contact__link:focus-visible {
  border-color: var(--green-600);
  color: var(--green-800);
  text-decoration: none;
}

.about-contact__link .icon { color: var(--green-700); flex: 0 0 auto; }

/* --- Adaptation aux écrans étroits ------------------------------ */

@media (max-width: 1000px) {
  .about-hero__top,
  .about-band__inner--split,
  .about-band__inner--aside,
  .about-band__inner--contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .about-stages { grid-template-columns: minmax(0, 1fr); }
  .about-hero__title { font-size: 36px; }
  .about-h2 { font-size: 26px; }

  /* La mesure de lecture reste la règle, y compris sur une colonne. */
  .about-measure { max-width: 680px; }
}

@media (max-width: 640px) {
  .about-hero { padding: var(--space-7) var(--space-5) var(--space-6); }
  .about-band { padding: var(--space-7) var(--space-5); }
  .about-band--closing { padding: var(--space-7) var(--space-5); }
  .about-hero__title { font-size: 30px; }
  .about-figures__chip { min-width: 0; flex: 1 1 140px; }
  .about-partners__tile { width: 136px; height: 84px; }
}

/* ============================================================
   Mentions légales
   ------------------------------------------------------------
   Reprend la mise en page de « À propos » : mêmes bandes, mêmes
   titres, même mesure de lecture. N'ajoute que ce qu'une page
   juridique demande en propre — le bloc d'identité et les
   sous-titres d'article.
   ============================================================ */

.legal-updated {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--lime-300);
}

/* Bloc d'identité : une liste de définitions, pas de la prose.
   Chaque rôle est une donnée, on la lit en balayant la colonne de
   gauche plutôt qu'en traversant un paragraphe. */
.legal-identity {
  margin: 26px 0 0;
  border-top: 1px solid var(--gray-200);
}

.legal-identity__row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--gray-200);
}

.legal-identity dt {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--green-800);
  padding-top: 3px;
}

.legal-identity dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
}

.legal-identity dd strong {
  color: var(--green-800);
  font-weight: var(--fw-semibold);
}

.legal-identity a { color: var(--green-700); }
.legal-identity a:hover { color: var(--green-800); }

/* --- Articles --------------------------------------------------- */

.legal-articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Un article ne rouvre pas d'espacement au-dessus de son eyebrow :
   l'écart entre articles est déjà porté par le conteneur. */
.legal-article > .eyebrow { margin-bottom: var(--space-1); }

.legal-h3 {
  font-family: var(--font-title);
  font-size: 18px;
  line-height: 1.3;
  color: var(--green-800);
  margin: var(--space-5) 0 var(--space-3);
}

.legal-list {
  margin: 0 0 18px;
  padding-left: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--gray-700);
}

.legal-list li { margin-bottom: var(--space-2); }
.legal-list li:last-child { margin-bottom: 0; }

.legal-article code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.9em;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--gray-900);
}

/* La bande de clôture accueille les trois derniers articles à côté
   de la carte de contact : la mesure de lecture s'y applique donc à
   la colonne, pas au conteneur. */
.about-band__inner--contact .legal-articles { max-width: 640px; }

@media (max-width: 1000px) {
  .legal-identity__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .about-band__inner--contact .legal-articles { max-width: 680px; }
}