/* ==========================================================================
   Plateforme CAVIME — outil de travail quotidien.
   Dense, lisible, calme. Un seul element memorable : la route du camion.
   Identite reprise du configurateur et des maquettes : bleu profond,
   gris acier froid, encre graphite bleutee, jaune de signalisation rare.
   ========================================================================== */

/* Les @font-face sont dans fonts.css, genere depuis les metadonnees Google. */

:root{
  /* Identite */
  --bleu:#0052b7; --bleu-2:#2276d2; --ciel:#48acf0;
  --ardoise:#323945; --ardoise-2:#2e3441; --ardoise-3:#15181d;

  /* Gris acier froid, jamais creme */
  --fond:#f2f4f7; --fond-2:#e9edf3; --carte:#ffffff;
  --encre:#1c2430; --encre-2:#5b6675; --encre-3:#8b95a5;
  --trait:#e3e7ee; --trait-2:#d2d7de;

  /* Jaune de signalisation : le marqueur d'aujourd'hui, le panneau de demo */
  --signal:#f5c518; --signal-fond:#fdf6d8;

  /* Les couleurs d'etat de leur Excel, intouchables */
  --attente:#5b6675; --attente-fond:#eef1f5;
  --chassis:#a15c07; --chassis-fond:#fdf3e2; --chassis-trait:#f0d9ac;
  --materiel:#0052b7; --materiel-fond:#e8f0fb; --materiel-trait:#c3d8f2;
  --parc:#1d7a46; --parc-fond:#e7f4ec; --parc-trait:#bfe3cd;
  --retard:#b42318; --retard-fond:#fdebe9; --retard-trait:#f2c4be;

  --ok:#1d7a46; --ok-fond:#e7f4ec;
  --alerte:#a15c07; --alerte-fond:#fdf3e2;
  --danger:#b42318; --danger-fond:#fdebe9;
  --info:#0052b7; --info-fond:#e8f0fb;

  /* Radios petits sur les controles, un peu plus grands sur les panneaux */
  --r-controle:6px; --r-panneau:10px;
  --ombre:0 1px 2px rgba(21,24,29,.05), 0 4px 14px rgba(21,24,29,.045);
  --ombre-haute:0 10px 34px rgba(21,24,29,.16);

  --texte:'Espace fine','Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --dense:'Espace fine','Barlow Condensed','Barlow',-apple-system,'Segoe UI',sans-serif;

  --barre:56px; --rail:244px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Alpine pose x-cloak sur ce qui ne doit pas apparaitre avant son chargement :
   sans cette regle, les volets et les panneaux clignotent au chargement. */
[x-cloak]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--texte); background:var(--fond); color:var(--encre);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,th{font-family:var(--dense); letter-spacing:.005em}
h1{font-size:25px;font-weight:700;line-height:1.15}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:700}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:var(--texte);font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
table{border-collapse:collapse;width:100%}
img,svg{display:block}
[hidden]{display:none !important}

/* Une icone a toujours une taille. Un SVG sans dimension s'etire a tout
   l'espace disponible dans un conteneur flex ou grid. */
svg.ico{width:16px;height:16px;flex:none}

/* Focus clavier toujours visible */
:focus-visible{outline:2px solid var(--bleu-2);outline-offset:2px;border-radius:3px}

/* Chiffres tabulaires sur les montants, dates et codes */
.code,.num,td.num,th.num{font-variant-numeric:tabular-nums}
.code{letter-spacing:.035em;font-weight:600}

/* -- Mouvement : seulement en reponse a une action ----------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ======================= Ossature ======================= */
.ossature{display:flex;min-height:100vh}

#rail{
  width:var(--rail);min-width:var(--rail);
  background:linear-gradient(180deg,var(--ardoise) 0%,var(--ardoise-3) 100%);
  color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
#rail .marque{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
#rail .marque svg{width:116px;color:#fff}
#rail .marque .sous{
  font-family:var(--dense);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ciel);margin-top:7px;font-weight:700;
}
#rail nav{flex:1;padding:10px 8px;overflow-y:auto}
.rail-groupe{
  font-family:var(--dense);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:#717c8c;padding:14px 12px 5px;font-weight:700;
}
.rail-lien{
  display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:7px;
  color:#c3cad4;font-size:13.5px;font-weight:500;margin-bottom:1px;
  border:1px solid transparent;transition:background .14s,color .14s;
}
.rail-lien:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.rail-lien[aria-current]{background:var(--bleu);color:#fff;font-weight:600}
.rail-lien .ico{width:18px;height:18px;flex:none;opacity:.9}
.rail-lien .compte{
  margin-left:auto;background:rgba(255,255,255,.15);font-size:11px;padding:1px 7px;
  border-radius:20px;font-weight:700;font-variant-numeric:tabular-nums;
}
.rail-lien .compte--chaud{background:var(--retard);color:#fff}
.rail-lien[aria-current] .compte{background:rgba(255,255,255,.26)}
#rail .pied{
  padding:12px 18px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:#8b95a5;line-height:1.5;
}
#rail .pied b{color:#c3cad4;font-weight:600}

#corps{flex:1;display:flex;flex-direction:column;min-width:0}

/* -- Bandeau de maquette, discret et pliable ----------------------------- */
#bandeau{
  background:var(--signal-fond);border-bottom:1px solid #eadfa8;color:#6b5205;
  font-size:12px;display:flex;align-items:center;gap:10px;padding:6px 18px;
}
#bandeau .ico{width:14px;height:14px;flex:none}
#bandeau p{flex:1;min-width:0}
#bandeau button{color:#6b5205;font-size:11.5px;font-weight:600;text-decoration:underline}
#bandeau.plie{padding:3px 18px}
#bandeau.plie p{display:none}

/* -- Barre superieure ---------------------------------------------------- */
#barre{
  height:var(--barre);background:var(--carte);border-bottom:1px solid var(--trait);
  display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:30;
}
#barre .jour{
  font-family:var(--dense);font-weight:700;font-size:14.5px;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
#barre .jour .point{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.fil{font-size:12.5px;color:var(--encre-3);font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fil b{color:var(--encre);font-weight:600}

.recherche{flex:1;max-width:400px;position:relative;margin-left:auto}
.recherche input{
  width:100%;border:1px solid var(--trait-2);border-radius:var(--r-controle);
  padding:7px 11px 7px 32px;font-size:13px;background:var(--fond);transition:border .14s;
}
.recherche input:focus{border-color:var(--bleu-2);background:#fff;outline:none}
.recherche .ico{position:absolute;left:9px;top:8px;width:15px;height:15px;color:var(--encre-3)}
.recherche kbd{
  position:absolute;right:8px;top:7px;font-size:10.5px;color:var(--encre-3);
  border:1px solid var(--trait-2);border-radius:4px;padding:1px 5px;background:#fff;
  font-family:var(--texte);
}

.bouton-ico{
  position:relative;width:34px;height:34px;border-radius:var(--r-controle);
  border:1px solid var(--trait);background:#fff;display:flex;align-items:center;
  justify-content:center;color:var(--encre-2);flex:none;
}
.bouton-ico:hover{border-color:var(--trait-2);background:var(--fond)}
.bouton-ico .ico{width:17px;height:17px}
.bouton-ico .puce{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;
  background:var(--retard);color:#fff;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;padding:0 3px;
}

.qui{display:flex;align-items:center;gap:9px;padding-left:4px;flex:none}
.qui .rond{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--bleu),var(--ciel));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;
}
.qui .nom{line-height:1.2}
.qui .nom b{display:block;font-size:12.5px;font-weight:600}
.qui .nom span{font-size:11px;color:var(--encre-3)}
.qui select{
  border:1px solid var(--trait);border-radius:var(--r-controle);padding:5px 7px;
  font-size:12px;background:#fff;max-width:150px;
}

/* -- Contenu ------------------------------------------------------------- */
#contenu{flex:1;padding:20px 22px 64px;min-width:0}
.large{max-width:1380px;margin:0 auto}
.moyen{max-width:1080px;margin:0 auto}
.etroit{max-width:760px;margin:0 auto}

.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:16px;flex-wrap:wrap}
.tete p.intro{color:var(--encre-2);font-size:13px;margin-top:3px;max-width:680px}
.tete .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ======================= Composants ======================= */
.btn{
  display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-controle);
  font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--trait-2);
  background:#fff;color:var(--encre);transition:background .14s,border-color .14s;
  white-space:nowrap;
}
.btn:hover{background:var(--fond);border-color:#bcc4cf;text-decoration:none}
.btn .ico{width:15px;height:15px;flex:none}
.btn--primaire{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn--primaire:hover{background:#00459c;border-color:#00459c}
.btn--danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn--danger:hover{background:#991b11;border-color:#991b11}
.btn--discret{border-color:transparent;background:transparent;color:var(--encre-2)}
.btn--discret:hover{background:var(--fond-2)}
.btn--petit{padding:5px 10px;font-size:12px}
.btn--grand{padding:12px 20px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-groupe{display:inline-flex;border:1px solid var(--trait-2);border-radius:var(--r-controle);
  overflow:hidden;background:#fff}
.btn-groupe .btn{border:none;border-radius:0;border-right:1px solid var(--trait)}
.btn-groupe .btn:last-child{border-right:none}
.btn-groupe .btn[aria-pressed="true"]{background:var(--bleu);color:#fff}

/* Les tableaux sont a plat sur la page ; seuls les panneaux s'elevent. */
.panneau{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-panneau);
  box-shadow:var(--ombre);
}
.panneau > header{
  padding:12px 15px;border-bottom:1px solid var(--trait);display:flex;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.panneau > header h2,.panneau > header h3{font-size:15px}
.panneau > header p{font-size:12px;color:var(--encre-3);margin-top:1px}
.panneau .corps{padding:15px}
.panneau .pied{padding:11px 15px;border-top:1px solid var(--trait);background:var(--fond)}

.grille{display:grid;gap:14px}
.grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grille--auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(max-width:1180px){.grille--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.grille--2,.grille--3,.grille--4{grid-template-columns:1fr}}

/* -- Compteurs : cliquables, ils filtrent ------------------------------- */
.compteurs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  margin-bottom:16px}
.compteur{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-panneau);
  padding:12px 14px;display:block;color:inherit;position:relative;
  border-left:3px solid var(--trait-2);transition:border-color .14s,box-shadow .14s;
}
/* Les six compteurs du planning restent sur une ligne des 1024 px. */
.compteurs--une-ligne{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1023px){.compteurs--une-ligne{grid-template-columns:repeat(3,minmax(0,1fr))}}
a.compteur:hover{text-decoration:none;box-shadow:var(--ombre);border-color:var(--trait-2)}
.compteur .valeur{
  display:block;font-family:var(--dense);font-size:29px;font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;
}
.compteur .quoi{display:block;font-size:12px;color:var(--encre-2);margin-top:4px;
  line-height:1.35}
.compteur[aria-current]{border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu) inset}
.compteur--parc{border-left-color:var(--parc)} .compteur--parc .valeur{color:var(--parc)}
.compteur--chassis{border-left-color:var(--chassis)} .compteur--chassis .valeur{color:var(--chassis)}
.compteur--materiel{border-left-color:var(--materiel)} .compteur--materiel .valeur{color:var(--materiel)}
.compteur--attente{border-left-color:var(--attente)} .compteur--attente .valeur{color:var(--attente)}
.compteur--retard{border-left-color:var(--retard)} .compteur--retard .valeur{color:var(--retard)}
.compteur--neutre .valeur{color:var(--encre)}

/* -- Pastilles d'etat, rondes ------------------------------------------- */
.pastille{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;
  font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.5;
  background:var(--attente-fond);color:var(--attente);border:1px solid transparent;
}
.pastille--parc{background:var(--parc-fond);color:var(--parc);border-color:var(--parc-trait)}
.pastille--chassis{background:var(--chassis-fond);color:var(--chassis);border-color:var(--chassis-trait)}
.pastille--materiel{background:var(--materiel-fond);color:var(--materiel);border-color:var(--materiel-trait)}
.pastille--attente{background:var(--attente-fond);color:var(--attente);border-color:#dde2ea}
.pastille--retard{background:var(--retard-fond);color:var(--retard);border-color:var(--retard-trait)}
.pastille--ambre{background:var(--chassis-fond);color:var(--chassis);border-color:var(--chassis-trait)}
.pastille--ok{background:var(--ok-fond);color:var(--ok);border-color:var(--parc-trait)}
.pastille--info{background:var(--info-fond);color:var(--info);border-color:var(--materiel-trait)}
.pastille--signal{background:var(--signal-fond);color:#6b5205;border-color:#eadfa8}
.pastille--sombre{background:var(--ardoise);color:#fff}
.pastille--creux{background:#fff;border-color:var(--trait-2);color:var(--encre-2)}
.pastille .ico{width:12px;height:12px}

/* -- Tableaux denses ---------------------------------------------------- */
.cadre-table{overflow:auto;border:1px solid var(--trait);border-radius:var(--r-panneau);
  background:var(--carte)}
.cadre-table--fige{max-height:calc(100vh - 290px)}
table.donnees{font-size:12.5px;min-width:100%}
table.donnees th{
  font-family:var(--dense);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.055em;color:var(--encre-2);text-align:left;padding:8px 9px;
  background:var(--fond);border-bottom:1px solid var(--trait-2);white-space:nowrap;
  position:sticky;top:0;z-index:5;
}
table.donnees th.num,table.donnees td.num{text-align:right;font-variant-numeric:tabular-nums}
table.donnees td{padding:7px 9px;border-bottom:1px solid #eef1f5;vertical-align:top}
table.donnees tbody tr:hover{background:#f7f9fc}
table.donnees tbody tr:last-child td{border-bottom:none}
table.donnees .colle{position:sticky;left:0;background:var(--carte);z-index:4}
table.donnees tbody tr:hover .colle{background:#f7f9fc}
table.donnees th.colle{z-index:6;background:var(--fond)}
table.donnees tr.en-retard td.date-retard{color:var(--retard);font-weight:600}
table.donnees td.date-ambre{color:var(--chassis);font-weight:600}
table.donnees td.vide{color:var(--encre-3)}
table.donnees .a-definir{
  background:var(--signal-fond);color:#6b5205;font-weight:600;padding:1px 6px;
  border-radius:4px;font-size:11.5px;
}
table.compacte td,table.compacte th{padding:5px 8px}

/* Le planning : une ligne de texte par affaire, comme leur Excel, pour
   qu'une douzaine d'affaires tiennent a l'ecran a 1440 px. */
table.planning td{padding:6px 8px;line-height:1.35;white-space:nowrap;vertical-align:middle}
table.planning .pastille{padding:0 7px;font-size:11px;line-height:1.45}
.nowrap{white-space:nowrap}
.ligne-carrosserie{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ligne-carrosserie b{max-width:120px;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.une-ligne{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.intertitre td{background:var(--fond-2);padding:6px 8px;border-bottom:1px solid var(--trait-2)}
tr.intertitre .colle-texte{position:sticky;left:8px;display:inline-flex;align-items:center;
  gap:7px;font-family:var(--dense);font-weight:700;font-size:13px;color:var(--encre)}
tr.intertitre button.colle-texte{cursor:pointer;background:none;border:none;padding:0}
tr.intertitre--repli td{background:#fff}
table.donnees tbody tr.intertitre:hover{background:transparent}
table.lignes-claires td{border-bottom:1px solid var(--trait)}

/* La ligne s'illumine un instant quand elle vient d'etre mise a jour */
@keyframes eclair{0%{background:#fff7d6}100%{background:transparent}}
.maj{animation:eclair 1.4s ease-out}

/* -- Filtres en puces --------------------------------------------------- */
.filtres{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.puce-filtre{
  border:1px solid var(--trait-2);background:#fff;border-radius:999px;padding:4px 12px;
  font-size:12.5px;font-weight:500;color:var(--encre-2);white-space:nowrap;
}
.puce-filtre:hover{border-color:#bcc4cf;background:var(--fond);text-decoration:none}
.puce-filtre[aria-pressed="true"],.puce-filtre[aria-current]{
  background:var(--ardoise);border-color:var(--ardoise);color:#fff;font-weight:600;
}
.filtres select,.filtres input[type="search"],.filtres input[type="text"]{
  border:1px solid var(--trait-2);border-radius:var(--r-controle);padding:5px 9px;
  font-size:12.5px;background:#fff;max-width:200px;
}
.filtres .separateur{width:1px;height:20px;background:var(--trait-2);margin:0 3px}

/* -- Etats vides : ils disent quoi faire -------------------------------- */
.vide{
  text-align:center;padding:40px 24px;color:var(--encre-2);
}
.vide .ico{width:30px;height:30px;margin:0 auto 10px;color:var(--encre-3)}
.vide b{display:block;font-size:14.5px;color:var(--encre);margin-bottom:4px;
  font-family:var(--dense)}
.vide p{font-size:13px;max-width:420px;margin:0 auto}

/* -- Fiche affaire : la route du camion --------------------------------- */
.route{
  position:relative;padding:18px 16px 12px;background:var(--carte);
  border:1px solid var(--trait);border-radius:var(--r-panneau);box-shadow:var(--ombre);
  overflow:hidden;
}
.route ol{display:flex;list-style:none;gap:0;position:relative;z-index:2}
.route li{flex:1;text-align:center;position:relative;min-width:0}
.route li .rond{
  width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--trait-2);
  margin:0 auto 7px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--encre-3);position:relative;z-index:2;
  transition:background .3s,border-color .3s,color .3s;
}
.route li .quoi{font-size:11px;color:var(--encre-3);line-height:1.3;font-weight:500;
  padding:0 2px}
.route li::before{
  content:"";position:absolute;top:13px;left:0;right:50%;height:2px;
  background:var(--trait-2);z-index:1;
}
.route li::after{
  content:"";position:absolute;top:13px;left:50%;right:0;height:2px;
  background:var(--trait-2);z-index:1;
}
.route li:first-child::before,.route li:last-child::after{display:none}
.route li.faite .rond{background:var(--parc);border-color:var(--parc);color:#fff}
.route li.faite::before,.route li.faite::after{background:var(--parc)}
.route li.courante::before{background:var(--parc)}
.route li.courante .rond{
  background:var(--bleu);border-color:var(--bleu);color:#fff;
  box-shadow:0 0 0 4px rgba(0,82,183,.15);
}
.route li.courante .quoi{color:var(--bleu);font-weight:700}
.route li.faite .quoi{color:var(--encre-2)}
/* Franchie mais incomplete : le camion est passe, un ARC manque encore. */
.route li.a-reprendre::before,.route li.a-reprendre::after{background:var(--parc)}
.route li.a-reprendre .rond{background:#fff;border-color:var(--chassis);color:var(--chassis);
  font-weight:800}
.route li.a-reprendre .quoi{color:var(--chassis);font-weight:600}
/* Deja la, en avance sur le camion : le materiel sur parc avant le chassis. */
.route li.anticipee .rond{background:var(--parc-fond);border-color:var(--parc);color:var(--parc)}
.route li.anticipee .quoi{color:var(--parc)}
/* Le camion, pose sur l'etape courante */
.route .camion{
  position:absolute;top:-17px;left:0;width:34px;height:22px;color:var(--bleu);
  transition:left .55s cubic-bezier(.33,1,.68,1);z-index:3;display:block;
}
.route .camion svg{width:34px;height:22px;display:block}
.route .piste{position:relative;height:0}
@media (prefers-reduced-motion:reduce){.route .camion{transition:none}}

/* -- Onglets ------------------------------------------------------------ */
.onglets{display:flex;gap:2px;border-bottom:1px solid var(--trait);margin-bottom:16px;
  overflow-x:auto}
.onglet{
  padding:9px 14px;font-size:13px;font-weight:600;color:var(--encre-2);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.onglet:hover{color:var(--encre);text-decoration:none;background:var(--fond-2)}
.onglet[aria-selected="true"]{color:var(--bleu);border-bottom-color:var(--bleu)}
.onglet .compte{font-size:11px;color:var(--encre-3);font-weight:600;margin-left:3px}

/* -- Definitions (cle / valeur) ----------------------------------------- */
.defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 18px}
.def dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--encre-3);
  font-weight:700;font-family:var(--dense)}
.def dd{font-size:13.5px;font-weight:500;margin-top:1px}
.def dd.gros{font-size:17px;font-weight:700;font-family:var(--dense)}
.marque-ws{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3);
  border:1px solid var(--trait-2);border-radius:3px;padding:0 4px;font-weight:600;
  vertical-align:middle;white-space:nowrap;
}

/* -- Avertissements et encarts ------------------------------------------ */
.encart{
  border-radius:var(--r-controle);padding:10px 13px;font-size:12.5px;display:flex;
  gap:9px;align-items:flex-start;border:1px solid transparent;line-height:1.45;
}
.encart .ico{width:16px;height:16px;flex:none;margin-top:1px}
.encart--info{background:var(--info-fond);color:#0b3f87;border-color:var(--materiel-trait)}
.encart--alerte{background:var(--alerte-fond);color:#7a4a06;border-color:var(--chassis-trait)}
.encart--danger{background:var(--danger-fond);color:#8f1d14;border-color:var(--retard-trait)}
.encart--ok{background:var(--ok-fond);color:#145c33;border-color:var(--parc-trait)}
.encart--neutre{background:var(--fond);color:var(--encre-2);border-color:var(--trait)}
.encart b{font-weight:700}

/* -- Toasts : ils reprennent le verbe du bouton ------------------------- */
#toasts{position:fixed;bottom:18px;right:18px;z-index:200;display:flex;
  flex-direction:column;gap:8px;max-width:360px}
.toast{
  background:var(--ardoise);color:#fff;border-radius:var(--r-controle);padding:11px 14px;
  font-size:13px;font-weight:500;box-shadow:var(--ombre-haute);display:flex;gap:9px;
  align-items:flex-start;animation:monte .22s ease-out;
}
.toast .ico{width:16px;height:16px;flex:none;margin-top:1px;color:var(--ciel)}
.toast--ok .ico{color:#6ee7a8}
.toast--alerte .ico{color:var(--signal)}
.toast b{font-weight:700;display:block}
.toast small{display:block;opacity:.8;font-size:11.5px;margin-top:2px}
@keyframes monte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* -- Journal ------------------------------------------------------------ */
.journal{list-style:none;display:flex;flex-direction:column}
.journal li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--trait);
  font-size:12.5px;align-items:flex-start}
.journal li:last-child{border-bottom:none}
.journal .quand{color:var(--encre-3);font-size:11.5px;width:58px;flex:none;
  font-variant-numeric:tabular-nums;padding-top:2px}
.journal .rond{
  width:24px;height:24px;border-radius:50%;background:var(--fond-2);color:var(--encre-2);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  flex:none;
}
.journal .quoi{flex:1;min-width:0;line-height:1.45}
.journal .quoi b{font-weight:600}
.journal .quoi small{display:block;color:var(--encre-3);font-size:11.5px}

/* -- Cadres tablette et telephone --------------------------------------- */
.appareil{margin:0 auto;position:relative}
.appareil--tablette{width:1000px;max-width:100%}
.appareil--telephone{width:390px;max-width:100%}
.appareil .coque{
  background:var(--ardoise-3);border-radius:26px;padding:16px 14px;
  box-shadow:var(--ombre-haute);position:relative;
}
.appareil--telephone .coque{border-radius:34px;padding:12px 10px 20px}
.appareil .ecran{
  background:#fff;border-radius:12px;overflow:hidden;position:relative;
}
.appareil--telephone .ecran{border-radius:24px}
.appareil .coque::before{
  content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:52px;height:4px;border-radius:3px;background:rgba(255,255,255,.18);
}
.appareil--telephone .coque::after{
  content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:104px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);
}
.appareil .legende{text-align:center;font-size:12px;color:var(--encre-3);margin-top:9px}
/* Sur un vrai appareil, on retire le cadre dessine. */
.nu .coque{background:none;padding:0;box-shadow:none;border-radius:0}
.nu .coque::before,.nu .coque::after{display:none}
.nu .ecran{border-radius:0}
.nu .legende{display:none}

/* -- Formulaire tablette ------------------------------------------------ */
.pas{display:flex;gap:4px;padding:11px 14px;background:var(--fond);
  border-bottom:1px solid var(--trait);overflow-x:auto}
.pas span{
  font-size:11.5px;font-weight:600;color:var(--encre-3);padding:4px 9px;border-radius:999px;
  white-space:nowrap;display:flex;align-items:center;gap:5px;
}
.pas span.fait{color:var(--parc)}
.pas span.courant{background:var(--bleu);color:#fff}
.champ{margin-bottom:14px}
.champ > label,.champ > .etiquette{
  display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.045em;color:var(--encre-2);margin-bottom:5px;font-family:var(--dense);
}
.champ input[type=text],.champ input[type=number],.champ input[type=search],
.champ select,.champ textarea{
  width:100%;border:1px solid var(--trait-2);border-radius:var(--r-controle);
  padding:9px 11px;font-size:14px;background:#fff;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  border-color:var(--bleu-2);outline:none;box-shadow:0 0 0 3px rgba(34,118,210,.12)}
.champ .aide{font-size:11.5px;color:var(--encre-3);margin-top:4px}
.choix{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.choix button,.choix label{
  border:1px solid var(--trait-2);border-radius:var(--r-controle);padding:12px 13px;
  background:#fff;text-align:left;font-size:13.5px;font-weight:600;display:flex;
  align-items:center;gap:9px;
}
.choix button:hover,.choix label:hover{border-color:var(--bleu-2);background:#f7fafe}
.choix button[aria-pressed="true"],.choix input:checked + label{
  border-color:var(--bleu);background:var(--materiel-fond);color:var(--bleu)}
.cases{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.case{display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 9px;
  border:1px solid var(--trait);border-radius:var(--r-controle);background:#fff}
.case input{width:17px;height:17px;accent-color:var(--bleu);flex:none}
.case.coche{border-color:var(--parc-trait);background:var(--parc-fond)}

/* -- Photos ------------------------------------------------------------- */
.photos{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.photo{
  border:1px solid var(--trait-2);border-radius:var(--r-controle);overflow:hidden;
  background:var(--fond);position:relative;
}
.photo .vue{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:#dfe5ec;position:relative;overflow:hidden}
.photo .vue svg{width:100%;height:100%}
.photo .vue img{width:100%;height:100%;object-fit:cover}
.photo .nom{font-size:11.5px;font-weight:600;padding:6px 8px;display:flex;
  justify-content:space-between;gap:6px;align-items:center;background:#fff}
.photo .filigrane{
  position:absolute;bottom:4px;right:5px;font-size:9.5px;color:#fff;font-weight:600;
  background:rgba(21,24,29,.6);padding:1px 5px;border-radius:3px;
  font-variant-numeric:tabular-nums;
}
.photo--manquante .vue{background:repeating-linear-gradient(45deg,#e6eaf0,#e6eaf0 7px,#dde3ea 7px,#dde3ea 14px)}
.photo--manquante{border-style:dashed;border-color:var(--retard-trait)}
.photo--obligatoire .nom::after{content:"obligatoire";font-size:9.5px;color:var(--retard);
  font-weight:700;text-transform:uppercase}

/* -- Comparaison de VIN, caractere par caractere ------------------------ */
.vin-compare{display:flex;gap:2px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.vin-compare span{
  width:21px;height:27px;border:1px solid var(--trait-2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:#fff;
}
.vin-compare span.different{background:var(--retard-fond);border-color:var(--retard);
  color:var(--retard)}
.vin-compare span.vide{background:var(--fond);color:var(--encre-3)}

/* -- Cahier d'OR : colonnes --------------------------------------------- */
/* Cinq colonnes qui tiennent entre 1280 et 1440 px, la largeur de partage
   d'ecran. Pas de min-width : elle annulerait le defilement interne et
   pousserait la page entiere vers la droite. */
.cahier{display:grid;gap:11px;grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:start;overflow-x:auto;padding-bottom:8px}
@media(max-width:1100px){
  .cahier{grid-template-columns:repeat(5,minmax(208px,1fr));min-width:1096px}
}
.colonne{background:var(--fond-2);border-radius:var(--r-panneau);padding:9px;min-height:140px}
.colonne > header{display:flex;align-items:center;justify-content:space-between;
  gap:7px;padding:2px 4px 9px}
.colonne > header h3{font-size:12.5px;line-height:1.25}
.colonne > header .compte{
  font-size:11.5px;font-weight:700;background:#fff;border:1px solid var(--trait-2);
  border-radius:999px;padding:1px 8px;flex:none;
}
.colonne.cible{outline:2px dashed var(--bleu-2);outline-offset:-3px;background:#eaf2fd}
/* Une colonne qui porte beaucoup de cartes defile sur elle-meme : le tableau
   garde la hauteur d'un ecran, comme un vrai tableau mural. */
.colonne--defilante{max-height:calc(100vh - 320px);overflow-y:auto}
.colonne--defilante > header{position:sticky;top:0;background:var(--fond-2);z-index:2;
  margin:-9px -9px 0;padding:11px 13px 9px;border-radius:var(--r-panneau) var(--r-panneau) 0 0}
.carte-or{
  background:#fff;border:1px solid var(--trait);border-radius:var(--r-controle);
  padding:10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(21,24,29,.04);cursor:grab;
}
.carte-or:last-child{margin-bottom:0}
.carte-or .or{font-family:var(--dense);font-weight:700;font-size:14.5px}
.carte-or .veh{font-size:12px;color:var(--encre-2);margin-top:1px}
.carte-or .meta{font-size:11px;color:var(--encre-3);margin-top:5px;display:flex;
  gap:8px;flex-wrap:wrap}
.carte-or .propose{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--trait-2);font-size:12px;
}
.carte-or .propose b{font-weight:700}
.carte-or .propose .motif{color:var(--encre-3);font-size:11.5px;display:block;margin-top:1px}
.carte-or .boutons{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.carte-or.sortable-ghost{opacity:.4}
.carte-or.ambigu{border-left:3px solid var(--signal)}

/* -- Graphiques --------------------------------------------------------- */
.graphe{position:relative;width:100%}
.graphe canvas{max-width:100%}

/* -- Barre de charge atelier -------------------------------------------- */
.charge{display:flex;align-items:flex-end;gap:10px;height:170px;padding:0 4px}
.charge .barre{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;height:100%;position:relative}
.charge .tige{width:100%;max-width:54px;background:var(--materiel-fond);
  border:1px solid var(--materiel-trait);border-radius:4px 4px 0 0;position:relative;
  display:flex;align-items:flex-end;justify-content:center;transition:height .3s}
.charge .tige .pleine{width:100%;background:var(--bleu);border-radius:3px 3px 0 0}
.charge .tige.trop{border-color:var(--retard)}
.charge .tige.trop .pleine{background:var(--retard)}
.charge .sem{font-size:11px;color:var(--encre-2);font-weight:600;font-family:var(--dense)}
.charge .capacite{position:absolute;left:0;right:0;border-top:2px dashed var(--encre-3)}

/* -- Panneau de demo ---------------------------------------------------- */
#panneau-demo{
  position:fixed;right:16px;bottom:16px;width:330px;z-index:180;
  background:var(--ardoise);color:#fff;border-radius:var(--r-panneau);
  box-shadow:var(--ombre-haute);border:1px solid rgba(255,255,255,.1);overflow:hidden;
}
#panneau-demo header{
  padding:11px 13px;display:flex;align-items:center;justify-content:space-between;
  gap:9px;border-bottom:1px solid rgba(255,255,255,.1);
}
#panneau-demo header b{font-family:var(--dense);font-size:14px;display:flex;
  align-items:center;gap:7px}
#panneau-demo header .ico{width:15px;height:15px;color:var(--signal)}
#panneau-demo header button{color:#c3cad4}
#panneau-demo .corps{padding:10px 11px;display:flex;flex-direction:column;gap:6px}
#panneau-demo .evenement{
  display:flex;gap:9px;align-items:flex-start;text-align:left;padding:9px 10px;
  border-radius:var(--r-controle);background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.08);font-size:12.5px;width:100%;
}
#panneau-demo .evenement:hover{background:rgba(255,255,255,.12);border-color:var(--signal)}
#panneau-demo .evenement .n{
  width:19px;height:19px;border-radius:50%;background:var(--signal);color:#3c2e00;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex:none;margin-top:1px;
}
#panneau-demo .evenement b{display:block;font-weight:600}
#panneau-demo .evenement small{color:#aab3c0;font-size:11px;display:block;margin-top:1px}
#panneau-demo .evenement:disabled{opacity:.5}
#panneau-demo .pied{padding:9px 12px;border-top:1px solid rgba(255,255,255,.1);
  font-size:11px;color:#8b95a5}

/* -- Recherche globale (Ctrl+K) ----------------------------------------- */
#palette{
  position:fixed;inset:0;background:rgba(21,24,29,.45);z-index:300;display:flex;
  align-items:flex-start;justify-content:center;padding-top:9vh;
}
#palette .boite{
  width:660px;max-width:94vw;background:#fff;border-radius:12px;
  box-shadow:var(--ombre-haute);overflow:hidden;
}
#palette input{
  width:100%;border:none;border-bottom:1px solid var(--trait);padding:15px 17px;
  font-size:16px;outline:none;
}
#palette .resultats{max-height:58vh;overflow-y:auto}
#palette .resultat{
  display:flex;gap:11px;align-items:center;padding:10px 16px;font-size:13px;
  border-bottom:1px solid var(--trait);color:inherit;
}
#palette .resultat:hover,#palette .resultat.vise{background:var(--materiel-fond);
  text-decoration:none}
#palette .resultat .ico{width:16px;height:16px;color:var(--encre-3);flex:none}
#palette .resultat .quoi{flex:1;min-width:0}
#palette .resultat .quoi b{font-weight:600;display:block}
#palette .resultat .quoi small{color:var(--encre-3);font-size:11.5px}
#palette .groupe{
  font-family:var(--dense);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--encre-3);padding:9px 16px 4px;font-weight:700;
  background:var(--fond);
}
#palette .indice{padding:9px 16px;font-size:11.5px;color:var(--encre-3);
  background:var(--fond);border-top:1px solid var(--trait)}

/* -- Cloche ------------------------------------------------------------- */
.volet{
  position:absolute;right:0;top:calc(100% + 7px);width:380px;max-width:92vw;
  background:#fff;border:1px solid var(--trait);border-radius:var(--r-panneau);
  box-shadow:var(--ombre-haute);z-index:60;overflow:hidden;
}
.volet header{padding:11px 14px;border-bottom:1px solid var(--trait);display:flex;
  justify-content:space-between;align-items:center;background:var(--fond)}
.volet header b{font-family:var(--dense);font-size:14px}
.volet .liste{max-height:420px;overflow-y:auto}
.volet .item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--trait);
  font-size:12.5px;color:inherit;align-items:flex-start}
.volet .item:hover{background:var(--fond);text-decoration:none}
.volet .item:last-child{border-bottom:none}
.volet .item .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--encre-3)}
.volet .item b{display:block;font-weight:600}
.volet .item small{color:var(--encre-3);font-size:11.5px;display:block;margin-top:1px}
.volet .item.neuve{background:#f7fafe}

/* -- Entree ------------------------------------------------------------- */
#entree{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;
  background:linear-gradient(170deg,var(--ardoise) 0%,var(--ardoise-3) 100%);
}
#entree .boite{width:100%;max-width:880px}
#entree .marque{text-align:center;margin-bottom:6px}
#entree .marque svg{width:168px;margin:0 auto;color:#fff}
#entree .sous{
  text-align:center;color:var(--ciel);font-family:var(--dense);font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-bottom:26px;
}
#entree h1{color:#fff;text-align:center;font-size:22px;margin-bottom:5px}
#entree .jour{text-align:center;color:#aab3c0;font-size:13px;margin-bottom:24px}
#entree .profils{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(192px,1fr))}
#entree .profil{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-panneau);padding:14px;color:#fff;display:flex;gap:11px;
  align-items:center;text-align:left;transition:background .15s,border-color .15s;
}
#entree .profil:hover{background:rgba(255,255,255,.14);border-color:var(--ciel);
  text-decoration:none}
#entree .profil .rond{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--bleu),var(--ciel));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
}
#entree .profil b{display:block;font-size:14px;font-weight:600}
#entree .profil small{color:#aab3c0;font-size:11.5px}
#entree .note{text-align:center;color:#717c8c;font-size:11.5px;margin-top:22px;
  line-height:1.6}

/* -- Impression A4 ------------------------------------------------------ */
.feuille{
  background:#fff;width:210mm;min-height:297mm;padding:14mm 15mm;margin:0 auto 10mm;
  box-shadow:var(--ombre);font-size:11px;color:#000;
}
.feuille h1{font-size:17px} .feuille h2{font-size:14px} .feuille h3{font-size:12px}
.feuille table{font-size:10px}
.feuille table th,.feuille table td{border:1px solid #333;padding:3px 5px}
.feuille .entete{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid #000;padding-bottom:7px;margin-bottom:11px}
.feuille .entete svg{width:120px;color:#000}
.feuille .cases-sig{display:flex;gap:9px;margin-top:11px}
.feuille .case-sig{flex:1;border:1px solid #333;height:62px;padding:3px 5px;font-size:9px}
/* L'etiquette d'OR, toujours dans un apercu ou sur une feuille : le nom
   .etiquette sert aussi de libelle dans les formulaires. */
.etiquettes-apercu .etiquette,.feuille .etiquette{
  width:62mm;border:1px solid #000;padding:3mm;display:inline-block;margin:2mm;
  vertical-align:top;background:#fff;
}
.etiquettes-apercu .etiquette .or,.feuille .etiquette .or{
  font-family:var(--dense);font-size:20px;font-weight:700;line-height:1}
.etiquettes-apercu .etiquette .quoi,.feuille .etiquette .quoi{
  font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#444;
  margin-top:1mm}
.etiquettes-apercu .etiquette .veh,.feuille .etiquette .veh{
  font-size:11px;font-weight:600;margin-top:1mm}
.etiquettes-apercu .etiquette :is(svg,canvas,img),
.feuille .etiquette :is(svg,canvas,img){margin-top:2mm;max-width:100%}

@media print{
  #rail,#barre,#bandeau,#panneau-demo,#toasts,.sans-impression{display:none !important}
  body{background:#fff}
  #contenu{padding:0}
  .feuille{box-shadow:none;margin:0;width:auto;min-height:0;padding:0}
  .saut{page-break-after:always}
  .cadre-table{border:none;max-height:none}
  table.donnees th{position:static}
}

/* -- Utilitaires -------------------------------------------------------- */
.muet{color:var(--encre-3)}
.gras{font-weight:600}
.petit{font-size:12px}
.minuscule{font-size:11px}
.droite{text-align:right}
.centre{text-align:center}
.rien{display:none}
.entre{display:flex;align-items:center;justify-content:space-between;gap:11px}
.rang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rang--serre{gap:5px}
.pile{display:flex;flex-direction:column;gap:11px}
.pile--serre{gap:6px}
.mt{margin-top:14px} .mt-l{margin-top:22px} .mb{margin-bottom:14px}
.coupe{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.retard{color:var(--retard);font-weight:600}
.ambre{color:var(--chassis);font-weight:600}
/* Texte reserve aux lecteurs d'ecran. Il doit rester hors du flux, sinon il
   decale les champs qu'il annonce ; la marge negative et le rognage
   l'empechent d'agrandir la zone de defilement. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Chargement HTMX : le curseur dit que ca travaille */
.htmx-request{cursor:progress}
.htmx-indicator{opacity:0;transition:opacity .2s}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

.bouton-menu{display:none;flex:none;width:38px;height:38px;border:1px solid var(--trait-2);border-radius:9px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;margin-right:10px;color:var(--encre)}
@media(max-width:1000px){
  .bouton-menu{display:inline-flex}
  #rail{position:fixed;left:-100%;transition:left .2s;z-index:100}
  #rail.ouvert{box-shadow:0 0 0 100vmax rgba(18,21,26,.35)}
  #rail.ouvert{left:0}
  .recherche{max-width:none}
  #contenu{padding:14px}
}

/* -- Acces : connexion, mot de passe ----------------------------------- */
#acces{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--fond)}
#acces .acces-marque{
  position:relative;overflow:hidden;color:#fff;padding:56px 64px;display:flex;flex-direction:column;
  justify-content:center;background:linear-gradient(160deg,var(--ardoise) 0%,var(--ardoise-3) 100%);
}
#acces .acces-marque::after{
  content:"";position:absolute;right:-180px;bottom:-200px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(72,172,240,.22) 0%,rgba(72,172,240,0) 68%);pointer-events:none;
}
#acces .logo svg{width:190px;color:#fff;display:block}
#acces .sous{color:var(--ciel);font-family:var(--dense);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;margin:8px 0 40px}
#acces .accroche{font-size:27px;line-height:1.25;font-weight:600;max-width:440px;margin-bottom:30px}
#acces .points{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:420px}
#acces .points li{display:flex;gap:12px;align-items:center;color:#c9d1dc;font-size:14.5px}
#acces .points .ico{width:34px;height:34px;padding:8px;border-radius:9px;flex:none;color:var(--ciel);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
#acces .pied{position:absolute;left:64px;bottom:28px;color:#717c8c;font-size:12px}

#acces .acces-carte{display:flex;align-items:center;justify-content:center;padding:40px 24px}
#acces .carte{width:100%;max-width:400px}
#acces h1{font-size:26px;margin-bottom:6px;color:var(--encre)}
#acces .intro{color:var(--encre-2);font-size:14px;line-height:1.55;margin-bottom:26px}

.acces-champ{margin-bottom:16px}
.acces-champ label{display:block;font-size:13px;font-weight:600;color:var(--encre);margin-bottom:6px}
.acces-champ .saisie{position:relative;display:flex;align-items:center}
.acces-champ .saisie > .ico{position:absolute;left:13px;width:17px;height:17px;color:var(--encre-3);pointer-events:none}
.acces-champ input{
  width:100%;height:46px;padding:0 44px 0 40px;font:inherit;font-size:15px;color:var(--encre);
  background:var(--carte);border:1px solid var(--trait-2);border-radius:8px;
  transition:border-color .15s,box-shadow .15s;
}
.acces-champ input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,82,183,.14)}
.acces-champ.en-erreur input{border-color:var(--danger)}
.acces-champ .erreur-champ{color:var(--danger);font-size:12.5px;margin-top:6px;line-height:1.4}
.voir-mdp{position:absolute;right:6px;width:34px;height:34px;border:0;background:none;border-radius:6px;
  color:var(--encre-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.voir-mdp:hover{color:var(--encre);background:var(--fond-2)}
.voir-mdp .ico{width:17px;height:17px}

.acces-ligne{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 22px;font-size:13.5px}
.acces-ligne .case{display:flex;gap:8px;align-items:center;color:var(--encre-2);cursor:pointer;
  border:0;background:none;padding:0;box-shadow:none}
.acces-ligne .case input{width:16px;height:16px;accent-color:var(--bleu)}
.acces-bouton{width:100%;justify-content:center;height:48px;font-weight:600}
.acces-bouton .ico{width:17px;height:17px}
.acces-bouton.en-cours{opacity:.7;cursor:progress}

.acces-message{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:8px;
  font-size:13.5px;line-height:1.45;margin-bottom:18px;background:var(--ok-fond);color:var(--ok)}
.acces-message .ico{width:17px;height:17px;flex:none;margin-top:1px}
.acces-message.erreur{background:var(--danger-fond);color:var(--danger)}

.acces-etat{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--info-fond);color:var(--bleu);margin-bottom:18px}
.acces-etat .ico{width:26px;height:26px}
.acces-etat.ok{background:var(--ok-fond);color:var(--ok)}
.acces-etat.alerte{background:var(--alerte-fond);color:var(--alerte)}

#acces .retour{margin-top:20px;text-align:center;font-size:13.5px}
#acces .retour a,#acces .retour .lien{display:inline-flex;gap:6px;align-items:center;color:var(--encre-2);
  background:none;border:0;font:inherit;cursor:pointer}
#acces .retour a:hover,#acces .retour .lien:hover{color:var(--bleu)}
#acces .retour .ico{width:15px;height:15px}

@media (max-width:860px){
  #acces{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  #acces .acces-marque{padding:28px 22px 26px}
  #acces .logo svg{width:140px}
  #acces .sous{margin:6px 0 0}
  #acces .accroche,#acces .points,#acces .pied{display:none}
  #acces .acces-carte{align-items:flex-start;padding:30px 18px 40px}
}

/* -- Barre : le compte connecte ----------------------------------------- */
#barre .compte-actions{display:flex;gap:4px;align-items:center}
#barre .compte-actions form{display:inline}
#barre .vu-comme{font-size:11.5px;color:var(--alerte);background:var(--alerte-fond);border-radius:999px;
  padding:3px 9px;white-space:nowrap}

/* ======================= Habillage (novembre 2026) =======================
   Une couche par-dessus l'ossature : profondeur, couleur et relief. Les
   structures et les classes restent celles du dessus. */
:root{--r-panneau:14px;--r-controle:8px;
  --ombre:0 1px 2px rgba(21,24,29,.04),0 8px 26px rgba(21,24,29,.06);
  --ombre-survol:0 2px 4px rgba(21,24,29,.05),0 14px 34px rgba(21,24,29,.10)}

body{background:
  radial-gradient(1100px 560px at 105% -8%,rgba(72,172,240,.13),transparent 62%),
  radial-gradient(900px 520px at -12% 108%,rgba(0,82,183,.07),transparent 60%),
  var(--fond);background-attachment:fixed}

/* -- Rail ----------------------------------------------------------------- */
#rail{background:linear-gradient(188deg,#2c3443 0%,#1c212b 52%,#12151a 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05);overflow:hidden}
#rail::before{content:"";position:absolute;inset:-120px auto auto -90px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,rgba(72,172,240,.16),transparent 70%);pointer-events:none}
#rail .marque{position:relative;padding:22px 20px 18px}
#rail .marque svg{width:128px}
.rail-groupe{color:#8a9ab0;padding:18px 12px 6px}
.rail-lien{position:relative;padding:9px 12px;border-radius:10px;color:#cbd3de;
  transition:background .16s,color .16s,transform .16s}
.rail-lien:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
.rail-lien .ico{opacity:.85}
.rail-lien[aria-current]{background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-2) 100%);
  box-shadow:0 8px 20px rgba(0,82,183,.38),inset 0 1px 0 rgba(255,255,255,.18);transform:none}
.rail-lien[aria-current] .ico{opacity:1}
#rail .pied{position:relative;display:block}
#rail .pied .voyant{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  background:#34c77b;box-shadow:0 0 0 3px rgba(52,199,123,.18);vertical-align:1px}
#rail .pied--retard .voyant{background:#f0a020;box-shadow:0 0 0 3px rgba(240,160,32,.2)}
#rail .pied--retard{color:#f3c47a}

/* -- Barre ----------------------------------------------------------------- */
#barre{background:rgba(255,255,255,.80);border-bottom:0;
  -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);
  box-shadow:0 1px 0 rgba(21,24,29,.06),0 6px 22px rgba(21,24,29,.04)}
#barre .qui .rond{background:linear-gradient(135deg,var(--bleu),var(--ciel));
  box-shadow:0 4px 12px rgba(0,82,183,.28)}

/* -- Titres ---------------------------------------------------------------- */
#contenu h1{font-size:30px;letter-spacing:-.005em;color:var(--ardoise-3)}

/* -- Panneaux -------------------------------------------------------------- */
.panneau{border-color:rgba(21,24,29,.06);transition:box-shadow .2s}
.panneau > header{background:linear-gradient(180deg,#fff 0%,#fafbfd 100%);
  border-bottom-color:rgba(21,24,29,.06);border-radius:var(--r-panneau) var(--r-panneau) 0 0;padding:14px 18px}
.panneau > header h2,.panneau > header h3{font-size:16px;color:var(--ardoise-3)}
.panneau .corps{padding:18px}

/* -- Compteurs : une couleur par etat, un liseré en haut, du relief au survol */
.compteurs{gap:12px;margin-bottom:20px}
.compteur{--accent:var(--trait-2);--teinte:#fff;border:1px solid rgba(21,24,29,.06);border-left-width:1px;
  border-left-color:rgba(21,24,29,.06);border-radius:var(--r-panneau);padding:16px 16px 14px;overflow:hidden;
  background:linear-gradient(165deg,var(--teinte) 0%,#fff 62%);box-shadow:var(--ombre);
  transition:transform .18s,box-shadow .18s}
.compteur::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.compteur::after{content:"";position:absolute;right:-28px;top:-28px;width:92px;height:92px;border-radius:50%;
  background:var(--accent);opacity:.07;pointer-events:none}
a.compteur:hover{transform:translateY(-2px);box-shadow:var(--ombre-survol);border-color:rgba(21,24,29,.08)}
.compteur .valeur{font-size:34px;letter-spacing:-.01em}
.compteur .quoi{font-size:12.5px;margin-top:6px}
.compteur--parc{--accent:var(--parc);--teinte:var(--parc-fond);border-left-color:rgba(21,24,29,.06)}
.compteur--chassis{--accent:var(--chassis);--teinte:var(--chassis-fond);border-left-color:rgba(21,24,29,.06)}
.compteur--materiel{--accent:var(--materiel);--teinte:var(--materiel-fond);border-left-color:rgba(21,24,29,.06)}
.compteur--attente{--accent:#8b95a5;--teinte:var(--attente-fond);border-left-color:rgba(21,24,29,.06)}
.compteur--retard{--accent:var(--retard);--teinte:var(--retard-fond);border-left-color:rgba(21,24,29,.06)}
.compteur--neutre{--accent:var(--ardoise);--teinte:#f3f5f8}
.compteur[aria-current]{box-shadow:0 0 0 2px var(--bleu),var(--ombre-survol)}

/* -- Tableaux -------------------------------------------------------------- */
.cadre-table{border-color:rgba(21,24,29,.07);box-shadow:var(--ombre)}
table.donnees th{background:linear-gradient(180deg,#f8fafc 0%,#f1f4f8 100%);color:#566273;padding:10px 10px}
table.donnees th.colle{background:#f4f6f9}
table.donnees td{padding:9px 10px}
table.donnees tbody tr:nth-child(even) td{background:#fbfcfe}
table.donnees tbody tr:hover td,table.donnees tbody tr:hover .colle{background:#eef5fd}

/* -- Boutons --------------------------------------------------------------- */
.btn{border-color:rgba(21,24,29,.12);box-shadow:0 1px 2px rgba(21,24,29,.05);
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(21,24,29,.08)}
.btn--primaire{background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu-2) 100%);border-color:transparent;
  box-shadow:0 6px 16px rgba(0,82,183,.28)}
.btn--primaire:hover{background:linear-gradient(135deg,#00459c 0%,var(--bleu) 100%);
  box-shadow:0 8px 20px rgba(0,82,183,.36)}
.btn--discret,.btn--discret:hover{box-shadow:none}
.btn-groupe{border-color:rgba(21,24,29,.12);box-shadow:0 1px 2px rgba(21,24,29,.05)}
.btn-groupe .btn{box-shadow:none;transform:none}
.btn-groupe .btn[aria-pressed="true"]{background:linear-gradient(135deg,var(--bleu),var(--bleu-2))}

/* -- Pastilles et etats vides --------------------------------------------- */
.pastille{padding:3px 10px;font-weight:600}
.vide > svg.ico:first-child,.vide > .ico:first-child{width:52px;height:52px;padding:14px;margin:0 auto 12px;
  border-radius:50%;background:linear-gradient(135deg,var(--info-fond),#fff);color:var(--bleu);
  box-shadow:0 6px 16px rgba(0,82,183,.10)}

/* -- Acces, habillage : fond plein, carte flottante ---------------------- */
#acces{background:
  radial-gradient(700px 520px at 18% 30%,rgba(72,172,240,.16),transparent 65%),
  radial-gradient(800px 600px at 85% 85%,rgba(0,82,183,.22),transparent 65%),
  linear-gradient(155deg,#2c3443 0%,#1a1f28 55%,#101318 100%)}
#acces .acces-marque{background:none}
#acces .acces-marque::after{display:none}
#acces .accroche{font-size:34px;line-height:1.2;max-width:480px;letter-spacing:-.01em}
#acces .accroche em{font-style:normal;background:linear-gradient(90deg,var(--ciel),#8fd0ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#acces .points li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:10px 14px 10px 10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#acces .points .ico{background:linear-gradient(135deg,rgba(0,82,183,.55),rgba(72,172,240,.35));
  border-color:rgba(255,255,255,.12);color:#fff}
#acces .camion-fond{position:absolute;right:-60px;bottom:-40px;width:430px;height:430px;opacity:.06;
  color:var(--ciel);pointer-events:none}
#acces .camion-fond .ico{width:100%;height:100%;stroke-width:.6}
#acces .acces-carte{background:none}
#acces .carte{max-width:430px;background:rgba(255,255,255,.98);border-radius:20px;padding:36px 34px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.6) inset}
.acces-badge{display:inline-flex;gap:7px;align-items:center;font-size:11.5px;font-weight:600;color:var(--bleu);
  background:var(--info-fond);border-radius:999px;padding:4px 11px;margin-bottom:16px}
.acces-badge .ico{width:13px;height:13px}
@media (max-width:860px){
  #acces .carte{padding:28px 22px 26px;border-radius:16px}
  #acces .camion-fond{display:none}
}

/* -- Acces centre : une carte, un fond vivant ------------------------------ */
#acces.acces-centre{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  min-height:100vh;padding:32px 18px;background:linear-gradient(155deg,#252c38 0%,#161a21 55%,#0e1115 100%)}
#acces .bulle{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
#acces .bulle--1{width:520px;height:520px;left:-140px;top:-160px;background:#0052b7;animation:bulle1 18s ease-in-out infinite alternate}
#acces .bulle--2{width:460px;height:460px;right:-120px;bottom:-160px;background:#2a8be0;opacity:.35;animation:bulle2 22s ease-in-out infinite alternate}
@keyframes bulle1{to{transform:translate(160px,120px) scale(1.15)}}
@keyframes bulle2{to{transform:translate(-140px,-90px) scale(1.1)}}
#acces .lueur{position:absolute;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(72,172,240,.16),transparent 62%);transition:opacity .4s}

#acces .acces-pile{position:relative;width:100%;max-width:400px;animation:entree .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes entree{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
#acces .acces-pile .logo{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:26px;color:#fff}
#acces .acces-pile .logo svg{width:150px}
#acces .acces-pile .logo span{color:var(--ciel);font-family:var(--dense);font-size:11px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase}
#acces .acces-pile .carte{max-width:none;background:rgba(255,255,255,.97);border-radius:22px;padding:34px 30px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
#acces .acces-pile h1{font-size:28px;margin-bottom:22px}
#acces .acces-pile .intro{margin:-14px 0 22px}
#acces .acces-pile .pied{position:static;text-align:center;margin-top:22px;color:#6c7889;font-size:12px}
#acces .carte.secoue{animation:secoue .45s}
@keyframes secoue{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.acces-champ .saisie > .ico{transition:color .2s}
.acces-champ .saisie:focus-within > .ico{color:var(--bleu)}
.acces-champ input{height:50px;border-radius:12px;background:#f6f8fb;border-color:#e3e8ef}
.acces-champ input:focus{background:#fff}
.acces-bouton{position:relative;overflow:hidden;height:50px;border-radius:12px}
.acces-bouton::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transition:transform .7s}
.acces-bouton:hover::after{transform:translateX(120%)}
.acces-bouton .ico{transition:transform .2s}
.acces-bouton:hover .ico{transform:translateX(3px)}
@media (max-width:480px){#acces .acces-pile .carte{padding:26px 20px 22px;border-radius:18px}}
.acces-champ input::placeholder{color:#9aa5b4}
#acces .acces-pile .carte{padding:30px 28px 26px}

/* -- Barre : le titre de la page a gauche, la recherche, le compte -------- */
#barre{gap:18px;padding:0 22px}
#barre .titre-barre{flex:1;min-width:0;display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--dense);font-size:21px;font-weight:700;color:var(--ardoise-3);letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#barre .titre-barre .pastille{font-family:var(--texte);font-size:11.5px;letter-spacing:0}
#barre .recherche{flex:0 1 420px}
#barre .qui{gap:12px}
#barre .qui form{display:inline}
/* Le titre est dans la barre : les en-tetes de page ne gardent que leurs actions. */
#contenu .tete{justify-content:flex-end}
@media (max-width:900px){#barre .titre-barre{font-size:17px}#barre .recherche{flex-basis:200px}}

/* ======================= Densite (novembre 2026) =========================
   Toute la largeur, des compteurs compacts, une barre de filtres. */
.large{max-width:none}
#contenu{padding:18px 22px 28px}

.compteurs{gap:10px;margin-bottom:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.compteurs--une-ligne{grid-template-columns:repeat(6,minmax(0,1fr))}
.compteur{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:12px;min-height:0}
.compteur::before{height:2px}
.compteur::after{display:none}
.compteur .valeur{font-size:22px;line-height:1;flex:none}
.compteur .quoi{margin-top:0;font-size:12px;line-height:1.25;color:var(--encre-2)}
a.compteur:hover{transform:translateY(-1px)}

.barre-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.barre-filtres select,.barre-filtres input[type=search]{height:34px;border:1px solid rgba(21,24,29,.12);border-radius:9px;
  background:#fff;padding:0 10px;font-size:13px;color:var(--encre);box-shadow:0 1px 2px rgba(21,24,29,.04)}
.barre-filtres select{padding-right:26px;max-width:210px}
.barre-filtres select:focus,.barre-filtres input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(0,82,183,.12)}
.barre-filtres .pousse{flex:1}
.champ-recherche{position:relative;display:flex;align-items:center}
.champ-recherche > .ico{position:absolute;left:10px;width:15px;height:15px;color:var(--encre-3);pointer-events:none}
.champ-recherche input[type=search]{padding-left:32px;width:260px}

.menu-deroulant{position:relative}
.menu-deroulant .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:210px;background:#fff;
  border:1px solid rgba(21,24,29,.08);border-radius:12px;box-shadow:var(--ombre-haute);padding:6px}
.menu-deroulant .menu a{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--encre);font-size:13px}
.menu-deroulant .menu a:hover{background:var(--fond);text-decoration:none}
.menu-deroulant .menu .ico{width:15px;height:15px;color:var(--encre-2)}

table.donnees th.triable{padding:0}
table.donnees th.triable a{display:flex;align-items:center;gap:5px;padding:10px;color:inherit;white-space:nowrap}
table.donnees th.triable a:hover{color:var(--bleu);text-decoration:none}
table.donnees th.triable .sens{font-size:9px;opacity:.35}
table.donnees th.trie{color:var(--bleu)}
table.donnees th.trie .sens{opacity:1}
table.donnees th.num.triable a{justify-content:flex-end}

.pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;
  border-top:1px solid rgba(21,24,29,.06);background:#fbfcfe;font-size:12.5px;position:sticky;left:0}
.pagination .pages{display:flex;gap:4px;align-items:center}
.pagination .pages a,.pagination .pages .courante{min-width:30px;height:30px;padding:0 8px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--encre-2);font-weight:600}
.pagination .pages a:hover{background:var(--fond-2);text-decoration:none}
.pagination .pages .courante{background:linear-gradient(135deg,var(--bleu),var(--bleu-2));color:#fff}
.pagination .ico{width:15px;height:15px}
.htmx-request#table-planning,.htmx-request.cadre-table{opacity:.6;transition:opacity .15s}

/* -- Infobulles : une seule bulle, posee par cavime.js ------------------- */
#infobulle{position:fixed;z-index:100;max-width:320px;padding:7px 11px;border-radius:10px;pointer-events:none;
  background:#1c222c;color:#e9eef5;font-size:12.5px;line-height:1.45;font-weight:500;text-wrap:pretty;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(4px) scale(.98);
  transition:opacity .14s,transform .14s}
#infobulle.visible{opacity:1;transform:none}
#infobulle::after{content:"";position:absolute;left:var(--fleche,50%);width:9px;height:9px;background:#1c222c;
  transform:translateX(-50%) rotate(45deg);bottom:-4px}
#infobulle.dessous::after{bottom:auto;top:-4px}
#infobulle.riche{padding:9px 12px 8px;min-width:180px}
#infobulle .bulle-titre{font-weight:700;color:#fff;font-size:12.5px}
#infobulle.riche ul{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:3px}
#infobulle.riche li{position:relative;padding-left:12px;font-size:12px;color:#c9d2de;font-variant-numeric:tabular-nums}
#infobulle.riche li::before{content:"";position:absolute;left:1px;top:.62em;width:4px;height:4px;border-radius:50%;background:#7c8aa0}
#infobulle .bulle-plus{color:#8e9bb0;font-style:italic}
#infobulle .bulle-plus::before{display:none}
[data-tip]{cursor:help}
a[data-tip],button[data-tip],select[data-tip],th[data-tip] a{cursor:pointer}
.info-tip{display:inline-flex;vertical-align:middle;color:var(--encre-3);margin-left:4px}
.info-tip .ico{width:14px;height:14px}
.info-tip:hover{color:var(--bleu)}
.barre-filtres select{max-width:175px}
.champ-recherche input[type=search]{width:230px}

/* La barre horizontale du haut, jumelle de celle du tableau. */
.defile-haut{overflow-x:auto;overflow-y:hidden;height:14px;margin-bottom:4px;border-radius:7px}
.defile-haut > div{height:1px}
.defile-haut::-webkit-scrollbar,.cadre-table::-webkit-scrollbar{height:10px}
.defile-haut::-webkit-scrollbar-thumb,.cadre-table::-webkit-scrollbar-thumb{background:#c5ccd6;border-radius:6px}
.defile-haut::-webkit-scrollbar-thumb:hover,.cadre-table::-webkit-scrollbar-thumb:hover{background:#9fa9b6}
.defile-haut::-webkit-scrollbar-track,.cadre-table::-webkit-scrollbar-track{background:rgba(21,24,29,.04);border-radius:6px}
table.lignes-devis tr.ligne-texte td{color:var(--encre-2);font-style:italic;font-size:12px;background:#fbfcfe}
table.lignes-devis tr.ligne-total td{font-weight:700;border-top:1px solid var(--trait-2);background:#f4f7fb}
.moyen{max-width:none}

/* -- Fenetres (ARC) --------------------------------------------------------- */
.modale{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px}
.modale-fond{position:absolute;inset:0;background:rgba(14,17,21,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modale-boite{position:relative;width:100%;max-width:560px;background:#fff;border-radius:18px;padding:22px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.3);display:grid;gap:14px;animation:entree .25s cubic-bezier(.2,.8,.2,1) both;
  max-height:84vh;overflow:auto}
.modale-boite > header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.modale-boite h2{font-size:20px;display:flex;gap:8px;align-items:center}
.modale-boite .sous{color:var(--encre-2);font-size:13px;margin-top:2px}
.arc-commande{display:grid;gap:2px;padding:10px 12px;background:var(--fond);border-radius:10px;font-size:13px}
.arc-depot{position:relative}
.arc-depot input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.arc-depot label{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;border:1.5px dashed #b9c4d3;
  border-radius:12px;background:#f8fafd;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.arc-depot:hover label,.arc-depot input:focus + label{border-color:var(--bleu);background:var(--info-fond)}
.arc-depot label .ico{width:24px;height:24px;color:var(--bleu)}
.arc-lecture-en-cours{display:none;align-items:center;gap:8px;justify-content:center;color:var(--bleu);font-weight:600;padding:12px}
.arc-depot.htmx-request label{display:none}
.arc-depot.htmx-request .arc-lecture-en-cours{display:flex}
.arc-lecture-en-cours .ico{animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.arc-lu{display:grid;gap:8px;padding:12px;border:1px solid var(--materiel-trait);border-radius:12px;background:#f6f9fe}
.arc-lu-tete{display:flex;gap:10px;align-items:center}
.arc-lu-tete a{margin-left:auto;display:inline-flex;gap:5px;align-items:center}
.arc-lu-tete a .ico{width:13px;height:13px}
.defs--serre{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.arc-valider{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.arc-valider label{width:100%;font-size:13px;font-weight:600}
.arc-valider input[type=date]{height:38px;border:1px solid rgba(21,24,29,.15);border-radius:9px;padding:0 10px;font-size:14px}
.bouton-ligne--accent{color:var(--bleu)}
.depot-arc{display:inline-flex}
.depot-arc.htmx-request label{opacity:.6;pointer-events:none}

/* -- Devis -> commande -> affaire ------------------------------------------ */
.chaine-affaire{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.chaine-affaire > .ico{width:13px;height:13px;color:var(--encre-3)}
.maillon{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.02em;background:var(--fond-2);color:var(--encre-2)}
.maillon--affaire{background:var(--info-fond);color:var(--bleu);border:1px solid var(--materiel-trait)}
.maillon--affaire:hover{background:var(--bleu);color:#fff;text-decoration:none}
.maillon .ico{width:12px;height:12px}
.parcours-devis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;
  background:linear-gradient(135deg,#f3f8ff,#fff);border:1px solid var(--materiel-trait)}
.parcours-devis > .ico{width:16px;height:16px;color:var(--encre-3)}
.etape-devis{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;background:#fff;
  border:1px solid rgba(21,24,29,.08);color:var(--encre)}
.etape-devis .ico{width:17px;height:17px;color:var(--ok)}
.etape-devis small{display:block;font-size:10.5px;color:var(--encre-3);text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.etape-devis b{font-family:var(--dense);font-size:15px;letter-spacing:.02em}
.etape-devis.affaire{border-color:var(--materiel-trait);background:var(--info-fond)}
.etape-devis.affaire .ico{color:var(--bleu)}
.etape-devis.affaire:hover{text-decoration:none;box-shadow:var(--ombre)}
.pousse-droite{margin-left:auto}

/* Une seule barre de defilement : la page. Les tableaux n'ont plus de hauteur fixe. */
.cadre-table--fige,.cadre-achats{max-height:none}
details.panneau>summary{list-style:none;cursor:pointer;padding:10px 16px;display:flex;align-items:center;gap:8px}
details.panneau>summary::-webkit-details-marker{display:none}
details.panneau>summary::before{content:"▸";color:var(--encre-3,#8a93a3);transition:transform .15s}
details.panneau[open]>summary::before{transform:rotate(90deg)}
details.panneau>summary h2{margin:0;font-size:inherit}
.pastille--mois{background:#f1edfd;color:#5b3fc4;border-color:#ddd4f7}

/* ---------- Fiche affaire : une page, les achats au centre ---------- */
.fa-tete{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:flex-start;background:var(--fond-carte,#fff);
  border:1px solid var(--trait);border-radius:14px;padding:12px 18px;margin-bottom:12px}
.fa-champ{display:flex;flex-direction:column;gap:2px;min-width:0}
.fa-champ>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-3)}
.fa-champ>b{font-weight:600;font-size:14px}
.fa-champ>small{font-size:12px;color:var(--encre-3)}
.fa-champ--client{flex:1 1 220px}
.fa-champ--client>b{font-size:16px}
.fa-route{padding:6px 10px}
.fa-route .route{margin:0}
.fa-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
@media (max-width:1100px){.fa-grille{grid-template-columns:1fr}}
.fa-cote{display:flex;flex-direction:column;gap:10px;position:sticky;top:70px}
.fa-cote .fa-carte>header{padding:9px 14px}
.fa-cote .fa-liste,.fa-cote .fa-pieces{padding:2px 14px 8px}
.fa-cote .fa-liste>div,.fa-cote .fa-pieces li{padding:4px 0;font-size:12.5px}
.fa-cote .fa-liste dd{font-size:12.5px}
.fa-cote .fa-note{padding:0 14px 8px;font-size:11.5px}
.fa-carte>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fa-carte>header h2{display:flex;align-items:center;gap:7px}
.fa-carte>header h2 .ico{width:16px;height:16px}
.fa-carte--chassis>header h2 .ico{color:var(--chassis)}
.fa-carte--atelier>header h2 .ico{color:var(--materiel)}
.fa-carte--ws>header h2 .ico{color:var(--info)}
.fa-carte--journal>header h2 .ico{color:var(--encre-3)}
.fa-liste{margin:0;padding:4px 16px 12px}
.fa-liste>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--trait)}
.fa-liste>div:last-child{border-bottom:none}
.fa-liste dt{color:var(--encre-3);font-size:12.5px;flex:none}
.fa-liste dd{margin:0;text-align:right;font-size:13px;min-width:0}
.fa-liste dd.retard{color:var(--retard);font-weight:600}
.fa-note{padding:0 16px 12px;margin:0}
.fa-pieces{list-style:none;margin:0;padding:4px 16px 12px}
.fa-pieces li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--trait);font-size:13px}
.fa-pieces li:last-child{border-bottom:none}
.fa-pieces li>:first-child{flex:1}
.journal--court{padding:4px 16px 12px}
.journal--court li{grid-template-columns:auto 1fr}

.achats-fiche{display:flex;flex-direction:column}
.achat{display:grid;grid-template-columns:minmax(0,1fr) auto 150px auto;gap:16px;align-items:center;
  padding:12px 16px 12px 14px;border-top:1px solid var(--trait);border-left:4px solid var(--attente-trait,#dde2ea)}
.achat:first-child{border-top:none}
.achat--retard{border-left-color:var(--retard);background:var(--retard-fond)}
.achat--parc{border-left-color:var(--parc)}
.achat--ambre{border-left-color:var(--chassis)}
.achat--materiel{border-left-color:var(--materiel)}
.achat--attente{border-left-color:#c9d1dd}
.achat-titre{display:flex;align-items:baseline;gap:10px;font-weight:700;font-size:14px}
.achat-titre a{color:inherit}
.achat-titre a:hover{color:var(--accent,#2563eb)}
.achat-objet{font-size:13.5px;margin-top:2px}
.achat-detail{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.achat-detail span{font-size:11.5px;color:var(--encre-2);background:var(--fond-2,#f3f5f8);border-radius:6px;padding:1px 7px;font-variant-numeric:tabular-nums}
.achat-detail .achat-plus{background:#fff;border:1px solid var(--trait-2);cursor:default}
.achat-dates{display:flex;gap:14px}
.achat-dates>div{display:flex;flex-direction:column;align-items:center;min-width:64px}
.achat-dates span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--encre-3)}
.achat-dates b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.achat-dates .manque b{color:var(--chassis)}
.achat-dates .retard b{color:var(--retard)}
.achat-etat{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.achat-montant{font-size:12.5px;color:var(--encre-2);font-variant-numeric:tabular-nums}
.achat-actions{display:flex;gap:6px;justify-content:flex-end}
@media (max-width:760px){.achat{grid-template-columns:1fr}.achat-actions{justify-content:flex-start}}
@media (max-width:600px){.route li:not(.courante) .quoi{visibility:hidden}}

/* Bouton qui demande une action, et fenetre d'attribution des chassis */
.btn--attention{background:var(--chassis-fond);border-color:var(--chassis-trait);color:var(--chassis)}
.btn .compte{font-size:11px;font-weight:700;opacity:.75;margin-left:2px;font-variant-numeric:tabular-nums}
.modale-boite--large{max-width:820px}
.attribuer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.attribuer-ligne{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--trait)}
.attribuer-ligne:first-child{border-top:none}
.attribuer-vehicule{display:flex;flex-direction:column;gap:2px;min-width:0}
.attribuer-choix{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.attribuer-autre{display:flex;gap:6px}
.attribuer-autre input{width:110px}
@media (max-width:700px){.attribuer-ligne{flex-direction:column;align-items:stretch}.attribuer-choix{justify-content:flex-start}}

/* Comparaison des affaires possibles pour un chassis (reunion du 11/11) */
.candidats{width:100%;border-collapse:collapse;font-size:13px}
.candidats th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--encre-2);padding:6px 8px;border-bottom:1px solid var(--trait-2);white-space:nowrap}
.candidats td{padding:7px 8px;border-bottom:1px solid var(--trait);vertical-align:middle}
.candidats .bloc{display:block}
.candidat--recommande td{background:var(--parc-fond)}
.candidat--recommande td:first-child{box-shadow:inset 3px 0 0 var(--parc)}
.critere{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;border:1px solid var(--trait-2);color:var(--encre-3,#94a3b8);margin:1px}
.critere--oui{background:var(--parc-fond);border-color:var(--parc-trait);color:var(--parc)}
.table-defile{overflow-x:auto}
.attribuer-choix{min-width:0;flex:1}
.mt-s{margin-top:8px}
.attribuer .attribuer-ligne{flex-direction:column;align-items:stretch;gap:8px}
.arc-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 12px;width:100%}
.arc-champs label{display:block;font-size:12px;font-weight:600;color:var(--encre-2);margin-bottom:3px}
.arc-champs input{width:100%}
.arc-champs input{height:38px;border:1px solid rgba(21,24,29,.15);border-radius:9px;padding:0 10px;font-size:14px;box-sizing:border-box}