/* ============================================================
   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;
}

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

.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 {
  margin-left: var(--space-2);
  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);
}

/* ------------------------------------------------------------
   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;
}

/* ------------------------------------------------------------
   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;
}

.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;
}

/* ------------------------------------------------------------
   Transition des résultats
   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;
  }
}

[data-results].is-entering .resource-card,
[data-results].is-entering .state-panel {
  /* « 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. */
  animation: resultat-apparait var(--dur-base) var(--ease-standard) backwards;
  animation-delay: calc(var(--rang, 0) * 30ms);
}

/* 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 l'en-tête passe sur
     deux rangées (logo puis navigation) plutôt que de déborder. La hauteur
     de 84px reste le plancher, et la navigation défile horizontalement sur
     les très petits écrans afin qu'aucune entrée ne devienne inaccessible. */
  .site-header {
    height: auto;
    min-height: var(--header-h);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
    flex-wrap: wrap;
  }

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

  .site-nav {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar { display: none; }

  .site-nav__link {
    flex: 0 0 auto;
    padding: 10px 8px;
    font-size: 13px;
  }

  .site-nav__search { flex: 0 0 auto; }

  .hero { padding: var(--space-6) var(--space-4); }
  .hero__title { font-size: 28px; }
  .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; }
  .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; }

  /* Le changement de résultats reste instantané et lisible :
     ni fondu de sortie, ni translation d'entrée. */
  [data-results].is-leaving { opacity: 1; }
  [data-results].is-entering .resource-card,
  [data-results].is-entering .state-panel { animation: none; }

  /* 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; }
}