/* ============================================================
   Suivi des fûts — feuille de style unique, thème « Atelier clair ».
   Écrite à la main plutôt que générée : ~15 écrans, des composants
   d'atelier très spécifiques (cibles 48/60 px, retour plein écran),
   et aucune chaîne de construction à maintenir.
   ============================================================ */

:root {
  color-scheme: light dark;

  --fond:        #f7f6f3;
  --surface:     #ffffff;
  --surface-2:   #f1f0ec;
  --surface-3:   #e7e5df;
  --encre:       #14171a;
  --encre-2:     #3d4650;
  --encre-3:     #667079;
  --bordure:     #e6e4de;
  --bordure-2:   #c9c6bd;
  --accent:      #0b6e6e;
  --accent-2:    #0f8a8a;
  --accent-fond: #e2f2f1;
  --sur-accent:  #ffffff;
  --ok:          #1b7a4b;
  --ok-fond:     #e3f4ea;
  --alerte:      #8a5a00;
  --alerte-fond: #fdf0d2;
  --grave:       #b3261e;
  --grave-fond:  #fde8e6;
  --ombre-1: 0 1px 2px rgba(20,23,26,.06);
  --ombre-2: 0 1px 2px rgba(20,23,26,.04), 0 8px 24px -8px rgba(20,23,26,.12);
  --ombre-3: 0 12px 40px -12px rgba(20,23,26,.25);

  --st-recu:   #2f5f9e; --st-recu-f:   #e4eefa;
  --st-sale:   #8a5a1f; --st-sale-f:   #f6ebdc;
  --st-propre: #0f7a6a; --st-propre-f: #dcf3ee;
  --st-rempli: #8a6400; --st-rempli-f: #fbefc9;
  --st-livre:  #4a4fb5; --st-livre-f:  #e8e9fb;
  --st-hors_service: #59636b; --st-hors_service-f: #eceef0;
  --st-perdu:  #b3261e; --st-perdu-f:  #fde8e6;

  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-pilule: 999px;
  --pas: 4px;
  --cible: 48px;
  --cible-atelier: 60px;
  --police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --entete-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond:#0f1214; --surface:#171b1e; --surface-2:#1e2327; --surface-3:#272d32;
    --encre:#eef1f2; --encre-2:#b9c2c7; --encre-3:#8d98a0;
    --bordure:#262c30; --bordure-2:#384146;
    --accent:#4cc3c0; --accent-2:#7ad9d6; --accent-fond:#12292a; --sur-accent:#04201f;
    --ok:#6fc3b2; --ok-fond:#132a27;
    --alerte:#e0ac55; --alerte-fond:#2c2312;
    --grave:#f28b82; --grave-fond:#33191a;
    --ombre-1: 0 1px 2px rgba(0,0,0,.45);
    --ombre-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
    --ombre-3: 0 12px 40px -12px rgba(0,0,0,.8);
    --st-recu:#8db8ee;  --st-recu-f:#16212e;
    --st-sale:#e9a96b;  --st-sale-f:#2b2014;
    --st-propre:#5fd3bd;--st-propre-f:#112a26;
    --st-rempli:#f0c24a;--st-rempli-f:#2c2410;
    --st-livre:#a3a8f5; --st-livre-f:#1b1d33;
    --st-hors_service:#a3adb4; --st-hors_service-f:#22282c;
    --st-perdu:#f28b82;  --st-perdu-f:#33191a;
  }
}
[data-theme="sombre"] {
  --fond:#0f1214; --surface:#171b1e; --surface-2:#1e2327; --surface-3:#272d32;
  --encre:#eef1f2; --encre-2:#b9c2c7; --encre-3:#8d98a0;
  --bordure:#262c30; --bordure-2:#384146;
  --accent:#4cc3c0; --accent-2:#7ad9d6; --accent-fond:#12292a; --sur-accent:#04201f;
  --ok:#6fc3b2; --ok-fond:#132a27; --alerte:#e0ac55; --alerte-fond:#2c2312;
  --grave:#f28b82; --grave-fond:#33191a;
  --ombre-1: 0 1px 2px rgba(0,0,0,.45);
  --ombre-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.6);
  --ombre-3: 0 12px 40px -12px rgba(0,0,0,.8);
  --st-recu:#8db8ee; --st-recu-f:#16212e; --st-sale:#e9a96b; --st-sale-f:#2b2014;
  --st-propre:#5fd3bd; --st-propre-f:#112a26; --st-rempli:#f0c24a; --st-rempli-f:#2c2410;
  --st-livre:#a3a8f5; --st-livre-f:#1b1d33;
  --st-hors_service:#a3adb4; --st-hors_service-f:#22282c;
  --st-perdu:#f28b82; --st-perdu-f:#33191a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 16px/1.5 var(--police);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0; line-height: 1.2; letter-spacing: -.012em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
p { margin: 0 0 10px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1);
  box-shadow: 0 0 0 4px var(--accent-fond);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Numéro de lot : un code, saisi et affiché en monospace comme le reste. */
input[name="numero"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.discret { color: var(--encre-3); }
.petit { font-size: 13px; }
.minus { font-size: 12px; letter-spacing: .04em; font-weight: 600; color: var(--encre-3); }
.rien { display: none !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; }

/* ------------------------------------------------------------ ossature */
.appli { min-height: 100dvh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.flanc {
  background: var(--fond);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh;
}
.flanc__marque { padding: 20px 18px 12px; }
.flanc__marque b { display:block; font-size: 17px; font-weight: 700; }
.flanc__marque span { display:block; font-size: 12px; color: var(--encre-3); margin-top:2px; }
.flanc__nav { padding: 8px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.flanc__recherche { padding: 4px 12px 8px; }
.flanc__recherche input { width: 100%; min-height: 40px; box-sizing: border-box; }
.flanc__groupe { margin: 14px 8px 4px; }
.flanc a {
  display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 48px;
  border-radius: var(--r-2); color: var(--encre-2); text-decoration: none;
  font-size: 15px; font-weight: 500;
}
.flanc a svg { width: 22px; height: 22px; flex: none; }
.flanc a:hover { background: var(--surface-2); color: var(--encre); }
.flanc a[aria-current="page"] { background: var(--accent-fond); color: var(--accent); font-weight: 600; }
.flanc__pied { padding: 12px 16px 16px; }
.flanc__moi { font-size: 13px; color: var(--encre-2); padding: 2px 4px 8px; }
.flanc__moi b { display:block; color: var(--encre); font-weight: 600; overflow-wrap: anywhere; }
.flanc__pied form { margin: 0; }
.flanc__pied .flanc__lien {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 0 4px; margin: 0; border: 0; border-radius: var(--r-1);
  background: none; box-shadow: none; text-align: left; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--encre-2); text-decoration: none; cursor: pointer;
}
.flanc__pied .flanc__lien:hover { background: var(--surface-2); color: var(--encre); }
.actions-rapides { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.corps { min-width: 0; display: flex; flex-direction: column; }
.entete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 20px 28px 8px; background: var(--fond);
  position: sticky; top: 0; z-index: 20;
}
.entete__titre { flex: 1; min-width: 0; }
.entete__titre p { margin: 4px 0 0; font-size: 14px; color: var(--encre-3); }
.contenu { padding: 16px 28px 64px; max-width: 1400px; width: 100%; }
.barre-mobile { display: none; }

@media (max-width: 860px) {
  body { overflow-x: clip; }
  .appli { grid-template-columns: minmax(0, 1fr); }
  .flanc { display: none; }
  .contenu { padding: 12px 16px calc(112px + env(safe-area-inset-bottom)); }
  .entete { padding: 14px 16px 4px; position: static; }
  .entete__titre h1 { font-size: 24px; }
  .entete__titre p { font-size: 13px; }
  .barre-mobile {
    display: grid; position: fixed; inset: auto 0 0 0; z-index: 40;
    margin: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface); border-radius: 20px; box-shadow: var(--ombre-3);
    padding: 4px;
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  }
  .barre-mobile a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 2px; text-decoration: none; color: var(--encre-3);
    font-size: 12px; font-weight: 600; min-height: 56px; justify-content: center;
    border-radius: var(--r-pilule);
    /* Un libellé qui passe à la ligne déborde de la barre : on le coupe. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  .barre-mobile a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .barre-mobile a[aria-current="page"] { color: var(--accent); background: var(--accent-fond); }
  .barre-mobile svg { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------ boutons */
.bouton, button.bouton, a.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cible); padding: 0 20px; border-radius: var(--r-pilule);
  border: 0; background: var(--surface-2); color: var(--encre);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap; box-shadow: none;
  transition: transform .08s ease, background-color .12s ease;
}
.bouton:hover { background: var(--surface-3); }
.bouton:active { transform: scale(.98); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent-fond); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bouton.bouton--vif { background: var(--accent); color: var(--sur-accent); box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent); }
.bouton.bouton--vif:hover { background: var(--accent-2); }
.bouton.bouton--grave { color: var(--grave); background: var(--grave-fond); }
.bouton.bouton--grave:hover { background: var(--grave-fond); filter: brightness(.96); }
.bouton.bouton--nu { box-shadow: none; background: transparent; }
.bouton.bouton--nu:hover { background: var(--surface-2); }
.bouton--petit { min-height: 40px; padding: 0 14px; font-size: 14px; }
.bouton--large { width: 100%; }
/* Cibles d'atelier : gants mouillés, écran de téléphone. */
.bouton--atelier { min-height: var(--cible-atelier); font-size: 18px; font-weight: 650; padding: 0 24px; border-radius: var(--r-3); }
.boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
summary.bouton { min-height: var(--cible); }

/* ------------------------------------------------------------ formulaires */
.champ { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.champ > label, .champ__label { font-size: 14px; font-weight: 600; color: var(--encre-2); }
.champ__aide { font-size: 13px; color: var(--encre-3); }
.champ__erreur { font-size: 13px; color: var(--grave); font-weight: 600; }
input[type=color] { min-height: var(--cible); padding: 4px; border-radius: var(--r-2); }
input:not([type]), 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 {
  font: inherit; font-size: 16px; /* 16 px empêche le zoom automatique iOS */
  color: var(--encre); background: var(--surface-2);
  border: 1.5px solid transparent; border-radius: var(--r-2);
  padding: 10px 14px; min-height: var(--cible); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-fond);
}
select { appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 96px; resize: vertical; }
input[readonly] { color: var(--encre-2); cursor: default; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--grave); }
.grille { display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
fieldset { border: 0; background: var(--surface-2); border-radius: var(--r-2); padding: 16px 16px 2px; margin: 0 0 16px; min-width: 0; }
legend { font-size: 14px; font-weight: 600; color: var(--encre-2); padding: 0 6px; }
/* La case est petite : c'est tout le libellé qui doit être cliquable. */
.coche { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 6px 0; min-height: 44px; }
.coche input { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent); }
#champ-douchette { min-height: 0 !important; height: 1px; }

/* ------------------------------------------------- deux colonnes */
/* Contenu principal + panneau latéral.
   La requête média n'est pas un ornement : sans elle, la colonne de contenu
   se réduit à quelques pixels derrière un panneau de largeur fixe, et la
   page devient illisible sur téléphone. */
.duo {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 340px;
}
.duo--large  { grid-template-columns: minmax(0, 1fr) 360px; }
.duo--etroit { grid-template-columns: minmax(0, 1fr) 320px; }
.duo__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Fiche à trois blocs : sur téléphone, les actions remontent avant la
   chronologie — sinon elles se retrouvent sous soixante événements. */
.fiche {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "etat actions" "details actions" "autres actions" "chrono actions";
}
.fiche__etat    { grid-area: etat; min-width: 0; }
.fiche__actions { grid-area: actions; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fiche__chrono  { grid-area: chrono; min-width: 0; }
.fiche__details { grid-area: details; min-width: 0; }
.fiche__autres  { grid-area: autres; min-width: 0; }

.colonnes { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

@media (max-width: 900px) {
  .duo, .duo--large, .duo--etroit { grid-template-columns: minmax(0, 1fr); }
  .fiche {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "etat" "actions" "details" "autres" "chrono";
  }
}

/* ------------------------------------------------------------ cartes */
.carte { background: var(--surface); border: 0; border-radius: var(--r-3); box-shadow: var(--ombre-2); }
.carte__tete { padding: 16px 20px 4px; display: flex; align-items: center; gap: 10px; }
.carte__tete h2 { flex: 1; }
.carte__corps { padding: 16px 20px 20px; min-width: 0; }
.carte__corps--serre { padding: 0; }
.cartes { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.tuile {
  min-width: 0;
  background: var(--surface); border: 0; border-radius: var(--r-3); box-shadow: var(--ombre-2);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
}
a.tuile:hover { box-shadow: var(--ombre-3); }
.tuile__valeur { font-size: 32px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tuile__nom { font-size: 14px; color: var(--encre-2); font-weight: 600; }
.tuile__detail { font-size: 13px; color: var(--encre-3); }
.tuile--alerte { background: var(--alerte-fond); }
.tuile--grave { background: var(--grave-fond); }
.tuile--ok { background: var(--ok-fond); }
.tuile--alerte .tuile__valeur { color: var(--alerte); }
.tuile--grave .tuile__valeur { color: var(--grave); }
.tuile--ok .tuile__valeur { color: var(--ok); }
@media (max-width: 720px) {
  /* Une date entière (« 11/01/2027 ») doit tenir dans une demi-largeur. */
  .tuile__valeur { font-size: clamp(20px, 6.2vw, 32px); overflow-wrap: anywhere; }
  /* Deux compteurs par ligne plutôt qu'un : le tableau de bord tient
     alors sur un écran au lieu de trois. */
  .cartes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tuile { padding: 14px; }
  .tuile__nom { font-size: 13px; }
  .tuile__detail { font-size: 12px; }
}

/* ------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--r-pilule); font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 0; line-height: 1.4;
}
/* Le point reprend la couleur du texte : le badge reste lisible sans couleur
   grâce au libellé, et le point marque l'état d'un coup d'œil. */
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.badge--recu{background:var(--st-recu-f);color:var(--st-recu)}
.badge--sale{background:var(--st-sale-f);color:var(--st-sale)}
.badge--propre{background:var(--st-propre-f);color:var(--st-propre)}
.badge--rempli{background:var(--st-rempli-f);color:var(--st-rempli)}
.badge--livre{background:var(--st-livre-f);color:var(--st-livre)}
.badge--hors_service{background:var(--st-hors_service-f);color:var(--st-hors_service)}
.badge--perdu{background:var(--st-perdu-f);color:var(--st-perdu)}
.badge--neutre{background:var(--surface-2);color:var(--encre-2)}
.badge--ok{background:var(--ok-fond);color:var(--ok)}
.badge--alerte{background:var(--alerte-fond);color:var(--alerte)}
.badge--grave{background:var(--grave-fond);color:var(--grave)}
.pastille { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

/* ------------------------------------------------------------ tableaux */
.tableau-cadre { overflow-x: auto; border: 0; border-radius: var(--r-3); background: var(--surface); box-shadow: var(--ombre-2); }
table.tableau { border-collapse: collapse; width: 100%; font-size: 15px; }
.tableau th {
  text-align: left; font-size: 12px; letter-spacing: .02em;
  color: var(--encre-3); font-weight: 600; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--bordure); white-space: nowrap; background: var(--surface);
  position: sticky; top: 0; z-index: 1;
}
.tableau th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.tableau th a:hover { color: var(--accent); }
.tableau td { padding: 14px 16px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau td.serre { width: 1%; white-space: nowrap; }
@media (min-width: 721px) { .tableau td.sans-coupure { white-space: nowrap; } }
.tableau .lien-ligne { color: inherit; text-decoration: none; font-weight: 600; font-family: var(--mono); }
.tableau .lien-ligne:hover { color: var(--accent); text-decoration: underline; }

.vide { padding: 40px 20px; text-align: center; color: var(--encre-3); }
.vide p { margin-bottom: 14px; }

/* Sur téléphone, une table de neuf colonnes ne se lit pas : on ne voit
   jamais le statut, le client et l'ancienneté en même temps. Les lignes
   deviennent donc des cartes, avec le libellé de chaque champ repris depuis
   l'attribut `data-libelle` de la cellule. */
@media (max-width: 720px) {
  .tableau-cadre:has(.tableau--cartes) { background: transparent; box-shadow: none; overflow: visible; }
  .tableau--cartes thead { display: none; }
  .tableau--cartes, .tableau--cartes tbody, .tableau--cartes tr, .tableau--cartes td {
    display: block; width: 100%;
  }
  .tableau--cartes tbody { display: flex; flex-direction: column; gap: 10px; }
  .tableau--cartes tr {
    /* `minmax(0, 1fr)` et non `1fr` : sinon un contenu insécable empêche la
       colonne de rétrécir et pousse la page entière vers la droite. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; row-gap: 4px; padding: 14px 16px;
    background: var(--surface); border-radius: var(--r-3); box-shadow: var(--ombre-2);
  }
  .tableau--cartes tr:hover { background: var(--surface); }
  .tableau--cartes td { border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .tableau--cartes .cel-titre { grid-column: 1; grid-row: 1; font-size: 16px; }
  .tableau--cartes .cel-titre a { display: inline-block; padding: 6px 0; }
  .tableau--cartes td.cel-marque { grid-column: 2; grid-row: 1; justify-self: end; width: auto; white-space: nowrap; overflow-wrap: normal; }
  .tableau--cartes .cel-action { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
  .tableau--cartes .cel-action .bouton { min-height: 44px; }
  .tableau--cartes td[data-libelle] {
    grid-column: 1 / -1; display: flex; gap: 8px; font-size: 14px; color: var(--encre-2);
  }
  .tableau--cartes td[data-libelle]::before {
    content: attr(data-libelle); flex: none; min-width: 84px;
    color: var(--encre-3); font-size: 12px; font-weight: 600;
    letter-spacing: .04em; padding-top: 2px;
  }
  /* Un champ vide n'apporte rien sur un petit écran. */
  .tableau--cartes td[data-libelle]:has(> .discret:only-child) { display: none; }
}

/* ------------------------------------------------------------ messages */
.avis {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--r-2); border: 0;
  background: var(--surface-2); font-size: 15px; margin-bottom: 16px;
}
.avis--ok { background: var(--ok-fond); color: var(--ok); }
.avis--alerte { background: var(--alerte-fond); color: var(--alerte); }
.avis--grave { background: var(--grave-fond); color: var(--grave); }
.avis b { font-weight: 650; }
.bandeau-assistance {
  background: var(--grave); color: #fff; text-align: center; padding: 8px 14px;
  font-size: 13px; font-weight: 600; position: sticky; top: 0; z-index: 60;
}
.bandeau-assistance a { color: #fff; }

/* ------------------------------------------------------------ filtres */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtres .champ { margin-bottom: 0; min-width: 150px; }
.filtres .champ--large { flex: 1 1 240px; }
/* La case sert uniquement de bascule CSS ; elle n'est jamais visible et
   n'a pas de `name`, donc elle n'est pas soumise avec le formulaire. */
.bascule-filtres { position: absolute; opacity: 0; pointer-events: none; }
.bascule-filtres__bouton { display: none; }
.filtres__avances { display: contents; }

@media (max-width: 720px) {
  /* Deux filtres par ligne, et les filtres secondaires repliés. */
  .filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .filtres .champ { min-width: 0; margin-bottom: 0; }
  .filtres .champ--large, .filtres .boutons { grid-column: 1 / -1; }
  .filtres > label, .filtres .champ > label { font-size: 13px; }
  .bascule-filtres__bouton { display: inline-flex; }
  .filtres__avances { display: none; }
  .bascule-filtres:checked ~ .filtres__avances {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-column: 1 / -1;
  }
  .bascule-filtres:checked ~ .boutons .bascule-filtres__bouton {
    background: var(--accent-fond); color: var(--accent);
  }
}
.jetons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.jeton {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px;
  background: var(--surface-2); border: 0;
  border-radius: var(--r-pilule); font-size: 13px;
}
.jeton a { color: var(--encre-3); text-decoration: none; font-weight: 700; line-height: 1; padding: 4px 6px; }
.jeton a:hover { color: var(--grave); }

.pagination { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------ chronologie */
.chrono { list-style: none; margin: 0; padding: 0; }
.chrono li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; position: relative; }
.chrono li::before {
  content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--bordure);
}
.chrono li:last-child { padding-bottom: 0; }
.chrono li:last-child::before { display: none; }
.chrono__point { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--bordure-2); background: var(--surface-3); margin-top: 1px; z-index: 1; }
.chrono__tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.chrono__quand { font-size: 13px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.chrono__detail { font-size: 14px; color: var(--encre-2); margin-top: 3px; overflow-wrap: anywhere; }
.chrono__forcee { border-left: 3px solid var(--grave); padding-left: 10px; }

/* ------------------------------------------------------------ scan */
.scan { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 900px) { .scan { grid-template-columns: 1fr; } }
.viseur {
  position: relative; background: #000; border-radius: 24px; overflow: hidden;
  aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.viseur video { width: 100%; height: 100%; object-fit: cover; display: block; }
.viseur__cadre {
  position: absolute; inset: 14%; border: 4px solid #fff;
  border-radius: 20px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none;
}
.viseur__hors { position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
  text-align: center; padding: 24px; font-size: 16px; }
.viseur__outils { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.viseur__outils .bouton { background: rgba(0,0,0,.6); color: #fff; }

/* Retour plein écran : l'opérateur ne regarde pas l'écran en continu.
   L'icône distingue les issues sans recours à la couleur. */
.retour {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  font-size: clamp(32px, 10vw, 72px); font-weight: 700; color: #fff;
  text-align: center; padding: 24px; pointer-events: none; opacity: 0;
}
.retour::before { font-size: 96px; line-height: 1; font-weight: 700; }
.retour[data-etat="succes"] { background: #0f7a4a; opacity: 1; }
.retour[data-etat="echec"]  { background: #b3261e; opacity: 1; }
.retour[data-etat="avert"]  { background: #8a5a00; opacity: 1; }
.retour[data-etat="succes"]::before { content: "\2713"; }
.retour[data-etat="echec"]::before  { content: "\2715"; }
.retour[data-etat="avert"]::before  { content: "!"; }
.retour small { display: block; font-size: 18px; font-weight: 600; margin-top: 4px; opacity: .95; }
@media (prefers-reduced-motion: no-preference) { .retour { transition: opacity .12s linear; } }

.compteur-capture {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--surface); border: 0; border-radius: var(--r-3); box-shadow: var(--ombre-2);
  padding: 14px 20px;
}
.compteur-capture b { font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.douchette-temoin { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); font-weight: 600; }
#champ-douchette { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.journal-scan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.journal-scan li { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bordure); font-size: 14px; }
.journal-scan li:last-child { border-bottom: 0; }
.journal-scan .code { font-family: var(--mono); font-weight: 600; flex: 1; }

/* Parcours atelier
   Opérateur ganté, téléphone en main : cibles de 56 px et plus, un seul
   bouton principal par écran, rien de destructeur à portée du pouce. */

/* Barre du bas : le scan au centre, plus grand et coloré. */
@media (max-width: 860px) {
  .barre-mobile { align-items: end; padding: 6px; overflow: visible; }
  .barre-mobile a { min-height: 64px; font-size: 13px; gap: 4px; border-radius: 16px; }
  .barre-mobile svg { width: 26px; height: 26px; }
  .barre-mobile a.barre-mobile__central {
    min-height: 78px; margin-top: -18px; border-radius: 20px;
    background: var(--accent); color: var(--sur-accent); font-size: 15px; font-weight: 700;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  .barre-mobile a.barre-mobile__central svg { width: 32px; height: 32px; }
  .barre-mobile a.barre-mobile__central[aria-current="page"] { background: var(--accent-2); color: var(--sur-accent); }
}

/* Accueil de l'atelier */
.atelier { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.atelier .bouton--atelier { min-height: 72px; font-size: 19px; white-space: normal; text-align: center; }
.atelier .atelier__principal { min-height: 96px; font-size: 22px; }
.atelier__tuile { min-height: 72px; justify-content: center; }

/* Écran de scan */
.viseur__outils .bouton { min-height: 56px; padding: 0 18px; font-size: 16px; }
.viseur__hors { gap: 16px; align-content: center; background: rgba(0,0,0,.6); }
.viseur__hors p { margin: 0; font-size: 18px; font-weight: 600; max-width: 32ch; }
.viseur__hors .bouton { min-height: 56px; }
.douchette-temoin { margin-top: 10px; }
.saisie-secours, .plus-options { margin-top: 12px; }
.saisie-secours > summary, .plus-options > summary {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px;
  border-radius: var(--r-3); background: var(--surface-2); color: var(--encre-2);
  font-size: 16px; font-weight: 600; cursor: pointer; list-style: none;
}
.saisie-secours > summary::-webkit-details-marker,
.plus-options > summary::-webkit-details-marker,
.confirmer > summary::-webkit-details-marker { display: none; }
.saisie-secours > summary::after, .plus-options > summary::after { content: "+"; margin-left: auto; font-size: 24px; line-height: 1; }
.saisie-secours[open] > summary::after, .plus-options[open] > summary::after { content: "\2013"; }
.saisie-secours__form { display: flex; gap: 8px; margin-top: 10px; }
.saisie-secours__form input { flex: 1; min-width: 0; min-height: 60px; font-size: 18px; }
@media (max-width: 860px) { .scan__journal { display: none; } }

/* Retours plein écran : vert bref, rouge et ambre jusqu'au toucher. */
.retour[data-etat="echec"], .retour[data-etat="avert"] { pointer-events: auto; cursor: pointer; }
.retour__titre { overflow-wrap: anywhere; }
.retour[data-mode="capture"][data-etat="succes"]::before { font-size: 64px; }
.retour[data-mode="capture"][data-etat="succes"] .retour__titre { font-size: clamp(72px, 28vw, 200px); line-height: 1; }
.retour__suite {
  margin: 28px 0 0; padding: 16px 30px; border: 3px solid #fff; border-radius: var(--r-pilule);
  font-size: 22px; font-weight: 700;
}

/* Écran de capture */
.compteur-capture--collant { margin-bottom: 12px; }
.compteur-capture span { font-size: 18px; font-weight: 600; }
@media (max-width: 860px) {
  .compteur-capture--collant {
    position: sticky; top: 0; z-index: 30; margin: 0 -16px 12px;
    border-radius: 0 0 var(--r-3) var(--r-3); padding: 10px 20px;
  }
}
.capture__liste { margin-top: 12px; }
.barre-action {
  position: sticky; bottom: 12px; z-index: 30; margin-top: 12px; padding: 8px;
  border-radius: var(--r-3); background: color-mix(in srgb, var(--fond) 88%, transparent);
}
@media (max-width: 860px) {
  .barre-action { bottom: calc(108px + env(safe-area-inset-bottom)); margin-inline: -8px; }
}
.barre-action .bouton { min-height: 64px; font-size: 19px; white-space: normal; text-align: center; }
.barre-action span.bouton[aria-disabled="true"] { cursor: default; color: var(--encre-3); opacity: 1; }
/* Le contenu ne passe jamais sous la barre « Terminer » : hauteur de la barre
   (80 px) + marge, et sur mobile la barre de navigation basse (108 px). */
.contenu:has(.barre-action) { padding-bottom: calc(92px + 12px + env(safe-area-inset-bottom)); }
@media (max-width: 860px) {
  .contenu:has(.barre-action) { padding-bottom: calc(80px + 108px + 12px + env(safe-area-inset-bottom)); }
}
.bouton--retirer { min-height: 48px; padding: 0 20px; background: var(--grave-fond); color: var(--grave); }
@media (max-width: 720px) {
  .tableau--captures td.cel-secondaire, .tableau--captures td:first-child { display: none; }
  .tableau--captures .cel-titre { font-size: 18px; font-family: var(--mono); }
  .tableau--captures .cel-action { justify-self: stretch; }
  .tableau--captures .cel-action .bouton { width: 100%; min-height: 48px; }
}
.plus-options[open] > summary { margin-bottom: 12px; }
.plus-options__corps { display: flex; flex-direction: column; gap: 12px; }
.confirmer > summary { list-style: none; min-height: 56px; }
.confirmer p { margin: 10px 0; font-weight: 600; }

/* Configuration de l'opération */
.parcours { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.parcours__question { font-size: 20px; margin: 0; }
.prereglages { display: flex; flex-direction: column; gap: 12px; }
.prereglages .bouton { min-height: 72px; font-size: 19px; white-space: normal; text-align: center; }
.prereglage-choisi {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px;
  border-radius: var(--r-3); background: var(--accent-fond); color: var(--accent);
}
.prereglage-choisi b { flex: 1; font-size: 19px; }
.prereglage-choisi .bouton { min-height: 56px; }
.parcours form > .bouton--atelier { margin-top: 4px; }
.parcours select { min-height: 56px; font-size: 17px; }
.choix-lignes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.choix-ligne {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px;
  background: var(--surface); border: 1.5px solid var(--bordure-2); border-radius: var(--r-2);
  font-size: 17px; cursor: pointer;
}
.choix-ligne input { width: 26px; height: 26px; min-height: 0; accent-color: var(--accent); }
.choix-ligne:has(input:checked) { border-color: var(--accent); background: var(--accent-fond); }

/* ------------------------------------------------------------ étapes */
.etapes { display: flex; gap: 4px; margin-bottom: 20px; border: 0; border-radius: var(--r-pilule); overflow: hidden; background: var(--surface-2); padding: 4px; }
.etapes__item { flex: 1; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--encre-3); border-radius: var(--r-pilule); display: flex; gap: 8px; align-items: center; }
.etapes__item[aria-current="step"] { background: var(--accent-fond); color: var(--accent); }
.etapes__item b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); font-size: 12px; }
.etapes__item[aria-current="step"] b { background: var(--accent); color: var(--sur-accent); }

/* ------------------------------------------------------------ connexion */
.portail { min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, var(--fond) 0%, var(--accent-fond) 100%); }
.portail__carte { width: 100%; max-width: 400px; background: var(--surface); border: 0;
  border-radius: 24px; padding: 32px 28px; box-shadow: var(--ombre-3); }
.portail__marque { margin-bottom: 22px; }
.portail__marque b { font-size: 22px; font-weight: 700; display: block; }
.portail__marque span { font-size: 14px; color: var(--encre-3); }
/* Pavé PIN */
.pin-colonne { width: 100%; max-width: 400px; }
.pave-pin[hidden], #pin-pave[hidden] { display: none; }
.pave-pin button { touch-action: manipulation; user-select: none; }
.pave-pin__effacer { font-size: 16px !important; }
.pin-autre { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bordure-2); text-align: center; }
.pin-autre .bouton { min-height: 52px; width: 100%; }
.pave-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.pave-pin button { min-height: 64px; font-size: 24px; font-weight: 600; border-radius: var(--r-3);
  background: var(--surface-2); color: var(--encre); border: 0; font-family: inherit; cursor: pointer; }
.pave-pin button:active { transform: scale(.98); background: var(--surface-3); }
.pin-points { display: flex; gap: 12px; justify-content: center; margin: 18px 0; }
.pin-points span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bordure-2); }
.pin-points span[data-rempli="1"] { background: var(--accent); border-color: var(--accent); }

.erreur-page { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.erreur-page__code { font-size: 54px; font-weight: 700; color: var(--encre-3); margin: 0; }
.erreur-page__texte { font-size: 16px; max-width: 42ch; }

/* ------------------------------------------------------------ impression */
.planche { display: grid; grid-template-columns: repeat(3, 70mm); gap: 0; }
.etiquette {
  width: 70mm; height: 37mm; padding: 3mm; display: grid;
  grid-template-columns: 28mm 1fr; align-items: center; gap: 3mm;
  border: .2mm dashed #bbb; break-inside: avoid;
}
.etiquette svg { width: 27mm; height: 27mm; }
.etiquette__code { font-family: var(--mono); font-size: 13pt; font-weight: 700; letter-spacing: .02em; word-break: break-all; }
.etiquette__marque { font-size: 8pt; color: #444; margin-top: 1mm; }

.bon { max-width: 190mm; margin: 0 auto; background: #fff; color: #000; padding: 12mm; }
.bon__tete { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
.bon__signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.bon__signature { border: 1px solid #000; height: 28mm; padding: 4px 6px; font-size: 10pt; }


/* Écran tactile : cases plus grandes encore, sans changer la mise en page. */
@media (pointer: coarse) {
  .bouton--petit { min-height: 44px; }
}

@media print {
  @page { margin: 8mm; }
  body { background: #fff; color: #000; }
  .flanc, .entete, .barre-mobile, .sans-impression { display: none !important; }
  .appli { display: block; }
  .contenu { padding: 0; max-width: none; }
  .carte, .tableau-cadre { border: 0; box-shadow: none; }
  .tableau th { position: static; }
  .planche { gap: 0; }
  .etiquette { border-color: #ddd; }
  a { text-decoration: none; color: #000; }
}

.htmx-request .htmx-indicateur { visibility: visible; }
.htmx-indicateur { visibility: hidden; }


/* Fiche fût */
.fiche-bandeau { background: var(--surface); border-radius: var(--r-3); box-shadow: var(--ombre-2);
  padding: 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fiche-bandeau__statut { font-size: 26px; font-weight: 700; padding: 8px 18px; line-height: 1.2; }
.fiche-bandeau__code { font-size: 30px; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.fiche-bandeau__ligne { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 18px; font-weight: 600; }
.fiche__resume { min-height: 56px; display: flex; align-items: center; cursor: pointer; }
select.fiche__resume { width: 100%; }
.fiche-details > summary { padding: 0 20px; font-weight: 650; font-size: 17px; }
.fiche-action { margin-bottom: 10px; }
.fiche-action > .bouton, .fiche-action > summary { width: 100%; justify-content: center; }
.fiche-historique { margin-top: 12px; }
.fiche-historique > .chrono { margin-top: 12px; }
.fiche-autres { margin-bottom: 10px; }
.fiche-autres > summary { justify-content: center; }
.fiche-autres > .fiche-action { margin-top: 10px; }
.carte--forcage summary { justify-content: center; }

/* Résultats de recherche : liste sobre, cibles tactiles confortables. */
.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.liste-simple a { display: inline-block; padding: 8px 0; }

/* ------------------------------------------------------------ langue */
.selecteur-langue { margin-top: 16px; text-align: center; color: var(--encre-3); }
.selecteur-langue a { color: inherit; }
.selecteur-langue b { color: var(--encre); font-weight: 600; }