/* Console de moderation Vigie — fond clair, densite « poste de travail ».
   Un agent y passe des heures assis (DESIGN-DIRECTION 7.3) : pas de voile sur
   photo, pas de sombre fatigant, tout le contraste disponible pour la file.

   Refonte du 30/08/2026. Trois demandes de Damien, toutes adossees a la DA :
    - « tout lisible dans le fil » -> la description n'est PLUS tronquee. La
      regle n°113 « Essential Text Truncation » est de severite CRITICAL dans
      la DA (§4.2) : le tableau precedent la coupait a 34ch avec une ellipse,
      ce qui etait une violation, pas un compromis graphique.
    - « tout hyper visible » -> passage du tableau dense a un FIL DE CARTES.
      La DA prevoyait deja le rayon --r-md pour « cartes de signalement »
      (§5.2) : le format etait prescrit, il n'avait pas ete applique.
    - « couleurs qui matchent le concept » -> tokens de la DA §2 et §3.3,
      police Atkinson Hyperlegible (titres) + Inter (corps et chiffres, §4.1),
      echelle d'espacement §5.1, rayons §5.2, ombres §5.3. */

:root {
  /* --- SURFACES ET ENCRE (DA §2.1) --- */
  --c-paper: #FFFFFF;
  --c-paper-2: #F5F8FC;
  --c-paper-3: #E8EEF6;
  --c-border: #D3DEEA;
  --c-border-fort: #B9C8DA;
  --c-ink: #0A1220;
  --c-ink-soft: #475569;
  --c-navy: #0F172A;
  --c-brand-600: #0369A1;
  --c-brand-700: #024E7C;
  --c-brand-050: #EAF4FB;
  --c-danger: #C81E1E;
  --c-danger-050: #FDF0F0;
  --c-danger-bord: #F3C9C9;
  --c-focus-light: #B45309;

  /* --- COULEURS DE STATUT (DA §3.3) ---
     Le rose --sig-nouveau est RESERVE au statut « en attente » : c'est le seul
     signal « regarde ici maintenant » du produit. Des qu'il apparait deux fois,
     il ne signale plus rien (anti-pattern n°11 de la DA). */
  --sig-nouveau: #FF3D71;
  --sig-planifie: #38A3F1;
  --sig-encours: #F2A50C;
  --sig-resolu: #15803D;
  --sig-rejete: #6E7683;

  /* --- TYPOGRAPHIE (DA §4.1, §4.2) --- */
  --font-display: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --lh-snug: 1.35;
  --lh-base: 1.55;
  --tr-wide: .06em;

  /* --- ESPACEMENT, RAYONS, OMBRES (DA §5.1, §5.2, §5.3) --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --control-h: 40px;
  --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(10,18,32,.08), 0 1px 3px rgba(10,18,32,.06);
  --shadow-2: 0 4px 12px rgba(10,18,32,.10);
  --shadow-3: 0 12px 32px rgba(10,18,32,.14);
}

* { box-sizing: border-box; }

/* NE PAS RETIRER. L'attribut hidden n'agit que par la regle
   [hidden] { display: none } de la feuille du NAVIGATEUR, qu'une regle
   d'auteur de meme specificite emporte toujours. Or app.js masque plusieurs
   elements par cet attribut et cette feuille declare .connexion
   { display: flex } : sans la neutralisation ci-dessous, l'ecran de connexion
   resterait affiche APRES la connexion, empile au-dessus de la console.
   Defaut reellement constate au navigateur sur la page citoyenne le
   30/08/2026 (commit d06e6a8), ou les cinq ecrans s'affichaient d'un coup. */
[hidden] { display: none !important; }

/* Present pour les lecteurs d'ecran, invisible a l'ecran — jamais
   display:none, qui retirerait aussi le texte de l'arbre d'accessibilite. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

body {
  margin: 0;
  background: var(--c-paper-2);
  color: var(--c-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

h1, h2, h3 { font-family: var(--font-display); }

/* Chiffres tabulaires partout ou une valeur se rafraichit (DA §4.1) : sans
   tnum, chaque mise a jour du compteur decale la colonne. */
.compteur, .meta, .journal, .detail dd { font-variant-numeric: tabular-nums; }

svg.i { width: 20px; height: 20px; flex: none; fill: currentColor; }
svg.i-sm { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- CONNEXION */

.connexion {
  max-width: 26rem;
  margin: 10vh auto;
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}
.connexion h1 { font-size: var(--fs-xl); margin: 0 0 var(--s-1); }
.connexion .sous-titre { margin: 0 0 var(--s-4); color: var(--c-ink-soft); font-size: var(--fs-sm); }

label { font-weight: 600; font-size: var(--fs-sm); }
input[type="email"], input[type="password"], input[type="text"] {
  min-height: var(--control-h);
  padding: 0 var(--s-3);
  font: inherit;
  border: 2px solid var(--c-border-fort);
  border-radius: var(--r-sm);
  background: var(--c-paper);
  color: var(--c-ink);
}
input:focus { border-color: var(--c-brand-600); }

/* ------------------------------------------------------------------- ENTETE */

.entete {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--c-navy);
  color: #FFFFFF;
}
.entete h1 {
  font-size: var(--fs-lg);
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  letter-spacing: -.01em;
}
.compteur-nombre { display: none; }
.compteur {
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: rgba(255,255,255,.12);
}
/* Seul emploi de la couleur reservee en dehors du statut lui-meme — et il
   DESIGNE ce meme statut : le compteur ne vire au rose que s'il reste des
   signalements en_attente. */
.compteur[data-en_attente="oui"] { background: var(--sig-nouveau); color: var(--c-ink); }

/* ------------------------------------------------------------------ FILTRES */

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-border);
}
.filtres .intitule {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-ink-soft);
  margin-right: var(--s-1);
}
.filtre {
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--c-paper);
  color: var(--c-ink);
  border: 2px solid var(--c-border-fort);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.filtre:hover { background: var(--c-paper-2); border-color: var(--c-brand-600); }
.filtre[aria-pressed="true"] {
  background: var(--c-brand-600);
  color: #FFFFFF;
  border-color: var(--c-brand-700);
}
.filtre .puce { width: 14px; height: 14px; flex: none; }

/* ----------------------------------------------------------------- COLONNES */

#application {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.colonnes {
  display: grid;
  grid-template-columns: minmax(430px, 40%) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.colonne-liste {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5) var(--s-8);
  min-width: 0;
}
/* Empilement en TABLETTE (768-1279) : la carte en haut, le fil dessous.
   Le telephone (<768) a son propre mode terrain, plus bas. */
@media (min-width: 768px) and (max-width: 1279px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); grid-template-rows: 42dvh minmax(0, 1fr); }
  .colonne-carte { order: -1; border-left: none; border-bottom: 1px solid var(--c-border); }
}

/* -------------------------------------------------------- LE FIL DE CARTES */

.fil {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.carte-sig {
  --accent: var(--c-border-fort);
  --accent-fg: var(--c-ink);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}
.carte-sig:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.carte-sig[aria-selected="true"] {
  border-color: var(--c-brand-600);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-2), 0 0 0 2px var(--c-brand-600);
  cursor: default;
  transform: none;
}

/* Chaque statut porte SA couleur d'accent. Le selecteur de la regle qui
   consomme la couleur reservee nomme explicitement en_attente : la teinte ne
   peut pas deriver vers un autre usage par accident. */
/* La COULEUR DU TEXTE de la pastille est calculee, pas choisie : le blanc sur
   l'ambre --sig-encours ne donne que 2,07:1, sur le bleu --sig-planifie 2,74:1
   et sur le rose --sig-nouveau 3,41:1 — tous sous le seuil AA de 4,5:1 pour du
   texte normal (une pastille de 13 px en gras n'est PAS du « grand texte » au
   sens WCAG, qui commence a 18,66 px gras). L'encre y remonte respectivement a
   9,07:1, 6,85:1 et 5,50:1. Les deux fonds sombres --sig-resolu et
   --sig-rejete prennent au contraire le blanc (5,02:1 et 4,58:1), l'encre y
   passant sous le seuil. Recalcule le 30/08/2026, formule WCAG 2.x. */
.carte-sig[data-statut="en_attente"] { --accent: var(--sig-nouveau); }
.carte-sig[data-statut="publie"] { --accent: var(--sig-planifie); }
.carte-sig[data-statut="en_cours"] { --accent: var(--sig-encours); }
.carte-sig[data-statut="traite"] { --accent: var(--sig-resolu); --accent-fg: #FFFFFF; }
.carte-sig[data-statut="rejete"] { --accent: var(--sig-rejete); --accent-fg: #FFFFFF; }

.carte-tete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

/* Le statut est porte par QUATRE canaux, jamais par la couleur seule
   (regle n°37) : pictogramme, libelle en toutes lettres, forme de la pastille,
   et le nom de cette forme, qui fait le lien avec le marqueur sur la carte. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent-fg);
  background: var(--accent);
  white-space: nowrap;
}
.pastille .forme {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: .92;
}
.categorie {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
}

/* LA description, en entier. Aucune troncature, aucune hauteur fixe : c'est ce
   qui permet a l'agent de se tenir au courant en faisant defiler le fil, sans
   ouvrir chaque signalement un par un. */
.carte-texte {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
}
.meta span { display: inline-flex; align-items: center; gap: var(--s-1); }

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-6);
  text-align: center;
  background: var(--c-paper);
  border: 1px dashed var(--c-border-fort);
  border-radius: var(--r-md);
  color: var(--c-ink-soft);
}
.etat-vide-icone { width: 40px; height: 40px; color: var(--c-brand-600); }
.etat-vide-titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--c-ink);
}
.etat-vide-texte { margin: 0; max-width: 34rem; }

/* ---------------------------------------------------------------- LA CARTE */

.colonne-carte {
  position: relative;
  border-left: 1px solid var(--c-border);
  background: var(--c-paper-3);
}
#carte { position: absolute; inset: 0; }

/* Popup MapLibre : c'est « la carte qui s'ouvre » au clic sur un point.
   Rayon --r-lg, que la DA §5.2 reserve justement aux popups de carte. */
.maplibregl-popup-content {
  padding: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-family: var(--font-ui);
}
.popup-sig { --accent: var(--c-border-fort); --accent-fg: var(--c-ink); width: 19rem; max-width: 78vw; }
.popup-sig[data-statut="en_attente"] { --accent: var(--sig-nouveau); }
.popup-sig[data-statut="publie"] { --accent: var(--sig-planifie); }
.popup-sig[data-statut="en_cours"] { --accent: var(--sig-encours); }
.popup-sig[data-statut="traite"] { --accent: var(--sig-resolu); --accent-fg: #FFFFFF; }
.popup-sig[data-statut="rejete"] { --accent: var(--sig-rejete); --accent-fg: #FFFFFF; }
.popup-tete {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}
.popup-corps { padding: var(--s-4); }
.popup-corps .categorie { display: block; margin-bottom: var(--s-2); }
.popup-corps p {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
}
.popup-corps .meta { margin-bottom: var(--s-3); }
.maplibregl-popup-close-button { width: 32px; height: 32px; font-size: 20px; color: var(--accent-fg); }

/* --------------------------------------------------------------- LE DETAIL

   Le panneau n'est plus une nappe fixe posee sur la carte : app.js le deplace
   DANS la carte selectionnee du fil. Mesure au navigateur le 30/08 avant la
   refonte, l'ancienne nappe position:fixed de 420 px recouvrait 74 % de la
   carte — ce qui annulait la liaison liste-carte que la console promet. */
.detail {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 2px solid var(--c-paper-3);
  cursor: default;
}
.detail h3 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--c-ink-soft);
  margin: var(--s-5) 0 var(--s-2);
}
.detail dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-1) var(--s-4);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-sm);
}
.detail dt { color: var(--c-ink-soft); }
.detail dd { margin: 0; overflow-wrap: anywhere; }

.actions-courantes { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* Les actions destructives ne sont JAMAIS adjacentes aux actions courantes
   (DA §7.3, regles destructive-emphasis et destructive-nav-separation) :
   separation par la marge, fond teinte, cadre propre. */
.actions-destructives {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding: var(--s-4);
  background: var(--c-danger-050);
  border: 1px solid var(--c-danger-bord);
  border-radius: var(--r-sm);
}

.journal {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  margin: 0;
  padding-left: 1.25em;
}
.journal li { margin-bottom: var(--s-1); }

/* -------------------------------------------------------------- CONTROLES */

.bouton {
  min-height: var(--control-h);
  padding: 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 150ms ease;
}
.bouton-primaire { background: var(--c-brand-600); color: #FFFFFF; }
.bouton-primaire:hover { background: var(--c-brand-700); }
.bouton-secondaire { background: var(--c-paper); color: var(--c-brand-700); border-color: var(--c-border-fort); }
.bouton-secondaire:hover { background: var(--c-brand-050); }
.bouton-fantome { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.4); }
.bouton-fantome:hover { background: rgba(255,255,255,.14); }
.bouton-danger { background: var(--c-danger); color: #FFFFFF; }
.bouton-danger:hover { background: #A81717; }
.bouton:disabled { background: var(--c-paper-3); color: var(--c-ink-soft); border-color: transparent; cursor: not-allowed; }

.erreur { color: var(--c-danger); font-weight: 600; min-height: 1.4em; margin: var(--s-2) 0 0; font-size: var(--fs-sm); }

:focus-visible { outline: 3px solid var(--c-focus-light); outline-offset: 2px; }
.entete :focus-visible { outline-color: #FFC53D; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Flash de liaison inverse : cliquer un marqueur sur la carte surligne la
   carte correspondante du fil, puis la teinte se resorbe. */
@keyframes carte-flash {
  0% { background: var(--c-brand-050); box-shadow: var(--shadow-2), 0 0 0 2px var(--c-brand-600); }
  100% { background: var(--c-paper); }
}
.carte-flash { animation: carte-flash 900ms ease-out; }

/* Theatre d'arrivee : la carte entre dans le fil sur fond rose qui se
   resorbe, le compteur du header pulse une seule fois. */
@keyframes carte-arrivee {
  0% { opacity: 0; transform: translateY(-10px); background: #FFF0F5; }
  25% { opacity: 1; transform: none; background: #FFF0F5; }
  100% { background: var(--c-paper); }
}
.carte-arrivee { animation: carte-arrivee 1200ms cubic-bezier(.2,.8,.3,1); }

@keyframes compteur-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.compteur-pulse { animation: compteur-pulse 240ms ease-out; }

/* Lien d'itineraire GPS : present sur chaque carte du fil et dans le popup. */
.itineraire {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-1);
  color: var(--c-brand-600);
  font-weight: 600;
  text-decoration: none;
}
.itineraire:hover { color: var(--c-brand-700); text-decoration: underline; }

/* Bascule du fil : usage terrain sous 1280 px, ne garder que la carte. */
.bascule-fil { display: none; }
@media (min-width: 768px) and (max-width: 1279px) {
  .bascule-fil {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    position: absolute;
    bottom: var(--s-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    min-height: 44px;
    padding: 0 var(--s-4);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    background: var(--c-paper);
    border: 1px solid var(--c-border-fort);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-2);
    cursor: pointer;
  }
  .bascule-fil svg { transition: transform 150ms ease; }
  .colonnes.fil-masque .bascule-fil svg { transform: rotate(180deg); }
  .colonnes.fil-masque { grid-template-rows: minmax(0, 1fr) 0; }
  .colonnes.fil-masque .colonne-liste { display: none; }
}

/* Quand un popup est ouvert, la bascule s'efface : elle recouvrait le
   contenu du popup sur telephone (constate a l'ecran le 30/08). */
@media (min-width: 768px) and (max-width: 1279px) {
  .colonne-carte:has(.maplibregl-popup) .bascule-fil {
    opacity: 0;
    pointer-events: none;
  }
}


/* Masquage du fil en desktop : pastille en haut a gauche de la carte, le fil
   se rabat en colonne nulle et la carte prend tout l'ecran (le mode
   demonstration au mur d'une salle de conseil). Meme bouton, meme classe
   d'etat que le mobile — seule la geometrie change. */
@media (min-width: 1280px) {
  .bascule-fil {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 10;
    min-height: 40px;
    padding: 0 var(--s-3);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    background: var(--c-paper);
    border: 1px solid var(--c-border-fort);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-2);
    cursor: pointer;
  }
  /* Chevron horizontal : vers le fil qu'on va replier, puis vers son retour. */
  .bascule-fil svg { transform: rotate(90deg); transition: transform 150ms ease; }
  .colonnes.fil-masque .bascule-fil svg { transform: rotate(-90deg); }
  /* Une seule piste : display:none retire la colonne-liste du grid, la
     carte doit donc devenir l unique element de l unique piste. */
  .colonnes.fil-masque { grid-template-columns: minmax(0, 1fr); }
  .colonnes.fil-masque .colonne-liste { display: none; }
  .colonnes.fil-masque .colonne-carte { border-left: none; }
}

/* --- Audit SOTA (web-interface-guidelines, 30/08/2026) ------------------- */
/* Supprime les 300 ms de delai double-tap sur les controles tactiles et le
   halo gris de tap : nos etats actifs (scale .985, fonds) font ce retour. */
button, a, input, textarea, label, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Pas de mot veuf dans les titres ; les paragraphes coupent joliment. */
h1, h2, h3, .etat-vide-titre { text-wrap: balance; }
.carte-texte, .etat-vide-texte, .popup-corps p { text-wrap: pretty; }
/* Header compact sous 640 px : le titre et le compteur cessaient d'empiler
   trois lignes (constate a l'ecran a ~500 px). */
@media (max-width: 767px) {
  /* Header d'app : UNE ligne de 48 px. Titre court (« Moderation »),
     compteur en badge cloche+nombre (le message complet reste annonce aux
     lecteurs d'ecran), deconnexion en icone seule (aria-label). */
  .entete { flex-wrap: nowrap; min-height: 48px; padding: var(--s-1) var(--s-3); gap: var(--s-2); }
  .entete h1 { font-size: var(--fs-md); flex: 1; white-space: nowrap; min-width: 0; }
  .entete-long { display: none; }
  .compteur-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .compteur-nombre {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-variant-numeric: tabular-nums;
  }
  .compteur { padding: var(--s-1) var(--s-2); min-height: 32px; }
  /* Deconnexion en bouton-icone rond, assorti au badge : plus de petit
     rectangle a liseret qui jurait a cote de la pastille. */
  .bouton-fantome {
    width: 40px;
    height: 40px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    flex: none;
    border: 0;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.12);
  }
  .bouton-fantome:hover { background: rgba(255,255,255,.22); }
  .bouton-fantome svg.i-sm { width: 18px; height: 18px; }
}

/* ====================== MODE TERRAIN (telephone, <768) ======================
   La carte est l'ecran, le fil est une feuille basse a trois etats :
   apercu (la carte respire), demi (l'etat de travail), plein (lecture).
   La hauteur est REELLE (pas un translateY) : en etat demi, tout le fil
   reste defilable et atteignable au doigt — l'exactitude d'atteinte prime
   sur la purete compositor, la transition ne joue que 260 ms au tap. */
.poignee-fil { display: none; }

@media (max-width: 767px) {
  .colonnes { display: block; position: relative; }
  .colonne-carte { position: absolute; inset: 0; border-left: none; }

  .colonne-liste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    height: 50dvh;
    padding: 0 var(--s-3);
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
    background: var(--c-paper);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -1px 0 rgba(10,18,32,.10), 0 -12px 32px rgba(10,18,32,.25);
    transition: height 260ms cubic-bezier(.2,.8,.3,1);
    overscroll-behavior: contain;
  }
  .colonne-liste.feuille-apercu { height: 118px; overflow: hidden; }
  .colonne-liste.feuille-pleine { height: 88dvh; }

  .poignee-fil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    position: sticky;
    top: 0;
    z-index: 5;
    width: 100%;
    min-height: 52px;
    padding: var(--s-2) 0 var(--s-2);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink-soft);
    background: var(--c-paper);
    border: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    cursor: grab;
    touch-action: none; /* le glisser vertical appartient a la poignee */
  }
  .poignee-barre {
    width: 42px;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--c-border-fort);
  }

  /* Les chips tiennent sur UNE ligne defilable : deux lignes mangeaient
     l'ecran. L'intitule « Afficher » est retire, les chips se suffisent. */
  .filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--s-2) var(--s-3); }
  .filtres::-webkit-scrollbar { display: none; }
  .filtres .intitule { display: none; }
  .filtre { flex: none; }

  /* Les actions du detail deviennent des cibles de pouce pleine largeur. */
  .actions-courantes { flex-direction: column; }
  .actions-courantes .bouton, .actions-destructives .bouton { width: 100%; min-height: 48px; }

  /* La bascule tablette n'existe pas ici : l'etat apercu la remplace. */
  .bascule-fil { display: none; }
}

/* Rangees compactes facon app carto (telephone). La description est bornee a
   DEUX lignes ici seulement : la fiche complete est a UN TAP (la rangee
   selectionnee se deplie, le detail s'y ouvre) — ce n'est pas la troncature
   definitive que la regle n°113 interdit, et le bureau garde tout en clair. */
@media (max-width: 767px) {
  .fil { gap: var(--s-2); }
  .carte-sig[aria-selected="false"] { padding: var(--s-3); }
  .carte-sig[aria-selected="false"] .carte-tete {
    flex-wrap: nowrap;
    gap: var(--s-2);
    margin-bottom: var(--s-1);
  }
  /* La pastille devient un point de statut : l'icone dans un disque colore,
     le libelle reste pour les lecteurs d'ecran. */
  .carte-sig[aria-selected="false"] .pastille {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .carte-sig[aria-selected="false"] .pastille-libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .carte-sig[aria-selected="false"] .categorie {
    font-size: var(--fs-md);
    min-width: 0;
  }
  .carte-sig[aria-selected="false"] .carte-texte {
    margin-bottom: var(--s-1);
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Dans la rangee, seule l'heure relative reste ; itineraire et photos
     vivent dans la fiche depliee. */
  .carte-sig[aria-selected="false"] .meta { font-size: var(--fs-xs); }
  .carte-sig[aria-selected="false"] .meta .itineraire { display: none; }
  .carte-sig[aria-selected="false"] .meta span:last-child { display: none; }
}