/* Interface d'administration — console de données.
   Servie localement, aucune dépendance CDN (sec. 9.11).
   Priorité : lisibilité sur poste modeste et connexion médiocre.

   Système de design « data console » : quatre surfaces, quatre poids de texte,
   quatre significations. Aucune couleur n'est écrite en dur ailleurs que dans
   les blocs de jetons ci-dessous — c'est ce qui fait fonctionner le thème.

   Un seul accent (indigo), réservé aux liens, à l'élément de menu actif, aux
   boutons principaux et à l'anneau de focus. Le vert n'est plus la couleur de
   marque de l'interface : il ne signifie plus que « validé ». Confondre les
   deux rendait illisible une colonne de statuts.

   Séparation par des bordures, jamais par des ombres. L'ombre est réservée à
   ce qui flotte au-dessus de la page. */

/* ============================================================ jetons clairs */

:root {
  color-scheme: light;

  --canvas: #f7f8fa;
  --surface: #ffffff;
  --surface-haut: #f1f3f6;
  --line: #dee1e8;

  --strong: #22262e;
  --content: #343943;
  --soft: #565c68;
  --muted: #717783;

  /* Canaux séparés : les fonds teintés se composent en rgb(… / .15) sans
     dupliquer la couleur, et sans dépendre de color-mix(). */
  --accent-c: 27 94 74;
  --accent-fort-c: 20 74 58;
  --positive-c: 21 120 74;
  --warning-c: 154 92 8;
  --danger-c: 191 55 46;
  --scrim-c: 90 96 110;

  --accent: rgb(var(--accent-c));
  --accent-fort: rgb(var(--accent-fort-c));
  --positive: rgb(var(--positive-c));
  --warning: rgb(var(--warning-c));
  --danger: rgb(var(--danger-c));

  /* En clair, les panneaux ont besoin d'un soupçon d'élévation pour se
     détacher du fond ; en sombre la bordure suffit. */
  --ombre: 0 1px 2px rgb(var(--scrim-c) / .06);

  --r-panneau: 12px;
  --r-controle: 8px;
  --r-etiquette: 6px;
  --lateral: 240px;

  /* Densité confortable ; « compacte » ne change que ce couple. */
  --cellule-x: 16px;
  --cellule-y: 10px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
}

/* ============================================================ jetons sombres

   Deux sélecteurs pour un même bloc : la préférence système, et le choix
   explicite qui doit pouvoir la contredire dans les deux sens. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --canvas: #171a20;
    --surface: #1e222a;
    --surface-haut: #262b34;
    --line: #343a45;
    --strong: #f7f8fa;
    --content: #e4e7ec;
    --soft: #c2c7d0;
    --muted: #949ba8;
    --accent-c: 110 180 150;
    --accent-fort-c: 90 160 130;
    --positive-c: 74 200 137;
    --warning-c: 226 168 66;
    --danger-c: 240 122 110;
    --scrim-c: 8 10 14;
    --ombre: none;
  }
}

:root[data-theme="sombre"] {
  color-scheme: dark;
  --canvas: #171a20;
  --surface: #1e222a;
  --surface-haut: #262b34;
  --line: #343a45;
  --strong: #f7f8fa;
  --content: #e4e7ec;
  --soft: #c2c7d0;
  --muted: #949ba8;
  --accent-c: 110 180 150;
  --accent-fort-c: 90 160 130;
  --positive-c: 74 200 137;
  --warning-c: 226 168 66;
  --danger-c: 240 122 110;
  --scrim-c: 8 10 14;
  --ombre: none;
}

:root[data-densite="compacte"] {
  --cellule-x: 12px;
  --cellule-y: 5px;
}

/* ==================================================================== base */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--content);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  body, .carte, .lateral, .barre-haute { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
}

a { color: var(--accent); text-decoration-color: rgb(var(--accent-c) / .4); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.saut {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--surface); color: var(--content); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: var(--r-controle);
}
.saut:focus { left: 8px; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Le sprite d'icones (partials/icones.php).
   Son attribut « hidden » ne le masque PAS : la feuille de style par defaut du
   navigateur declare l'espace de noms XHTML, si bien que sa regle
   [hidden] { display: none } ne vise que les elements HTML, jamais un <svg>
   inline. Sans cette regle, une boite vide de 300x150 s'installait en tete de
   chaque page. Sorti du flux plutot que display:none : un <use> resout ainsi
   sa cible dans tous les navigateurs. */
svg[hidden] { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.icone.petite { width: 14px; height: 14px; }
.icone.grande { width: 20px; height: 20px; }

/* ================================================================ ossature */

.lateral {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.lateral .marque {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.lateral .marque a { color: var(--strong); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.lateral .marque .sigle { display: grid; place-items: center; flex: 0 0 auto; color: var(--accent); }
.lateral .marque .sigle svg { width: 22px; height: 22px; }

.lateral nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r-controle);
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.lateral nav a:hover { background: var(--surface-haut); color: var(--content); }
.lateral nav a.actif { background: rgb(var(--accent-fort-c) / .15); color: var(--accent); font-weight: 500; }

.lateral .rubrique {
  padding: 14px 12px 4px; font-size: 11px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

.lateral-pied { margin-top: auto; border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 10px; }
.lateral-pied .organisation { font-size: 12px; color: var(--muted); }
.lateral-pied .organisation strong { display: block; color: var(--content); font-weight: 500; font-size: 13px; }

.barre-haute {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; min-height: 52px;
}
.barre-haute .droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.barre-haute .compte { display: flex; align-items: center; gap: 8px; color: var(--soft); text-decoration: none; font-size: 13px; }
.barre-haute .compte:hover { color: var(--content); }
.barre-haute .contexte { font-size: 13px; color: var(--muted); }

.contenu { max-width: 1240px; padding: 20px 20px 64px; }

@media (min-width: 1024px) {
  .lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); overflow-y: auto; }
  .zone { margin-left: var(--lateral); }
  .contenu { padding: 24px 32px 72px; }
}

/* En deçà, le menu tient en tête de page : marque et compte sur une ligne,
   liens sur une bande qui défile. Pas de tiroir, donc pas de JavaScript. */
@media (max-width: 1023px) {
  .lateral {
    position: sticky; top: 0; z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "marque pied" "nav nav";
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .lateral .marque { grid-area: marque; border-bottom: 0; padding: 8px 12px; min-width: 0; }
  .lateral .marque a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lateral nav {
    grid-area: nav;
    flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 0 8px 8px; gap: 4px;
  }
  .lateral nav a { min-height: 40px; padding: 8px 12px; background: var(--surface-haut); }
  .lateral .rubrique { display: none; }
  .lateral-pied {
    grid-area: pied; margin: 0; border: 0;
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  }
  .lateral-pied a {
    max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .contenu { padding: 16px 16px 48px; }
  .carte { padding: 14px; }
  .page-nu { padding: 16px; }
  .carte-connexion, .connexion { margin-top: 24px; margin-bottom: 24px; }
  .bouton { min-height: 44px; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .bouton.petit, .bouton.icone-seule { min-height: 30px; padding-top: 0; padding-bottom: 0; }
  .modale footer { flex-wrap: wrap; }
  .ligne-appareil { flex-wrap: wrap; align-items: flex-start; }
  .qr-activation { max-width: 100%; }
  .qr-activation svg { max-width: 100%; height: auto; }
  h1, .sous-titre, .gros, .code-grand { overflow-wrap: anywhere; }
  .barre-filtres .bouton { flex: 1 1 auto; }
}

/* ============================================================== typographie */

h1 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--strong); margin: 0 0 3px; }
h2 { font-size: 15px; font-weight: 600; color: var(--content); margin: 26px 0 10px; }
h3 { font-size: 14px; font-weight: 600; color: var(--content); margin: 18px 0 8px; }
.sous-titre { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

.barre-titre { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.barre-titre .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.discret { color: var(--muted); font-size: 12px; }
.nombre, td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* =================================================================== blocs */

.qr-activation {
  display: inline-block; margin: 12px 0; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.qr-activation svg { display: block; }

.carte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panneau);
  box-shadow: var(--ombre);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.carte > h2:first-child, .carte > h3:first-child { margin-top: 0; }

/* Le rythme vertical de la page est porte par la marge basse de .carte ; une
   grille est un bloc de page au meme titre et doit la porter aussi, sinon une
   rangee de chiffres colle au bloc suivant. */
.grille { display: grid; gap: 16px; margin-bottom: 16px; }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grille.trois { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grille.quatre { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
/* Dans une grille, c'est gap qui separe : la marge de la carte ne ferait
   qu'ajouter du vide au bas de sa cellule. */
.grille > .carte { margin-bottom: 0; }
/* Une grille qui termine une carte n'a rien a espacer d'elle-meme. */
.carte > .grille:last-child { margin-bottom: 0; }

/* Les vues ecrivent la valeur avant l'intitule ; l'ordre visuel attendu est
   l'inverse. column-reverse le corrige sans toucher a douze gabarits, et laisse
   le lecteur d'ecran annoncer d'abord le chiffre, ce qui reste correct. */
.chiffre {
  display: flex; flex-direction: column-reverse; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panneau); box-shadow: var(--ombre); padding: 16px 18px;
}
.chiffre .valeur { font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--strong); font-variant-numeric: tabular-nums; }
.chiffre .libelle { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.chiffre .indice { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ------------------------------------------------ actions en attente */

.attente {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panneau); box-shadow: var(--ombre); overflow: hidden;
  margin-bottom: 16px;
}
.attente a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; text-decoration: none; color: var(--content);
  border-bottom: 1px solid rgb(var(--scrim-c) / .08);
}
.attente a:last-child { border-bottom: 0; }
.attente a:hover { background: var(--surface-haut); }
.attente a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
.attente .pastille { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.attente .pastille.rouge { background: var(--danger); }
.attente .pastille.orange { background: var(--warning); }
.attente .pastille.bleu { background: var(--accent); }
.attente .pastille.vert { background: var(--positive); }

/* ------------------------------------------------------ états d'une liste */

.etat, .rien, .vide { text-align: center; padding: 56px 20px; }
.etat .titre-etat, .rien .titre-etat { font-size: 14px; font-weight: 500; color: var(--content); }
.etat .detail-etat, .rien .detail-etat { font-size: 12px; color: var(--muted); margin-top: 4px; }
.rien {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panneau); box-shadow: var(--ombre);
  color: var(--positive); font-weight: 500;
  margin-bottom: 16px;
}
.vide { color: var(--muted); font-size: 13px; }

/* L'icone des etats vides arrive par un masque plutot que par un <svg> : les
   vingt-cinq cellules « aucun resultat » deja ecrites dans les vues en
   heritent sans etre modifiees, et le masque prend currentColor, donc le
   theme. */
.rien::before, .vide::before, .etat::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 10px;
  background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rien::before {
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* ================================================================ tableaux */

.tableau-conteneur {
  overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panneau); box-shadow: var(--ombre);
}
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: var(--cellule-y) var(--cellule-x); vertical-align: top; }
thead tr { border-bottom: 1px solid var(--line); }
th {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
tbody tr { border-bottom: 1px solid rgb(var(--scrim-c) / .08); }
tbody tr:last-child { border-bottom: 0; }
tbody td { color: var(--content); }
tbody tr:hover { background: var(--surface-haut); }
tfoot td { border-top: 1px solid var(--line); font-weight: 600; color: var(--strong); }

/* Barre de proportion en ligne, à côté du chiffre. */
.jauge { display: inline-block; height: 6px; width: 64px; background: var(--line); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.jauge span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ============================================================= formulaires */

label { display: block; font-size: 12px; font-weight: 500; margin-bottom: 5px; color: var(--muted); }
label .requis { color: var(--danger); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  font-size: 13px; font-family: inherit;
  background: var(--surface-haut); color: var(--content);
}
input[type=file] { padding: 7px 11px; height: auto; }
textarea { min-height: 84px; height: auto; padding: 9px 11px; resize: vertical; }
::placeholder { color: var(--muted); opacity: .7; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }

/* Mot de passe : le bouton d'affichage se pose dans le champ, sur la réserve
   ménagée à droite par le padding. L'enveloppe est posée par le script. */
.champ-secret { position: relative; display: block; }
.champ-secret input { padding-right: 40px; }
.champ-secret button {
  position: absolute; top: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: var(--r-controle);
  background: transparent; color: var(--muted); cursor: pointer;
}
.champ-secret button:hover { color: var(--content); }
.champ-secret .icone { vertical-align: 0; }

.champ { margin-bottom: 16px; }
.champ .aide { font-size: 12px; color: var(--muted); margin-top: 5px; font-weight: 400; }
.champ .erreur-champ { font-size: 12px; color: var(--danger); margin-top: 5px; }
.ligne-champs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }

fieldset { border: 1px solid var(--line); border-radius: var(--r-panneau); padding: 16px 18px; margin: 0 0 16px; }
legend { font-weight: 600; font-size: 13px; color: var(--content); padding: 0 6px; }

.case { display: flex; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 13px; color: var(--content); margin-bottom: 7px; }
.case input { width: auto; height: auto; margin-top: 3px; accent-color: var(--accent-fort); cursor: pointer; }

.barre-cibles { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cible-purge {
  align-items: center; padding: 10px 0; margin-bottom: 0;
  border-bottom: 1px solid rgb(var(--scrim-c) / .08);
}
.cible-purge:last-of-type { border-bottom: 0; }
.cible-purge .charge { margin-left: auto; font-variant-numeric: tabular-nums; }

.barre-filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.barre-filtres .champ { margin-bottom: 0; min-width: min(150px, 100%); flex: 1 1 160px; }

/* ================================================================= boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border-radius: var(--r-controle); border: 1px solid transparent;
  background: var(--accent-fort); color: #fff;
  font-size: 13px; font-weight: 500; font-family: inherit; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bouton:hover { background: var(--accent); color: #fff; }

.bouton.secondaire { background: var(--surface-haut); color: var(--content); border-color: var(--line); }
.bouton.secondaire:hover { background: var(--surface-haut); border-color: var(--muted); color: var(--content); }

.bouton.fantome { background: transparent; color: var(--muted); border-color: transparent; }
.bouton.fantome:hover { background: var(--surface-haut); color: var(--content); }
.bouton.fantome.destructeur:hover { color: var(--danger); }

.bouton.danger { background: rgb(var(--danger-c) / .15); color: var(--danger); border-color: rgb(var(--danger-c) / .4); }
.bouton.danger:hover { background: rgb(var(--danger-c) / .25); color: var(--danger); }

.bouton.petit { height: 30px; padding: 0 11px; font-size: 12px; gap: 6px; }
.bouton.icone-seule { padding: 0; width: 30px; }
.bouton[disabled], .bouton.desactive { opacity: .5; cursor: not-allowed; }

/* Contrôle segmenté : options courtes et exclusives, l'option EST l'explication. */
.segmente { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-controle); background: var(--surface-haut); }
.segmente button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border: 0; border-radius: var(--r-etiquette);
  background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer;
}
.segmente button:hover { color: var(--content); }
.segmente button[aria-checked="true"] { background: var(--accent-fort); color: #fff; }

/* ============================================================== étiquettes */

.etiquette {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-etiquette);
  background: var(--surface-haut); color: var(--muted);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.etiquette.vert, .etiquette.positive { background: rgb(var(--positive-c) / .15); color: var(--positive); border-color: rgb(var(--positive-c) / .3); }
.etiquette.orange, .etiquette.avertissement { background: rgb(var(--warning-c) / .15); color: var(--warning); border-color: rgb(var(--warning-c) / .3); }
.etiquette.rouge, .etiquette.danger { background: rgb(var(--danger-c) / .15); color: var(--danger); border-color: rgb(var(--danger-c) / .3); }
.etiquette.bleu, .etiquette.accent { background: rgb(var(--accent-c) / .15); color: var(--accent); border-color: rgb(var(--accent-c) / .3); }

/* =================================================================== avis */

.message {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-controle);
  background: var(--surface); margin-bottom: 16px; font-size: 13px; color: var(--content);
}
.message .icone { margin-top: 2px; }
.message.succes { background: rgb(var(--positive-c) / .12); border-color: rgb(var(--positive-c) / .4); }
.message.succes .icone { color: var(--positive); }
.message.erreur { background: rgb(var(--danger-c) / .12); border-color: rgb(var(--danger-c) / .4); }
.message.erreur .icone { color: var(--danger); }
.message.avertissement { background: rgb(var(--warning-c) / .12); border-color: rgb(var(--warning-c) / .4); }
.message.avertissement .icone { color: var(--warning); }
.message.info { background: rgb(var(--accent-c) / .12); border-color: rgb(var(--accent-c) / .4); }
.message.info .icone { color: var(--accent); }

.encart {
  border: 1px solid rgb(var(--accent-c) / .3); border-left-width: 3px;
  background: rgb(var(--accent-c) / .08);
  padding: 11px 15px; border-radius: var(--r-controle); font-size: 13px; margin-bottom: 14px;
}
.encart.attention { border-color: rgb(var(--warning-c) / .4); background: rgb(var(--warning-c) / .1); }

/* ============================================================ progression */

.progression { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.progression.orange span { background: var(--warning); }
.progression.rouge span { background: var(--danger); }

.charge { font-weight: 600; font-variant-numeric: tabular-nums; }
.charge.vert { color: var(--positive); }
.charge.orange { color: var(--warning); }
.charge.rouge { color: var(--danger); }

/* ================================================================ modales

   <dialog> natif : le premier plan, l'inertie de l'arriere-plan, la fermeture
   par Echap et le piege a focus viennent de l'element, pas d'un script. */

.modale {
  width: min(30rem, calc(100vw - 32px));
  max-height: 85vh; margin: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-panneau);
  background: var(--surface); color: var(--content);
  box-shadow: 0 24px 48px rgb(var(--scrim-c) / .28);
}
/* Seule couleur ecrite en dur de la feuille, et la raison est technique :
   avant Chrome 122, ::backdrop n'herite de rien, si bien qu'un var() y donnait
   un voile transparent -- une modale sans fond. Un voile reste de toute facon
   le meme dans les deux themes. */
.modale::backdrop { background: rgb(18 20 26 / .5); }
.modale-voile {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgb(18 20 26 / .5);
}
.modale-voile.ouverte { display: flex; }
.modale-voile .modale { margin: 0; }
.modale form { display: flex; flex-direction: column; max-height: 85vh; }

.modale header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.modale header .icone { color: var(--warning); margin-top: 1px; }
.modale h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--strong); }

.modale .corps { padding: 18px 20px; overflow-y: auto; }
.modale .consequence { margin: 0; font-size: 13px; color: var(--soft); }
.modale .champ { margin: 16px 0 0; }

.modale footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-haut);
}

/* ============================================================= pagination */

.pagination {
  display: flex; gap: 4px; margin-top: 16px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.pagination a, .pagination span.courante {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  text-decoration: none; background: var(--surface); color: var(--content);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { border-color: var(--muted); }
.pagination .courante { background: var(--accent-fort); color: #fff; border-color: var(--accent-fort); font-weight: 500; }
.pagination .info { color: var(--muted); padding: 0 4px; }
.pagination .info:last-child { margin-left: auto; }

/* ================================================ constructeur (sec. 9.6)

   Atelier plein ecran : pas de menu, pas de barre de compte. Les trois
   colonnes occupent la fenetre ; seul un volet defile, jamais la page. */

html:has(.atelier-page) { height: 100%; overflow: hidden; }
.atelier-page { height: 100vh; overflow: hidden; margin: 0; }

.atelier {
  height: 100%; display: flex; flex-direction: column;
  background: var(--canvas); color: var(--content);
}
.atelier-barre {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  flex-shrink: 0; min-height: 48px; padding: 6px 12px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  overflow-x: auto;
}
.atelier-nom {
  font-size: 14px; color: var(--strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch;
}
.atelier-nom-form { display: flex; align-items: center; gap: 6px; min-width: 0; }
.atelier-nom-form input {
  width: min(28ch, 40vw); height: 30px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  background: var(--surface); color: var(--strong); font-size: 14px; font-weight: 600;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.atelier-note { font-size: 12px; color: var(--warning); white-space: nowrap; }
.atelier-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.atelier-barre .message { margin: 0; padding: 4px 8px; font-size: 12px; }
.atelier-erreurs { flex-shrink: 0; max-height: 22vh; overflow: auto; }
.atelier-erreurs:empty { display: none; }
.atelier-erreurs .message { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }

.atelier-corps {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 180px minmax(260px, 32%) minmax(420px, 1fr);
}
.atelier-palette, .atelier-canevas, .atelier-inspecteur {
  min-height: 0; overflow: auto; padding: 12px;
  background: var(--surface);
}
.atelier-palette { border-right: 1px solid var(--line); }
.atelier-inspecteur {
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.atelier-canevas { background: var(--canvas); }
.atelier h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atelier-palette h3:not(:first-child) { margin-top: 16px; }

.palette-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ajout-question {
  display: flex; align-items: center; width: 100%; text-align: left;
  padding: 6px 8px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  background: var(--surface); color: var(--content);
  cursor: pointer; font-size: 11px; font-family: inherit; line-height: 1.2;
}
.atelier-palette > .ajout-question { margin-top: 6px; }
.atelier-palette input[type=file] { height: auto; font-size: 11px; padding: 4px; }
.ajout-question:hover { background: var(--surface-haut); border-color: var(--muted); }

.inspecteur-onglets {
  display: flex; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.inspecteur-onglets button {
  flex: 1; height: 36px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.inspecteur-onglets button:hover { color: var(--content); }
.inspecteur-onglets button:focus-visible { outline-offset: -2px; }
.inspecteur-onglets button.actif { color: var(--strong); box-shadow: inset 0 -2px 0 var(--accent); }
.inspecteur-panneau { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
.inspecteur-panneau[hidden] { display: none; }

.inspecteur-identite {
  display: grid; grid-template-columns: minmax(140px, .7fr) minmax(160px, 1fr) auto;
  gap: 12px; align-items: end; margin-bottom: 12px;
}
.inspecteur-identite .champ { margin: 0; }
.inspecteur-identite .case { margin: 0 0 6px; white-space: nowrap; }

.atelier .champ { margin: 0 0 12px; }
.atelier .champ label { margin-bottom: 4px; }
.atelier .case { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; }
.atelier input[type=text], .atelier input[type=number], .atelier select, .atelier textarea {
  height: 34px; font-size: 13px;
}
.atelier textarea { height: 64px; min-height: 64px; padding: 8px 11px; }
.atelier .aide { font-size: 12px; margin-top: 4px; }
.atelier h4 { margin: 16px 0 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.champs-langue { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.champs-langue .champ { margin: 0; }
.option-ligne {
  display: grid; grid-template-columns: minmax(88px, .8fr) 1fr 1fr auto;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.option-ligne input { min-width: 0; }
.option-ligne .bouton { margin: 0; height: 34px; padding: 0 10px; }
.option-entete { margin-bottom: 4px; }
.option-entete span {
  font-size: 12px; font-weight: 500; color: var(--muted);
}

.liste-questions { min-height: 40px; }
.question-item {
  display: flex; gap: 8px; align-items: center;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-controle);
  padding: 5px 8px; margin-bottom: 4px; cursor: pointer;
}
.question-item:hover { border-color: var(--muted); }
.question-item.selectionnee { border-color: var(--accent); background: rgb(var(--accent-c) / .1); }
.question-item.enfant { margin-left: 20px; }
.question-item .poignee { cursor: grab; color: var(--muted); font-size: 12px; }
.question-item .corps { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; }
.question-item .corps strong {
  font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.question-item .code { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; flex-shrink: 0; }
.question-item .type { margin-left: auto; font-size: 10px; flex-shrink: 0; }
.bloc-condition { border: 1px solid var(--line); border-radius: var(--r-controle); padding: 9px; margin-bottom: 6px; }

.telephone {
  width: 260px; height: 420px; margin: 0 auto; padding: 12px; overflow-y: auto;
  border: 8px solid var(--strong); border-radius: 22px;
  background: var(--surface);
}
.telephone .question-ecran { padding: 8px 0; }
.telephone .libelle-question { font-size: 18px; font-weight: 600; color: var(--strong); margin-bottom: 8px; }
.telephone .aide-question { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.telephone .aide-question.avertissement { color: var(--warning); }
.telephone .bouton-large {
  display: block; width: 100%; padding: 13px; margin-bottom: 8px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  font-size: 15px; background: var(--surface-haut); color: var(--content);
}
.telephone .case {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; font-weight: 400; color: var(--content);
  padding: 10px 2px; margin: 0;
  cursor: default;
}
.telephone .case input {
  width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--accent-fort);
}
.telephone .echelle-boutons { display: flex; gap: 8px; margin-bottom: 8px; }
.telephone .bouton-echelle {
  flex: 1; padding: 16px 0; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  font-size: 18px; font-weight: 600;
  background: var(--surface-haut); color: var(--content);
}

/* ================================================================ imports */

.ligne-valide td { background: rgb(var(--positive-c) / .1); }
.ligne-avertissement td { background: rgb(var(--warning-c) / .12); }
.ligne-erreur td { background: rgb(var(--danger-c) / .12); }
.motifs { font-size: 12px; margin: 3px 0 0; padding-left: 16px; color: var(--soft); }

.etapes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.etape {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-controle);
  background: var(--surface); font-size: 13px; color: var(--content);
}
.etape.faite { background: rgb(var(--positive-c) / .12); border-color: rgb(var(--positive-c) / .4); color: var(--positive); font-weight: 500; }
.etape .compte { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 400; }
.fleche { color: var(--muted); }

/* Glisser-deposer : c'est le formulaire entier qui recoit le fichier, seul le
   champ le signale. */
[data-depot].survol input[type=file] { border-color: var(--accent); background: rgb(var(--accent-c) / .1); }

/* ============================================================== graphiques

   Une seule série, donc une seule couleur : l'accent. Les couleurs de
   signification restent réservées aux statuts. */

.carte-points {
  position: relative; height: 420px; overflow: hidden;
  background: var(--surface-haut); border: 1px solid var(--line); border-radius: var(--r-panneau);
}
.carte-points .point { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); }
.carte-points .point.rejetee { background: var(--danger); }
.carte-points .point.infructueuse { background: var(--warning); }

.histogramme { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.histogramme .barre { flex: 1; background: var(--accent); min-height: 2px; border-radius: 2px 2px 0 0; }

/* ================================================================= divers */

.code-grand {
  display: inline-block; font-family: var(--mono);
  font-size: 28px; font-weight: 700; letter-spacing: 3px;
  color: var(--accent); background: rgb(var(--accent-c) / .12);
  border: 1px solid rgb(var(--accent-c) / .3);
  padding: 12px 18px; border-radius: var(--r-controle);
}

/* Ligne de réglage : intitulé et explication à gauche, contrôle à droite. */
.reglage {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgb(var(--scrim-c) / .1);
}
.reglage:last-child { border-bottom: 0; }
.reglage .intitule { font-size: 13px; font-weight: 500; color: var(--content); }
.reglage .indice { font-size: 12px; color: var(--muted); margin-top: 2px; }

.connexion { max-width: 400px; margin: 9vh auto; padding: 0 20px; }
.connexion .carte { padding: 28px; }
.marque-centre { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.marque-centre h1 { margin: 0; }
.marque-centre .sigle { display: grid; place-items: center; color: var(--accent); }
.marque-centre .sigle svg { width: 34px; height: 34px; }
.page-nu { max-width: 860px; margin: 0 auto; padding: 32px 20px 64px; }

@media (max-width: 1280px) and (min-width: 1024px) {
  .atelier-corps { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.15fr); }
  .inspecteur-identite { grid-template-columns: 1fr 1fr; }
  .inspecteur-identite .case { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  html:has(.atelier-page) { overflow: auto; }
  .atelier-page { height: auto; overflow: visible; }
  .atelier { height: auto; min-height: 100dvh; }
  .atelier-corps { grid-template-columns: 1fr; }
  .atelier-palette, .atelier-inspecteur { max-height: none; overflow: visible; }
  .atelier-palette { border-right: 0; border-bottom: 1px solid var(--line); }
  .atelier-inspecteur { border-left: 0; border-top: 1px solid var(--line); }
  .inspecteur-panneau { flex: none; overflow: visible; }
  .telephone { width: min(100%, 280px); }
  .inspecteur-identite, .champs-langue { grid-template-columns: 1fr; }
  .inspecteur-identite .case { white-space: normal; }
  .option-ligne { grid-template-columns: 1fr; }
  .atelier input[type=text], .atelier input[type=number], .atelier select { font-size: 16px; height: 44px; }
  .atelier textarea { font-size: 16px; height: auto; min-height: 88px; }
  .atelier-barre { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
  .atelier-nom-form { flex: 1 1 100%; }
  .atelier-nom-form input { width: 100%; }
  .atelier-actions { margin-left: 0; flex-wrap: wrap; }
  .atelier-barre .bouton { min-height: 44px; }
  .question-item { align-items: flex-start; }
  .question-item .corps { flex-wrap: wrap; }
  .lateral nav { scrollbar-width: thin; }
}
@media (max-width: 720px) {
  .barre-titre { flex-direction: column; align-items: stretch; gap: 12px; }
  .barre-titre .actions { margin-left: 0; justify-content: flex-start; }
  .carte table:not(:has(thead)),
  .carte table:not(:has(thead)) tbody,
  .carte table:not(:has(thead)) tr,
  .carte table:not(:has(thead)) th,
  .carte table:not(:has(thead)) td { display: block; width: 100%; }
  .carte table:not(:has(thead)) th { padding-bottom: 0; }
  .carte table:not(:has(thead)) td { padding-top: 2px; padding-bottom: 14px; }
  .carte table:not(:has(thead)) tr:last-child td { padding-bottom: 0; }
}

@media print {
  .lateral, .barre-haute, .actions, .barre-filtres, .bouton, .saut, .pagination { display: none !important; }
  :root { --canvas: #fff; --surface: #fff; --ombre: none; }
  .zone { margin-left: 0; }
  .carte, .tableau-conteneur { border: 0; padding: 0; box-shadow: none; }
}

.gros { font-size: 2rem; font-variant-numeric: tabular-nums; }
.grille.stats { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.carte-connexion { max-width: 420px; margin: 12vh auto; }
@media (max-width: 1023px) {
  .carte-connexion { margin: 16px auto; }
}
.ligne-appareil { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.carte td, .carte th { white-space: normal; overflow-wrap: break-word; }
.tableau-conteneur th, .tableau-conteneur td { white-space: nowrap; }
.tableau-conteneur td.vide, .tableau-conteneur td[colspan] { white-space: normal; }
.page-nu { min-height: 100dvh; padding: 24px; }
.lateral-pied a, .lateral-pied button.lien {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 0; font: inherit; text-align: left; text-decoration: none;
}
.lateral-pied button.lien:hover, .lateral-pied a:hover { color: var(--content); }
h2 { font-size: 1.05rem; margin: 24px 0 12px; }

/* Apres les regles de base : sur un telephone, 16 px evite le zoom iOS
   et 44 px donne une cible tactile. */
@media (max-width: 1023px) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
  input[type=search], input[type=tel], select, textarea { font-size: 16px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
  input[type=search], input[type=tel], select { height: 44px; }
}