/* =============================================================================
   Trackoli — feuille de style unique
   =============================================================================

   Regle produit : AUCUNE couleur n'est ecrite en dur dans un composant. Toutes
   viennent des variables ci-dessous, en un seul endroit. Changer la couleur
   primaire d'une organisation ne demande aucune retouche de composant
   (exigence EI-013).

   Trois themes : clair, sombre, automatique. Le mode automatique suit la
   preference du systeme. Les contrastes respectent le niveau AA dans les deux
   themes — rapport 4,5 pour le texte courant, 3 pour les elements d'interface.

   Le theme sombre n'est pas une inversion : les surfaces suivent leur propre
   echelle d'elevation, et les couleurs de statut sont desaturees pour rester
   lisibles sans eblouir (exigence EI-015).

   Points de rupture : telephone < 768, tablette 768-1023, bureau >= 1024.
   ========================================================================== */

/* --- Theme clair, valeurs de reference ---------------------------------- */
:root {
  --primaire:        #0059b3;
  --primaire-clair:  #00458c;
  --primaire-pale:   #e7f1ff;
  --accent:          #9a4b00;
  --accent-pale:     #fff1e2;
  --succes:          #1a7a35;
  --succes-pale:     #e8f4ec;
  --alerte:          #8a5200;
  --alerte-pale:     #fdf3e0;
  --echec:           #a32b22;
  --echec-pale:      #faeae9;

  --fond:            #f5f5f7;
  --surface:         #ebebef;
  --surface-haute:   #ffffff;
  --bord:            #d2d2d7;   /* separation decorative */
  --bord-fort:       #767680;   /* bordure de champ : >= 3:1 sur --fond (WCAG 1.4.11) */

  --texte:           #1d1d1f;
  --texte-doux:      #5d5d63;
  --texte-inverse:   #ffffff;

  /* Deux surfaces volontairement identiques dans les deux themes : un voile de
     modale et un viseur d'appareil photo ne s'eclaircissent pas en theme clair.
     Elles sont neanmoins des variables, parce qu'une couleur en dur dans un
     composant echappe au controle des contrastes — c'est ainsi que le texte du
     bouton de suppression est reste a 2,43 en sombre. */
  --voile:           rgba(8, 12, 20, .55);
  --viseur-fond:     #000000;   /* masque le temps d'allumage du capteur */

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .06);
  --ombre-2: 0 10px 30px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);

  --rayon:    .85rem;
  --rayon-s:  .62rem;
  --rayon-xl: 1.35rem;

  --espace-1: .25rem;
  --espace-2: .5rem;
  --espace-3: .75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;

  --largeur-max: 78rem;
  --cible-tactile: 2.75rem;   /* 44 px : minimum tactile (exigence EI-021) */

  --police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-mono: Consolas, "SF Mono", Menlo, monospace;
}

/* --- Theme sombre explicite --------------------------------------------- */
:root[data-theme="sombre"] {
  --primaire:        #66aaff;
  --primaire-clair:  #8bbcff;
  --primaire-pale:   #102846;
  --accent:          #e8a45c;
  --accent-pale:     #2c2114;
  --succes:          #57c97e;
  --succes-pale:     #14261a;
  --alerte:          #e0b055;
  --alerte-pale:     #2a2314;
  --echec:           #f08a80;
  --echec-pale:      #2e1817;

  --fond:            #000000;
  --surface:         #121214;
  --surface-haute:   #1c1c1e;
  --bord:            #38383a;
  --bord-fort:       #767680;   /* bordure de champ : >= 3:1 sur --fond */

  --texte:           #f5f5f7;
  --texte-doux:      #a1a1a6;
  --texte-inverse:   #071019;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .40);
  --ombre-2: 0 8px 24px rgba(0, 0, 0, .50);
}

/* --- Mode automatique : la preference du systeme fait foi ---------------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --primaire:        #66aaff;
    --primaire-clair:  #8bbcff;
    --primaire-pale:   #102846;
    --accent:          #e8a45c;
    --accent-pale:     #2c2114;
    --succes:          #57c97e;
    --succes-pale:     #14261a;
    --alerte:          #e0b055;
    --alerte-pale:     #2a2314;
    --echec:           #f08a80;
    --echec-pale:      #2e1817;

    --fond:            #000000;
    --surface:         #121214;
    --surface-haute:   #1c1c1e;
    --bord:            #38383a;
    --bord-fort:       #767680;

    --texte:           #f5f5f7;
    --texte-doux:      #a1a1a6;
    --texte-inverse:   #071019;

    --ombre-1: 0 1px 2px rgba(0, 0, 0, .40);
    --ombre-2: 0 8px 24px rgba(0, 0, 0, .50);
  }
}

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

/*
 * L'attribut `hidden` doit gagner sur toute mise en page.
 *
 * Le navigateur lui applique `display: none`, mais n'importe quelle regle
 * d'auteur posant un `display` l'emporte — et l'element reapparait. Le defaut
 * est sournois : le markup dit « masque », l'ecran montre le contraire. Il est
 * arrive une fois sur le bloc d'appareil photo de l'ecran de lecture, qui
 * s'affichait, noir et inerte, sur les navigateurs sans BarcodeDetector.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font: 400 1rem/1.55 var(--police);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--espace-3); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
p  { margin: 0 0 var(--espace-3); }

a { color: var(--primaire); }

code {
  font: .85em var(--police-mono);
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
  padding: .05em .35em;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Accessibilite : focus toujours visible, et animations respectueuses. */
:focus-visible {
  outline: 3px solid var(--primaire);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}

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

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primaire); color: var(--texte-inverse);
  padding: var(--espace-3) var(--espace-4);
}
.lien-evitement:focus { left: 0; }

.conteneur {
  width: 100%;
  min-width: 0;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--espace-4);
}

/* --- Marque -------------------------------------------------------------- */
.marque { display: flex; flex-direction: column; text-decoration: none; }
.marque__nom {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--primaire);
}
.marque__accroche { font-size: .8rem; color: var(--accent); font-style: italic; }
.marque--compacte .marque__nom { font-size: 1.05rem; }

/* --- En-tete ------------------------------------------------------------- */
.entete {
  background: var(--surface-haute);
  border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 40;
}
.entete__int {
  display: flex; align-items: center; gap: var(--espace-3);
  min-height: 4rem; flex-wrap: nowrap;
}
.entete__bascule {
  margin-left: auto;
  width: var(--cible-tactile); height: var(--cible-tactile);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--bord); border-radius: .85rem;
  color: var(--texte); cursor: pointer; flex: 0 0 auto;
}
.entete__bascule .icone { width: 1.2rem; height: 1.2rem; }
.entete__icone-fermer { display: none; }
.menu-ouvert .entete__icone-menu { display: none; }
.menu-ouvert .entete__icone-fermer { display: inline-flex; }
.entete__compte {
  display: none; align-items: center; gap: var(--espace-2);
  margin-left: auto; flex-wrap: nowrap; min-width: 0;
}
.entete__nom { font-size: .9rem; color: var(--texte-doux); }

/* --- Navigation ---------------------------------------------------------- */
.nav {
  position: fixed; inset: 4rem 0 0; z-index: 39;
  display: none; min-width: 0;
}
.nav[data-ouverte] { display: block; }
.nav__voile {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: var(--voile); backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); cursor: default;
}
.nav__panneau {
  position: relative;
  width: min(calc(100% - 2 * var(--espace-3)), 28rem);
  max-height: calc(100svh - 4rem - 2 * var(--espace-3));
  margin: var(--espace-3) var(--espace-3) var(--espace-3) auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bord); border-radius: var(--rayon-xl);
  background: var(--surface-haute); box-shadow: var(--ombre-2);
  animation: panneau-menu .16s ease-out;
}
@keyframes panneau-menu {
  from { transform: translateY(-.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.nav__compte-mobile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--espace-3);
  padding: var(--espace-4);
  color: var(--texte); text-decoration: none;
  border-bottom: 1px solid var(--bord); background: var(--surface);
}
.nav__identite { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.nav__identite strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__identite span { color: var(--texte-doux); font-size: .78rem; }
.nav__fleche { width: 1rem; color: var(--texte-doux); }
.nav__liste {
  list-style: none; margin: 0; padding: var(--espace-2);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__lien {
  display: flex; align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-3);
  border-radius: var(--rayon-s);
  color: var(--texte); text-decoration: none; font-size: .95rem;
}
.nav__lien:hover { background: var(--surface); }
.nav__lien--actif { background: var(--primaire-pale); color: var(--primaire); font-weight: 600; }
.nav__outils-mobile {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--espace-2); padding: var(--espace-3);
  border-top: 1px solid var(--bord); background: var(--surface);
}
.nav__outils-mobile .preferences { gap: var(--espace-2); }
.nav__deconnexion { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: .78rem; }
body.menu-ouvert { overflow: hidden; }

/* Separation entre familles de liens — interfaces, ecrans de travail,
   administration. Sur telephone la liste est verticale : un filet horizontal.
   Le point de rupture bureau la remet en ligne et le filet bascule. */
.nav__item--groupe {
  margin-top: var(--espace-2);
  padding-top: var(--espace-2);
  border-top: 1px solid var(--bord);
}

/* --- Preferences : langue et theme --------------------------------------- */
.preferences { display: flex; gap: var(--espace-3); align-items: center; }
.preferences__groupe {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
}
.jeton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; min-height: 1.9rem; padding: 0 var(--espace-2);
  border-radius: var(--rayon-s);
  font-size: .8rem; font-weight: 600; text-decoration: none;
  color: var(--texte-doux);
}
.jeton:hover { background: var(--surface-haute); color: var(--texte); }
.jeton--actif { background: var(--primaire); color: var(--texte-inverse); }
.jeton--lecture {
  background: var(--surface); border: 1px solid var(--bord);
  min-height: 1.7rem; font-weight: 400;
}
.jeton--lecture code { background: none; border: 0; padding: 0; }

.pastille {
  display: inline-flex; align-items: center;
  padding: .15rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
.pastille--role { background: var(--primaire-pale); color: var(--primaire); }

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-tactile); padding: 0 var(--espace-4);
  border: 1px solid transparent; border-radius: var(--rayon-s);
  font: 600 .95rem var(--police); text-decoration: none; cursor: pointer;
  background: var(--surface); color: var(--texte); border-color: var(--bord);
}
.bouton:hover { border-color: var(--bord-fort); }
.bouton--primaire { background: var(--primaire); color: var(--texte-inverse); border-color: var(--primaire); }
.bouton--primaire:hover { background: var(--primaire-clair); border-color: var(--primaire-clair); }
.bouton--discret { background: none; border-color: transparent; color: var(--texte-doux); }
.bouton--discret:hover { background: var(--surface); color: var(--texte); }
.bouton--large { width: 100%; }

/* --- Page nue : connexion, mot de passe, erreurs ------------------------- */
.page-nue {
  min-height: 100svh;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  align-items: center; justify-content: stretch;
  padding: max(var(--espace-4), env(safe-area-inset-top))
           0 0;
  background:
    radial-gradient(circle at 50% -12%, var(--primaire-pale), transparent 34rem),
    var(--fond);
}
.page-nue > .pied { width: 100%; align-self: end; }
.carte-centree {
  position: relative; overflow: hidden;
  flex: 0 1 auto; min-width: 0;
  width: 100%; max-width: 25rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface-haute);
  border: 1px solid var(--bord); border-radius: var(--rayon-xl);
  box-shadow: var(--ombre-2);
  padding: clamp(1.35rem, 4vw, 1.8rem);
}
.carte-centree::before {
  content: ""; position: absolute; inset: 0 0 auto; height: .2rem;
  background: linear-gradient(90deg, var(--primaire), var(--accent));
}
.marque--connexion {
  justify-content: center; gap: var(--espace-3);
  margin-bottom: var(--espace-5);
}
.marque--connexion .marque__libelles { min-width: 0; }
.marque--connexion .marque__accroche { overflow-wrap: anywhere; }
.marque--connexion .marque__symbole {
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
}
.marque--connexion .marque__symbole .icone { width: 1.45rem; height: 1.45rem; }
.marque__libelles { display: flex; flex-direction: column; line-height: 1.2; }
.marque--connexion .marque__nom { font-size: 1.18rem; }
.marque--connexion .marque__accroche { margin-top: .15rem; font-size: .72rem; }

.connexion__entete { margin-bottom: var(--espace-4); text-align: center; }
.connexion__entete .titre-carte { font-size: 1.7rem; }
.connexion__entete .sous-titre { margin-top: var(--espace-2); }
.connexion > .alerte { margin-bottom: var(--espace-4); }
.connexion__formulaire { gap: var(--espace-3); }
.connexion__formulaire .champ { gap: var(--espace-2); }
.connexion__formulaire .champ input {
  min-height: 3rem; padding-inline: var(--espace-4);
  background: var(--fond);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.connexion__formulaire .champ input:focus {
  background: var(--surface-haute);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 16%, transparent);
  outline: none;
}
.connexion__formulaire .champ input:-webkit-autofill,
.connexion__formulaire .champ input:-webkit-autofill:hover,
.connexion__formulaire .champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texte);
  caret-color: var(--texte);
  box-shadow: 0 0 0 1000px var(--fond) inset;
}
.connexion__formulaire .bouton { min-height: 3rem; margin-top: var(--espace-1); }
.connexion__aide {
  margin-top: var(--espace-4); padding-top: var(--espace-4);
  border-top: 1px solid var(--bord); text-align: center; line-height: 1.45;
}
.carte-centree > .preferences { justify-content: center; margin-top: var(--espace-4); }

/* Secours PWA : une seule carte, bilingue et lisible dans les deux themes. */
.pwa-icone {
  width: 3rem; height: 3rem; flex: 0 0 auto;
  border-radius: .9rem; box-shadow: var(--ombre-1);
}
.carte-centree.hors-ligne {
  width: min(100%, 52rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espace-5);
}
.hors-ligne > .marque { grid-column: 1 / -1; margin-bottom: 0; }
.hors-ligne__langue { text-align: center; }
.hors-ligne__langue .bouton { margin-top: var(--espace-4); }
.hors-ligne__langue--secondaire {
  margin-top: 0; padding-left: var(--espace-5);
  border-left: 1px solid var(--bord);
}
.hors-ligne__langue--secondaire h2 { font-size: 1.05rem; }

@media (max-width: 48rem) {
  .carte-centree.hors-ligne { display: flex; width: min(100%, 25rem); }
  .hors-ligne__langue--secondaire {
    margin-top: var(--espace-5); padding-top: var(--espace-5); padding-left: 0;
    border-top: 1px solid var(--bord); border-left: 0;
  }
}

@media (max-width: 30rem) {
  .page-nue { padding-top: var(--espace-3); }
  .carte-centree { width: calc(100% - 2 * var(--espace-3)); max-width: 100%; padding: var(--espace-4); border-radius: var(--rayon); }
  .marque--connexion { flex-direction: column; text-align: center; }
  .marque--connexion { margin-bottom: var(--espace-4); }
  .connexion__entete .titre-carte { font-size: 1.5rem; }
}
.titre-carte { margin: 0; }
.sous-titre { color: var(--texte-doux); margin: 0; }
.note { font-size: .82rem; color: var(--texte-doux); margin: 0; }

/* --- Formulaires --------------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: var(--espace-4); margin: 0; }
.champ { display: flex; flex-direction: column; gap: var(--espace-1); }
.champ label { font-size: .875rem; font-weight: 600; }
.champ input, .champ select, .champ textarea {
  min-height: var(--cible-tactile);
  padding: 0 var(--espace-3);
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s);
  font: 1rem var(--police);
}
.champ input:focus { border-color: var(--primaire); }
.champ--erreur input { border-color: var(--echec); }
.champ__erreur { font-size: .82rem; color: var(--echec); margin: 0; }
.champ__aide { font-size: .8rem; color: var(--texte-doux); margin: 0; }

/* --- Alertes ------------------------------------------------------------- */
.alerte {
  margin: 0; padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon-s); border-left: 4px solid;
  font-size: .9rem;
}
.alerte--echec { background: var(--echec-pale);  border-color: var(--echec);  color: var(--echec); }
.alerte--info  { background: var(--primaire-pale); border-color: var(--primaire); color: var(--primaire); }
.alerte--succes{ background: var(--succes-pale); border-color: var(--succes); color: var(--succes); }

/* --- Contenu ------------------------------------------------------------- */
main { flex: 1; padding-block: var(--espace-5) var(--espace-7); }

.entete-page {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--espace-4); margin-bottom: var(--espace-5); flex-wrap: wrap;
}
.entete-page h1 { margin: 0; }

.bloc {
  background: var(--surface-haute);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--espace-5); margin-bottom: var(--espace-5);
}
.bloc--attente { border-style: dashed; background: var(--surface); }

.grille { display: grid; gap: var(--espace-4); }
.grille > *, .bloc, .carte, .tableau-enveloppe { min-width: 0; }
.grille--cartes {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  margin-bottom: var(--espace-5);
}

.carte {
  background: var(--surface-haute);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--espace-4);
}
.carte--chiffre { display: flex; flex-direction: column; gap: var(--espace-1); }
.carte__valeur { font-size: 1.75rem; font-weight: 700; color: var(--primaire); line-height: 1; }
.carte__libelle { font-size: .82rem; color: var(--texte-doux); }
.carte--total { border-color: var(--primaire); background: var(--primaire-pale); }

.liste-jetons {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--espace-2);
}

.etat-vide {
  grid-column: 1 / -1;
  padding: var(--espace-6); text-align: center;
  color: var(--texte-doux);
  border: 1px dashed var(--bord); border-radius: var(--rayon);
}

/* --- Barre de filtres ---------------------------------------------------- */
.barre-filtres {
  display: flex; flex-wrap: wrap; gap: var(--espace-3);
  align-items: flex-end; margin-bottom: var(--espace-4);
}
.champ--inline { flex: 1 1 12rem; }
.pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--espace-3); margin-top: var(--espace-4);
  color: var(--texte-doux); font-size: .9rem;
}

/* --- Tableau cliquable ---------------------------------------------------
   Sur telephone, le tableau bascule en liste de fiches : huit colonnes sur
   375 pixels sont illisibles, et un defilement horizontal n'est pas une
   reponse (decision 0008).                                                  */
.tableau-enveloppe { width: 100%; max-width: 100%; overflow-x: auto; }

.tableau {
  width: 100%; border-collapse: collapse;
  background: var(--surface-haute);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden;
}
.tableau th {
  text-align: left; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--texte-doux);
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--bord);
  background: var(--surface);
}
.tableau td {
  padding: var(--espace-3) var(--espace-4);
  border-bottom: 1px solid var(--bord);
  font-size: .92rem; vertical-align: middle;
}
.tableau tbody tr:last-child td { border-bottom: 0; }

.tableau--cliquable tbody tr { cursor: pointer; }
.tableau--cliquable tbody tr:hover { background: var(--primaire-pale); }
.tableau--cliquable tbody tr:focus-within { background: var(--primaire-pale); }

.lien-ligne { text-decoration: none; }
.secondaire { color: var(--texte-doux); font-size: .88em; }
.colonne-actions { text-align: right; white-space: nowrap; }

.pastille--succes { background: var(--succes-pale); color: var(--succes); }
.pastille--neutre { background: var(--surface); color: var(--texte-doux); }

/* --- Modales -------------------------------------------------------------
   Sur telephone : feuille pleine largeur remontant du bas, seule forme
   utilisable au pouce. Sur bureau : boite centree.                          */
body.modale-ouverte { overflow: hidden; }

.modale {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.modale__voile {
  position: absolute; inset: 0;
  background: var(--voile);
  backdrop-filter: blur(2px);
}
.modale__boite {
  position: relative;
  width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--surface-haute);
  border-top: 1px solid var(--bord);
  border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
  box-shadow: var(--ombre-2);
  animation: modale-monte .18s ease-out;
}
@keyframes modale-monte {
  from { transform: translateY(1.5rem); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}
.modale--chargement { opacity: .6; pointer-events: none; }

.modale__entete {
  display: flex; align-items: center; gap: var(--espace-3);
  padding: var(--espace-4) var(--espace-5);
  border-bottom: 1px solid var(--bord);
}
.modale__titre { margin: 0; font-size: 1.1rem; flex: 1; }
.modale__fermer {
  min-width: var(--cible-tactile); min-height: var(--cible-tactile);
  background: none; border: 0; border-radius: var(--rayon-s);
  color: var(--texte-doux); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.modale__fermer:hover { background: var(--surface); color: var(--texte); }

.modale__corps { padding: var(--espace-5); overflow-y: auto; flex: 1; }
.modale__resume { margin: 0 0 var(--espace-4); }

.modale__actions {
  display: flex; gap: var(--espace-3); justify-content: flex-end;
  flex-wrap: wrap;
  padding: var(--espace-4) var(--espace-5);
  border-top: 1px solid var(--bord);
  background: var(--surface);
}
.modale__actions .en-ligne { margin: 0; display: contents; }

/* Le texte suit `--texte-inverse`, comme le bouton primaire : en theme sombre,
   `--echec` est un saumon clair, et le blanc y tombait a 2,43 — sous le 4,5
   exige par EI-014, sur l'ecran de confirmation d'une suppression. */
.bouton--danger { background: var(--echec); color: var(--texte-inverse); border-color: var(--echec); }
.bouton--danger-discret { color: var(--echec); border-color: var(--bord); background: none; }
.bouton--danger-discret:hover { background: var(--echec-pale); border-color: var(--echec); }
.bouton--petit { min-height: 2.1rem; padding: 0 var(--espace-3); font-size: .85rem; }

.objet-cible {
  display: flex; flex-direction: column; gap: var(--espace-1);
  padding: var(--espace-4);
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.definitions { margin: 0; display: grid; gap: var(--espace-3); }
.definitions dt {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--texte-doux);
}
.definitions dd { margin: 0; }

/* --- Formulaire en modale ------------------------------------------------ */
.grille-formulaire { display: grid; gap: var(--espace-4); }
.champ--pleine { grid-column: 1 / -1; }
.champ--case { flex-direction: row; align-items: center; }
.case { display: flex; align-items: center; gap: var(--espace-2); cursor: pointer; }
.case input { width: 1.15rem; height: 1.15rem; min-height: 0; }
.champ textarea { min-height: 5rem; padding: var(--espace-2) var(--espace-3); resize: vertical; }
.champ__erreur:empty { display: none; }

/* --- Messages d'interface ------------------------------------------------ */
.messages {
  position: fixed; z-index: 80;
  left: var(--espace-4); right: var(--espace-4); bottom: var(--espace-4);
  display: flex; flex-direction: column; gap: var(--espace-2);
  pointer-events: none;
}
.message {
  margin: 0; padding: var(--espace-3) var(--espace-4);
  border-radius: var(--rayon); border-left: 4px solid;
  box-shadow: var(--ombre-2); font-size: .92rem;
  pointer-events: auto;
  animation: modale-monte .18s ease-out;
}
.message--succes { background: var(--succes-pale); border-color: var(--succes); color: var(--succes); }
.message--echec  { background: var(--echec-pale);  border-color: var(--echec);  color: var(--echec); cursor: pointer; }

/* --- Pied ---------------------------------------------------------------- */
.pied {
  position: relative; margin-top: auto;
  border-top: 1px solid var(--bord);
  background: var(--surface-haute);
  padding-block: .9rem calc(.9rem + env(safe-area-inset-bottom));
  font-size: .8rem; color: var(--texte-doux);
}
.pied__int {
  display: grid;
  grid-template-columns: minmax(16rem, auto) minmax(0, 1fr);
  align-items: center; column-gap: clamp(1.25rem, 3vw, 2.5rem);
}
.pied__produit { display: flex; align-items: center; gap: var(--espace-2); min-width: 0; }
.pied__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: .65rem; background: var(--primaire); color: var(--texte-inverse);
}
.pied__logo .icone { width: 1rem; height: 1rem; }
.pied__produit-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pied__titre { display: flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.pied__titre strong { color: var(--texte); font-size: .9rem; }
.pied__titre > span:last-child { font-size: .72rem; }
.pied__copyright { margin-top: .1rem; color: var(--texte-doux); font-size: .68rem; }
.pied__contacts {
  min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: .35rem clamp(.75rem, 1.7vw, 1.35rem);
}
.pied__contact {
  min-width: 0; min-height: 2rem;
  display: inline-flex; align-items: center; gap: .38rem;
  color: var(--texte-doux); text-decoration: none; white-space: nowrap;
  transition: color .15s ease;
}
.pied__contact:hover { color: var(--primaire); }
.pied__contact > .icone { width: .95rem; height: .95rem; flex: 0 0 auto; }
.pied__contact span { overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }

/* --- Telephone : le tableau devient une liste de fiches ------------------ */
@media (max-width: 47.99rem) {
  .conteneur { padding-inline: var(--espace-3); }
  .pied { padding-block: var(--espace-3) calc(var(--espace-3) + env(safe-area-inset-bottom)); }
  .pied__int { grid-template-columns: 1fr; justify-items: center; gap: .6rem; text-align: center; }
  .pied__contacts { justify-content: center; gap: .25rem 1rem; }
  .pied__contact { min-height: 1.75rem; }
  .pied__copyright { white-space: normal; }
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau { border: 0; background: none; }
  .tableau tr {
    background: var(--surface-haute);
    border: 1px solid var(--bord); border-radius: var(--rayon);
    margin-bottom: var(--espace-3); padding: var(--espace-2);
  }
  .tableau td {
    display: flex; justify-content: space-between; gap: var(--espace-3);
    padding: var(--espace-2) var(--espace-3); border-bottom: 0;
    text-align: right;
  }
  /* L'intitule de colonne revient devant la valeur : sans lui, une liste de
     fiches n'est plus qu'une suite de valeurs sans signification. */
  .tableau td::before {
    content: attr(data-intitule);
    font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--texte-doux);
    text-align: left; flex-shrink: 0;
  }
  .tableau td.colonne-actions { justify-content: flex-end; }
  .tableau td.colonne-actions::before { content: none; }
}

/* --- Tablette ------------------------------------------------------------ */
@media (min-width: 48rem) {
  h1 { font-size: 1.75rem; }
  .grille--cartes { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .grille-formulaire { grid-template-columns: 1fr 1fr; }

  .modale { align-items: center; padding: var(--espace-5); }
  .modale__boite {
    max-width: 34rem; border-radius: var(--rayon-xl);
    border: 1px solid var(--bord);
  }
  .modale__boite--large { max-width: 48rem; }

  .messages { left: auto; right: var(--espace-5); max-width: 26rem; }
}

/* --- Bureau -------------------------------------------------------------- */
@media (min-width: 90rem) {
  .entete__bascule { display: none; }
  .nav {
    position: static; inset: auto; z-index: auto;
    display: block; flex: 1 1 auto; min-width: 0; margin-left: var(--espace-3);
  }
  .nav__voile, .nav__compte-mobile, .nav__outils-mobile { display: none; }
  .nav__panneau {
    position: static; width: auto; max-height: none; margin: 0;
    display: block; overflow: visible; border: 0; border-radius: 0;
    background: none; box-shadow: none; animation: none;
  }
  .nav__liste {
    display: flex; flex-wrap: nowrap; gap: 2px; padding: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .nav__liste::-webkit-scrollbar { display: none; }
  .nav__item { flex: 0 0 auto; }
  .nav__lien { padding-inline: .4rem; font-size: .88rem; }
  .entete__compte { display: flex; margin-left: auto; }
  .entete__compte .compte__texte { display: none; }
  .entete__deconnexion {
    width: var(--cible-tactile); min-width: var(--cible-tactile); padding-inline: 0;
  }
  .entete__deconnexion-libelle {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.menu-ouvert { overflow: auto; }

  /* La liste passe en ligne : le filet de separation passe a la verticale. */
  .nav__item--groupe {
    margin-top: 0;
    padding-top: 0;
    margin-left: var(--espace-2);
    padding-left: var(--espace-2);
    border-top: 0;
    border-left: 1px solid var(--bord);
  }
}

@media (min-width: 104rem) {
  .entete__compte .compte__texte { display: flex; }
}

/* --- Enregistrement d'un ordre ------------------------------------------- */

/* Un doublon se SIGNALE, il ne bloque pas : le ton est l'alerte, pas l'echec.
   Un donneur d'ordre expedie reellement deux fois le meme jour. */
.message--alerte {
  background: var(--alerte-pale);
  border-color: var(--alerte);
  color: var(--alerte);
}

.pastille--alerte {
  background: var(--alerte-pale);
  color: var(--alerte);
  border: 1px solid var(--alerte);
}

/* Le destinataire se saisit dans la meme modale : un seul niveau (decision
   0008). Le groupe le separe visuellement sans ouvrir de seconde fenetre. */
.bloc-formulaire {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: var(--espace-4);
  margin: var(--espace-4) 0 0;
  min-width: 0;
}

.bloc-formulaire legend {
  padding: 0 var(--espace-2);
  font-weight: 600;
  font-size: .9rem;
}

.bloc-formulaire .note { margin-top: 0; }

/* --- Chronologie d'un pli ------------------------------------------------ */
/*
 * Le journal, affiche tel qu'il est ecrit. Le trait vertical relie les
 * evenements : la chaine se voit, ce qui est exactement ce qu'on vend.
 */
.fiche__numero { font-family: var(--police-mono); font-size: 1.2rem; }

.chronologie {
  list-style: none;
  padding: 0;
  margin: var(--espace-3) 0 0;
}

.chronologie__evenement {
  position: relative;
  padding: 0 0 var(--espace-4) var(--espace-5);
  border-left: 2px solid var(--bord);
}

.chronologie__evenement:last-child { border-left-color: transparent; padding-bottom: 0; }

.chronologie__evenement::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: .35rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--primaire);
}

.chronologie__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-1) var(--espace-2);
}

.chronologie__point { font-family: var(--police-mono); font-size: .78rem; color: var(--texte-doux); }

/* L'horodatage serveur fait foi : il se lit sans ambiguite, chiffres alignes. */
.chronologie__heure {
  margin-left: auto;
  font-size: .8rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.chronologie__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-1) var(--espace-2);
  font-size: .85rem;
  margin-top: var(--espace-1);
}

.chronologie__commentaire {
  margin: var(--espace-1) 0 0;
  font-size: .85rem;
  color: var(--texte-doux);
  overflow-wrap: anywhere;
}
.preuves-evenement { list-style: none; margin: var(--espace-2) 0 0; padding: var(--espace-2); border-radius: var(--rayon); background: var(--surface); }
.preuves-evenement li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-2); padding: var(--espace-1) var(--espace-2); font-size: .8rem; }

/* --- Composition d'une tournee ------------------------------------------- */

/*
 * Le chemin est une liste ORDONNEE : le numero d'arret est COMPTE par le
 * navigateur, jamais recopie depuis `ordre_passage`. Une valeur recopiee
 * divergerait au premier reordonnancement, et afficherait un ordre faux avec
 * l'aplomb d'un ordre juste.
 *
 * Le compteur passe par un pseudo-element et non par `list-style` : un `<li>`
 * en `display: flex` cesse d'etre un `list-item` et perd son marqueur. Le
 * defaut ne se voit qu'a l'ecran, jamais dans le markup.
 */
.chemin {
  list-style: none;
  counter-reset: arret;
  padding: 0;
  margin: 0 0 var(--espace-5);
}

.chemin__arret {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  padding: var(--espace-2) 0;
  border-bottom: 1px solid var(--bord);
  counter-increment: arret;
}

.chemin__arret::before {
  content: counter(arret);
  flex: 0 0 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primaire-pale);
  color: var(--primaire);
  font-weight: 700;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.chemin__corps { flex: 1 1 auto; }

.chemin__corps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--espace-1) var(--espace-2);
  min-width: 0;
}

.chemin__numero { font-family: var(--police-mono); font-size: .85rem; }

/* Les points de repere sont l'adresse : ils prennent toute la ligne plutot que
   d'etre tronques au bout de trois mots. */
.chemin__reperes {
  flex-basis: 100%;
  font-size: .82rem;
  color: var(--texte-doux);
}

.chemin__actions { display: flex; gap: var(--espace-1); flex-shrink: 0; }
.chemin__actions form { margin: 0; }

.reserve { list-style: none; padding: 0; margin: 0; }

.reserve__pli {
  padding: var(--espace-2) 0;
  border-bottom: 1px solid var(--bord);
}

.reserve__pli .champ--case { align-items: flex-start; gap: var(--espace-2); }
.reserve__pli code { font-family: var(--police-mono); font-size: .85rem; }

/* --- Lecture d'etiquette ------------------------------------------------- */
/*
 * Ecran de terrain : il s'utilise debout, une main occupee par le pli. D'ou des
 * cibles larges, un numero lisible a bout de bras, et une largeur bornee pour
 * que rien ne parte chercher l'oeil sur les cotes.
 */
.scan {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  max-width: 34rem;
}

.scan__titre { margin: 0; }

.scan__formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

/* Le numero se tape au pouce et se relit de loin : police a chasse fixe pour
   que les groupes de chiffres s'alignent, et corps genereux. */
.scan__formulaire input {
  font-family: var(--police-mono);
  font-size: 1.15rem;
  letter-spacing: .04em;
  min-height: var(--cible-tactile);
}

.scan__camera {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
  align-items: flex-start;
}

.scan__flux {
  width: 100%;
  max-height: 60vh;
  background: var(--viseur-fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.scan__etat {
  margin: 0;
  font-size: .9rem;
  color: var(--texte-doux);
  min-height: 1.4em;             /* reserve la place : le texte ne fait pas sauter la page */
}

.scan__demarrer { margin: 0; }

.scan__resultat {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
}

.scan__numero {
  margin: 0;
  font-family: var(--police-mono);
  font-size: 1.4rem;
  letter-spacing: .04em;
  word-break: break-all;
}

.scan__champs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-2) var(--espace-4);
  margin: 0;
}

.scan__champs dt { font-size: .82rem; color: var(--texte-doux); }
.scan__champs dd { margin: 0; font-weight: 600; }

.scan__suite {
  margin: 0;
  padding-top: var(--espace-3);
  border-top: 1px solid var(--bord);
  font-size: .85rem;
  color: var(--texte-doux);
}

/* --- Impression : toujours en rendu clair (exigence EI-016) -------------- */
@media print {
  :root {
    --fond: #fff; --surface: #fff; --surface-haute: #fff;
    --texte: #000; --texte-doux: #333; --bord: #999;
  }
  .entete, .pied, .preferences, .bouton { display: none !important; }
}

/* --- Identite visuelle 2026 : claire, calme, tactile ---------------------- */
.icone { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.icone--petite { width: 1rem; height: 1rem; }
.icone--bouton { width: 1.05rem; height: 1.05rem; margin-right: var(--espace-2); }

body {
  letter-spacing: -.006em;
  background:
    radial-gradient(circle at 8% 0%, var(--primaire-pale), transparent 28rem),
    var(--fond);
}

h1 { font-weight: 720; letter-spacing: -.035em; }
h2 { font-weight: 680; letter-spacing: -.02em; }

.marque { flex-direction: row; align-items: center; gap: var(--espace-2); }
.marque__symbole {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .65rem;
  color: var(--texte-inverse); background: var(--primaire);
  box-shadow: var(--ombre-1);
}
.marque__symbole .icone { width: 1.15rem; height: 1.15rem; }

.entete {
  background: color-mix(in srgb, var(--surface-haute) 84%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.entete__int { min-height: 4rem; }
.nav__lien { gap: var(--espace-2); padding-inline: .7rem; transition: background .16s ease, color .16s ease; }
.nav__icone { width: 1.05rem; height: 1.05rem; opacity: .76; }
.nav__lien--actif .nav__icone { opacity: 1; }

.compte {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  padding: .28rem .5rem .28rem .3rem; border-radius: 999px;
  color: var(--texte); text-decoration: none;
}
.compte:hover { background: var(--surface); }
.compte__avatar, .compte-detail__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--primaire-pale); color: var(--primaire);
}
.compte__texte { display: none; flex-direction: column; line-height: 1.18; }
.compte__texte strong { font-size: .82rem; }
.compte__texte span { color: var(--texte-doux); font-size: .7rem; }

.preferences__groupe { border-radius: 999px; background: var(--surface); }
.jeton { border-radius: 999px; }
.bouton { gap: var(--espace-1); border-radius: .7rem; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.bouton:active { transform: scale(.98); }
.bouton--primaire { box-shadow: 0 3px 12px color-mix(in srgb, var(--primaire) 25%, transparent); }

.bloc, .carte, .tableau {
  box-shadow: var(--ombre-1);
}
.bloc { border-radius: var(--rayon-xl); }
.carte { border-radius: var(--rayon); }
.tableau { border-collapse: separate; border-spacing: 0; }
.tableau tbody tr { transition: background .14s ease; }

.sur-titre {
  margin: 0 0 var(--espace-1); color: var(--primaire);
  font-size: .75rem; font-weight: 750; letter-spacing: .09em;
  text-transform: uppercase;
}
.entete-page--hero { padding-block: var(--espace-3); align-items: center; }
.titre-avec-icone { display: flex; align-items: center; gap: var(--espace-4); }
.titre-avec-icone > div { min-width: 0; }
.icone-hero, .suivi-hero__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem; border-radius: 1.1rem;
  color: var(--primaire); background: var(--primaire-pale);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primaire) 14%, transparent);
}
.icone-hero .icone, .suivi-hero__icone .icone { width: 1.8rem; height: 1.8rem; }
.icone-conteneur, .carte__icone, .session__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: .8rem;
  color: var(--primaire); background: var(--primaire-pale); flex: 0 0 auto;
}
.bloc__entete { display: flex; align-items: flex-start; gap: var(--espace-3); margin-bottom: var(--espace-5); }
.bloc__entete > div { min-width: 0; }
.bloc__entete h2 { margin-bottom: var(--espace-1); }
.bloc__entete--actions { align-items: center; flex-wrap: wrap; }
.bloc__entete--actions > div:not(.actions) { flex: 1 1 16rem; }
.bloc__entete--actions > .actions { flex: 1 1 30rem; justify-content: flex-end; }
.bloc__entete--actions > .bouton { margin-left: auto; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espace-2); min-width: 0; }
.actions form { margin: 0; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: var(--espace-2); }

/* --- Profil -------------------------------------------------------------- */
.grille--profil { grid-template-columns: 1fr; }
.bloc--pleine { grid-column: 1 / -1; }
.profil__metadonnees { display: flex; align-items: center; gap: var(--espace-3); flex-wrap: wrap; }
.profil__preferences { min-height: 8rem; display: grid; place-items: center; }
.liste-sessions { display: grid; gap: var(--espace-2); }
.session {
  display: flex; align-items: center; gap: var(--espace-3);
  padding: var(--espace-3); border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--fond);
}
.session--courante { border-color: var(--primaire); background: var(--primaire-pale); }
.session__corps { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.session__corps strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Administration ------------------------------------------------------ */
.grille--indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--espace-5); }
.carte--indicateur { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-1) var(--espace-3); align-items: center; }
.carte--indicateur .carte__icone { grid-row: 1 / 3; }
.carte--indicateur .carte__valeur { font-size: 1.45rem; }
.grille--indicateurs.statistiques-indicateurs { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.carte--statistique {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-2);
  min-height: 8.5rem;
  text-decoration: none;
}
.carte--statistique .carte__valeur { font-size: 1.8rem; }
.carte--statistique .carte__libelle { font-size: .9rem; line-height: 1.35; }
.carte--statistique small { margin-top: auto; line-height: 1.35; }
.grille--administration { grid-template-columns: 1fr; }
.secret-temporaire {
  display: flex; align-items: flex-start; gap: var(--espace-4);
  margin-bottom: var(--espace-5); padding: var(--espace-5);
  border: 1px solid var(--succes); border-radius: var(--rayon-xl);
  background: var(--succes-pale); box-shadow: var(--ombre-1);
}
.secret-temporaire__icone { color: var(--succes); }
.secret-temporaire__icone .icone { width: 2rem; height: 2rem; }
.secret-temporaire h2 { margin-bottom: var(--espace-1); }
.secret-temporaire__valeur { display: inline-block; margin-top: var(--espace-2); padding: var(--espace-2) var(--espace-3); font-size: 1.05rem; letter-spacing: .08em; }
.activites { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-1); }
.activite { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--espace-3); padding: var(--espace-2) 0; border-bottom: 1px solid var(--bord); font-size: .88rem; }
.activite:last-child { border-bottom: 0; }
.activite__point { width: .58rem; height: .58rem; border-radius: 50%; background: var(--primaire); }
.activite time { color: var(--texte-doux); font-size: .78rem; font-variant-numeric: tabular-nums; }
.compte-detail { display: flex; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-5); }
.compte-detail > div { display: flex; flex-direction: column; }
.intro-modale { display: flex; align-items: center; gap: var(--espace-3); padding: var(--espace-3); border-radius: var(--rayon); background: var(--primaire-pale); }
.intro-modale p { min-width: 0; }
.intro-modale strong { overflow-wrap: anywhere; }

/* --- Suivi public -------------------------------------------------------- */
.page-publique { background: var(--fond); }
.publique__entete { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--bord); background: color-mix(in srgb, var(--surface-haute) 84%, transparent); backdrop-filter: saturate(150%) blur(18px); }
.publique__barre { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.publique__actions { display: flex; align-items: center; gap: var(--espace-2); }
.publique__contenu { width: min(100%, 64rem); }
.suivi-hero { display: flex; align-items: center; gap: var(--espace-5); padding-block: var(--espace-5) var(--espace-6); }
.suivi-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: var(--espace-2); }
.suivi-recherche { max-width: 52rem; margin-inline: auto; }
.formulaire--horizontal { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto; align-items: end; }
.suivi-carte { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--bord); border-radius: 1.6rem; background: var(--surface-haute); box-shadow: var(--ombre-2); }
.suivi-carte__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-4); margin-bottom: var(--espace-6); }
.suivi-carte__numero { display: block; margin-top: var(--espace-1); background: none; border: 0; padding: 0; font-size: clamp(1.2rem, 4vw, 1.8rem); }
.progression { list-style: none; margin: 0 0 var(--espace-6); padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.progression__etape { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--espace-2); color: var(--texte-doux); text-align: center; font-size: .75rem; }
.progression__etape::before { content: ""; position: absolute; z-index: 0; top: 1.35rem; left: -50%; width: 100%; height: 2px; background: var(--bord); }
.progression__etape:first-child::before { display: none; }
.progression__icone { z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--bord); background: var(--surface-haute); }
.progression__etape--atteinte { color: var(--primaire); font-weight: 650; }
.progression__etape--atteinte::before { background: var(--primaire); }
.progression__etape--atteinte .progression__icone { border-color: var(--primaire); background: var(--primaire-pale); }
.suivi-creneau { display: flex; align-items: center; gap: var(--espace-3); margin-bottom: var(--espace-6); padding: var(--espace-4); border-radius: var(--rayon); background: var(--primaire-pale); color: var(--primaire); }
.suivi-point { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-4); margin-bottom: var(--espace-6); padding: var(--espace-5); border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.suivi-point__icone { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--primaire-pale); color: var(--primaire); }
.suivi-point__etat, .suivi-point__lieu, .suivi-point__date, .suivi-point__confidentialite { display: block; }
.suivi-point__etat { margin-top: var(--espace-1); font-size: 1.08rem; }
.suivi-point__lieu { margin-top: var(--espace-1); color: var(--texte); }
.suivi-point__date { margin-top: var(--espace-2); color: var(--texte-doux); font-size: .88rem; }
.suivi-point__confidentialite { margin-top: var(--espace-2); color: var(--texte-doux); }
.chronologie--publique { max-width: 44rem; }
.suivi-nouvelle-recherche { text-align: center; margin-top: var(--espace-4); }

/* --- Modales polies ------------------------------------------------------ */
.modale__voile { backdrop-filter: blur(10px) saturate(120%); }
.modale__boite { border-radius: 1.4rem 1.4rem 0 0; }
.modale__entete { padding-block: var(--espace-5); }
.modale__fermer { display: inline-flex; align-items: center; justify-content: center; width: var(--cible-tactile); background: var(--surface); }
.modale__fermer .icone { width: 1rem; height: 1rem; }
.modale__actions form { margin: 0; }

.raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--espace-3); }
.raccourci { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--espace-3); min-height: 4.3rem; padding: var(--espace-3); border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); color: var(--texte); text-decoration: none; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.raccourci:hover { transform: translateY(-1px); border-color: var(--primaire); box-shadow: var(--ombre-1); }
.raccourci__icone, .parcours-visuel__icone { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--primaire-pale); color: var(--primaire); }
.raccourci__fleche { width: 1rem; color: var(--texte-doux); }
.parcours-visuel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.parcours-visuel__etape { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--espace-2); text-align: center; font-size: .78rem; }
.parcours-visuel__etape::before { content: ""; position: absolute; top: 1.25rem; left: -50%; width: 100%; height: 2px; background: var(--bord); }
.parcours-visuel__etape:first-child::before { display: none; }
.parcours-visuel__icone { z-index: 1; border-radius: 50%; background: var(--surface-haute); border: 1px solid var(--primaire); }

@media (min-width: 48rem) {
  .grille--profil { grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); }
  .grille--indicateurs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .compte__texte { display: flex; }
  .modale__boite { border-radius: 1.4rem; }
}

@media (min-width: 48rem) and (max-width: 74.99rem) {
  .pied__int { grid-template-columns: minmax(0, 1fr) auto; row-gap: .55rem; }
  .pied__contacts { grid-column: 1 / -1; justify-content: flex-start; padding-top: .45rem; border-top: 1px solid var(--bord); }
}

@media (max-width: 47.99rem) {
  .entete__int { padding-inline: var(--espace-3); }
  .marque--compacte .marque__nom { font-size: 1rem; }
  .bandeau-alerte .conteneur {
    flex-direction: column; align-items: flex-start; gap: var(--espace-1);
    padding-block: var(--espace-2);
  }
  .bandeau-alerte a { max-width: 100%; overflow-wrap: anywhere; }
  .entete-page--hero { align-items: stretch; }
  .entete-page--hero > .bouton { width: 100%; }
  .titre-avec-icone { align-items: flex-start; gap: var(--espace-3); min-width: 0; }
  .icone-hero { width: 3rem; height: 3rem; border-radius: .9rem; }
  .icone-hero .icone { width: 1.45rem; height: 1.45rem; }
  .bloc { padding: var(--espace-4); }
  .bloc__entete { min-width: 0; gap: var(--espace-2); }
  .bloc__entete--actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .bloc__entete--actions > .actions,
  .bloc__entete--actions > .bouton,
  .bloc__entete--actions > form,
  .bloc__entete--actions > .pastille { grid-column: 1 / -1; width: 100%; }
  .bloc__entete--actions .actions { display: grid; grid-template-columns: 1fr; }
  .bloc__entete--actions .actions .bouton,
  .bloc__entete--actions .actions form,
  .bloc__entete--actions .actions form .bouton { width: 100%; }
  .tableau td { min-width: 0; overflow-wrap: anywhere; }
  .activite { grid-template-columns: auto minmax(0, 1fr); }
  .activite time { grid-column: 2; }
  .publique__actions > .bouton { display: none; }
  .publique__actions .preferences { display: flex; gap: var(--espace-1); }
  .publique__actions .preferences__groupe:first-child { display: none; }
  .suivi-hero { align-items: flex-start; }
  .suivi-hero__icone { width: 3rem; height: 3rem; flex: 0 0 auto; }
  .formulaire--horizontal { grid-template-columns: 1fr; }
  .progression { grid-template-columns: 1fr; gap: 0; }
  .progression__etape { min-height: 3.6rem; flex-direction: row; text-align: left; }
  .progression__etape::before { top: -50%; left: 1.35rem; width: 2px; height: 100%; }
  .suivi-carte__entete { flex-direction: column; }
  .parcours-visuel { grid-template-columns: 1fr 1fr; gap: var(--espace-4); }
  .parcours-visuel__etape::before { display: none; }
}

/* --- Parcours terrain ---------------------------------------------------- */
.tournees-agent {
  display: flex; gap: var(--espace-2); margin-bottom: var(--espace-5);
  padding: var(--espace-1); overflow-x: auto; scrollbar-width: thin;
}
.tournee-agent {
  display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto;
  align-items: center; gap: var(--espace-2); min-width: 15rem;
  padding: var(--espace-3); border: 1px solid var(--bord); border-radius: var(--rayon);
  color: var(--texte); background: var(--surface-haute); text-decoration: none;
  box-shadow: var(--ombre-1); transition: transform .14s ease, border-color .14s ease;
}
.tournee-agent:hover { transform: translateY(-1px); border-color: var(--primaire); }
.tournee-agent--active { border-color: var(--primaire); background: var(--primaire-pale); }
.tournee-agent > span:not(.jeton) { display: flex; min-width: 0; flex-direction: column; }
.tournee-agent small { overflow: hidden; color: var(--texte-doux); text-overflow: ellipsis; white-space: nowrap; }
.terrain-vide { display: grid; justify-items: center; max-width: 36rem; margin-inline: auto; text-align: center; }
.terrain-parcours { max-width: 54rem; margin-inline: auto; }
.terrain-groupe { max-width: 54rem; margin: 0 auto var(--espace-4); }
.terrain-groupe > summary {
  display: flex; align-items: center; gap: var(--espace-2); cursor: pointer;
  color: var(--primaire); font-weight: 750;
}
.terrain-groupe[open] > summary { margin-bottom: var(--espace-4); }
.terrain-groupe fieldset { display: grid; gap: var(--espace-2); max-height: 16rem; overflow: auto; }
.arrets-terrain { list-style: none; counter-reset: arret-terrain; margin: 0; padding: 0; }
.arret-terrain {
  position: relative; display: grid; grid-template-columns: 2.6rem 1fr;
  gap: var(--espace-3); padding-bottom: var(--espace-4); counter-increment: arret-terrain;
}
.arret-terrain::before {
  content: ""; position: absolute; left: 1.28rem; top: 2.6rem; bottom: 0;
  width: 2px; background: var(--bord);
}
.arret-terrain:last-child::before { display: none; }
.arret-terrain__rang {
  z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--primaire);
  color: var(--texte-inverse); font-weight: 750; font-variant-numeric: tabular-nums;
}
.arret-terrain__rang:empty::before { content: counter(arret-terrain); }
.arret-terrain__carte {
  min-width: 0; padding: var(--espace-4); border: 1px solid var(--bord);
  border-radius: var(--rayon-xl); background: var(--surface-haute); box-shadow: var(--ombre-1);
}
.arret-terrain__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-3); }
.arret-terrain__entete code { color: var(--primaire); font-size: .78rem; }
.arret-terrain__entete h3 { margin: var(--espace-1) 0 var(--espace-2); }
.arret-terrain__adresse { display: flex; align-items: flex-start; gap: var(--espace-2); color: var(--texte-doux); font-size: .88rem; }
.arret-terrain__telephone { display: inline-block; margin-top: var(--espace-2); color: var(--primaire); font-weight: 650; }
.arret-terrain__actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-top: var(--espace-4); padding-top: var(--espace-3); border-top: 1px solid var(--bord); }
.geoposition-statut { display: flex; gap: var(--espace-2); padding: var(--espace-3); border-radius: var(--rayon); background: var(--surface); }
.signature-canevas {
  display: block; width: 100%; max-width: 44rem; aspect-ratio: 35 / 12;
  border: 2px solid var(--bord-champ); border-radius: var(--rayon);
  background: var(--carte); touch-action: none; cursor: crosshair;
}
.signature-canevas:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-signature-zone][data-active] [data-fichier-signature] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.accueil-public { max-width: 68rem; margin-inline: auto; }
.accueil-public__recherche { text-align: center; padding: clamp(1rem, 4vw, 3rem) 0; }
.accueil-public__formulaire {
  display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(11rem, 1fr) auto;
  align-items: end; gap: var(--espace-3); max-width: 54rem; margin: var(--espace-5) auto var(--espace-2);
  padding: var(--espace-4); text-align: left; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon-grand); box-shadow: var(--ombre);
}
.accueil-public__atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-3); }
.accueil-public__atouts article { padding: var(--espace-4); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-grand); }
.accueil-public__atouts h2 { margin: var(--espace-3) 0 var(--espace-2); font-size: 1.1rem; }
.accueil-public__atouts p { margin: 0; color: var(--texte-doux); }
.accueil-public__professionnel { text-align: center; margin: var(--espace-5) 0; }
.operations-hors-ligne { position: fixed; z-index: 50; right: var(--espace-3); bottom: var(--espace-3); min-width: 2rem; min-height: 2rem; display: grid; place-items: center; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte); font-weight: 800; box-shadow: var(--ombre); }
.operations-hors-ligne[hidden] { display: none; }
.panneau-operations-hors-ligne { position: sticky; top: var(--espace-3); z-index: 20; border-color: var(--alerte); }
.panneau-operations-hors-ligne ol { margin: var(--espace-3) 0; padding-inline-start: 1.5rem; }
.hors-ligne-terrain { max-width: 42rem; padding-block: var(--espace-5); }
.arret-hors-ligne { margin-block: var(--espace-3); }
@media (max-width: 48rem) {
  .accueil-public__formulaire, .accueil-public__atouts { grid-template-columns: 1fr; }
  .accueil-public__formulaire .bouton { width: 100%; justify-content: center; }
}

@media (max-width: 35rem) {
  .modale { padding-top: max(var(--espace-2), env(safe-area-inset-top)); }
  .modale__boite {
    max-height: calc(100dvh - max(var(--espace-2), env(safe-area-inset-top)));
    border-radius: 1.25rem 1.25rem 0 0;
  }
  .modale__entete { padding: var(--espace-3) var(--espace-4); }
  .modale__titre { font-size: 1.05rem; line-height: 1.25; }
  .modale__fermer { flex: 0 0 var(--cible-tactile); }
  .modale__corps {
    padding: var(--espace-4);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .modale__corps .formulaire { gap: var(--espace-3); }
  .modale__corps .champ input,
  .modale__corps .champ select,
  .modale__corps .champ textarea {
    width: 100%; max-width: 100%; min-width: 0;
  }
  .modale__corps input[type="file"] {
    height: auto; min-height: var(--cible-tactile);
    padding: var(--espace-1);
    overflow: hidden;
  }
  .modale__corps input[type="file"]::file-selector-button {
    min-height: 2.5rem;
    margin-right: var(--espace-2);
    padding: 0 var(--espace-3);
    border: 0; border-radius: var(--rayon-s);
    background: var(--surface); color: var(--texte);
    font: 600 .88rem var(--police);
  }
  .intro-modale { align-items: flex-start; padding: var(--espace-3); }
  .modale__actions {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.35fr);
    gap: var(--espace-2);
    padding: var(--espace-3) var(--espace-4)
      max(var(--espace-3), env(safe-area-inset-bottom));
  }
  .modale__actions .bouton {
    width: 100%; min-width: 0; min-height: 3rem;
    justify-content: center; text-align: center;
    white-space: normal; line-height: 1.2;
  }
  .terrain-parcours { padding-inline: var(--espace-3); }
  .arret-terrain { grid-template-columns: 2rem 1fr; gap: var(--espace-2); }
  .arret-terrain::before { left: .98rem; top: 2rem; }
  .arret-terrain__rang { width: 2rem; height: 2rem; font-size: .78rem; }
  .arret-terrain__carte { padding: var(--espace-3); border-radius: var(--rayon); }
  .arret-terrain__entete { flex-direction: column; }
  .arret-terrain__actions .bouton { width: 100%; justify-content: center; min-height: var(--cible-tactile); }
}
.bandeau-alerte { background: var(--alerte-pale); color: var(--texte); border-bottom: 1px solid var(--bord); }
.bandeau-alerte .conteneur { display: flex; gap: var(--espace-3); align-items: center; justify-content: space-between; padding-block: var(--espace-2); }
.bandeau-alerte a { color: inherit; font-weight: 700; }