/* Bureau Guardefense. Les valeurs viennent de ../partage/tokens.css (--gd-*, copie
   exacte de D01) et des quelques mesures propres au bureau déclarées ci-dessous
   (--bureau-*). Aucune couleur, taille ou police en dur dans une règle : seuls 0, 1fr,
   100 %, auto et les proportions de grille sont écrits ici. Points de rupture : 1024 px (tablette),
   640 px (téléphone toléré). Les media queries ne peuvent pas lire une variable. */

/* Mesures propres au bureau : ce ne sont pas des jetons de marque. */
:root {
  --bureau-trait: 1px;         /* épaisseur de trait : D01 n'a pas de jeton d'épaisseur */
  --bureau-trait-fort: 2px;    /* idem, trait appuyé */
  --bureau-trait-focus: 3px;   /* idem, anneau de focus */
  --bureau-icone: var(--gd-espace-6);   /* 24 px */
  --bureau-largeur-formulaire: 360px;   /* formulaire de connexion */
  --bureau-carte-choix: 280px;          /* hauteur de la carte d'un formulaire de site ou de point (C22) */
  --bureau-carte-lecture: 220px;        /* hauteur de la carte de la fiche du site (C22) */
  --bureau-filtre-client: 260px;        /* largeur du filtre « Client final » (C56, D03) */
  --bureau-vignette: 180px;             /* largeur d'une vignette de photo d'incident (C46, D04) */
  --bureau-dialogue-point: 920px;       /* formulaire d'un point, avec l'aperçu de la consigne (C79, D05) */
  --bureau-apercu-consigne: 320px;      /* aperçu « Ce que verra l'agent » (C79, D05 décision 50) */
  --bureau-case-apercu: 72px;           /* hauteur d'une case Oui ou Non de l'aperçu (C79, D05) */
  --bureau-champ-apercu: 64px;          /* hauteur du faux champ de réponse de l'aperçu (C79, D05) */
  --bureau-marque-consigne: 46ch;       /* largeur de la ligne de consigne dans la liste des points (C79) */
  --bureau-reponse-ecrite: 34ch;        /* largeur d'une réponse écrite dans le détail de ronde (C79) */
  --bureau-largeur-auth: 440px;         /* carte des pages communes au bureau et au portail (C82, D06) */
  --bureau-largeur-lecture: 78ch;       /* phrases longues du bloc « Accès au portail » et du réglage (C82, D06) */
  --bureau-carte-suivi: 320px;          /* carte des agents en service et d'une alarme (C86, D07) */
  --bureau-champ-court: 6ch;            /* champ d'une durée en minutes ou secondes (C86, D07 50) */
  --bureau-logo-menu-l: 200px;          /* case du logo de la marque dans le menu (C90, D08 « Placement du logo ») */
  --bureau-logo-menu-h: 36px;           /* idem, hauteur */
  --bureau-logo-rail: 40px;             /* case du logo ou de l'initiale dans le rail de 768 px (C90, D08 décision 9) */
  --bureau-apercu-marque: 380px;        /* colonne « Aperçu » du bloc Marque (C90, D08) */
  --bureau-nuance: transparent;         /* pastille d'une teinte : posée par le script, valeur calculée (C90) */
}

*, *::before, *::after { box-sizing: border-box; }

/* Marque D01 (public/partage/marque/) : encre foncée sur thème clair, claire sur thème
   sombre, dans le thème courant (data-theme posé, ou préférence du système). */
.marque--sombre { display: none; }
[data-theme="dark"] .marque--clair { display: none; }
[data-theme="dark"] .marque--sombre { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marque--clair { display: none; }
  :root:not([data-theme="light"]) .marque--sombre { display: inline-block; }
}

html { background: var(--gd-fond); color: var(--gd-texte); }

body {
  margin: 0;
  font-family: var(--gd-police-interface);
  font-size: var(--gd-taille-base);
  line-height: var(--gd-interligne-normal);
  background: var(--gd-fond);
  color: var(--gd-texte);
}

h1, h2, h3 { line-height: var(--gd-interligne-serre); margin: 0 0 var(--gd-espace-3); }
h1 { font-size: var(--gd-taille-xl); font-weight: var(--gd-graisse-forte); }
h2 { font-size: var(--gd-taille-lg); font-weight: var(--gd-graisse-forte); }
h3 { font-size: var(--gd-taille-base); font-weight: var(--gd-graisse-forte); }
p { margin: 0 0 var(--gd-espace-2); }

a { color: var(--gd-lien); }
a:hover { color: var(--gd-accent-survol); }

:focus-visible { outline: var(--bureau-trait-focus) solid var(--gd-focus); outline-offset: var(--bureau-trait); }

.discret { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.grise { opacity: 0.5; }
.visuellement-cache {
  position: absolute; width: var(--bureau-trait); height: var(--bureau-trait); overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.evitement {
  position: absolute; left: var(--gd-espace-2); top: calc(-1 * calc(var(--gd-espace-8) * 2));
  background: var(--gd-fond-2); padding: var(--gd-espace-2) var(--gd-espace-3);
  border-radius: var(--gd-rayon-md); z-index: 10; box-shadow: var(--gd-ombre-md);
}
.evitement:focus { top: var(--gd-espace-2); }

/* ── Coquille ─────────────────────────────────────────────────────────── */
.coquille { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; background: var(--gd-fond-2); }
.coquille-droite { display: flex; flex-direction: column; min-width: 0; background: var(--gd-fond); border-left: var(--bureau-trait) solid var(--gd-bordure); }

.nav {
  background: var(--gd-fond-2);
  padding: var(--gd-espace-4) var(--gd-espace-3);
  display: flex; flex-direction: column; gap: var(--gd-espace-4);
  position: sticky; top: 0; height: 100vh;
  width: calc(calc(var(--gd-espace-8) * 2) * 3.5);
}
.nav-marque { display: flex; align-items: center; gap: var(--gd-espace-2); font-weight: var(--gd-graisse-forte); font-size: var(--gd-taille-lg); padding: 0 var(--gd-espace-2); }
.nav-marque-image { width: var(--gd-espace-8); height: var(--gd-espace-8); flex: none; }
.connexion-marque { margin: 0 0 var(--gd-espace-2); }
.connexion-logo { height: var(--gd-espace-10); width: auto; max-width: 100%; }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gd-espace-1); flex: 1; }
.nav-lien {
  display: flex; align-items: center; gap: var(--gd-espace-3);
  min-height: var(--gd-cible-bureau);
  padding: 0 var(--gd-espace-3);
  border-radius: var(--gd-rayon-md);
  color: var(--gd-texte); text-decoration: none;
}
.nav-lien:hover { background: var(--gd-fond-3); color: var(--gd-texte); }
.nav-lien[aria-current="page"] { background: var(--gd-accent); color: var(--gd-accent-texte); font-weight: var(--gd-graisse-forte); }
.nav-lien .icone { font-size: var(--bureau-icone); }
.nav-lien { position: relative; }
/* Compteur des alertes ouvertes (C23) : couleur de la gravité haute, cachée à zéro. */
.nav-pastille {
  margin-left: auto; min-width: var(--gd-espace-6); padding: 0 var(--gd-espace-1);
  border-radius: var(--gd-rayon-plein);
  background: var(--gd-statut-manquee); color: var(--gd-texte-inverse);
  font-size: var(--gd-taille-xs); font-weight: var(--gd-graisse-forte);
  line-height: var(--gd-interligne-normal); text-align: center; white-space: nowrap;
}
.nav-pastille[hidden] { display: none; }
.nav-version { padding: 0 var(--gd-espace-2); }

.entete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gd-espace-4);
  padding: var(--gd-espace-2) var(--gd-espace-6);
  border-bottom: var(--bureau-trait) solid var(--gd-bordure);
  background: var(--gd-fond-2);
  min-height: calc(var(--gd-cible-bureau) + var(--gd-espace-4));
}
.entete-organisation { font-weight: var(--gd-graisse-forte); }
.entete-utilitaires { display: flex; align-items: center; gap: var(--gd-espace-3); }
.entete-utilisateur { display: flex; flex-direction: column; text-align: right; line-height: var(--gd-interligne-serre); }
.entete-nom { font-weight: var(--gd-graisse-moyenne); }
/* Commutateur de langue (C25) : deux boutons, la langue courante en gras et soulignée. */
.entete-langue { display: flex; align-items: center; }
.bouton-langue {
  font: inherit; font-size: var(--gd-taille-sm);
  min-height: var(--gd-cible-bureau); min-width: var(--gd-cible-bureau); padding: 0 var(--gd-espace-1);
  border: 0; border-radius: var(--gd-rayon-md); background: transparent; color: var(--gd-texte-3); cursor: pointer;
}
.bouton-langue:hover { background: var(--gd-fond-3); color: var(--gd-texte); }
.bouton-langue[aria-pressed="true"] {
  color: var(--gd-texte); font-weight: var(--gd-graisse-forte);
  text-decoration: underline; text-underline-offset: var(--gd-espace-1);
}
.champ-en-ligne { display: flex; align-items: center; gap: var(--gd-espace-2); }

.contenu { padding: var(--gd-espace-6); max-width: 100%; outline: none; }
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--gd-espace-4); }

.tete-page {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap;
  gap: var(--gd-espace-3); margin-bottom: var(--gd-espace-4);
}
.tete-page h1 { margin-bottom: var(--gd-espace-1); }
.tete-page-actions { display: flex; align-items: center; gap: var(--gd-espace-3); flex-wrap: wrap; }

/* ── Éléments communs ─────────────────────────────────────────────────── */
.icone { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }

.bouton, .bouton-icone {
  font: inherit;
  min-height: var(--gd-cible-bureau);
  border-radius: var(--gd-rayon-md);
  border: var(--bureau-trait) solid var(--gd-bordure-2);
  background: var(--gd-fond-2);
  color: var(--gd-texte);
  cursor: pointer;
}
.bouton { padding: 0 var(--gd-espace-4); display: inline-flex; align-items: center; gap: var(--gd-espace-2); text-decoration: none; }
.bouton:hover, .bouton-icone:hover { background: var(--gd-fond-3); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
.bouton-principal { background: var(--gd-accent); color: var(--gd-accent-texte); border-color: var(--gd-accent); }
.bouton-principal:hover { background: var(--gd-accent-survol); color: var(--gd-accent-texte); }
.bouton-danger { color: var(--gd-statut-manquee); border-color: var(--gd-statut-manquee); }
.bouton-danger:hover { background: var(--gd-statut-manquee-fond); }
.bouton-petit { min-height: var(--gd-espace-12); padding: 0 var(--gd-espace-3); font-size: var(--gd-taille-sm); }
.bouton-icone {
  width: var(--gd-cible-bureau); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--bureau-icone);
}
.lien { color: var(--gd-lien); }

.carte {
  background: var(--gd-fond-2);
  border: var(--bureau-trait) solid var(--gd-bordure);
  border-radius: var(--gd-rayon-lg);
  padding: var(--gd-espace-6);
  box-shadow: var(--gd-ombre-sm);
}
.carte-connexion { width: 100%; max-width: var(--bureau-largeur-formulaire); display: flex; flex-direction: column; gap: var(--gd-espace-2); }

/* Pages communes au bureau et au portail (C82, D06 décisions 54 à 59) : connexion, mot de passe
   oublié, nouveau mot de passe, invitation. */
.auth-carte { width: 100%; max-width: var(--bureau-largeur-auth); display: grid; gap: var(--gd-espace-5); padding: var(--gd-espace-8) var(--gd-espace-6); }
.auth-haut { display: flex; justify-content: space-between; align-items: center; gap: var(--gd-espace-3); flex-wrap: wrap; }
.auth-logo .connexion-logo { height: var(--gd-espace-8); }
.auth-langues { display: flex; gap: var(--gd-espace-1); }
.auth-titre h1 { margin-bottom: var(--gd-espace-1); }
.auth-intro { color: var(--gd-texte-2); margin: 0; overflow-wrap: anywhere; }
.auth-formulaire { display: grid; gap: var(--gd-espace-3); }
.auth-formulaire .champ { margin-bottom: 0; }
.auth-formulaire .champ input { min-width: 0; overflow-wrap: anywhere; }
.auth-sous-lien { font-size: var(--gd-taille-sm); margin: 0; }
.auth-carte .bandeau-erreur { margin: 0; }
.message-auth { display: grid; grid-template-columns: var(--gd-espace-8) minmax(0, 1fr); gap: var(--gd-espace-3); align-items: start; }
.message-auth-titre { font-size: var(--gd-taille-lg); margin-bottom: var(--gd-espace-1); }
.auth-forme { width: var(--gd-espace-8); height: var(--gd-espace-8); }
.auth-forme svg { width: 100%; height: 100%; }
.auth-forme-complete { color: var(--gd-statut-complete); }
.auth-forme-complete .glyphe-trait { stroke: var(--gd-fond-2); }
.auth-forme-manquee { color: var(--gd-statut-manquee); }
.auth-forme-manquee .glyphe-trait { stroke: var(--gd-fond-2); }

/* Bandeau d'information neutre (C82, D06) : ce n'est ni une alerte ni un statut. */
.bandeau-info {
  margin: 0 0 var(--gd-espace-3); padding: var(--gd-espace-3) var(--gd-espace-4);
  background: var(--gd-fond-2); color: var(--gd-texte);
  border: var(--bureau-trait) solid var(--gd-bordure-2); border-left-width: var(--bureau-trait-focus);
  border-radius: var(--gd-rayon-md);
}
/* État d'un accès au portail ou du réglage : pastille neutre, en mots (D06 décision 65). */
.etat-acces {
  display: inline-block; padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-plein);
  background: var(--gd-fond-3); color: var(--gd-texte-2);
  font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); white-space: nowrap;
}

/* Fiche du client final, bloc « Accès au portail » (C82, D06 décisions 63 à 70). */
.bloc-acces-phrase { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); max-width: var(--bureau-largeur-lecture); }
.tableau-acces .acces-nom { display: block; font-weight: var(--gd-graisse-moyenne); }
.tableau-acces .acces-email, .tableau-acces .acces-detail { display: block; font-size: var(--gd-taille-xs); color: var(--gd-texte-3); font-weight: var(--gd-graisse-normale); overflow-wrap: anywhere; }
.tableau-acces tr.acces-retire > * { color: var(--gd-texte-2); }
.acces-actions { display: flex; gap: var(--gd-espace-2); flex-wrap: wrap; }
.tableau-acces .acces-connexion { white-space: nowrap; }
@media (min-width: 1024px) {
  .tableau-acces .acces-actions { flex-wrap: nowrap; }
  .tableau-acces .acces-actions .bouton { white-space: nowrap; }
}

/* Organisation, « Portail des clients finals » (C82, D06 décisions 71 à 73). */
.reglage-portail h2 { display: flex; align-items: center; gap: var(--gd-espace-3); flex-wrap: wrap; }
.bascule-reglage { display: inline-flex; border: var(--bureau-trait) solid var(--gd-bordure-2); border-radius: var(--gd-rayon-md); overflow: hidden; padding: 0; margin: 0 0 var(--gd-espace-3); }
.bascule-choix {
  display: inline-flex; align-items: center; min-height: var(--gd-cible-bureau); padding: 0 var(--gd-espace-4);
  cursor: pointer; color: var(--gd-texte-2); font-weight: var(--gd-graisse-moyenne); position: relative;
}
.bascule-choix input { position: absolute; opacity: 0; width: var(--bureau-trait); height: var(--bureau-trait); min-height: 0; }
.bascule-choix:has(input:checked) { background: var(--gd-accent); color: var(--gd-accent-texte); }
.bascule-choix:has(input:focus-visible) { box-shadow: inset 0 0 0 var(--bureau-trait-focus) var(--gd-focus); }
.reglage-portail .ce-que-voit {
  padding: var(--gd-espace-3) var(--gd-espace-4); margin: 0 0 var(--gd-espace-3);
  background: var(--gd-fond); border-radius: var(--gd-rayon-sm);
  font-size: var(--gd-taille-sm); max-width: var(--bureau-largeur-lecture);
}
.reglage-portail .ce-que-voit ul { margin: 0 0 var(--gd-espace-2); padding-left: var(--gd-espace-5); }
.reglage-portail .ce-que-voit p:last-child { color: var(--gd-texte-2); margin: 0; }
.reglage-portail .champ { max-width: var(--bureau-largeur-lecture); }
.bloc { margin-top: var(--gd-espace-6); }

/* Champs */
.champ { display: flex; flex-direction: column; gap: var(--gd-espace-1); margin-bottom: var(--gd-espace-3); }
.champ label, .filtres label > span { font-weight: var(--gd-graisse-moyenne); font-size: var(--gd-taille-sm); }
input, select, textarea {
  font: inherit; color: var(--gd-texte);
  background: var(--gd-fond-2);
  border: var(--bureau-trait) solid var(--gd-bordure-2);
  border-radius: var(--gd-rayon-md);
  min-height: var(--gd-cible-bureau);
  padding: 0 var(--gd-espace-3);
}
textarea { padding: var(--gd-espace-2) var(--gd-espace-3); resize: vertical; }
input[readonly] { background: var(--gd-fond-3); border-style: dashed; }
input[type="checkbox"] { min-height: 0; width: var(--gd-espace-6); height: var(--gd-espace-6); }
[aria-invalid="true"] { border-color: var(--gd-statut-manquee); }
.aide { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); margin: 0; }
.erreur-champ { color: var(--gd-statut-manquee); font-size: var(--gd-taille-sm); margin: 0; }
/* Nom lu dans Suivi (C53) : bouton sous le champ, message d'état ou d'erreur. */
.bouton-suivi { align-self: flex-start; }
.suivi-message:empty { display: none; }
.suivi-message.suivi-erreur { color: var(--gd-statut-manquee); }
.suivi-message.suivi-alerte { color: var(--gd-statut-partielle); }
/* Avertissement dans un formulaire : la paire texte et fond de la gravité « moyenne » (D01). */
.avertissement {
  color: var(--gd-statut-partielle); background: var(--gd-statut-partielle-fond);
  border-radius: var(--gd-rayon-md); padding: var(--gd-espace-2) var(--gd-espace-3);
  font-size: var(--gd-taille-sm); margin: 0 0 var(--gd-espace-3);
}
/* Listes d'adresses (C15) : une ligne par adresse, l'erreur 422 sous sa ligne. */
.liste-adresses { border: 0; padding: 0; margin: 0 0 var(--gd-espace-3); min-width: 0; }
.liste-adresses legend { font-weight: var(--gd-graisse-moyenne); font-size: var(--gd-taille-sm); padding: 0; }
.liste-adresses > p { margin: 0; }
.liste-adresses-lignes { display: flex; flex-direction: column; gap: var(--gd-espace-2); margin: var(--gd-espace-1) 0 var(--gd-espace-2); }
.liste-adresses-ligne .champ-en-ligne input { flex: 1; min-width: 0; }
/* Champ à préfixe fixe (code agent, C21) : le préfixe en texte, puis la saisie. */
.champ-prefixe { display: flex; align-items: center; gap: var(--gd-espace-2); }
.champ-prefixe-texte { font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-moyenne); }
.champ-prefixe input { flex: 1; min-width: 0; font-family: var(--gd-police-mono); }
.case { display: flex; align-items: center; gap: var(--gd-espace-2); min-height: var(--gd-cible-bureau); }
.grille-formulaire { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(calc(var(--gd-espace-8) * 2) * 3.5), 1fr)); gap: 0 var(--gd-espace-4); }
/* Seuils propres à un parcours (C18) : bloc replié sous les champs du parcours. */
.seuils-parcours { margin: var(--gd-espace-3) 0; }
.seuils-parcours summary { cursor: pointer; font-weight: var(--gd-graisse-moyenne); padding: var(--gd-espace-2) 0; }
.seuils-parcours > .aide { margin-bottom: var(--gd-espace-3); }
/* Historique des positions d'un point (C77). */
.historique-positions { margin: var(--gd-espace-2) 0; }
.historique-positions summary { cursor: pointer; font-weight: var(--gd-graisse-moyenne); padding: var(--gd-espace-2) 0; }
.historique-positions-liste { margin: 0 0 var(--gd-espace-2); padding-left: var(--gd-espace-4); }
.actions-formulaire { display: flex; gap: var(--gd-espace-3); flex-wrap: wrap; margin-top: var(--gd-espace-3); }

.filtres { display: flex; flex-wrap: wrap; gap: var(--gd-espace-3); margin-bottom: var(--gd-espace-4); align-items: flex-end; }
.filtres label { display: flex; flex-direction: column; gap: var(--gd-espace-1); }
/* Filtre « Client final » (C56, D03 décisions 31 et 36) : premier champ, plus large, bordure
   d'accent quand un filtre est posé ; ligne de rappel ; bandeau d'erreur ; état sans site. */
.filtres .champ-client { min-width: var(--bureau-filtre-client); }
.filtres .champ-client select { border-color: var(--gd-texte-2); }
.filtres .champ-client select[data-filtre-actif] { border: var(--bureau-trait-fort) solid var(--gd-accent); }
.filtre-actif { font-size: var(--gd-taille-sm); color: var(--gd-texte-2); margin: calc(-1 * var(--gd-espace-2)) 0 var(--gd-espace-4); }
.bandeau-erreur {
  margin-bottom: var(--gd-espace-4); padding: var(--gd-espace-3) var(--gd-espace-4);
  border: var(--bureau-trait) solid var(--gd-statut-manquee); border-radius: var(--gd-rayon-md);
  background: var(--gd-statut-manquee-fond); color: var(--gd-statut-manquee);
}
.bandeau-erreur p { margin: var(--gd-espace-1) 0 0; }
.etat-vide .titre { font-weight: var(--gd-graisse-forte); color: var(--gd-texte); }
.etat-vide .actions-ligne { display: flex; gap: var(--gd-espace-3); justify-content: center; flex-wrap: wrap; }

.onglets { display: flex; gap: var(--gd-espace-1); border-bottom: var(--bureau-trait) solid var(--gd-bordure); margin-bottom: var(--gd-espace-4); flex-wrap: wrap; }
.onglet {
  font: inherit; background: none; color: var(--gd-texte-2);
  border: 0; border-bottom: var(--bureau-trait-fort) solid transparent;
  min-height: var(--gd-cible-bureau); padding: 0 var(--gd-espace-4); cursor: pointer;
}
.onglet[aria-selected="true"], .onglet[aria-current="page"] { color: var(--gd-texte); border-bottom-color: var(--gd-accent); font-weight: var(--gd-graisse-forte); }
/* Onglets en liens (écran Sites : Sites, Clients finals, C44). */
a.onglet { display: inline-flex; align-items: center; text-decoration: none; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); }
.tableau th, .tableau td { text-align: left; padding: var(--gd-espace-2) var(--gd-espace-3); border-bottom: var(--bureau-trait) solid var(--gd-bordure); vertical-align: middle; }
.tableau thead th { font-size: var(--gd-taille-sm); color: var(--gd-texte-2); font-weight: var(--gd-graisse-moyenne); background: var(--gd-fond-3); }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau .nombre { text-align: right; font-family: var(--gd-police-mono); }

/* États */
.etat-vide, .etat-chargement, .etat-erreur {
  padding: var(--gd-espace-8) var(--gd-espace-4); text-align: center;
  background: var(--gd-fond-2); border: var(--bureau-trait) dashed var(--gd-bordure-2); border-radius: var(--gd-rayon-md);
  color: var(--gd-texte-2);
}
.etat-erreur { border-style: solid; border-color: var(--gd-statut-manquee); color: var(--gd-statut-manquee); background: var(--gd-statut-manquee-fond); }

.annonces { position: fixed; bottom: var(--gd-espace-4); right: var(--gd-espace-4); display: flex; flex-direction: column; gap: var(--gd-espace-2); z-index: 20; }
.annonce { background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure-2); border-radius: var(--gd-rayon-md); padding: var(--gd-espace-3) var(--gd-espace-4); box-shadow: var(--gd-ombre-md); }
.annonce-succes { border-color: var(--gd-statut-complete); }
.annonce-erreur { border-color: var(--gd-statut-manquee); color: var(--gd-statut-manquee); }

.dialogue {
  border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-lg);
  background: var(--gd-fond-2); color: var(--gd-texte);
  padding: var(--gd-espace-6); width: min(100% - var(--gd-espace-8), var(--bureau-largeur-formulaire));
  box-shadow: var(--gd-ombre-md);
}
.dialogue::backdrop { background: var(--gd-voile); }
.dialogue-actions { display: flex; justify-content: flex-end; gap: var(--gd-espace-3); margin-top: var(--gd-espace-4); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--gd-espace-3); margin-top: var(--gd-espace-4); }

/* Gravités d'alerte : texte + couleur, jamais la couleur seule. */
.gravite {
  display: inline-block; padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-sm);
  font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-forte); white-space: nowrap;
}
.gravite-info { background: var(--gd-statut-a-venir-fond); color: var(--gd-statut-a-venir); }
.gravite-moyenne { background: var(--gd-statut-partielle-fond); color: var(--gd-statut-partielle); }
.gravite-haute { background: var(--gd-statut-manquee-fond); color: var(--gd-statut-manquee); }
.gravite-critique { background: var(--gd-statut-critique); color: var(--gd-texte-inverse); }

/* ── En direct ────────────────────────────────────────────────────────── */
.bandeau-alertes { margin-bottom: var(--gd-espace-4); }
.bandeau-calme {
  padding: var(--gd-espace-3) var(--gd-espace-4); border-radius: var(--gd-rayon-md);
  background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure); color: var(--gd-texte-2); margin: 0;
}
.liste-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gd-espace-2); }
.alerte-ligne {
  display: grid; grid-template-columns: auto 2fr 2fr auto; align-items: center; gap: var(--gd-espace-3);
  padding: var(--gd-espace-2) var(--gd-espace-3);
  background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure);
  border-left: var(--gd-espace-1) solid var(--gd-bordure-2);
  border-radius: var(--gd-rayon-md);
}
.alerte-info { border-left-color: var(--gd-statut-a-venir); }
.alerte-moyenne { border-left-color: var(--gd-statut-partielle); }
.alerte-haute { border-left-color: var(--gd-statut-manquee); }
.alerte-critique { border-left-color: var(--gd-statut-critique); }
.alerte-sos { background: var(--gd-statut-critique-fond); border-color: var(--gd-statut-critique); border-left-color: var(--gd-statut-critique); }
.alerte-titre { font-weight: var(--gd-graisse-forte); }

/* Écran Alertes (C63) : sélection pour l'acquittement en lot, au-dessus du tableau. */
.selection-lot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gd-espace-2) var(--gd-espace-4);
  margin-bottom: var(--gd-espace-3);
}
.tableau-alertes .cellule-case { width: var(--gd-cible-bureau); }
.bouton-lien {
  background: none; border: 0; padding: 0; min-height: var(--gd-cible-bureau);
  font: inherit; color: var(--gd-lien); text-decoration: underline; cursor: pointer;
}

/* Écran Alertes (C23) : alerte arrivée depuis le dernier chargement, jusqu'au prochain geste. */
.tableau-alertes tr.alerte-nouvelle:not(.alerte-sos) > * { background: var(--gd-statut-en-cours-fond); }
.tableau-alertes tr.alerte-nouvelle > :first-child { box-shadow: inset var(--gd-espace-1) 0 0 var(--gd-statut-en-cours); }
.etiquette-nouvelle {
  display: inline-block; margin-left: var(--gd-espace-2); padding: 0 var(--gd-espace-2);
  border-radius: var(--gd-rayon-sm); background: var(--gd-statut-en-cours); color: var(--gd-texte-inverse);
  font-size: var(--gd-taille-xs); font-weight: var(--gd-graisse-forte);
}
.alerte-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gd-espace-3); }
.alerte-heure { white-space: nowrap; }

.compteurs { display: flex; flex-wrap: wrap; gap: var(--gd-espace-2); margin: 0 0 var(--gd-espace-4); }
.compteur {
  display: flex; align-items: baseline; gap: var(--gd-espace-2);
  padding: var(--gd-espace-1) var(--gd-espace-3); border-radius: var(--gd-rayon-md);
  background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure);
}
.compteur dt { font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
.compteur dd { margin: 0; font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-forte); }

.tableau-direct th[scope="row"] { font-weight: var(--gd-graisse-normale); }
.site-nom { font-weight: var(--gd-graisse-forte); color: var(--gd-texte); text-decoration: none; }
.site-nom:hover { text-decoration: underline; }
.site-organisation { display: block; }
.etiquette-difficulte:not(:empty) {
  display: inline-block; margin-left: var(--gd-espace-2); padding: 0 var(--gd-espace-2);
  border-radius: var(--gd-rayon-sm); font-size: var(--gd-taille-sm);
  background: var(--gd-statut-manquee-fond); color: var(--gd-statut-manquee);
}
.tableau-direct tr.en-difficulte > th { box-shadow: inset var(--gd-espace-1) 0 0 var(--gd-statut-manquee); }
.pointage-heure { font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-moyenne); }
.batterie-faible, .signal-silencieux { color: var(--gd-statut-manquee); font-weight: var(--gd-graisse-forte); }
.pointage-age { display: block; }
.progression { display: block; }

/* C59 : téléphone au navigateur trop ancien, forme (partielle, D01) et mot, détail en petit. */
.navigateur-ancien { display: flex; flex-direction: column; gap: var(--gd-espace-1); margin-top: var(--gd-espace-1); }
.navigateur-ancien-mot {
  display: inline-flex; align-items: center; gap: var(--gd-espace-1); align-self: flex-start;
  padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-sm); font-size: var(--gd-taille-sm);
  font-weight: var(--gd-graisse-moyenne);
  color: var(--gd-statut-partielle); background: var(--gd-statut-partielle-fond);
}
.navigateur-ancien-forme { display: inline-flex; }
.navigateur-ancien-forme .forme-statut { width: var(--gd-espace-4); height: var(--gd-espace-4); }
.navigateur-ancien-detail, .navigateur-ancien-chaine { font-size: var(--gd-taille-xs); color: var(--gd-texte-2); font-weight: var(--gd-graisse-normale); }
.navigateur-ancien-chaine { font-family: var(--gd-police-mono); word-break: break-all; }

/* Pastilles de ronde : couleur + forme (formes D01, public/partage/formes/) + libellé au survol. */
.pastilles { display: flex; flex-wrap: wrap; gap: var(--gd-espace-1); }
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--gd-espace-8); height: var(--gd-espace-8);
  border-radius: var(--gd-rayon-plein);
  font-size: var(--bureau-icone);
  border: var(--bureau-trait) solid transparent;
}
.pastille-a_venir { color: var(--gd-statut-a-venir); background: var(--gd-statut-a-venir-fond); }
.pastille-en_cours { color: var(--gd-statut-en-cours); background: var(--gd-statut-en-cours-fond); }
.pastille-complete { color: var(--gd-statut-complete); background: var(--gd-statut-complete-fond); }
.pastille-partielle { color: var(--gd-statut-partielle); background: var(--gd-statut-partielle-fond); }
.pastille-manquee { color: var(--gd-statut-manquee); background: var(--gd-statut-manquee-fond); border-color: var(--gd-statut-manquee); }
.pastille-hors_fenetre { color: var(--gd-statut-partielle); background: var(--gd-statut-partielle-fond); }
.pastille-annulee { color: var(--gd-statut-a-venir); background: var(--gd-statut-a-venir-fond); }
/* Pastille en lien vers le détail de la ronde (C29) ; statut écrit à côté (écran Rondes). */
.lien-pastille { display: inline-flex; border-radius: var(--gd-rayon-plein); }
.statut-ronde { display: inline-flex; align-items: center; gap: var(--gd-espace-2); white-space: nowrap; }
/* Formes D01 : le glyphe intérieur prend la couleur du fond de la pastille. */
.forme-statut { width: var(--bureau-icone); height: var(--bureau-icone); }
.forme-statut .glyphe { fill: var(--gd-fond-2); }
.forme-statut .glyphe-trait { stroke: var(--gd-fond-2); }
.pastille-complete .glyphe-trait { stroke: var(--gd-statut-complete-fond); }
.pastille-manquee .glyphe-trait { stroke: var(--gd-statut-manquee-fond); }
.pastille-hors_fenetre .glyphe-trait { stroke: var(--gd-statut-partielle-fond); }

/* Statuts de pointage (fiches, rapports à l'écran) */
.statut { display: inline-block; padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-sm); font-size: var(--gd-taille-sm); white-space: nowrap; }
.statut-valide { background: var(--gd-statut-complete-fond); color: var(--gd-statut-complete); }
.statut-hors_zone, .statut-hors_ordre { background: var(--gd-statut-partielle-fond); color: var(--gd-statut-partielle); }
.statut-identite_non_verifiee, .statut-rejete { background: var(--gd-statut-manquee-fond); color: var(--gd-statut-manquee); }
/* Point attendu sans aucun pointage (C29) : couleur danger, texte appuyé, comme le PDF. */
.statut-non_lu { background: var(--gd-statut-manquee-fond); color: var(--gd-statut-manquee); font-weight: var(--gd-graisse-forte); }
.non-lus { color: var(--gd-statut-manquee); font-weight: var(--gd-graisse-forte); }
.statut-actif { background: var(--gd-statut-complete-fond); color: var(--gd-statut-complete); }
.statut-inactif { background: var(--gd-statut-a-venir-fond); color: var(--gd-statut-a-venir); }

/* Fiches */
.fiche-entete { display: flex; justify-content: space-between; gap: var(--gd-espace-4); flex-wrap: wrap; align-items: flex-start; }
.proprietes { display: grid; grid-template-columns: auto 1fr; gap: var(--gd-espace-1) var(--gd-espace-4); margin: 0; }
.proprietes dt { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.proprietes dd { margin: 0; }
.etapes { margin: 0; padding-left: var(--gd-espace-6); display: flex; flex-direction: column; gap: var(--gd-espace-2); }
.jeton-affiche {
  font-family: var(--gd-police-mono); word-break: break-all;
  background: var(--gd-fond-3); padding: var(--gd-espace-3); border-radius: var(--gd-rayon-md);
  border: var(--bureau-trait) solid var(--gd-bordure-2);
}
.recherche { min-width: calc(calc(var(--gd-espace-8) * 2) * 4); }

/* Cartes des sites et des points (C22, Leaflet chargé à la demande). Repères et cercles
   prennent l'accent D01 : les propriétés CSS l'emportent sur les attributs que Leaflet
   pose sur les tracés SVG. En sombre, le fond OpenStreetMap est assombri par filtre (même
   fond, mêmes tuiles) pour que l'accent clair du thème sombre reste lisible. */
.carte-geo {
  width: 100%; border: var(--bureau-trait) solid var(--gd-bordure-2); border-radius: var(--gd-rayon-md);
  margin: 0 0 var(--gd-espace-1); font-family: var(--gd-police-interface); z-index: 0;
}
.carte-geo-choix { height: var(--bureau-carte-choix); }
.carte-geo-lecture { height: var(--bureau-carte-lecture); }
.carte-fiche { margin-top: var(--gd-espace-4); }
.carte-geo-message { margin-top: var(--gd-espace-1); }
.carte-geo .carte-geo-cercle { stroke: var(--gd-accent); stroke-width: var(--bureau-trait-fort); fill: var(--gd-accent); fill-opacity: 0.15; }
.carte-geo .carte-geo-cercle-fin { stroke-width: var(--bureau-trait); fill-opacity: 0.08; }
.carte-geo-repere { border-radius: var(--gd-rayon-plein); box-shadow: var(--gd-ombre-md); }
.carte-geo-repere-principal {
  width: var(--gd-espace-6); height: var(--gd-espace-6); margin: calc(var(--gd-espace-6) / -2) 0 0 calc(var(--gd-espace-6) / -2);
  background: var(--gd-accent); border: var(--bureau-trait-focus) solid var(--gd-fond-2); cursor: grab;
}
.carte-geo-repere-principal:active { cursor: grabbing; }
.carte-geo-repere-fixe { cursor: default; }
.carte-geo-repere-secondaire {
  width: var(--gd-espace-4); height: var(--gd-espace-4); margin: calc(var(--gd-espace-4) / -2) 0 0 calc(var(--gd-espace-4) / -2);
  background: var(--gd-fond-2); border: var(--bureau-trait-focus) solid var(--gd-accent);
}
.carte-geo .leaflet-control-attribution { font-size: var(--gd-taille-sm); }
[data-theme="dark"] .carte-geo .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9); }
/* Clients finals (C44, D03, d03.css) : Sites regroupé, fiche, choix des sites à rattacher.
   Les groupes gardent le marqueur natif de <summary> : aucun angle ni triangle en dur. */
.groupes { display: grid; gap: var(--gd-espace-3); }
.groupe { background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); }
.groupe > summary {
  display: list-item; min-height: var(--gd-cible-bureau); padding: var(--gd-espace-2) var(--gd-espace-4);
  cursor: pointer; border-radius: var(--gd-rayon-md); line-height: var(--gd-cible-bureau);
}
.groupe > summary > * { margin-right: var(--gd-espace-3); }
.groupe[open] > summary { border-bottom: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md) var(--gd-rayon-md) 0 0; }
.groupe > summary:hover { background: var(--gd-fond-3); }
.groupe-nom { font-size: var(--gd-taille-md); font-weight: var(--gd-graisse-forte); }
.groupe.sans-client .groupe-nom { color: var(--gd-texte-2); }
.groupe-compte { font-family: var(--gd-police-mono); font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
.groupe-service { font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
.groupe-corps { padding: var(--gd-espace-3) var(--gd-espace-4) var(--gd-espace-4); }
.groupe-meta { font-size: var(--gd-taille-sm); margin: 0 0 var(--gd-espace-3); }
mark.surligne { background: var(--gd-fond-3); color: var(--gd-texte); border-bottom: var(--bureau-trait-fort) solid var(--gd-accent); }
.service-petit { display: flex; align-items: center; gap: var(--gd-espace-2); flex-wrap: wrap; }
.service-petit-formes { display: inline-flex; gap: var(--gd-espace-1); flex-wrap: wrap; }
.service-petit-resume { font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
.adresse-postale { white-space: pre-line; }
.choix-sites { display: grid; border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); padding: 0; margin: var(--gd-espace-3) 0; }
.choix-sites legend { font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); padding: 0 var(--gd-espace-2); }
.choix-site { padding: var(--gd-espace-2) var(--gd-espace-3); border-top: var(--bureau-trait) solid var(--gd-bordure); }
.choix-site[hidden] { display: none; }
.tableau th .tri { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; min-height: var(--gd-cible-bureau); }
.tableau th[aria-sort] .tri { color: var(--gd-texte); text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte-geo .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9); }
}

/* Rapports : l'aperçu est le gabarit serveur, isolé dans un iframe. */
.apercu-rapport {
  width: 100%; min-height: 80vh; border: var(--bureau-trait) solid var(--gd-bordure);
  border-radius: var(--gd-rayon-md); background: var(--gd-fond-2);
}

/* ── Incidents (C46, D04 : décisions 29 à 44) ────────────────────────── */
/* Bandeau d'En direct : icône de catégorie, titre et gravité, contexte, extrait, gestes. */
.alerte-incident { grid-template-columns: auto 2fr 2fr auto; }
.alerte-icone { display: inline-flex; font-size: var(--bureau-icone); color: var(--gd-statut-manquee); grid-row: span 2; align-self: start; }
.alerte-icone-moyenne { color: var(--gd-statut-partielle); }
.alerte-extrait { grid-column: 2 / 4; color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.alerte-actions { display: flex; flex-wrap: wrap; gap: var(--gd-espace-2); justify-content: flex-end; grid-column: 4; grid-row: 1 / 3; }

/* Page de l'incident : à gauche ce que l'agent a dit et montré, à droite les faits enregistrés. */
.titre-incident { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gd-espace-2); }
.titre-incident .icone { color: var(--gd-statut-manquee); }
.pastille-etat { display: inline-block; padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-sm); font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-normale); background: var(--gd-statut-a-venir-fond); color: var(--gd-statut-a-venir); }
.pastille-etat-acquittee { background: var(--gd-statut-complete-fond); color: var(--gd-statut-complete); }
.fiche-incident { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gd-espace-6); align-items: start; margin-top: var(--gd-espace-4); }
.fiche-incident > div { display: flex; flex-direction: column; gap: var(--gd-espace-4); min-width: 0; }
.fiche-incident .carte { padding: var(--gd-espace-4) var(--gd-espace-6); }
.parole-agent {
  margin: 0 0 var(--gd-espace-2); padding: var(--gd-espace-3) var(--gd-espace-4);
  border-left: var(--gd-espace-1) solid var(--gd-bordure-2); background: var(--gd-fond-3);
  border-radius: var(--gd-rayon-sm); font-size: var(--gd-taille-md); white-space: pre-wrap; overflow-wrap: anywhere;
}
.mention { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); margin: 0; }
.photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bureau-vignette), 1fr)); gap: var(--gd-espace-3); }
.photo-vignette { margin: 0; display: flex; flex-direction: column; gap: var(--gd-espace-1); }
.photo-cadre {
  aspect-ratio: 4 / 3; width: 100%; padding: 0; border: var(--bureau-trait) solid var(--gd-bordure);
  border-radius: var(--gd-rayon-md); background: var(--gd-fond-3); overflow: hidden; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center; color: var(--gd-texte-2);
}
.photo-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-vignette figcaption { font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
.photo-absente {
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: center; gap: var(--gd-espace-1);
  padding: var(--gd-espace-3); border: var(--bureau-trait) dashed var(--gd-bordure-2); border-radius: var(--gd-rayon-md);
  font-size: var(--gd-taille-sm); color: var(--gd-texte-2);
}
.photo-absente strong { color: var(--gd-texte); }
.proprietes dd small { display: block; color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.position-texte { display: flex; flex-direction: column; gap: var(--gd-espace-1); }
.mono { font-family: var(--gd-police-mono); }
.liste-suites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gd-espace-2); }

/* Visionneuse : la photo sur un voile, heure de prise et de réception, précédente, suivante. */
.visionneuse { width: min(100% - var(--gd-espace-8), 100%); max-width: none; max-height: none; height: calc(100% - var(--gd-espace-8)); display: flex; flex-direction: column; }
.visionneuse:not([open]) { display: none; }
.visionneuse .dialogue-corps { flex: 1; display: flex; flex-direction: column; gap: var(--gd-espace-2); min-height: 0; }
.visionneuse-image { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--gd-fond-3); border-radius: var(--gd-rayon-md); overflow: hidden; }
.visionneuse-image img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.visionneuse .dialogue-actions { flex-wrap: wrap; justify-content: space-between; }
.visionneuse-navigation { display: flex; gap: var(--gd-espace-2); flex-wrap: wrap; }

/* Détail de ronde : un incident sur une ligne grisée, à son heure (décision 41). */
.tableau tr.ligne-incident > * { background: var(--gd-fond-3); }
.ligne-incident .icone { color: var(--gd-statut-manquee); vertical-align: middle; }
.ligne-incident-texte { display: block; color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.tableau .actions-ligne { display: flex; gap: var(--gd-espace-2); flex-wrap: wrap; align-items: center; }
.incidents-nombre { display: inline-flex; align-items: center; gap: var(--gd-espace-1); white-space: nowrap; }
.incidents-nombre .icone { color: var(--gd-statut-manquee); }

/* ── Consigne au point (C79, D05 décisions 44 à 62) ────────────────────── */
/* Formulaire du point : plus large, la saisie à gauche et l'aperçu à droite. */
.dialogue.dialogue-point { width: min(100% - var(--gd-espace-8), var(--bureau-dialogue-point)); }
.bloc-consigne {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--bureau-apercu-consigne); gap: var(--gd-espace-6);
  align-items: start; border: 0; margin: var(--gd-espace-3) 0; padding: 0; min-width: 0;
}
.bloc-consigne > legend {
  display: flex; align-items: center; gap: var(--gd-espace-2); padding: 0; margin-bottom: var(--gd-espace-3);
  font-size: var(--gd-taille-md); font-weight: var(--gd-graisse-forte);
}
.bloc-consigne-saisie { display: grid; gap: var(--gd-espace-3); min-width: 0; }
.bloc-consigne-saisie > .champ { margin-bottom: 0; }
.types-consigne { display: grid; gap: var(--gd-espace-1); border: 0; margin: 0; padding: 0; min-width: 0; }
.types-consigne > legend { padding: 0; margin-bottom: var(--gd-espace-2); font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); color: var(--gd-texte-2); }
.type-choix {
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--gd-espace-3); align-items: start;
  min-height: var(--gd-cible-bureau); padding: var(--gd-espace-2) var(--gd-espace-3);
  border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); background: var(--gd-fond-2); cursor: pointer;
}
.type-choix input { grid-row: 1 / span 2; margin: var(--gd-espace-1) 0 0; accent-color: var(--gd-accent); }
.type-choix-nom { font-weight: var(--gd-graisse-moyenne); }
.type-choix-desc { grid-column: 2; font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
.type-choix:has(input:checked) { border: var(--bureau-trait-fort) solid var(--gd-accent); background: var(--gd-fond-3); }
.consigne-pied-champ { display: flex; justify-content: space-between; gap: var(--gd-espace-3); }
.consigne-compteur { font-family: var(--gd-police-mono); white-space: nowrap; }
.consigne-conseil {
  display: grid; grid-template-columns: auto 1fr; gap: var(--gd-espace-2); padding: var(--gd-espace-3);
  border-left: var(--bureau-trait-focus) solid var(--gd-bordure-2); background: var(--gd-fond);
  font-size: var(--gd-taille-sm); color: var(--gd-texte-2);
}
.consigne-conseil p { margin: 0; }
.consigne-conseil strong { color: var(--gd-texte); font-weight: var(--gd-graisse-moyenne); }
.consigne-retirer { display: flex; align-items: center; justify-content: space-between; gap: var(--gd-espace-3); font-size: var(--gd-taille-sm); color: var(--gd-texte-2); }
/* Aperçu dans le thème sombre de l'application agent (data-theme="dark" sur le cadre). */
.consigne-apercu { display: grid; gap: var(--gd-espace-2); align-content: start; }
.consigne-apercu-titre { font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); color: var(--gd-texte-2); }
.consigne-apercu-ecran {
  display: grid; gap: var(--gd-espace-3); padding: var(--gd-espace-3);
  background: var(--gd-fond); color: var(--gd-texte); border: var(--bureau-trait) solid var(--gd-bordure-2);
  border-radius: var(--gd-rayon-lg); font-size: var(--gd-taille-sm);
}
.consigne-apercu-ecran p { margin: 0; }
.consigne-apercu-tete { display: grid; gap: var(--gd-espace-1); }
.consigne-apercu-sur-titre { display: inline-flex; align-items: center; gap: var(--gd-espace-1); color: var(--gd-texte-2); font-size: var(--gd-taille-xs); }
.consigne-apercu-tete strong { font-size: var(--gd-taille-base); }
.consigne-apercu-texte {
  padding: var(--gd-espace-3); background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure);
  border-radius: var(--gd-rayon-md); font-size: var(--gd-taille-md); font-weight: var(--gd-graisse-moyenne);
  line-height: var(--gd-interligne-normal); overflow-wrap: anywhere;
}
.consigne-apercu-texte.vide { color: var(--gd-texte-3); font-style: italic; font-weight: var(--gd-graisse-normale); }
.consigne-apercu-attendu { color: var(--gd-texte-2); }
.consigne-apercu-choix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gd-espace-3); }
.consigne-apercu-case {
  display: flex; align-items: center; justify-content: center; min-height: var(--bureau-case-apercu);
  border: var(--bureau-trait-fort) solid var(--gd-bordure-2); border-radius: var(--gd-rayon-md);
  font-size: var(--gd-taille-lg); font-weight: var(--gd-graisse-forte);
}
.consigne-apercu-champ {
  display: flex; justify-content: space-between; align-items: flex-end; min-height: var(--bureau-champ-apercu);
  padding: var(--gd-espace-2); border: var(--bureau-trait) solid var(--gd-bordure-2); border-radius: var(--gd-rayon-sm);
  background: var(--gd-fond-2); color: var(--gd-texte-3);
}
.consigne-apercu-compteur { font-family: var(--gd-police-mono); }
.consigne-apercu-bouton {
  display: flex; align-items: center; justify-content: center; min-height: var(--gd-cible-bureau);
  border-radius: var(--gd-rayon-md); background: var(--gd-accent); color: var(--gd-accent-texte); font-weight: var(--gd-graisse-moyenne);
}
.consigne-apercu-bouton.inactif { background: var(--gd-fond-3); color: var(--gd-texte-2); }
.consigne-apercu-rien { padding: var(--gd-espace-4) var(--gd-espace-3); border: var(--bureau-trait) dashed var(--gd-bordure-2); border-radius: var(--gd-rayon-md); color: var(--gd-texte-2); text-align: center; }
/* Liste des points : une ligne sous le nom, coupée à une ligne (décision 53). */
.marque-consigne {
  display: flex; align-items: center; gap: var(--gd-espace-1); max-width: var(--bureau-marque-consigne); margin-top: var(--gd-espace-1);
  font-size: var(--gd-taille-xs); font-weight: var(--gd-graisse-normale); color: var(--gd-texte-2);
}
.marque-consigne-type { white-space: nowrap; }
.marque-consigne-extrait { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gd-texte); }
/* Détail de ronde : la réponse sous son point, dans un bloc en retrait ; un « Non » encadré, sans couleur de statut. */
.tableau tr.avec-reponse > * { border-bottom: 0; }
.tableau tr.ligne-reponse > td { border-top: 0; padding-top: 0; vertical-align: top; }
.tableau tr.ligne-reponse > td.marque-reponse { color: var(--gd-texte-2); text-align: center; }
.reponse-bloc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gd-espace-1) var(--gd-espace-6); align-items: baseline;
  padding: var(--gd-espace-2) var(--gd-espace-3); border-left: var(--bureau-trait-focus) solid var(--gd-bordure);
  background: var(--gd-fond); border-radius: 0 var(--gd-rayon-sm) var(--gd-rayon-sm) 0;
}
.reponse-bloc-non { border-left-color: var(--gd-texte-2); }
.reponse-bloc-vue { display: grid; gap: var(--gd-espace-1); min-width: 0; }
.reponse-bloc-type { font-size: var(--gd-taille-xs); color: var(--gd-texte-2); }
.reponse-bloc-texte { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); overflow-wrap: anywhere; }
.reponse-bloc-donnee { display: grid; gap: var(--gd-espace-1); justify-items: end; text-align: right; white-space: nowrap; }
.reponse-bloc-valeur.ecrite { white-space: normal; max-width: var(--bureau-reponse-ecrite); font-weight: var(--gd-graisse-moyenne); overflow-wrap: anywhere; }
.reponse-bloc-quand { font-size: var(--gd-taille-xs); color: var(--gd-texte-2); }
.reponse-bloc-sans .reponse-bloc-valeur { color: var(--gd-texte-2); }
.reponse-bloc-remarque { grid-column: 1 / -1; margin: 0; font-size: var(--gd-taille-xs); color: var(--gd-texte-2); }
.mot-non {
  display: inline-block; padding: 0 var(--gd-espace-2); border: var(--bureau-trait-fort) solid var(--gd-texte);
  border-radius: var(--gd-rayon-sm); font-weight: var(--gd-graisse-forte); color: var(--gd-texte);
}

/* ── Tablette : barre latérale en icônes, tableaux en cartes ──────────── */
@media (max-width: 1023px) {
  .groupe-service { display: block; }
  .nav { width: auto; padding: var(--gd-espace-3) var(--gd-espace-2); }
  .nav-libelle, .nav-marque-texte, .nav-version { display: none; }
  .nav-lien { justify-content: center; padding: 0; width: var(--gd-cible-bureau); }
  .nav-pastille { position: absolute; top: 0; right: 0; margin: 0; }
  .contenu { padding: var(--gd-espace-4); }
  .entete { padding: var(--gd-espace-2) var(--gd-espace-4); }

  .alerte-ligne { display: flex; flex-wrap: wrap; column-gap: var(--gd-espace-3); row-gap: var(--gd-espace-1); }
  .alerte-titre { flex: 1 1 50%; }
  .alerte-ligne .bouton { order: 2; }
  .alerte-meta { order: 3; flex-basis: 100%; justify-content: flex-start; font-size: var(--gd-taille-sm); }
  .alerte-extrait { order: 4; flex-basis: 100%; }
  .alerte-actions { order: 5; flex-basis: 100%; justify-content: flex-start; }
  .fiche-incident { grid-template-columns: 1fr; }

  /* Le tableau garde sa sémantique ; seul l'affichage passe en cartes. */
  .tableau-direct thead, .tableau-suspects thead, .tableau-alertes thead, .tableau-cartes thead { display: none; }
  .tableau-direct, .tableau-direct tbody, .tableau-suspects, .tableau-suspects tbody,
  .tableau-alertes, .tableau-alertes tbody, .tableau-cartes, .tableau-cartes tbody { display: block; background: none; border: 0; }
  .tableau-direct tr, .tableau-suspects tr, .tableau-alertes tr, .tableau-cartes tr {
    display: block; background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure);
    border-radius: var(--gd-rayon-md); padding: var(--gd-espace-3); margin-bottom: var(--gd-espace-3);
  }
  .tableau-direct tr > *, .tableau-suspects tr > *, .tableau-alertes tr > *, .tableau-cartes tr > * {
    display: block; border: 0; padding: var(--gd-espace-1) 0;
  }
  .tableau-direct td::before, .tableau-suspects td::before, .tableau-alertes td::before, .tableau-cartes td::before {
    content: attr(data-libelle); display: block;
    font-size: var(--gd-taille-sm); color: var(--gd-texte-2);
  }
  .tableau-direct tr.en-difficulte { border-color: var(--gd-statut-manquee); }
  /* Carte de site : nom sur toute la largeur, puis deux colonnes. */
  .tableau-direct tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gd-espace-4); }
  .tableau-direct tbody tr > th { grid-column: 1 / -1; }
  .tableau-direct tbody tr > td:nth-of-type(1) { grid-row: span 2; }
  .tableau-direct tr.en-difficulte > th { box-shadow: none; }
  .pastille { width: var(--gd-espace-12); height: var(--gd-espace-12); }
  /* Consigne (C79) : l'aperçu passe sous la saisie ; la réponse colle à la carte de son point. */
  .bloc-consigne { grid-template-columns: minmax(0, 1fr); }
  .consigne-apercu { max-width: var(--bureau-apercu-consigne); }
  .tableau-cartes tr.avec-reponse { margin-bottom: 0; border-bottom: 0; border-radius: var(--gd-rayon-md) var(--gd-rayon-md) 0 0; }
  .tableau-cartes tr.ligne-reponse { margin-top: 0; padding-top: 0; border-top: 0; border-radius: 0 0 var(--gd-rayon-md) var(--gd-rayon-md); }
  .tableau-cartes tr.ligne-reponse:has(+ tr.ligne-reponse) { margin-bottom: 0; border-bottom: 0; border-radius: 0; }
  .tableau-cartes tr.ligne-reponse > td.marque-reponse { display: none; }
  .tableau-cartes tr.ligne-reponse > td::before { content: none; }
  .reponse-bloc { grid-template-columns: minmax(0, 1fr); }
  .reponse-bloc-donnee { justify-items: start; text-align: left; }
}

@media (max-width: 639px) {
  .filtres .champ-client { min-width: 0; flex: 1 1 100%; }
  .entete { flex-wrap: wrap; }
  .entete-utilisateur { display: none; }
  .tableau-direct tbody tr { grid-template-columns: 1fr; }
  .tableau-direct tbody tr > td:nth-of-type(1) { grid-row: auto; }
}

/* ── Impression (les pages du bureau, le rapport a sa propre feuille) ─── */
@media print {
  .nav, .entete, .tete-page-actions, .bouton, .bouton-icone, .filtres, .onglets { display: none; }
  .coquille { display: block; }
}

/* Pages communes au téléphone (C82) : la carte garde sa marge, le contenu sa largeur. */
@media (max-width: 639px) {
  .page-connexion { padding: var(--gd-espace-4); place-items: start center; }
  .auth-carte { padding: var(--gd-espace-6) var(--gd-espace-4); }
}

/* Téléphone porté sur soi et travailleur isolé (C86, D07 49 à 68, d07.css). Marque d'agent :
   rectangle à pointe, initiales dedans, plein en couleur de texte ; en alarme, « critique » et
   un anneau ; position ancienne, contour pointillé. Un site garde la forme ronde de son statut. */
.fiche-ti { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gd-espace-4); margin-top: var(--gd-espace-6); align-items: start; }
.fiche-ti-seule { grid-template-columns: 1fr; }
.fiche-ti-colonne { display: grid; gap: var(--gd-espace-4); min-width: 0; }
.bloc-ti h2 { display: flex; align-items: center; gap: var(--gd-espace-2); flex-wrap: wrap; }
.etat-ti-mot { display: inline-flex; align-items: center; gap: var(--gd-espace-1); font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); padding: 0 var(--gd-espace-2); border-radius: var(--gd-rayon-sm); background: var(--gd-fond-3); }
.etat-ti-pas_en_service .etat-ti-mot { background: var(--gd-statut-partielle-fond); color: var(--gd-statut-partielle); }
.etat-ti-alarme { border-color: var(--gd-statut-critique); }
.etat-ti-titre { font-weight: var(--gd-graisse-forte); color: var(--gd-statut-critique); }
.etat-ti-lignes { margin: 0 0 var(--gd-espace-3); padding-left: var(--gd-espace-5); }
.proprietes dt.retrait { padding-left: var(--gd-espace-4); }
.attente-telephone .titre { font-weight: var(--gd-graisse-forte); }
.form-telephone .libelle { font-weight: var(--gd-graisse-moyenne); margin: 0 0 var(--gd-espace-1); }
.reglages-ti { margin-left: var(--gd-espace-4); padding-left: var(--gd-espace-4); border-left: var(--bureau-trait-fort) solid var(--gd-bordure); }
.reglages-ti-detail { margin-left: var(--gd-espace-4); }
.reglages-ti[hidden], .reglages-ti-detail[hidden] { display: none; }
.champ-duree .champ-en-ligne { display: flex; align-items: center; gap: var(--gd-espace-3); }
.champ-duree input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gd-accent); }
.champ-duree .champ-court { width: var(--bureau-champ-court); }
.tableau-services .nombre { font-family: var(--gd-police-mono); }
.tableau-services .alarmes-service a { font-family: var(--gd-police-mono); padding: 0 var(--gd-espace-1); }
.trajet { margin-top: var(--gd-espace-4); border-top: var(--bureau-trait) solid var(--gd-bordure); padding-top: var(--gd-espace-4); }
.trajet-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--gd-espace-3); }
.trajet-choix { display: flex; gap: var(--gd-espace-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--gd-espace-2); }
.trajet-corps, .cote-a-cote { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gd-espace-4); align-items: start; }
.carte-geo-suivi, .carte-geo-trajet-service { height: var(--bureau-carte-suivi); }
.carte-geo .carte-geo-trajet { stroke: var(--gd-texte-2); stroke-width: var(--bureau-trait-fort); stroke-dasharray: var(--gd-espace-1) var(--gd-espace-1); fill: none; }
.carte-geo .carte-geo-position { stroke: var(--gd-fond-2); stroke-width: var(--bureau-trait); fill: var(--gd-texte-2); fill-opacity: 1; }
.carte-geo .carte-geo-position-alarme { fill: var(--gd-statut-critique); }
.carte-geo .carte-geo-precision { stroke: var(--gd-statut-critique); stroke-width: var(--bureau-trait-fort); fill: var(--gd-statut-critique); fill-opacity: 0.12; }
.liste-trajet { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gd-espace-1); }
.ligne-trajet { padding: var(--gd-espace-1) 0; border-bottom: var(--bureau-trait) solid var(--gd-bordure); }
.ligne-trajet time { font-family: var(--gd-police-mono); font-weight: var(--gd-graisse-moyenne); margin-right: var(--gd-espace-2); }
.ligne-trajet.manquante .quoi { color: var(--gd-statut-partielle); font-style: italic; }
.ligne-trajet.evenement .quoi { font-weight: var(--gd-graisse-moyenne); }
.ligne-trajet.alarme time, .ligne-trajet.alarme .quoi { color: var(--gd-statut-critique); font-weight: var(--gd-graisse-forte); }
.ligne-trajet.apres-alarme time { color: var(--gd-statut-critique); }

.marque-agent {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  min-width: var(--gd-espace-7); height: var(--gd-espace-6); padding: 0 var(--gd-espace-1);
  background: var(--gd-texte); color: var(--gd-fond-2); border: var(--bureau-trait-fort) solid var(--gd-fond-2);
  border-radius: var(--gd-rayon-sm); font-size: var(--gd-taille-xs); font-weight: var(--gd-graisse-forte); line-height: 1;
  box-shadow: var(--gd-ombre-md); white-space: nowrap;
}
.marque-agent::after {
  content: ''; position: absolute; left: 50%; bottom: calc(var(--gd-espace-2) * -1); transform: translateX(-50%);
  border-left: var(--gd-espace-1) solid transparent; border-right: var(--gd-espace-1) solid transparent;
  border-top: var(--gd-espace-2) solid var(--gd-texte);
}
.leaflet-marker-icon.marque-agent { margin: calc(var(--gd-espace-6) * -1 - var(--gd-espace-2)) 0 0 calc(var(--gd-espace-7) / -2); }
.marque-agent-alarme { background: var(--gd-statut-critique); color: var(--gd-texte-inverse); box-shadow: 0 0 0 var(--bureau-trait-focus) var(--gd-statut-critique-fond), 0 0 0 calc(var(--bureau-trait-focus) * 2) var(--gd-statut-critique); }
.marque-agent-alarme::after { border-top-color: var(--gd-statut-critique); }
.marque-agent-ancienne, .marque-agent-sans_position { background: var(--gd-fond-2); color: var(--gd-texte); border: var(--bureau-trait-fort) dashed var(--gd-texte); }
.marque-agent-ancienne::after, .marque-agent-sans_position::after { border-top-color: var(--gd-texte); }
.liste-agents { list-style: none; margin: 0 0 var(--gd-espace-3); padding: 0; display: grid; gap: var(--gd-espace-2); }
.agent-service { display: grid; grid-template-columns: auto 1fr; gap: var(--gd-espace-3); align-items: start; padding: var(--gd-espace-2) var(--gd-espace-3); background: var(--gd-fond-2); border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); }
.agent-service p { margin: 0; }
.agent-alarme { border: var(--bureau-trait-fort) solid var(--gd-statut-critique); }
.agent-nom { font-weight: var(--gd-graisse-forte); }
.age-ancien { font-weight: var(--gd-graisse-forte); }
.etiquette-alarme { font-size: var(--gd-taille-xs); font-weight: var(--gd-graisse-forte); color: var(--gd-statut-critique); }
.legende-agents { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gd-espace-2) var(--gd-espace-4); }
.marque-legende { transform: scale(0.8); }

/* Bandeau d'une alarme (D07 61, 62) : plus épais que le SOS tant que l'agent n'a pas répondu. */
.alerte-ti { grid-template-columns: auto 2fr 2fr auto; background: var(--gd-statut-critique-fond); border-color: var(--gd-statut-critique); border-left-color: var(--gd-statut-critique); }
.alerte-ti-epaisse { border-width: var(--bureau-trait-fort); border-left-width: var(--gd-espace-2); padding: var(--gd-espace-4); }
.alerte-ti-epaisse .alerte-titre { font-size: var(--gd-taille-md); }
.alerte-ti-repondue { padding: var(--gd-espace-1) var(--gd-espace-3); }
.alerte-ti-faits, .alerte-ti-reponse { grid-column: 2 / 4; }
.alerte-ti-reponse { display: inline-flex; align-items: center; gap: var(--gd-espace-2); font-weight: var(--gd-graisse-moyenne); }
.forme-reponse { display: inline-flex; color: var(--gd-statut-complete); font-size: var(--bureau-icone); }
.alerte-icone-critique { color: var(--gd-statut-critique); }
.alarme-ti { padding: var(--gd-espace-4); border: var(--bureau-trait-fort) solid var(--gd-statut-critique); border-radius: var(--gd-rayon-md); background: var(--gd-fond-2); }
.bandeau-alarme-detail { padding: var(--gd-espace-3) var(--gd-espace-4); border-radius: var(--gd-rayon-md); background: var(--gd-statut-critique-fond); border: var(--bureau-trait) solid var(--gd-statut-critique); font-weight: var(--gd-graisse-forte); }
.bandeau-alarme-detail.alerte-ti-repondue { font-weight: var(--gd-graisse-moyenne); }
.alerte-detail { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gd-espace-4); align-items: start; margin-top: var(--gd-espace-4); }
.alerte-detail-seule { grid-template-columns: minmax(0, 1fr); max-width: var(--bureau-largeur-lecture); }
.alerte-detail-colonne { display: grid; gap: var(--gd-espace-4); min-width: 0; }
.avertissement-texte { color: var(--gd-statut-partielle); font-size: var(--gd-taille-sm); }

@media (max-width: 1024px) {
  .fiche-ti, .trajet-corps, .cote-a-cote, .alerte-detail { grid-template-columns: minmax(0, 1fr); }
}

/* ── Marque blanche (C90, D08) ────────────────────────────────────────── */
/* Pastilles de ronde d'En direct, éléments de liste (D08, décision 40). */
.pastille-element { display: inline-flex; }

/* Menu : logo de l'organisation dans 200 × 36, à gauche ; le nom en texte s'il serait trop petit. */
.nav-marque--organisation { min-height: var(--bureau-logo-menu-h); }
.nav-marque-case { display: flex; align-items: center; min-width: 0; max-width: var(--bureau-logo-menu-l); height: var(--bureau-logo-menu-h); }
/* :where() : la bascule de thème (.marque--clair, .marque--sombre) garde le dernier mot sur l'affichage. */
:where(.nav-logo) { display: block; }
.nav-logo { max-width: var(--bureau-logo-menu-l); max-height: var(--bureau-logo-menu-h); width: auto; height: auto; }
.nav-logo-nom {
  font-weight: var(--gd-graisse-forte); color: var(--gd-texte); font-size: var(--gd-taille-md);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--bureau-logo-menu-l);
}
.nav-marque-rail { display: none; }
:where(.nav-rail-logo) { display: block; }
.nav-rail-logo { max-width: var(--bureau-logo-rail); max-height: var(--bureau-logo-rail); }
/* L'initiale n'est jamais sur l'accent, qui marque l'entrée active juste dessous (D08, décision 9). */
:where(.nav-rail-initiale) { display: inline-block; }
.nav-rail-initiale {
  width: var(--bureau-logo-rail); height: var(--bureau-logo-rail); line-height: var(--bureau-logo-rail); text-align: center;
  background: var(--gd-fond-3); color: var(--gd-texte); border-radius: var(--gd-rayon-md);
  font-weight: var(--gd-graisse-forte); font-size: var(--gd-taille-lg);
}
@media (max-width: 1023px) {
  .nav-marque--organisation { justify-content: center; padding: 0; }
  .nav-marque-case { display: none; }
  .nav-marque-rail { display: flex; justify-content: center; }
}

/* « Propulsé par Guardefense » au pied du bureau, texte seul, avec ou sans marque (D08, décision 18). */
.pied-produit { padding: var(--gd-espace-4) var(--gd-espace-6); color: var(--gd-texte-3); font-size: var(--gd-taille-sm); }

/* Bloc « Marque » de l'écran Organisation. Un élément caché le reste, quel que soit son affichage. */
.bloc-marque [hidden] { display: none; }
.bloc-marque .marque-intro { max-width: var(--bureau-largeur-lecture); }
.bloc-marque .marque-intro p { color: var(--gd-texte-2); }
.marque-annonce { margin: 0 0 var(--gd-espace-4); padding: var(--gd-espace-3) var(--gd-espace-4); border: var(--bureau-trait) solid var(--gd-statut-complete); border-left-width: var(--bureau-trait-focus); border-radius: var(--gd-rayon-md); display: flex; gap: var(--gd-espace-3); align-items: center; flex-wrap: wrap; }
.marque-annonce p { margin: 0; flex: 1 1 60%; }
.marque-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--bureau-apercu-marque)); gap: var(--gd-espace-6); align-items: start; }
.marque-formulaire .groupe-champs { border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); padding: var(--gd-espace-4); margin: 0 0 var(--gd-espace-4); min-width: 0; }
.marque-formulaire legend { font-weight: var(--gd-graisse-forte); padding: 0 var(--gd-espace-1); }
.ligne-champ { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gd-espace-3); }
.compteur-car { font-variant-numeric: tabular-nums; }
.logos-depot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gd-espace-4); margin: var(--gd-espace-3) 0; }
.depot { border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); padding: var(--gd-espace-3); display: grid; gap: var(--gd-espace-2); align-content: start; min-width: 0; }
.depot h4 { margin: 0; font-size: var(--gd-taille-base); }
.depot p { margin: 0; overflow-wrap: anywhere; }
.scene-logo { background: var(--gd-fond); color: var(--gd-texte); border-radius: var(--gd-rayon-sm); padding: var(--gd-espace-3); min-height: var(--gd-espace-12); display: flex; align-items: center; }
.depot-image { display: block; max-width: 100%; max-height: var(--gd-espace-12); width: auto; height: auto; }
.avis { color: var(--gd-texte-2); font-size: var(--gd-taille-sm); }
.erreur-ligne { color: var(--gd-statut-manquee); font-size: var(--gd-taille-sm); font-weight: var(--gd-graisse-moyenne); }
.depot-png { display: grid; gap: var(--gd-espace-2); }
.actions-logo { display: flex; gap: var(--gd-espace-2); flex-wrap: wrap; }
.bouton-fichier { position: relative; }
.bouton-fichier:focus-within { outline: var(--bureau-trait-focus) solid var(--gd-focus); outline-offset: var(--bureau-trait); }
.bouton-discret { border-color: transparent; background: none; }
.couleur-saisie { display: flex; gap: var(--gd-espace-4); align-items: flex-end; flex-wrap: wrap; }
.couleur-saisie .champ { margin-bottom: 0; }
.couleur-saisie input[type="color"] { width: var(--gd-cible-bureau); height: var(--gd-cible-bureau); padding: 0; border: var(--bureau-trait) solid var(--gd-bordure-2); border-radius: var(--gd-rayon-sm); background: none; }
.couleur-saisie input[type="text"] { font-family: var(--gd-police-mono); width: calc(var(--gd-espace-12) * 3); }
.verdict { margin: var(--gd-espace-3) 0; font-size: var(--gd-taille-sm); color: var(--gd-statut-complete); }
.verdict-erreur { color: var(--gd-statut-manquee); }
.proposition { display: flex; gap: var(--gd-espace-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--gd-espace-3); }
.proposition p { margin: 0; flex: 1 1 50%; font-size: var(--gd-taille-sm); }
.nuance { display: inline-block; width: var(--gd-espace-5); height: var(--gd-espace-5); border-radius: var(--gd-rayon-sm); border: var(--bureau-trait) solid var(--gd-bordure-2); background: var(--bureau-nuance); flex: none; vertical-align: middle; }
.nuancier-titre { font-size: var(--gd-taille-sm); margin: var(--gd-espace-3) 0 var(--gd-espace-2); }
.nuancier { display: flex; flex-wrap: wrap; gap: var(--gd-espace-2); }
.teinte {
  display: inline-flex; align-items: center; gap: var(--gd-espace-2); min-height: var(--gd-cible-bureau);
  padding: 0 var(--gd-espace-3); border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md);
  background: var(--gd-fond-2); color: var(--gd-texte); font: inherit; font-size: var(--gd-taille-sm); cursor: pointer;
}
.teinte[aria-pressed="true"] { border: var(--bureau-trait-fort) solid var(--gd-texte); font-weight: var(--gd-graisse-forte); }
.jetons { margin-top: var(--gd-espace-4); }
.jetons summary { cursor: pointer; font-weight: var(--gd-graisse-moyenne); min-height: var(--gd-cible-bureau); display: flex; align-items: center; }
.jetons-table .jeton { display: inline-flex; gap: var(--gd-espace-2); align-items: center; }
.jetons-table code { font-family: var(--gd-police-mono); font-size: var(--gd-taille-sm); }
.actions-marque { flex-wrap: wrap; align-items: center; }
.actions-marque .aide { flex-basis: 100%; }
.marque-apercu h3 { margin-bottom: var(--gd-espace-1); }
.vignettes { display: grid; gap: var(--gd-espace-4); margin-top: var(--gd-espace-3); }
.vignette { margin: 0; display: grid; gap: var(--gd-espace-1); }
.vignette-cadre { border: var(--bureau-trait) solid var(--gd-bordure); border-radius: var(--gd-rayon-md); overflow: hidden; }
.vignette-scene { background: var(--gd-fond); color: var(--gd-texte); font-size: var(--gd-taille-xs); padding: var(--gd-espace-3); display: grid; gap: var(--gd-espace-2); }
.vignette-scene .bouton-petit { min-height: var(--gd-espace-8); justify-self: start; pointer-events: none; }
.vs-lat { display: flex; align-items: center; gap: var(--gd-espace-3); flex-wrap: wrap; }
.vs-nav { background: var(--gd-accent); color: var(--gd-accent-texte); border-radius: var(--gd-rayon-sm); padding: var(--gd-espace-1) var(--gd-espace-2); font-weight: var(--gd-graisse-forte); }
.vs-prin { display: grid; gap: var(--gd-espace-2); background: var(--gd-fond-2); border-radius: var(--gd-rayon-sm); padding: var(--gd-espace-2); }
.vs-onglets { display: flex; gap: var(--gd-espace-3); }
.vs-onglet { padding-bottom: var(--gd-espace-1); }
.vs-onglet-actif { border-bottom: var(--bureau-trait-fort) solid var(--gd-accent); font-weight: var(--gd-graisse-forte); }
.vs-lien { color: var(--gd-lien); text-decoration: underline; }
.vs-entete { display: flex; align-items: center; gap: var(--gd-espace-3); }
.vs-carte { display: flex; justify-content: space-between; align-items: center; gap: var(--gd-espace-2); background: var(--gd-fond-2); border-radius: var(--gd-rayon-sm); padding: var(--gd-espace-2); }
.vs-rapport { display: grid; gap: var(--gd-espace-1); background: var(--gd-fond-2); padding: var(--gd-espace-2); }
.vs-pied { display: flex; justify-content: space-between; border-top: var(--bureau-trait) solid var(--gd-bordure); padding-top: var(--gd-espace-1); margin-top: var(--gd-espace-2); }
.case-logo { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.case-logo img { display: block; }
.case-menu { max-width: var(--bureau-logo-menu-l); height: var(--bureau-logo-menu-h); }
.case-agent { height: var(--gd-espace-7); }
.case-rapport { height: var(--gd-espace-12); }
.nom-texte { font-weight: var(--gd-graisse-forte); color: var(--gd-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) {
  .marque-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .logos-depot { grid-template-columns: minmax(0, 1fr); }
}