/* ------------------------------------------------------------------
 * PARTIE 1 - Tokens, réinitialisation et styles de base
 * ------------------------------------------------------------------
 * Ce fichier définit les variables de thème (clair + sombre), les
 * réinitialisations globales, ainsi que les composants fondamentaux
 * utilisés partout sur le site (en-tête, boutons, icônes, etc.).
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
 * Tokens - version claire (défaut)
 * ------------------------------------------------------------------ */
:root {
  /* Typographie */
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-0: .875rem;
  --fs-1: 1rem;
  --fs-2: 1.25rem;
  --fs-3: 1.5rem;
  --fs-4: clamp(1.75rem, 4vw + 1rem, 2.5rem);

  /* Espacements */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Rayons */
  --r-1: .375rem;
  --r-2: .75rem;
  --r-pill: 999px;

  /* Ombres */
  --sh-1: 0 1px 2px rgb(0 0 0/.06),0 1px 3px rgb(0 0 0/.08);
  --sh-2: 0 4px 12px rgb(0 0 0/.12);

  /* Touch & conteneur */
  --touch: 2.75rem;
  --container: 72rem;
  --prose: 42rem;

  /* Couleurs - thème clair */
  --c-bg: #f5f7f2;
  --c-surface: #fff;
  --c-surface-2: #eef2ea;
  --c-text: #18211b;
  --c-muted: #4d5a51;
  --c-border: #d3dacd;
  /* Bordure des champs de saisie : contrairement à --c-border (décoratif),
     elle identifie un composant d'interface et doit tenir le 3:1. */
  --c-field-border: #79867b;

  --c-primary: #1e3a2b;
  --c-primary-hover: #152a1f;
  --c-on-primary: #fff;
  --c-accent: #2d6a32;
  --c-on-accent: #fff;
  --c-accent-soft: #e3efe0;

  --c-focus: #b45309;
  /* Focus posé sur un fond sombre (en-tête) : l’orange n’y atteint que 2,5:1. */
  --c-focus-on-dark: #fbbf24;
  --c-danger: #b3261e;
  --c-danger-soft: #fbe9e7;
  --c-success-soft: #e6f0e0;
  --c-info-soft: #e7eef6;
  --c-mark: #fde68a;

  --choro-none: #e4e6e1;
  /* Contour des départements : lisible sur toutes les teintes de l'échelle
     comme sur le fond de carte (WCAG 1.4.11, 3:1 minimum). */
  --choro-stroke: #74846f;
  --choro-0: #f1f4ee;
  --choro-1: #d4e8cf;
  --choro-2: #a9d19f;
  --choro-3: #74b06d;
  --choro-4: #3f8a46;
  --choro-5: #1f5f2c;

  --mk-annonce: #1e3a2b;
  --mk-stroke: #fff;
  --mk-suivi-site: #ff5f00;
  --mk-suivi-recovery: #2f8a3c;
}

/* ------------------------------------------------------------------
 * Tokens - version sombre (préférence système)
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #0f1511;
    --c-surface: #172019;
    --c-surface-2: #1e2a21;
    --c-text: #e7ede8;
    --c-muted: #a9b6ac;
    --c-border: #2f3d33;
    --c-field-border: #6a7a6e;

    --c-primary: #2f5a41;
    --c-primary-hover: #3a6c4e;
    --c-on-primary: #fff;
    --c-accent: #8fd19a;
    --c-on-accent: #0f2417;
    --c-accent-soft: #1f3324;

    --c-focus: #fbbf24;
    --c-danger: #f28b82;
    --c-danger-soft: #3a1d1b;
    --c-success-soft: #1d3322;
    --c-info-soft: #1b2733;
    --c-mark: #6b5310;

    --choro-none: #262b27;
    --choro-stroke: #6a7a6e;
    --choro-0: #1b231d;
    --choro-1: #23402a;
    --choro-2: #2f6139;
    --choro-3: #3f8a4b;
    --choro-4: #62b06b;
    --choro-5: #9fd8a2;

    --mk-annonce: #cde8d1;
    --mk-stroke: #0f1511;
    /* WHY : ces deux jetons étaient les seuls marqueurs jamais redéfinis en
       sombre. #2f8a3c sur --choro-3 (#3f8a4b) donnait un anneau invisible, et
       l'orange de jour s'éteint sur un fond sombre. Mêmes teintes, éclaircies
       de ce qu'il faut pour rester au-dessus du dégradé. */
    --mk-suivi-site: #ff7a33;
    --mk-suivi-recovery: #5fd47e;
  }
}

/* ------------------------------------------------------------------
 * Réinitialisation globale
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Couleurs système - permet aux navigateurs d’appliquer leurs propres
 * préférences (mode sombre, contraste, etc.). */
html {
  color-scheme: light dark;
}

/* Corps de page - typographie et palette de base */
body {
  margin: 0;
  font: 1rem/1.5 var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  /* Pied de page collant : sur une page plus courte que la fenêtre, le footer
   * descend au bas de l’écran au lieu de s’arrêter au milieu. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  /* En colonne flex, une marge automatique sur l'axe transversal annule
   * l'étirement : sans width, <main> retomberait sur la largeur de son contenu
   * et les pages peu remplies se rétréciraient au milieu de l'écran. */
  width: 100%;
}
.site-footer {
  flex-shrink: 0;
}

/* Titres - hiérarchie claire, débordement contrôlé */
h1, h2, h3 {
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }

/* Liens - couleur d’accent avec soulignement offset */
a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: .125em;
}

/* Images & SVG - aucune débordement horizontal */
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Conteneur principal - largeur maximale et marges centrées */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem;
  }
}

/* ------------------------------------------------------------------
 * Accessibilité
 * ------------------------------------------------------------------ */
/* Focus visible - contraste suffisant */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
/* L’en-tête est vert foncé dans les deux thèmes : l’anneau y passe à l’ambre,
 * qui tient 7,4:1 sur #1e3a2b (WCAG 1.4.11 exige 3:1). */
.site-header :focus-visible {
  outline-color: var(--c-focus-on-dark);
}

/* Réduction des animations pour les utilisateurs qui le demandent */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden - texte uniquement pour lecteurs d’écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* Lien d’évitement - hors-écran jusqu’au focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  color: var(--c-text);
  z-index: 10;
}
.skip-link:focus-visible {
  left: var(--sp-2);
  top: var(--sp-2);
}

/* Honeypot - champ invisible pour les bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
 * En-tête du site
 * ------------------------------------------------------------------ */
.site-header {
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

/* Conteneur interne - flex à partir de 1024 px */
.site-header__inner {
  display: block;
}
@media (min-width: 1024px) {
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
}

/* Marque */
.brand {
  font-size: var(--fs-2);
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

/* Tag de la marque */
.brand__tag {
  font-size: var(--fs-0);
  color: var(--c-muted);
}

/* Recherche */
.site-search {
  margin-top: var(--sp-3);
}
@media (min-width: 1024px) {
  .site-search {
    flex: 1;
    margin-top: 0;
  }
}

/* Champ de recherche */
.search-field {
  position: relative;
}

/* Input de recherche - taille tactile */
.search-field input[type="search"] {
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-2) var(--touch) var(--sp-2) var(--sp-2); /* place du bouton absolu */
  font: inherit;
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  background: var(--c-surface);
  color: var(--c-text);
}

/* Bouton de recherche */
.search-field__btn {
  position: absolute;
  inset-inline-end: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--c-muted);
}

/* Liste de suggestions */
.suggest-list {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
  text-align: start;
  color: var(--c-text); /* l'en-tête est clair sur fond sombre : sans ça, blanc sur blanc */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-1);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 20;
}

/* Élément de suggestion */
.suggest-item {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
}
.suggest-item[aria-selected="true"] {
  background: var(--c-accent-soft);
}

/* Réponse « rien trouvé » - jamais sélectionnable, jamais cliquable */
.suggest-empty {
  cursor: default;
  color: var(--c-muted);
  font-style: italic;
}

/* Sous-texte de suggestion */
.suggest-sub {
  margin-left: auto;
  font-size: var(--fs-0);
  color: var(--c-muted);
}

/* Navigation principale */
.site-nav {
  margin-top: var(--sp-3);
}
@media (min-width: 1024px) {
  .site-nav {
    margin-top: 0;
    margin-left: var(--sp-4);
  }
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.site-nav a:not(.btn) {
  color: inherit;
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
}
.site-nav a[aria-current="page"] {
  text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Boutons génériques
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--c-surface);
  color: var(--c-text);
}

/* Variante principale */
.btn--primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* Variante accent - lisibilité sur la barre sombre */
.btn--accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* Variante fantôme */
.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
}

/* Variante petite */
.btn--sm {
  padding: var(--sp-1) var(--sp-2);
}

/* ------------------------------------------------------------------
 * Icône générique
 * ------------------------------------------------------------------ */
.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  flex: none;
}

/* ------------------------------------------------------------------
 * Pied de page
 * ------------------------------------------------------------------ */
.site-footer {
  background: var(--c-surface-2);
  color: var(--c-muted);
  padding: var(--sp-4);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}
.site-footer__links a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------------
 * Fil d’Ariane
 * ------------------------------------------------------------------ */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.breadcrumbs li + li::before {
  content: "/";
  margin: 0 var(--sp-1);
}

/* ------------------------------------------------------------------
 * Texte d’introduction (lead)
 * ------------------------------------------------------------------ */
.lead {
  max-width: var(--prose);
  font-size: var(--fs-2);
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}

/* ------------------------------------------------------------------
 * Contenu riche (prose)
 * ------------------------------------------------------------------ */
.prose {
  max-width: var(--prose);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* ---------- HERO ---------- */
/* Section d’accueil : texte + carte, mise en page en grille sur grand écran */
.hero {
  background: var(--c-surface-2);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hero__title {
  font-size: var(--fs-4);
  margin: 0 0 var(--sp-2);
}
.hero__lead {
  font-size: var(--fs-2);
  color: var(--c-muted);
  margin-bottom: var(--sp-3);
}
.hero__search {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.hero__map {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  padding: var(--sp-3);
}

/* Grille sur écrans larges */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
  }
}

/* ---------- STATS ---------- */
.stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  text-align: center;
}
.stat__value {
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--c-primary);
}
@media (prefers-color-scheme: dark) {
  .stat__value {
    color: var(--c-accent);
  }
}
.stat__label {
  font-size: var(--fs-1);
  color: var(--c-muted);
}

/* Grille à partir de 640 px */
@media (min-width: 640px) {
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--sp-3);
  }
}

/* ---------- STEPS ---------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.step__num {
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--r-pill);
  width: var(--touch);
  height: var(--touch);
  min-height: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* Disposition en grille à partir de 640 px */
@media (min-width: 640px) {
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
  }
}

/* ---------- SECTION HEAD ---------- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-3);
}
.section-head h2 {
  font-size: var(--fs-3);
  margin: 0;
}

/* ---------- CARD LIST ---------- */
.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.card-list--compact {
  gap: var(--sp-2);
}

/* Colonnes selon la largeur */
@media (min-width: 640px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* CARD */
.card,
.listing-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  box-shadow: var(--sh-1);
  padding: var(--sp-3);
  transition: box-shadow .2s;
}
.card:hover,
.listing-card:hover {
  box-shadow: var(--sh-2);
}
.card__title,
.card__title a {
  font-size: var(--fs-2);
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--c-text);
  text-decoration: none;
}
.card__title a:hover {
  text-decoration: underline;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-0);
  color: var(--c-muted);
  margin-top: var(--sp-2);
}
.card__place {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--c-muted);
}
.card__snippet {
  margin-top: var(--sp-2);
  color: var(--c-text);
}

/* ---------- BADGES ---------- */
.badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-0);
  font-weight: 600;
}
.badge--acca { background: #e3efe0; color: #1f4d24; }
.badge--aica { background: #e0ecf5; color: #1d4466; }
.badge--societe { background: #f6ead7; color: #6b4210; }
.badge--domaine { background: #efe3f3; color: #5b2a6b; }
.badge--autre { background: #eceeea; color: #3f4a42; }

/* ---------- COUNT BADGE ---------- */
.count-badge {
  display: inline-block;
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-0);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 600;
}

/* ---------- DEPT GRID ---------- */
.dept-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.dept-grid li a {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  text-decoration: none;
  color: var(--c-text);
}
.dept-grid__name {
  font-weight: 600;
  margin-right: auto;
  order: 1;
}
.dept-grid .count-badge { order: 2; }
.dept-grid__code {
  font-size: var(--fs-0);
  color: var(--c-muted);
  order: 3; /* toujours au bord droit, badge ou non : colonnes alignées */
}

/* Colonnes selon la largeur : 2 colonnes compactes dès le téléphone (101 lignes pleine largeur = ~8000 px) */
@media (max-width: 639px) {
  .dept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dept-grid li a {
    padding: var(--sp-2);
    flex-wrap: wrap;
  }
}
@media (min-width: 640px) {
  .dept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .dept-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Grille de un ou deux éléments (départements voisins de la Corse, des
 * Pyrénées-Orientales…) : une seule carte dans une rangée de trois laissait
 * deux trous. On ne réserve que les colonnes utiles, sans jamais dépasser la
 * largeur disponible au téléphone. */
.dept-grid--n1 {
  grid-template-columns: minmax(0, min(24rem, 100%));
}
.dept-grid--n2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 48rem;
}

/* ---------- PANEL ---------- */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat-list {
  display: grid;
  gap: var(--sp-2);
}
.stat-list dt {
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.stat-list dd {
  font-size: var(--fs-1);
  font-weight: 600;
  text-align: right;
}
.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* ---------- NOTICE ---------- */
.notice {
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid;
  margin-bottom: var(--sp-4);
}
.notice--success {
  background: var(--c-success-soft);
  border-color: var(--c-success-soft);
}
.notice--error {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
}
.notice--info {
  background: var(--c-info-soft);
  border-color: var(--c-primary);
}

/* ---------- TOASTS ---------- */
#toasts {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  pointer-events: none;
  z-index: 1000;
}
.toast {
  background: var(--c-surface-2);
  color: var(--c-text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-1);
  box-shadow: var(--sh-1);
  pointer-events: auto;
}

/* ---------- EMPTY STATE ---------- */
.empty-state {
  text-align: center;
  padding: var(--sp-4);
  border: 2px dashed var(--c-muted);
  border-radius: var(--r-1);
  margin: var(--sp-4) 0;
}
.empty-state__title {
  font-size: var(--fs-2);
  margin-bottom: var(--sp-2);
}
.empty-state__body {
  font-size: var(--fs-1);
  color: var(--c-muted);
}

/* ---------- SKELETON ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--c-surface) 25%, var(--c-surface-2) 50%, var(--c-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

/* ---------- PAGER ---------- */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.pager a,
.pager button {
  min-height: var(--touch);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
}
.pager .active {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* ---------- DATA TABLE ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  padding: var(--sp-2);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-surface-2);
  text-align: left;
}

/* ---------- LEGEND ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.legend li { display: flex; align-items: center; }
.swatch {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  width: var(--sp-4);
  height: var(--sp-4);
  border-radius: var(--r-1);
  border: 1px solid var(--choro-stroke);
}
.swatch.c0 { background: var(--choro-0); }
.swatch.c1 { background: var(--choro-1); }
.swatch.c2 { background: var(--choro-2); }
.swatch.c3 { background: var(--choro-3); }
.swatch.c4 { background: var(--choro-4); }
.swatch.c5 { background: var(--choro-5); }
.swatch.cnone { background: var(--choro-none); }
.legend-label {
  margin-left: var(--sp-1);
  align-self: center;
}

/* ---------- CHOROPLETH ---------- */
.choropleth .dep {
  fill: var(--choro-none);
  /* Jamais --c-surface ni --c-border : le premier est le fond de la carte
     (contour invisible par construction), le second plafonne à 1,3:1. */
  stroke: var(--choro-stroke);
  stroke-width: .75px;
  vector-effect: non-scaling-stroke;
}
.choropleth .dep.c0 { fill: var(--choro-0); }
.choropleth .dep.c1 { fill: var(--choro-1); }
.choropleth .dep.c2 { fill: var(--choro-2); }
.choropleth .dep.c3 { fill: var(--choro-3); }
.choropleth .dep.c4 { fill: var(--choro-4); }
.choropleth .dep.c5 { fill: var(--choro-5); }
.choropleth .dep.cnone { fill: var(--choro-none); }
.choropleth .dep:hover {
  stroke: var(--c-text);
}

/* ---------- MARK ---------- */
mark {
  background: var(--c-mark);
  color: inherit;
}

/* ---------- RESULTS COUNT ---------- */
.results-count {
  font-size: var(--fs-0);
  color: var(--c-muted);
  margin: var(--sp-2) 0;
  /* WHY : la ligne recopie la requête (« 0 résultat pour « … » »). Un mot long
   * sans espace — mot-valise, slug collé, lien fabriqué — élargissait la page
   * à 455 px pour 375 de fenêtre, seul défilement horizontal du site. Même
   * garde que les titres (cf. overflow-wrap des h1/h2/h3). */
  overflow-wrap: anywhere;
}
/* Formulaires - base mobile */
.field,
form p {
  margin: 0 0 var(--sp-4); /* espace vertical entre champs */
}

.field label,
form label {
  display: block;
  margin-bottom: var(--sp-2); /* espacement entre label et contrôle */
  font-weight: 600;
}

/* Contrôles texte, sélecteurs et zones de texte.
 * WHY : la liste blanche des types laissait tomber tout nouveau type hors du
 * système (url sur /signaler, date dans la console : ~185x21 px, bordure et
 * fond de l'agent utilisateur, illisibles en thème sombre et sous la cible
 * tactile). On énumère désormais ce qui n'est PAS un contrôle de saisie, pour
 * qu'aucun type à venir ne puisse en sortir en silence. */
#listing-filter,
form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
form select,
form textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 0.55rem 0.7rem; /* valeurs précises non tokenisées */
  font: inherit;
  font-size: var(--fs-1);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-1);
  background: var(--c-surface);
  color: var(--c-text);
}

/* Largeur maximale du filtre de liste (hors formulaire) */
#listing-filter {
  max-width: 24rem;
}

/* Hauteur minimale de la zone de texte */
form textarea {
  min-height: 6rem;
}

/* Focus accessible */
#listing-filter:focus,
form input:focus,
form select:focus,
form textarea:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* Cases à cocher et boutons radio - teinte native alignée sur la charte.
 * Hors <form> aussi : le panneau « Calques et couleurs » de /carte vit dans un
 * <details>, et ses contrôles étaient les seuls pixels bleus du site. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--c-accent);
}

/* Cases à cocher - ligne compacte.
 * grid (et non flex) : en flex, CHAQUE nœud enfant devient un élément flexible.
 * Le libellé d'acceptation de la charte de /deposer est le seul dont le contenu
 * n'est pas un unique nœud de texte (texte + <a>/cgu</a> + texte) : il se
 * découpait en trois colonnes étroites, ~240 px de haut au téléphone. En
 * grille à deux colonnes, la case occupe la première et TOUT le reste coule
 * normalement dans la seconde. */
form label:has(input[type="checkbox"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-2);
  font-weight: 400;
  min-height: var(--touch);
}

form label:has(input[type="checkbox"]) input {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: var(--sp-2) 0 0; /* aligné sur la première ligne du libellé */
  accent-color: var(--c-accent);
}

/* Bouton de soumission */
form button[type="submit"] {
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--c-on-primary);
  background: var(--c-primary);
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
}

form button[type="submit"]:hover {
  background: var(--c-primary-hover);
}

/* Largeur maximale du formulaire sur grand écran */
@media (min-width: 1024px) {
  form {
    max-width: 34rem;
  }

  /* Page « un seul formulaire » (/deposer, /alertes, /droits, /signaler,
   * /gerer) : toute la colonne prend la mesure de lecture, au lieu d’un bloc de
   * 34rem collé à gauche d’un conteneur de 72rem qui laissait la moitié droite
   * vide. Les barres de filtres (.filters) et les pages à listes en sont
   * exclues : elles ont besoin de la pleine largeur. */
  main:has(> form:not(.filters)):not(:has(> .card-list, > .table-wrap, > .dept-grid, > .stats)) {
    max-width: var(--prose);
  }
  main:has(> form:not(.filters)):not(:has(> .card-list, > .table-wrap, > .dept-grid, > .stats)) > form {
    max-width: none;
  }
}

/* Description d’annonce - conserve les sauts de ligne */
.annonce-description {
  white-space: pre-line;
}

/* Boutons d’appel à l’action (CTA) */
.cta-button {
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-1);
  background: var(--c-primary);
  color: var(--c-on-primary);
  text-decoration: none;
  font-weight: 600;
}

/* Bannières d’état */
[role="alert"] {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--c-danger-soft);
  border: 1px solid var(--c-danger);
  border-radius: var(--r-1);
}

[role="status"] {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--c-success-soft);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-1);
}

/* ------------------------------------------------------------------ */
/* Console admin - restylée avec les nouveaux tokens */
body.admin {
  padding: var(--sp-4);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
}

/* Titres */
body.admin h1 {
  font-size: var(--fs-1);
  margin: 0 0 var(--sp-3);
}

/* Infos d’en-tête */
body.admin #who {
  color: var(--c-muted);
  font-size: var(--fs-0);
  margin: 0 0 var(--sp-4);
}

/* Onglets */
body.admin nav[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

body.admin nav[role="tablist"] button {
  flex: 1 1 auto;
  min-height: var(--touch);
  border: none;
  background: none;
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-0);
  color: var(--c-text);
  cursor: pointer;
}

/* Onglet actif */
body.admin nav[role="tablist"] button[aria-selected="true"] {
  border-bottom: 3px solid var(--c-accent);
  font-weight: 700;
  color: var(--c-accent);
}

/* Badge de comptage dans les onglets */
.tab-count[hidden] {
  display: none;
}
.tab-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 var(--sp-2);
  background: var(--c-muted);
  color: var(--c-bg);
  border-radius: var(--r-pill);
  font-size: var(--fs-0);
  text-align: center;
}

/* Message vide */
body.admin .empty {
  color: var(--c-muted);
  font-style: italic;
}

/* Tableaux */
body.admin table {
  border-collapse: collapse;
  width: 100%;
  background: var(--c-surface);
}

/* Cellules */
body.admin th,
body.admin td {
  text-align: left;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}

/* Boutons d’action */
body.admin button.approve,
body.admin button.reject {
  min-height: var(--touch);
  padding: var(--sp-1) var(--sp-2);
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  font: inherit;
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  background: var(--c-surface);
  cursor: pointer;
}

body.admin button.approve {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

body.admin button.reject {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* Filtre de file d’attente (admin) */
#queue-filter {
  width: 100%;
  max-width: 24rem;
  margin-bottom: var(--sp-4);
  min-height: var(--touch);
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: var(--fs-1);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-1);
  background: var(--c-surface);
  color: var(--c-text);
}

/* ------------------------------------------------------------------ */
/* Empilement mobile des tables admin (≤640 px) - conserve le comportement */
@media (max-width: 640px) {
  body.admin table,
  body.admin thead,
  body.admin tbody,
  body.admin tr,
  body.admin th,
  body.admin td {
    display: block;
    width: 100%;
  }

  body.admin thead {
    display: none;
  }

  body.admin tr {
    margin-bottom: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-1);
    padding: var(--sp-2) var(--sp-3);
  }

  body.admin td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    border-bottom: 1px dashed var(--c-border);
    padding: var(--sp-2) 0;
    overflow-wrap: anywhere;
  }

  body.admin td:last-child {
    border-bottom: none;
  }

  body.admin td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--c-muted);
    flex: 0 0 auto;
  }
}

/* ------------------------------------------------------------------ */
/* Champs supplémentaires */
.field--grow {
  flex: 1 1 12rem;
}

.filters,
.dep-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
}
.dep-search { flex: 1 1 22rem; }
.filters { margin-bottom: var(--sp-4); }
/* le margin-bottom de .field décalait le bouton de 1rem vers le bas du select */
.filters .field, .dep-search .field, .carte-controls .field { margin: 0; }
.card-list + h2, .empty-state + h2 { margin-top: var(--sp-6); }
.map-attrib { font-size: var(--fs-0); color: var(--c-muted); }
.choropleth .dep.is-selected { stroke: var(--c-accent); stroke-width: 3px; }
/* 1. Brand tag - readable on dark header and hidden on small screens */
.brand__tag {
  color: rgb(255 255 255 / .75);
}
@media (max-width: 639px) {
  .brand__tag {
    display: none;
  }
}

/* 2. Site navigation links - inline-flex layout, hover background */
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--touch);
  white-space: nowrap;
  border-radius: var(--r-1);
}
.site-nav a:not(.btn):hover {
  background: rgb(255 255 255 / .12);
}

/* 3. Icons - ensure inline-block for proper alignment */
.icon {
  display: inline-block;
}

/* 4. Header search - grow on wide screens and unified control styling */
@media (min-width: 1024px) {
  .site-header .site-search {
    flex: 1 1 22rem;
    max-width: 34rem;
    margin-top: 0;
  }
}
.site-header .search-field {
  display: flex;
}
.site-header .search-field input[type="search"] {
  padding-inline-end: var(--sp-3);
  border-radius: var(--r-1) 0 0 var(--r-1);
}
.site-header .search-field__btn {
  min-height: var(--touch);
  min-width: var(--touch);
  position: static; /* le flex de l'en-tête le place : pas de bande blanche derrière */
  transform: none;
  border-radius: 0 var(--r-1) var(--r-1) 0;
  background: var(--c-primary-hover);
  color: var(--c-on-primary);
}

/* Generic (non-header) search button - fallback styling */
.search-field__btn {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* 5. Hero map - limit SVG height and adjust paragraph spacing */
.hero__map .choropleth {
  max-height: 28rem;
  margin-inline: auto;
}
.hero__map p {
  margin: var(--sp-3) 0 0;
}

/* 6. Hero padding - comfortable vertical spacing from tablet up */
@media (min-width: 640px) {
  .hero {
    padding: var(--sp-5);
  }
}
/* Layout principal */
main{max-width:var(--container);margin-inline:auto;padding:var(--sp-4) var(--sp-4) var(--sp-7);}
.site-header__inner{max-width:var(--container);margin-inline:auto;}
.site-footer{padding:var(--sp-5) var(--sp-4);text-align:center;}
.site-footer p{margin:var(--sp-3) 0 0;}

/* Réinitialisation des listes */
.stats,.steps,.card-list,.dept-grid,.site-nav ul,.site-footer__links ul,.breadcrumbs ol,.legend{list-style:none;padding:0;margin-inline:0;}

/* Espacement entre sections */
main>section+section{margin-top:var(--sp-6);}

/* Carte hero */
.hero__map{padding:var(--sp-3);background:var(--c-surface);}

/* Liens du footer */
.site-footer__links ul{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;}

/* Adaptations >=640 px */
@media (min-width:640px){
  main{padding-inline:var(--sp-5);}
  .stats{display:flex;flex-direction:row;gap:var(--sp-3);}
  .stats .stat{flex:1;}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
  .step{display:grid;grid-template-columns:auto 1fr;column-gap:var(--sp-3);row-gap:var(--sp-1);align-items:start;}
  .step__num{grid-row:1/ span 2;}
  .step h3{margin:0;}
  .step p{margin:0;color:var(--c-muted);}
}

/* Étapes : même grille numéro + texte dès le mobile (le bloc 640px ne la posait que plus large) */
.step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: start; }
.step__num { grid-row: 1 / span 2; }
.step h3, .step p { margin: 0; }

/* ------------------------------------------------------------------
 * Formulaires partagés (v3) : erreurs par champ, récapitulatif, mentions
 * ------------------------------------------------------------------ */
/* Groupes de champs - même carte que le reste du site (fond, ombre), et le
 * libellé posé au-dessus plutôt que dans l'encoche par défaut du navigateur. */
fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  min-width: 0;
}
fieldset > legend {
  font-weight: 600;
  font-size: var(--fs-2);
  padding: 0;
  margin-bottom: var(--sp-2);
  float: left;
  width: 100%;
}
fieldset > legend + * {
  clear: both;
}
.field-error {
  display: block;
  color: var(--c-danger);
  font-weight: 600;
  margin-top: var(--sp-1);
}
[aria-invalid="true"] {
  border-color: var(--c-danger);
  outline: 2px solid var(--c-danger);
  outline-offset: 1px;
}
.error-summary {
  border: 2px solid var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-text);
  border-radius: var(--r-1);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.error-summary:focus {
  outline: 3px solid var(--c-focus);
}
.error-summary a {
  color: inherit;
}
.stats-note {
  max-width: var(--prose);
  color: var(--c-muted);
}
.recover {
  margin-top: var(--sp-6);
}
.recover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.form-notice {
  font-size: var(--fs-0);
  color: var(--c-muted);
  margin: var(--sp-3) 0;
  max-width: var(--prose);
}
.scam-warning {
  max-width: var(--prose);
}
.scam-warning p {
  margin: 0;
}
.report-link {
  margin: var(--sp-3) 0;
  font-size: var(--fs-0);
}

/* Pied de page : seconde navigation (informations légales et démarches) */
.site-footer__legal ul {
  font-size: var(--fs-0);
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
}

/* Console admin : en-tête, lien vers la console RingFollow, annonces */
.admin-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4) 0;
}
.admin-header h1,
.admin-header p {
  margin: 0;
}
.admin-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
}
#toast:empty {
  display: none;
}
#toast {
  position: fixed;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--sp-4));
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-1);
  box-shadow: var(--sh-2);
}

/* ------------------------------------------------------------------
 * Passe v3 (u9-polish) : en-tete compacte, cible tactile du pied de
 * page, badges en theme sombre, composants des pages departement /
 * annonce / aide, tables de la console, et feuille d'impression.
 * ------------------------------------------------------------------ */
/* pw-16 – en-tête mobile */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.header-search {
  position: relative;
  margin-inline-start: auto;
}
.header-search > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  border-radius: var(--r-1);
  cursor: pointer;
  color: inherit;
}
.header-search > summary::-webkit-details-marker {
  display: none;
}
.header-search > summary:hover {
  background: rgb(255 255 255 / .12);
}
.header-search[open] > .site-search {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--sp-2));
  z-index: 20;
  width: min(22rem, 80vw);
  margin-top: 0;
  padding: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  box-shadow: var(--sh-2);
}
@media (max-width: 639px) {
  .site-nav {
    /* .header-search est masque a cette largeur : c'est la navigation qui
     * porte desormais la marge automatique qui la pousse a droite. */
    margin-inline-start: auto;
  }
  .site-nav ul {
    gap: var(--sp-1);
  }
  .site-nav a:not(.btn) span,
  .site-nav .btn {
    min-height: var(--touch);
  }
  .site-header {
    padding: var(--sp-2) var(--sp-3);
  }
}

/* pw-33 – liens du pied de page */
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: var(--sp-2);
}
.site-footer__links ul {
  gap: var(--sp-1) var(--sp-3);
}

/* pw-20 – variantes sombres des badges */
@media (prefers-color-scheme: dark) {
  .badge--acca  { background: #1f3d26; color: #bfe3c4; }
  .badge--aica  { background: #1b2f42; color: #bcd9f0; }
  .badge--societe { background: #3b2f18; color: #f0d8ae; }
  .badge--domaine { background: #33213a; color: #e2c6ec; }
  .badge--autre { background: #262b27; color: #cdd5cf; }
}

/* pw-24, pw-25, pw-26, pw-30, pw-31 - nouveaux composants publics */
.card__sub,
.annonce-sub {
  margin: var(--sp-1) 0 0;
  color: var(--c-muted);
  font-size: var(--fs-0);
}
.card__date {
  color: var(--c-muted);
  font-size: var(--fs-0);
  white-space: nowrap;
}
.annonce-dates {
  margin: var(--sp-2) 0;
  color: var(--c-muted);
  font-size: var(--fs-0);
}
.legend--choro {
  margin-top: var(--sp-3);
  font-size: var(--fs-0);
  color: var(--c-muted);
}
.legend--choro li {
  gap: var(--sp-1);
}
.dept-outline {
  width: 100%;
  max-width: 12rem;
  height: auto;
}
.dept-outline__shape {
  fill: var(--choro-1);
  stroke: var(--c-border);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}
.dept-outline__dot {
  fill: var(--c-primary);
  stroke: var(--c-surface);
  stroke-width: .6;
}
@media (prefers-color-scheme: dark) {
  .dept-outline__dot {
    fill: var(--c-accent);
  }
}
.annonce-outline {
  margin: var(--sp-3) 0;
}
.dep-intro {
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--r-1);
}
.dep-intro p {
  margin: 0 0 var(--sp-2);
}
.dep-intro p:last-child {
  margin-bottom: 0;
}
.dep-actions,
.feed-link {
  margin: var(--sp-3) 0;
}
.feed-link {
  font-size: var(--fs-0);
}
.results-hint {
  margin: 0 0 var(--sp-3);
  color: var(--c-muted);
  font-size: var(--fs-0);
  max-width: var(--prose);
}
.toc {
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--r-1);
}
.toc ol {
  margin: 0;
  padding-inline-start: var(--sp-5);
}
.toc li + li {
  margin-top: var(--sp-1);
}
.dept-all summary {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-weight: 600;
}
/* WHY : display:flex sur un <summary> supprime le marqueur natif (::marker) dans
 * Chromium. La ligne se lisait alors comme une phrase en gras, sans aucun signe
 * qu'elle s'ouvre — alors qu'elle mène aux 101 pages de département. On redessine
 * le chevron nous-mêmes, pivoté à l'ouverture. */
.dept-all summary::marker,
.dept-all summary::-webkit-details-marker {
  content: '';
  display: none;
}
.dept-all summary::after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.15s ease;
}
.dept-all[open] > summary::after {
  transform: rotate(225deg) translate(-0.1em, -0.1em);
}
@media (prefers-reduced-motion: reduce) {
  .dept-all summary::after { transition: none; }
}
.dept-all h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-2);
}
.copy-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin: var(--sp-4) 0;
  font-size: var(--fs-0);
  overflow-wrap: anywhere;
}
/* WHY (pw-33) : mesure navigateur a 375 px, le bouton de copie tombait a 21 px
 * de haut ; il doit rester atteignable au doigt comme les liens du pied. */
.copy-link__btn {
  min-height: var(--touch);
  padding-inline: var(--sp-3);
}
.filter-empty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border-radius: var(--r-1);
}
.form-offline {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-text);
  border-radius: var(--r-1);
  font-weight: 600;
}
.sw-update {
  position: fixed;
  inset-inline: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  max-width: var(--prose);
  margin-inline: auto;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-1);
  box-shadow: var(--sh-2);
}

/* pw-08 – console admin */
body.admin table {
  table-layout: fixed;
}
body.admin th,
body.admin td {
  overflow-wrap: anywhere;
  word-break: normal;
}
body.admin details > summary {
  min-height: var(--touch);
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--c-accent);
}
body.admin .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
body.admin pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: var(--sp-2) 0 0;
}
@media (max-width: 640px) {
  body.admin table {
    table-layout: auto;
  }
}

/* pw-13 – impression */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  form,
  .sw-update,
  #toast,
  .copy-link__btn,
  .filter-empty,
  .breadcrumbs,
  .dep-actions,
  .feed-link,
  .toc,
  .legal-toc,
  .btn,
  .suggest-list {
    display: none !important;
  }
  :root {
    color-scheme: light;
  }
  body {
    background: #fff;
    color: #000;
  }
  .card,
  .dep-intro,
  .empty-state,
  .toc {
    background: #fff;
    border-color: #767676;
    box-shadow: none;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    word-break: break-all;
  }
  main a[href^="/"]::after {
    content: " (chasse.gibis.fr" attr(href) ")";
    font-size: 90%;
    word-break: break-all;
  }
  body[data-print-source]::after {
    content: attr(data-print-source);
    display: block;
    margin-top: 1rem;
    padding-top: .5rem;
    border-top: 1px solid #767676;
    font-size: 90%;
  }
  main {
    padding: 0;
    /* Pas `none` : sur A4 la ligne atteignait ~100 caractères. */
    max-width: 40em;
  }
  .card {
    break-inside: avoid;
  }
}

/* pw-16 (suite) : en-tete sur une seule ligne au telephone. Les libelles de
 * Carte et Rechercher passent hors ecran (jamais display:none : c'est le seul
 * nom accessible du lien) ; le bouton de depot echange son libelle long
 * contre le court.
 * pw-08 (suite) : la description de la file de moderation se replie dans un
 * details/summary « Voir tout ». Le texte vit dans le summary, donc ferme il
 * reste visible mais borne a 3 lignes, ouvert il se deplie en entier.
 */
body.admin .queue-item details.desc > summary {
  display: block;
  color: inherit;
}
body.admin .queue-item details.desc > summary::marker {
  content: '';
}
body.admin .queue-item details.desc > summary::-webkit-details-marker {
  display: none;
}
body.admin .queue-item details.desc[open] > summary .clamp-3 {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
body.admin .queue-item details.desc .desc-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--c-accent);
  text-decoration: underline;
}
body.admin .queue-item details.desc .desc-toggle--less,
body.admin .queue-item details.desc[open] .desc-toggle--more {
  display: none;
}
body.admin .queue-item details.desc[open] .desc-toggle--less {
  display: inline;
}
body.admin .queue-item .preview p {
  overflow-wrap: anywhere;
}
/* Etiquette courte masquee par defaut */
.nav-text--short { display: none; }

/* Ecran etroit : une seule ligne */
@media (max-width: 639px) {
  .brand { font-size: var(--fs-1); }
  .site-header__inner { flex-wrap: nowrap; gap: var(--sp-1); }
  .site-nav ul { gap: var(--sp-1); flex-wrap: nowrap; }
  .site-nav a:not(.btn) .nav-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .site-nav a:not(.btn) { min-width: var(--touch); justify-content: center; gap: 0; }
  .site-nav .btn .nav-text { display: none; }
  .site-nav .btn .nav-text--short { display: inline; }
  .site-nav .btn { padding-inline: var(--sp-2); white-space: nowrap; }
  /* Le volet de recherche de l'en-tete est masque au telephone. Deux raisons :
   * il affichait une seconde loupe a cote de celle du lien /recherche (deux
   * reperes identiques, deux comportements differents), et son panneau,
   * positionne sur .header-search et non sur l'en-tete, debordait a gauche
   * de -145px a 375px (moitie du champ et bouton injoignables, debordement
   * ecrete donc meme pas atteignable au defilement). Le lien /recherche de la
   * navigation mene a la page de recherche, qui porte son propre champ. */
  .header-search { display: none; }
}

/* Ecran large : etiquette visible */
@media (min-width: 640px) {
  .site-nav a:not(.btn) .nav-text { position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; }
}

/* pw-08 (suite) : au telephone, la carte d'une ligne de table empile le
 * libelle et la valeur — une valeur longue (description, adresse) n'est plus
 * ecrasee contre son libelle. */
@media (max-width: 640px) {
  body.admin td {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }
  /* Une legende de tableau centree flottait au-dessus de la bordure de la
   * carte empilee : elle se lisait comme un texte detache. Ici elle redevient
   * l'en-tete de la carte. */
  body.admin caption {
    display: block;
    width: 100%;
    text-align: start;
    font-weight: 600;
    padding: var(--sp-2);
    background: var(--c-surface-2);
    border-radius: var(--r-1) var(--r-1) 0 0;
  }
}

/* WHY : une classe qui pose display: (ici .filter-empty, .copy-link, .sw-update)
 * gagne sur la regle [hidden] de la feuille du navigateur ; sans cette ligne un
 * element rendu masque par le serveur ou par enhance.js resterait visible.
 * carte.css garde sa propre exception (.carte-layers-box) et la surcharge. */
[hidden]:not(.carte-layers-box) {
  display: none !important;
}

/* Légende du suivi RingFollow : deux natures de point, deux couleurs. Les
   pastilles reprennent exactement les jetons employés par la carte
   (public/js/carte.js), pour qu'un changement de teinte ne fasse pas mentir
   la légende. La reprise est dessinée avec un halo translucide sur la carte :
   la pastille le rappelle par une bordure épaisse plutôt qu'un aplat. */
.legend--suivi { margin-top: .5rem; }
.legend--suivi .swatch--site { background: var(--mk-suivi-site); border-radius: 50%; }
/* Annonce publiée : la marque de HuntFollow sur la carte d'un département. */
.legend--suivi .swatch--annonce {
  background: var(--mk-annonce);
  border: 2px solid var(--mk-stroke);
  border-radius: 50%;
}
.legend--suivi .swatch--recovery {
  background: transparent;
  border: 3px solid var(--mk-suivi-recovery);
  border-radius: 50%;
}
.legend--suivi .legend-note {
  /* .legend li est un conteneur flex : la note, faite d'une phrase et d'un
     lien, se coupait en deux colonnes étroites sur un écran de téléphone.
     C'est une phrase, elle se compose comme une phrase. */
  display: block;
  flex-basis: 100%;
  color: var(--c-text-muted, inherit);
  font-size: .85em;
}

/* Points de suivi RingFollow dans un SVG rendu par le serveur (accueil et page
   département). Mêmes jetons de couleur que la carte MapLibre et que la
   légende ci-dessus : une seule teinte par nature de point, partout.
   Le groupe ne capte pas le pointeur — sans cela une pastille posée sur un
   département avalerait le survol du lien — mais chaque pastille le reprend,
   pour que son <title> natif s'affiche à la souris. Le <title> reste une
   affordance souris : role="img" sort les enfants de l'arbre d'accessibilité,
   et le tactile n'a pas de survol, d'où les compteurs en texte sous la carte. */
/* Le groupe ne capte JAMAIS le pointeur sur une choroplèthe nationale : les
   tracés en dessous sont des liens vers les pages département, et une pastille
   qui prend le clic y fait un trou de navigation — mesuré sur l'accueil, où
   les points se massent sur les deux départements les plus cliqués. Les points
   n'y portent donc pas non plus de <title> : sans survol il ne se lirait pour
   personne (role="img" masque déjà les enfants), et les chiffres sont en texte
   sous la carte. Sur la carte d'un seul département, rien en dessous n'est un
   lien : le survol y est rendu, et lui seul. */
.choropleth .suivi-points { pointer-events: none; }
.choropleth .suivi-pt--site {
  fill: var(--mk-suivi-site);
  /* var(--mk-stroke) et non #fff : en sombre, un halo blanc vif là où les
     marqueurs d'annonce en ont un presque noir. */
  stroke: var(--mk-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* La reprise est un anneau, pas un aplat : superposée à une remise en nature,
   elle laisse voir le disque en dessous, et l'inverse serait faux.
   Le remplissage pâle est sa CHEMISE : un anneau vert sur un dégradé vert
   tombait à 1,06:1 contre --choro-4 (mesuré) et disparaissait. L'anneau se lit
   maintenant contre son propre fond, quelle que soit la classe dessous. */
.choropleth .suivi-pt--reprise {
  fill: var(--mk-stroke);
  fill-opacity: .55;
  stroke: var(--mk-suivi-recovery);
  stroke-width: 2.5;
  stroke-opacity: .95;
  vector-effect: non-scaling-stroke;
}

/* Carte d'un seul département : SVG serveur, aucun JavaScript, aucune tuile. */
/* max-width et non max-height : à 1440 px, un cadrage 4/3 borné en hauteur
   flottait au milieu d'une bande vide de la colonne de contenu. */
.dep-map {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  display: block;
}
/* Seule carte où le survol d'un point est rendu : aucun lien ne passe
   dessous (le tracé du département n'en est pas un ; les marqueurs d'annonce,
   eux, sont peints APRÈS et gardent leurs propres événements). */
.dep-map .suivi-pt { pointer-events: auto; }
.dep-map .dep--neighbour { fill: var(--choro-none); fill-opacity: .4; }
/* Le contenu de HuntFollow doit peser plus que la donnée d'un tiers : trait
   plus épais que celui des pastilles de suivi, pour un aplat dont le contraste
   sur le dégradé est porté par sa chemise. */
.dep-map .mk-annonce {
  fill: var(--mk-annonce);
  stroke: var(--mk-stroke);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.dep-map-figure { margin: 0; }
.dep-map-figure figcaption { margin-top: var(--sp-2); }
/* Pas .map-attrib : pour un visiteur sans JavaScript ou au lecteur d'écran,
   cette phrase est le SEUL porteur des chiffres du suivi. La source des
   contours, elle, reste de la fine print. */
.map-suivi-caption { margin-top: var(--sp-2); }