/* ============================================================================
   Guilmault Pro — feuille commune
   ----------------------------------------------------------------------------
   Reprend à l'identique les jetons de la maquette (palette B « Blanc & Bleu »,
   référence : monde Pneus). Toute couleur, tout rayon, toute ombre de
   l'application vient d'ici : rien n'est écrit en dur dans un gabarit.
   ========================================================================== */

@font-face{
  font-family:'GP Pro';
  src:url(data:font/woff2;base64,d09GMgABAAAAAANcAAwAAAAABhgAAAMMAAQBBgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcMAZgAEwKg3SDPAE2AiQDHAsQAAQgBYMSByAb/wQILgbsFvkQqzaxiVVjcj8W1ssbi+D5uXLeT5aSuysBKgLWZNGWbSuBVD2RJVbr6sF2h1/3vj86fUub70ZWOCS2hWaWvPU/QK3sviLL79dvlJWxri7Ve6slATlKBQ5pRPaf0gplHiyUDzWrxTDe6njHcCZAjxGPbUukCjYQkjj0cG7s2fUChf6wEIuWuMOgSQ4tAZyH8bhq7X2HKjNCgFVUaJTZBXl2IMXVk86rCqwsiz2EsUqFmtmwfPDyTVYfuLXWRI78f8OhHEqTgIA0Nj3BYHVIyNBdrUB3dWYDCnVJsk4QbKIl1gqCkBNmsSB0zXMdKHEdTUAOSKM0Ondur3dqXJFuc3vz69c49+1beeHLF2c/fy6+NcDgZYrzKOOsUOWfYpGKSntww+dPca4olO07bvvZz5u2V1s3A5GPY/iXR6Gbfab85c8//3ViKmql5ovRCxkjGqMQQpWKkdWbO/ce9x+xsNceKB2n9hxXj2bRVu1STi4ZtFolAzmZTpeXiSEvGszLdcBwX7wfVkWn27YexvpjMnlB++JJfnUC+sDFtU4LOvuo+hK5PK+2+Ma8fed9T81NK2YE/CnFNPirn1liX49sdq6vL1nnt9EV6P3u9Y0l6ynzRjLNIfEFw2q1P+zzecNq8N/aM1Vjm7AY1yKbjRsTS22atOCJi8KL64bvjV5mpNCoRirdIRQK7G4qzUiLirLftWWK/HDEAqPG07c19uIWAAJ5VF8vfaje26n+V8+y3/D91v038KvnzK+bP2i8zRcCahIIjizTuKTIZjc5ix3xl6wLUtrHktZt8ApiumNxHP0IAjVXtTmpocLKpLZ6h1qRN3ADhMNgxzjp8BJn5vjtzVlcUUTHdVWDozcTCGzehEH9BkzBE+LbAl7YISpxPx2FmzVmEtdPgAypKCUXGUybMgAywcXphYemwCYp8fD0G9TF04q4SiCjeF60ipyaNqZswjzel4MZf/jfQipGDTKCjCgLqug3bUTBBIcwKx8VfIHJXhDj4uMTK5KDjSpCc/K1lnCtNxUAAAA=) format('woff2');
  font-weight:600;
  font-display:block;
}

:root{
  --bg:#FFFFFF; --bg2:#F4F7FB; --carte:#FFFFFF; --trait:#E6EAF0; --trait2:#EFF3F8;
  --encre:#0D1B2A; --second:#5D6B7A; --tertiaire:#94A1AF;
  --accent:#1256D0; --accent-sombre:#0E45A6; --accent-doux:#EAF1FD;
  --nuit:#0B121C; --nuit2:#131C29;
  --ok:#0E8A4D; --ok-doux:#E7F5EE;
  --alerte:#9A6A0B; --alerte-doux:#FDF4E3;
  --erreur:#C2382B; --erreur-doux:#FBEDEB;
  --r:16px; --rb:12px;
  --ombre:0 1px 2px rgba(13,27,42,.05), 0 12px 32px -18px rgba(13,27,42,.45);
  --ombre-h:0 1px 2px rgba(13,27,42,.06), 0 22px 50px -22px rgba(13,27,42,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg2); color:var(--encre);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- signature : le logo et le « Pro » ----------
   Le tracé du logo est en currentColor : la signature prend la couleur de son
   fond au lieu d'exister en deux fichiers qui divergeraient. Par défaut elle
   est faite pour un fond blanc — c'est le cas le plus fréquent ; « .clair »
   la retourne pour les fonds sombres. */
.marque{display:flex;flex-direction:column;gap:6px;line-height:1}
.marque .l1{display:flex;align-items:flex-end;gap:10px}
.marque .lg{height:31px;color:var(--encre);display:block}
.marque .lg svg{height:31px;width:auto;display:block}
.marque .pro{
  position:relative;bottom:3px;line-height:1;
  font-family:'GP Pro','Century Gothic','Questrial','Segoe UI',system-ui,sans-serif;
  font-size:20.5px;font-weight:600;letter-spacing:.07em;color:var(--accent);
}
.marque .l2{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tertiaire);font-weight:600;
}
.marque.clair .lg{color:#fff}
.marque.clair .pro{color:#60A5FA}
.marque.clair .l2{color:rgba(255,255,255,.5)}

/* ---------- écran de connexion ---------- */
.acces{min-height:100%;display:grid;grid-template-columns:minmax(0,440px) 1fr}
.acces .volet{
  background:var(--nuit);color:#fff;padding:44px 40px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.acces .volet::after{
  content:"";position:absolute;right:-160px;top:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(18,86,208,.42), transparent 62%);
}
.acces .volet .dit{position:relative;z-index:1;max-width:330px}
.acces .volet .dit h2{font-size:25px;font-weight:750;letter-spacing:-.025em;line-height:1.25}
.acces .volet .dit p{margin-top:14px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.62)}
.acces .volet .bas{position:relative;z-index:1;font-size:11.5px;color:rgba(255,255,255,.35);line-height:1.6}

.acces .zone{display:grid;place-items:center;padding:40px 24px}
.acces .boite{width:100%;max-width:390px}
.acces h1{font-size:26px;font-weight:750;letter-spacing:-.03em}
.acces .sous{margin-top:9px;font-size:14px;color:var(--second);line-height:1.6}

form.acces-f{margin-top:30px;display:grid;gap:16px}
.champ label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tertiaire);margin-bottom:7px;
}
.champ input{
  width:100%;height:46px;padding:0 14px;border:1px solid var(--trait);border-radius:var(--rb);
  background:var(--carte);font:inherit;font-size:15px;color:var(--encre);
  transition:border-color .14s, box-shadow .14s;
}
.champ input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,86,208,.13)}
.champ input::placeholder{color:var(--tertiaire)}

.ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13px}
.ligne label{display:flex;align-items:center;gap:8px;color:var(--second);cursor:pointer}
.ligne input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.ligne a{color:var(--accent);text-decoration:none;font-weight:600}
.ligne a:hover{text-decoration:underline}

.bouton{
  height:46px;border:0;border-radius:var(--rb);background:var(--accent);color:#fff;
  font:inherit;font-size:15px;font-weight:650;cursor:pointer;transition:background .14s;
  box-shadow:0 1px 2px rgba(18,86,208,.24), 0 8px 20px -10px rgba(18,86,208,.55);
}
.bouton:hover{background:var(--accent-sombre)}

.avis{
  display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--rb);
  font-size:13.5px;line-height:1.5;
}
.avis.erreur{background:var(--erreur-doux);color:var(--erreur);border:1px solid rgba(194,56,43,.22)}
.avis.ok{background:var(--ok-doux);color:var(--ok);border:1px solid #BFE3CE}
.avis svg{width:17px;height:17px;flex:none;margin-top:1px}

.pied{margin-top:26px;font-size:12px;color:var(--tertiaire);line-height:1.6}

@media(max-width:900px){
  .acces{grid-template-columns:1fr}
  .acces .volet{padding:28px 24px;gap:26px}
  .acces .volet .dit h2{font-size:21px}
  .acces .volet .bas{display:none}
}

/* ---------- écran d'attente ---------- */
.chantier{min-height:100%;display:grid;place-items:center;padding:40px 24px}
.chantier .carte{
  width:100%;max-width:620px;background:var(--carte);border:1px solid var(--trait);
  border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden;
}
.chantier .haut{background:var(--nuit);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.chantier .corps{padding:28px 30px 30px}
.chantier h1{font-size:20px;font-weight:750;letter-spacing:-.025em}
.chantier p{margin-top:11px;font-size:14px;line-height:1.65;color:var(--second)}
.chantier .etat{margin-top:22px;display:grid;gap:9px}
.chantier .etat div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--encre)}
.chantier .etat i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.chantier .etat span{color:var(--tertiaire);margin-left:auto;font-variant-numeric:tabular-nums;font-size:12.5px}
.chantier .sortie{margin-top:26px;padding-top:20px;border-top:1px solid var(--trait);
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13.5px;color:var(--second)}
.chantier .sortie a{color:var(--accent);font-weight:650;text-decoration:none}
.chantier .sortie a:hover{text-decoration:underline}


h1.t{font-size:23px;font-weight:750;letter-spacing:-.025em}
p.st{margin-top:9px;font-size:14px;color:var(--second);line-height:1.6;max-width:70ch}

.bloc{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
 box-shadow:var(--ombre);margin-top:22px;overflow:hidden}
.bloc > h2{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:var(--tertiaire);padding:17px 22px 0}
.bloc > .in{padding:16px 22px 20px}

table.l{width:100%;border-collapse:collapse;font-size:13.5px}
table.l th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:var(--tertiaire);padding:12px 22px;border-bottom:1px solid var(--trait)}
table.l td{padding:12px 22px;border-bottom:1px solid var(--trait2);vertical-align:middle}
table.l tr:last-child td{border-bottom:0}
table.l td.n{font-variant-numeric:tabular-nums;color:var(--second)}
table.l td.a{text-align:right}
table.l .f{font-weight:650}

/* Une pastille d’état ne se coupe pas en deux : « à renseigner » sur deux
   lignes se lit comme deux états. */
.et{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;
 white-space:nowrap;
 padding:4px 11px;border-radius:20px}
.et i{width:6px;height:6px;border-radius:50%;background:currentColor}
.et.ok{background:var(--ok-doux);color:var(--ok)}
.et.att{background:var(--alerte-doux);color:var(--alerte)}
.et.ko{background:var(--erreur-doux);color:var(--erreur)}
.et.nn{background:var(--bg2);color:var(--second)}

.bt2{height:38px;padding:0 17px;border:0;border-radius:10px;background:var(--accent);color:#fff;
 font:inherit;font-size:13.5px;font-weight:650;cursor:pointer}
.bt2:hover{background:var(--accent-sombre)}
.bt2.s{background:var(--carte);color:var(--encre);border:1px solid var(--trait)}
.bt2.s:hover{background:var(--puce)}
.bt2[disabled]{opacity:.45;cursor:not-allowed}

.avert{background:var(--erreur-doux);border:1px solid rgba(194,56,43,.22);color:var(--erreur);
 border-radius:var(--rb);padding:14px 16px;font-size:13.5px;line-height:1.6;margin-top:22px}
.avert b{display:block;margin-bottom:5px;font-weight:750}

.jauge{height:6px;border-radius:6px;background:var(--trait);overflow:hidden;margin:16px 0 6px}
.jauge i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.pas{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pas span{font-size:12px;font-weight:650;padding:5px 12px;border-radius:20px;background:var(--bg2);color:var(--tertiaire)}
.pas span.on{background:var(--accent-doux);color:var(--accent)}
.pas span.fait{background:var(--ok-doux);color:var(--ok)}

/* « compteurs » et non « cpt » : la maquette du parc appelle « cpt » le nombre
   de résultats au-dessus de la liste, et deux sens pour un même nom de classe
   finissent toujours par se croiser. */
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;
 background:var(--trait);border-top:1px solid var(--trait);margin-top:18px}
.compteurs div{background:var(--carte);padding:14px 16px}
.compteurs .k{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tertiaire)}
.compteurs .v{font-size:21px;font-weight:750;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}

pre.jr{background:var(--nuit);color:#D8E2EE;border-radius:var(--rb);padding:15px 17px;margin-top:18px;
 font-size:12.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;max-height:330px;overflow:auto;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Le cadre de l'application — barre haute, menu latéral, zones — vit
   désormais dans platine.css. Les règles qui étaient ici (une barre blanche
   à onglets) ont été retirées : elles ne servaient plus, et « .top » y
   imposait une hauteur de 66 px qui écrasait celle de la platine. */

/* ============================================================================
   ÉCRANS DU SOCLE — « Ma société » et « Comptes »
   ----------------------------------------------------------------------------
   Les briques existaient déjà (.feuille, .bloc, .champ, .bt2, table.l, .et) :
   ce qui suit est ce qu'un formulaire un peu long demande en plus, et rien
   d'autre. Aucune de ces classes ne porte de nom générique employé ailleurs —
   « .bandeau », « .grille2 », « .logoz » n'existent que sur ces deux écrans.
   ========================================================================== */

/* Le retour du serveur : dit une fois, en haut, et pas en rouge par défaut. */
.bandeau{border-radius:var(--rb);padding:11px 15px;font-size:13.5px;line-height:1.55;
 margin-bottom:16px;border:1px solid}
.bandeau.ok{background:var(--ok-doux);color:var(--ok);border-color:#BFE3CE}
.bandeau.ko{background:var(--erreur-doux);color:var(--erreur);border-color:#F0C9C4}
/* Le ton d'alerte : ni une erreur — rien n'est cassé — ni une confirmation.
   « Ça marche, mais pas comme vous le croyez » a besoin de sa propre couleur,
   sinon il se lit comme du décor. */
.bandeau.att{background:var(--alerte-doux);color:var(--alerte);border-color:#EFDCA8}

/* Deux colonnes qui redeviennent une quand la place manque. Les champs longs
   — raison sociale, adresse — traversent la grille depuis le gabarit. */
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}
@media(max-width:720px){.grille2{grid-template-columns:1fr}}

/* La phrase sous un champ : ce que le champ ne peut pas dire tout seul. */
.champ .aide{font-size:12px;color:var(--tertiaire);line-height:1.5;margin:6px 0 0}
.champ .aide b{color:var(--second);font-weight:650}

/* La ligne d'enregistrement, sous les blocs. */
.actions{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Le logo : son aperçu à gauche, ce qu'on peut en faire à droite. L'aperçu est
   posé sur un damier clair — un logo transparent sur fond blanc ne se
   distinguerait pas d'un logo à fond blanc, et c'est justement la différence
   qui compte à l'impression. */
.logoz{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.logotx{flex:1;min-width:260px}
.logotx input[type=file]{font:inherit;font-size:13px;color:var(--second);max-width:100%}
.apercu{flex:none;width:190px;height:104px;border:1px solid var(--trait);border-radius:var(--rb);
 display:grid;place-items:center;padding:12px;overflow:hidden;
 background-color:#fff;
 background-image:linear-gradient(45deg,#EEF2F7 25%,transparent 25%,transparent 75%,#EEF2F7 75%),
                  linear-gradient(45deg,#EEF2F7 25%,transparent 25%,transparent 75%,#EEF2F7 75%);
 background-size:14px 14px;background-position:0 0,7px 7px}
.apercu img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.apercu.vide{background-image:none;background-color:var(--bg2);color:var(--tertiaire);
 font-size:12px;letter-spacing:.04em}

/* Une case à cocher et son libellé sur une ligne, cliquable en entier. */
.retirer{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--encre);
 cursor:pointer;margin-top:12px}
/* Dans un champ, le libellé d'une case à cocher est une phrase, pas un intitulé
   de champ : il ne prend ni les capitales ni l'interlettrage de .champ label. */
.champ label.retirer{text-transform:none;letter-spacing:0;font-size:13.5px;
 font-weight:500;color:var(--encre);margin-bottom:0}
.retirer input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* Ce qu'un écran ne fait pas encore, dit franchement plutôt que deviné. */
.feuille .apres{background:var(--bg2);border:1px dashed var(--trait);border-radius:var(--rb);
 padding:13px 16px;font-size:12.5px;line-height:1.6;color:var(--second);margin-top:20px}
.feuille .apres b{color:var(--encre);display:block;margin-bottom:3px;font-weight:700}
/* Un intertitre qui reste dans le fil de la phrase — « La marge : le flux… ». */
.feuille .apres b.fil{display:inline;margin:0}

/* Le sélecteur de fichier natif : on habille son bouton comme les autres. Le
   libellé et le « aucun fichier choisi » restent au navigateur, qui les écrit
   dans la langue de l'utilisateur — mieux que ce qu'on écrirait nous-mêmes. */
.logotx input[type=file]::file-selector-button{height:34px;padding:0 14px;margin-right:11px;
 border:1px solid var(--trait);border-radius:9px;background:var(--carte);color:var(--encre);
 font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.logotx input[type=file]::file-selector-button:hover{background:var(--puce,var(--bg2))}

/* Le sélecteur de rôle, taillé comme un champ de saisie — c'en est un. La
   flèche est dessinée ici plutôt que laissée au système : sans elle, un select
   sans apparence native ressemble à un champ mort. */
.champ select{
  width:100%;height:46px;padding:0 38px 0 14px;border:1px solid var(--trait);
  border-radius:var(--rb);background:var(--carte);font:inherit;font-size:15px;
  color:var(--encre);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B7F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  transition:border-color .14s, box-shadow .14s;
}
.champ select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,86,208,.13)}

/* Un titre de bloc qui porte une action : le titre à gauche, le bouton à
   droite, sur la même ligne de base. En flex plutôt qu'en float, sinon le
   bouton retombe sur la première ligne du tableau. */
.bloc > h2.aveca{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding-bottom:14px}
.bloc > h2.aveca .bt2{letter-spacing:0;text-transform:none;text-decoration:none;
 font-size:13px;flex:none}

/* Les actions d'une ligne. Elles passent à la ligne plutôt que d'élargir le
   tableau : une colonne d'actions qui refuse de se plier pousse la dernière
   hors de l'écran, et c'est celle dont on a besoin. */
.actl{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.actl .bt2{text-decoration:none;display:inline-flex;align-items:center}

/* Un tableau large ne déborde pas de sa carte : il défile dans sa propre boîte.
   Sans cela, la dernière colonne — celle des actions — sort de l'écran, et
   c'est exactement celle dont on a besoin. */
.deroule{overflow-x:auto}
.deroule table.l{min-width:820px}

/* Le lien d'activation, montré une seule fois.
   Il est encadré et non pas glissé dans un bandeau : ce n'est pas une
   confirmation qui passe, c'est quelque chose à prendre maintenant. */
.invit{border:1px solid var(--accent);border-radius:var(--r);background:var(--carte);
 padding:16px 20px 18px;margin-bottom:18px;
 box-shadow:0 1px 3px rgba(13,27,42,.06),0 0 0 3px rgba(18,86,208,.07)}
.invit > b{display:block;font-size:14px;color:var(--encre);font-weight:750}
.invit p{margin:6px 0 12px;font-size:12.5px;line-height:1.6;color:var(--second)}
.invit .lien{width:100%;height:44px;padding:0 14px;border:1px solid var(--trait);
 border-radius:var(--rb);background:var(--bg2);color:var(--encre);
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.invit .lien:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,86,208,.13)}

/* ============================================================================
   L'ÉCRAN DE PILOTAGE
   ----------------------------------------------------------------------------
   Un tableau de bord n'a pas de maquette : il est écrit ici, avec les mêmes
   jetons que le reste (.bloc, table.l, .et), pour qu'il appartienne à
   l'application et non à un tableur.

   Une seule teinte pour les barres, du clair au foncé, parce qu'une seule
   grandeur est représentée : l'âge. Les arcs-en-ciel donnent l'illusion de
   catégories là où il n'y a qu'une échelle. La longueur porte le nombre, la
   teinte porte l'âge, et le chiffre est écrit à côté — jamais dans la barre :
   un chiffre posé sur un fond coloré change de contraste avec la donnée.
   ========================================================================== */

/* ---------- les chiffres de tête ---------- */
.pil-tete{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
 margin-top:22px}
.pil-n{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
 box-shadow:var(--ombre);padding:18px 20px 16px;display:flex;flex-direction:column}
/* La ligne de détail se cale en bas de sa case : les quatre cases n'ont pas le
   même contenu, mais elles finissent sur la même ligne. */
.pil-n .p{margin-top:auto}
.pil-n .v{font-size:34px;font-weight:750;letter-spacing:-.02em;line-height:1;
 color:var(--encre);font-variant-numeric:tabular-nums}
.pil-n .v small{font-size:16px;font-weight:600;color:var(--tertiaire);letter-spacing:0}
.pil-n .l{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:var(--tertiaire);margin-top:11px}
.pil-n .p{font-size:12.5px;color:var(--second);padding-top:10px;line-height:1.5}

/* Le pavé des trois paliers. Il tient la même case que les autres chiffres de
   tête, mais il porte trois lignes au lieu d'un nombre : chacune se lit en
   toutes lettres — « plus de 90 jours · 581 · 11,2 M€ » — et se clique.
   La dernière ligne, celle de l'année, prend la couleur d'alerte ET le mot :
   elle reste lisible sans distinguer les couleurs. */
.pil-n.pil-p{padding-bottom:10px}
.pil-n.pil-p .l{margin-top:0;margin-bottom:9px}
.pil-n.pil-p .pa{display:grid;grid-template-columns:1fr auto;align-items:baseline;
 column-gap:12px;padding:6px 8px 5px;margin:0 -8px;border-radius:8px;text-decoration:none;
 border-top:1px solid var(--trait2)}
.pil-n.pil-p .pa:first-of-type{border-top:0}
.pil-n.pil-p .pa .t{font-size:13px;color:var(--second);grid-row:1;white-space:nowrap}
.pil-n.pil-p .pa b{font-size:19px;font-weight:750;color:var(--encre);text-align:right;
 grid-row:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pil-n.pil-p .pa .eu{font-size:11.5px;color:var(--tertiaire);grid-column:1/3;grid-row:2;
 text-align:right;font-variant-numeric:tabular-nums;margin-top:-2px}
.pil-n.pil-p .pa:hover{background:var(--bg2)}
.pil-n.pil-p .pa.on{background:var(--bg2);box-shadow:inset 2px 0 0 var(--encre)}
.pil-n.pil-p .pa.max .t,.pil-n.pil-p .pa.max b{color:var(--alerte)}
.pil-lien.max{color:var(--alerte)}

/* ---------- l'âge du stock ---------- */
.pil-barres{display:grid;gap:9px}
.pil-b{display:grid;grid-template-columns:132px 1fr 132px;align-items:center;gap:14px;
 text-decoration:none;padding:5px 8px;margin:0 -8px;border-radius:10px;
 transition:background .13s}
.pil-b:hover{background:var(--bg2)}
.pil-b.on{background:var(--accent-doux)}
.pil-b .ti{font-size:13px;color:var(--second);font-weight:600}
.pil-b .ba{display:block;height:26px;background:var(--trait2);border-radius:5px;overflow:hidden}
.pil-b .ba i{display:block;height:100%;min-width:5px;border-radius:0 5px 5px 0;
 background:var(--pil-1)}
.pil-b .ch{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pil-b .ch b{font-size:17px;font-weight:750;color:var(--encre)}
.pil-b .ch .eu{display:block;font-size:11.5px;color:var(--tertiaire);margin-top:1px}

/* La rampe : une teinte, cinq marches, du clair au foncé. Elle encode l'âge de
   la tranche, pas sa valeur — c'est pourquoi elle est fixe et ne se recalcule
   pas quand les chiffres bougent. */
:root{--pil-1:#C6DAF7; --pil-2:#9EBFEF; --pil-3:#6E9CE6; --pil-4:#3E77DA;
       --pil-5:#1B54B8; --pil-6:#0C3480}
.pil-b .ba i[data-r="1"]{background:var(--pil-1)}
.pil-b .ba i[data-r="2"]{background:var(--pil-2)}
.pil-b .ba i[data-r="3"]{background:var(--pil-3)}
.pil-b .ba i[data-r="4"]{background:var(--pil-4)}
.pil-b .ba i[data-r="5"]{background:var(--pil-5)}
/* La sixième tranche est née avec « plus d'un an » : sans sa teinte, sa barre
   se serait dessinée transparente — présente, mesurée, et invisible. */
.pil-b .ba i[data-r="6"]{background:var(--pil-6)}

.pil-note{font-size:12.5px;line-height:1.65;color:var(--second);margin-top:16px;
 max-width:76ch}
.pil-note b{color:var(--encre);font-weight:650}

/* ---------- ce qui empêche de vendre ---------- */
.pil-manques{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.pil-m{display:block;text-decoration:none;border:1px solid var(--trait);border-radius:var(--rb);
 padding:14px 16px 15px;transition:border-color .13s, background .13s}
.pil-m:hover{border-color:var(--accent);background:var(--bg2)}
.pil-m.on{border-color:var(--accent);background:var(--accent-doux)}
.pil-m .hd{display:flex;align-items:baseline;gap:9px}
.pil-m .hd b{font-size:26px;font-weight:750;color:var(--encre);
 font-variant-numeric:tabular-nums;line-height:1}
.pil-m .hd span{font-size:13px;font-weight:650;color:var(--second)}
.pil-m p{font-size:12px;line-height:1.55;color:var(--tertiaire);margin-top:8px}

/* ---------- les entrées par mois ---------- */
.pil-mois{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:end}
.pil-mois .mo{display:grid;justify-items:center;gap:6px}
.pil-mois .v{font-size:12px;font-weight:700;color:var(--second);
 font-variant-numeric:tabular-nums}
.pil-mois .co{display:flex;align-items:flex-end;width:100%;height:96px;
 background:var(--trait2);border-radius:5px;overflow:hidden}
.pil-mois .co i{display:block;width:100%;min-height:3px;background:var(--pil-3);
 border-radius:5px 5px 0 0}
.pil-mois .ti{font-size:11px;color:var(--tertiaire)}
/* Un mois sans entrée doit se voir vide, pas se refermer sur ses voisins. */
.pil-mois .mo[data-vide] .v{color:var(--tertiaire)}
.pil-mois .mo[data-vide] .co i{background:var(--trait)}

/* ---------- la liste détaillée ---------- */
/* Une colonne de chiffres est alignée à droite et ne se coupe jamais : « 61 300
   € » sur deux lignes double la hauteur de la ligne et se lit deux fois. */
table.l th.d, table.l td.d{text-align:right;white-space:nowrap}
/* Un bouton posé dans un tableau reste un bouton, pas un lien souligné. */
table.l a.bt2{text-decoration:none;display:inline-flex;align-items:center}

/* Une liste de travail : une ligne par véhicule, rien qui se replie. Les
   colonnes gardent leur largeur naturelle et le tableau défile dans sa boîte
   plutôt que de faire des lignes de trois hauteurs différentes — on parcourt
   cette liste à la verticale, l'œil doit trouver les nombres au même endroit. */
table.l.serre td, table.l.serre th{white-space:nowrap}

/* Six colonnes ou plus tiennent mal dans la gouttière habituelle de 22 px. On
   la resserre pour ces tableaux-là — plutôt que de raccourcir les intitulés
   jusqu'à ce qu'ils ne veuillent plus rien dire, ou de laisser le tableau
   déborder en comptant sur la barre de défilement. Les bords extérieurs, eux,
   gardent leur marge : c'est elle qui fait respirer la carte. */
table.l.dense td, table.l.dense th{padding-left:14px;padding-right:14px}
table.l.dense td:first-child, table.l.dense th:first-child{padding-left:22px}
table.l.dense td:last-child, table.l.dense th:last-child{padding-right:22px}
.pil-lien{color:var(--accent);font-weight:700;text-decoration:none;
 font-variant-numeric:tabular-nums}
.pil-lien:hover{text-decoration:underline}
.pil-vers{color:var(--tertiaire);font-weight:400;font-size:12px}

/* La colonne « Véhicule » porte un texte libre dont on ne peut pas deviner la
   longueur — « MASTER FGN L3H2 3.5t 2.3 dCi 130 E6 GRAND CONFORT ». Sous
   nowrap, elle pousse les colonnes de droite hors de l'écran, et ce sont
   précisément celles qu'on vient lire. On la borne donc, et ce qui dépasse se
   coupe proprement : le modèle suffit à reconnaître la voiture, la version
   entière est au survol et sur la fiche.
   Le banc n'a que des versions courtes : ce débordement ne s'est vu que sur le
   parc réel. Une largeur qui dépend de la donnée n'est pas une largeur. */
table.l .vehc{max-width:250px}
table.l .vehc.court{max-width:155px}
table.l .vehc.moyen{max-width:195px}
table.l .vehc span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le numéro de dossier fait office de bouton d'ouverture. Il reste discret
   jusqu'au survol : quarante liens bleus dans une colonne, c'est un mur. */
.pil-dos{color:var(--encre);font-weight:650;text-decoration:none;
 font-variant-numeric:tabular-nums;border-bottom:1px solid var(--trait)}
.pil-dos:hover{color:var(--accent);border-bottom-color:var(--accent)}

@media (max-width:720px){
  .pil-b{grid-template-columns:104px 1fr 92px;gap:10px}
  .pil-mois{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:repeat(6,1fr);gap:10px}
}

/* ============================================================================
   LE JOURNAL DES ACTIONS
   ========================================================================== */

/* Les filtres sur une ligne au-dessus du tableau, comme ceux du parc : on les
   règle une fois, on lit ensuite. En grille et non en flex, pour que les trois
   champs gardent la même largeur quel que soit le contenu des listes. */
.jfil{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
 align-items:end;background:var(--carte);border:1px solid var(--trait);
 border-radius:var(--r);box-shadow:var(--ombre);padding:16px 20px;margin-top:22px}
.jfil .champ label{margin-bottom:6px}
.jfil input[type=date]{width:100%;height:46px;padding:0 12px;border:1px solid var(--trait);
 border-radius:var(--rb);background:var(--carte);font:inherit;font-size:15px;color:var(--encre)}
.jfil input[type=date]:focus{outline:0;border-color:var(--accent);
 box-shadow:0 0 0 3px rgba(18,86,208,.13)}
.jbt{display:flex;gap:8px;align-items:center}

/* L'heure sous la date : on cherche un jour, puis on précise. */
.jh{display:block;color:var(--tertiaire);font-size:12px}
/* La date, la famille et l'adresse ne se coupent jamais ; la phrase de l'acte,
   elle, a le droit de passer à la ligne — c'est la seule colonne dont la
   longueur varie vraiment, et la seule qu'on lit mot à mot. */
table.l td:first-child, table.l .jfam, table.l .jip{white-space:nowrap}
.jqui{white-space:nowrap}
.jml{display:block;color:var(--tertiaire);font-weight:400;font-size:12px}
/* La phrase de l'acte a le droit de respirer — c'est elle qu'on lit. */
.jq{white-space:normal;min-width:280px;line-height:1.5}
.jfam{display:inline-block;font-size:11.5px;font-weight:650;color:var(--second);
 background:var(--bg2);border-radius:20px;padding:3px 10px}
.jip{color:var(--tertiaire);font-size:12px;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.jpag{display:flex;align-items:center;gap:14px;margin-top:18px}

/* ============================================================================
   LES CONTRÔLES TECHNIQUES À REPASSER
   ----------------------------------------------------------------------------
   Un outil de travail : les états sont des FILTRES, pas des indicateurs. On ne
   les regarde pas, on clique dessus. D'où des cartes qui réagissent au survol
   et se marquent quand elles sont actives — un tableau de bord n'en a pas
   besoin, une liste de travail si.
   ========================================================================== */

.ctf{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:22px}
.cte{display:block;text-decoration:none;background:var(--carte);border:1px solid var(--trait);
 border-radius:var(--r);box-shadow:var(--ombre);padding:16px 18px 14px;
 transition:border-color .13s, box-shadow .13s}
.cte:hover{border-color:var(--accent)}
.cte.on{border-color:var(--accent);box-shadow:var(--ombre),0 0 0 3px rgba(18,86,208,.12)}
.cte .n{display:block;font-size:32px;font-weight:750;line-height:1;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;color:var(--encre)}
.cte .n.ko{color:var(--erreur)} .cte .n.att{color:var(--alerte)}
.cte .n.ok{color:var(--ok)}     .cte .n.nn{color:var(--second)}
.cte .l{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:var(--tertiaire);margin-top:10px}
/* Le seuil, à côté du libellé : c'est un réglage, pas un mot du titre — d'où la
   pastille, la casse normale et l'interlettrage remis à zéro. */
.cte .l em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:650;
 font-size:10.5px;color:var(--second);background:var(--bg2);border-radius:20px;
 padding:2px 7px;margin-left:7px;vertical-align:1px}

/* Les sites en pastilles plutôt qu'en tableau : c'est un filtre, pas une
   donnée à lire. Le nombre à repasser est là pour orienter le clic. */
.cts{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.ctp{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
 border:1px solid var(--trait);border-radius:20px;padding:6px 13px;
 font-size:13px;font-weight:600;color:var(--second);background:var(--carte);
 transition:border-color .13s, color .13s}
.ctp:hover{border-color:var(--accent);color:var(--encre)}
.ctp.on{border-color:var(--accent);background:var(--accent-doux);color:var(--accent)}
.ctp b{font-variant-numeric:tabular-nums;color:var(--erreur);font-weight:750}
.ctp.on b{color:var(--erreur)}

/* ====================================================================
   LA MESSAGERIE

   Un seul rectangle : la liste des fils à gauche, le fil ouvert à droite.
   Rien ne défile au niveau de la page — ce sont la liste et les messages qui
   défilent, chacun chez soi, et la zone d'écriture reste toujours visible.
   C'est la disposition de toutes les messageries, et il n'y a aucune raison
   d'en inventer une autre : celle-là, tout le monde la connaît déjà.
   ==================================================================== */

/* La feuille prend la hauteur de la zone de contenu. « .main » est déjà un
   conteneur de défilement de hauteur connue (100 % moins la barre du haut) :
   il suffit de ne pas dépasser, et rien ne défile deux fois. */
.shell > .main .feuille.pleine{display:flex;flex-direction:column;height:100%;
 padding-bottom:22px;min-height:0}
.feuille.pleine .mtete{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
 margin-bottom:14px}
.feuille.pleine .mtete .t{margin:0}
/* Dix concessions ne tiennent pas sur une ligne : la bande défile. Le voile en
   dégradé sur le bord droit dit qu'elle continue — sans lui, la dernière pastille
   paraît coupée par accident. */
.feuille.pleine .mtete .cts{margin:0;flex:1;min-width:0;overflow-x:auto;
 padding-bottom:2px;flex-wrap:nowrap;scrollbar-width:none;
 mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.feuille.pleine .mtete .cts::-webkit-scrollbar{display:none}

.mgr{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);
 background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
 box-shadow:var(--ombre);overflow:hidden}

/* ---------- la colonne des fils ---------- */
.mgr .cot{border-right:1px solid var(--trait);display:flex;flex-direction:column;
 min-height:0;background:var(--bg2)}
.mgr .lst{flex:1;min-height:0;overflow-y:auto}
.mgr .lst .vide{padding:22px 18px;font-size:13px;color:var(--tertiaire);line-height:1.6}

/* Une ligne de fil : deux colonnes et deux rangs. Qui, quand, ce qui s'est dit
   en dernier — c'est dans cet ordre qu'on cherche une conversation. */
.mgr .fil{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
 padding:11px 16px;border-bottom:1px solid var(--trait2);text-decoration:none;
 border-left:3px solid transparent}
.mgr .fil:hover{background:var(--carte)}
.mgr .fil.on{background:var(--carte);border-left-color:var(--accent)}
.mgr .fil .qui{min-width:0}
.mgr .fil .qui b{display:block;font-weight:650;font-size:13.5px;color:var(--encre);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr .fil .qui .ou{display:block;font-size:11.5px;color:var(--tertiaire);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr .fil .dt{font-size:11px;color:var(--tertiaire);font-variant-numeric:tabular-nums;
 white-space:nowrap}
.mgr .fil .ext{grid-column:1;font-size:12px;color:var(--second);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
/* La pastille porte un NOMBRE, pas seulement une couleur : « 3 » se lit sans
   distinguer le bleu du gris. */
.mgr .fil .pt{grid-column:2;justify-self:end;align-self:center;background:var(--accent);
 color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;
 display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.mgr .fil.neuf .qui b{font-weight:800}
.mgr .fil.neuf .ext{color:var(--encre);font-weight:500}

/* ---------- le volet de droite ---------- */
.mgr .vol{display:flex;flex-direction:column;min-height:0;min-width:0}

.mgr .vol .rien{flex:1;display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:14px;padding:40px;text-align:center;color:var(--tertiaire)}
.mgr .vol .rien svg{width:44px;height:44px;opacity:.5}
.mgr .vol .rien p{font-size:13.5px;line-height:1.7;max-width:46ch;color:var(--second)}

.mgr .vol .hd{flex:none;display:flex;align-items:center;gap:12px;padding:13px 20px;
 border-bottom:1px solid var(--trait)}
.mgr .vol .hd .ret{display:none;flex:none;color:var(--second)}
.mgr .vol .hd .ret svg{width:22px;height:22px;display:block}
.mgr .vol .hd .id{min-width:0;flex:1}
.mgr .vol .hd .id b{display:block;font-size:15px;font-weight:700;color:var(--encre);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr .vol .hd .id span{display:block;font-size:12px;color:var(--tertiaire);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr .vol .hd .cc{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:var(--second);background:var(--bg2);
 border:1px solid var(--trait);border-radius:20px;padding:4px 11px;white-space:nowrap}

.mgr .vol .corps{flex:1;min-height:0;overflow-y:auto;padding:18px 20px;background:var(--bg2)}

/* ---------- les messages ---------- */
.fmsg{display:grid;gap:12px}

/* Deux bords, deux alignements. La bulle ne dépasse jamais 74 % de la largeur :
   une ligne de texte qui traverse tout l'écran ne se lit plus, l'œil perd le
   début de la ligne suivante. */
.ms{max-width:74%;border:1px solid var(--trait);border-radius:14px;
 padding:10px 14px 11px;background:var(--carte)}
.ms.moi{justify-self:end;background:var(--accent-doux);border-color:#D6E4FB}
.ms.lui{justify-self:start}
.ms.off{background:var(--bg2);border-style:dashed;color:var(--tertiaire)}

.ms .tt{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;font-size:11.5px}
.ms .tt b{font-weight:700;color:var(--encre);font-size:12.5px}
.ms .tt span{color:var(--tertiaire);font-variant-numeric:tabular-nums}
.ms .tt .lu{margin-left:auto;font-weight:600;color:var(--tertiaire)}
.ms .tt .lu.ok{color:var(--ok)}

/* pre-wrap : les retours à la ligne de l'auteur sont son texte. Les remplacer
   par des <br> aurait demandé de fabriquer du HTML ; ici le navigateur fait le
   travail et rien n'est interprété. */
.ms .co{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6;
 color:var(--encre);margin:0}
.ms.off .co{font-size:13px}

/* La marge négative annule la gouttière de la pastille : sans elle, un
   « @VO230265. » s'affichait « @VO230265 . » — quatre pixels avant le point,
   qui se lisent comme une faute de frappe. */
.ms .cit{font-weight:650;color:var(--accent);text-decoration:none;
 background:var(--bg2);border-radius:5px;padding:1px 3px;margin:0 -3px}
.ms.moi .cit{background:rgba(255,255,255,.7)}
.ms .cit:hover{text-decoration:underline}

/* La carte du véhicule cité. Quatre choses, et rien de plus : la vignette, la
   marque et le modèle, le numéro, les kilomètres. Le reste est sur la fiche, à
   un clic — une carte qui récite tout ne se lit plus d'un coup d'œil, et c'est
   là son seul intérêt au milieu d'une conversation. */
.ms .cvs{display:grid;gap:6px;margin-top:9px}
.ms .cv{display:flex;align-items:stretch;gap:10px;border:1px solid var(--trait);
 border-radius:10px;padding:7px 11px 7px 7px;background:var(--carte);
 text-decoration:none}
.ms .cv:hover{border-color:var(--accent)}
/* La vignette garde sa place même sans photo : une carte qui change de forme
   selon les dossiers se lit deux fois. Le rapport 4/3 est celui du parc. */
.ms .cv .ph{flex:none;display:flex;align-items:center;justify-content:center;
 width:76px;height:57px;border-radius:7px;overflow:hidden;background:var(--bg2);
 color:var(--trait2)}
.ms .cv .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ms .cv .ph svg{width:24px;height:24px}
.ms .cv .tx{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.ms .cv b{display:block;font-size:12.5px;font-weight:650;color:var(--encre);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms .cv .d{font-size:11.5px;color:var(--second);font-variant-numeric:tabular-nums}
.ms .cv .et{margin-top:2px;align-self:flex-start}

.ms .rt{margin-top:7px}
.ms .rt button{background:none;border:0;padding:0;font:inherit;font-size:11.5px;
 color:var(--tertiaire);cursor:pointer;text-decoration:underline}
.ms .rt button:hover{color:var(--erreur)}

/* ---------- écrire ---------- */
.mgr .pied{flex:none;position:relative;padding:12px 20px 14px;border-top:1px solid var(--trait);
 background:var(--carte)}
.mgr .zone{display:flex;align-items:flex-end;gap:8px;border:1.5px solid var(--trait);
 border-radius:var(--rb);padding:6px 6px 6px 12px;background:var(--bg)}
.mgr .zone:focus-within{border-color:var(--accent)}
.mgr .zone textarea{flex:1;min-width:0;border:0;background:none;outline:0;resize:none;
 font:inherit;font-size:14px;line-height:1.55;color:var(--encre);padding:6px 0;max-height:180px}
.mgr .zone button{flex:none;border:0;background:none;cursor:pointer;border-radius:9px;
 width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
 color:var(--second)}
.mgr .zone button:hover{background:var(--bg2)}
.mgr .zone .emo{font-size:19px;line-height:1}
.mgr .zone .emo.on{background:var(--accent-doux);color:var(--accent)}
.mgr .zone .env{background:var(--accent);color:#fff}
.mgr .zone .env:hover{background:var(--accent-sombre)}
.mgr .zone .env svg{width:17px;height:17px}
.mgr .pied .ai{font-size:11.5px;color:var(--tertiaire);margin:7px 2px 0}

/* ---------- les véhicules proposés après un « @ » ---------- */
/* Une liste qui ne prend pas toute la largeur : elle sort du « @ », elle n'est
   pas un écran. Bornée à 560 px, elle laisse voir la conversation derrière. */
.sugg{display:none;position:absolute;left:20px;bottom:calc(100% - 6px);
 width:min(560px, calc(100% - 40px));
 background:var(--carte);border:1px solid var(--trait);border-radius:var(--rb);
 box-shadow:var(--ombre-h);overflow:hidden;z-index:40;max-height:300px;overflow-y:auto}
.sugg.ouvert{display:block}
.sugg .hd{position:sticky;top:0;background:var(--bg2);border-bottom:1px solid var(--trait);
 padding:7px 14px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
 text-transform:uppercase;color:var(--tertiaire);display:flex;gap:12px}
.sugg .hd b{margin-left:auto;color:var(--accent);font-variant-numeric:tabular-nums}
/* Deux rangs : le libellé au-dessus, les repères chiffrés au-dessous. Tout sur
   une ligne obligeait à couper le modèle dès qu'il portait une finition. */
.sugg .it{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1px 11px;
 align-items:baseline;width:100%;text-align:left;border:0;background:none;cursor:pointer;
 font:inherit;padding:8px 14px;border-bottom:1px solid var(--trait2)}
.sugg .it:last-child{border-bottom:0}
.sugg .it.on,.sugg .it:hover{background:var(--accent-doux)}
.sugg .it b{font-size:12px;font-weight:700;color:var(--accent);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.sugg .it .t{font-size:13.5px;font-weight:600;color:var(--encre);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.sugg .it .d{grid-column:1/3;font-size:11.5px;color:var(--tertiaire);white-space:nowrap;
 font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
/* La concession, seulement quand ce n'est pas celle du fil : elle dit d'avance
   que le message partira ailleurs. La ligne reste cliquable — voir n'est pas
   écrire, et c'est le clic qui propose le bon fil. */
.sugg .it .s{grid-column:2;justify-self:end;font-size:10.5px;font-weight:700;
 letter-spacing:.04em;color:var(--alerte);background:var(--alerte-doux);
 border-radius:20px;padding:2px 9px;white-space:nowrap}
.sugg .it:not(.ailleurs) .s{display:none}
.sugg .it.ailleurs b{color:var(--second)}
/* « Aucun véhicule ne correspond » : une réponse, pas une liste vide. Une
   recherche qui se referme en silence laisse croire que rien ne cherche. */
.sugg .nul{padding:12px 14px;font-size:12.5px;line-height:1.65;color:var(--second)}
.sugg .nul b{color:var(--encre);font-weight:650}
.sugg .nul .v{display:inline-block;margin:7px 10px 0 0;color:var(--accent);font-weight:600}
/* Le geste utile est un bouton, pas un lien de plus : « Écrire à Ancenis » est
   ce qu'il faut faire, « Voir sa fiche » ce qu'on peut faire. */
.sugg .nul .v.f{background:var(--accent);color:#fff;border-radius:9px;padding:6px 12px;
 text-decoration:none}
.sugg .nul .v.f:hover{background:var(--accent-sombre)}

/* ---------- la palette d'émojis ---------- */
.emop{position:absolute;right:20px;bottom:calc(100% - 6px);width:340px;
 background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
 box-shadow:var(--ombre-h);z-index:40;display:flex;flex-direction:column;overflow:hidden}
/* « display:flex » l'emporte sur le « display:none » que le navigateur applique
   à [hidden] : sans cette ligne, la palette s'affiche en permanence, vide, et
   le bouton ne fait plus rien de visible. */
.emop[hidden]{display:none}
.emop .ong{display:flex;border-bottom:1px solid var(--trait2);padding:6px 6px 0;gap:2px}
.emop .ong .o{flex:1;border:0;background:none;cursor:pointer;font-size:17px;line-height:1;
 padding:7px 0 8px;border-bottom:2px solid transparent;border-radius:8px 8px 0 0}
.emop .ong .o:hover{background:var(--bg2)}
.emop .ong .o.on{border-bottom-color:var(--accent);background:var(--accent-doux)}
.emop .rech{margin:9px 11px;border:1.5px solid var(--trait);border-radius:9px;
 padding:7px 11px;font:inherit;font-size:13px;color:var(--encre);background:var(--bg);outline:0}
.emop .rech:focus{border-color:var(--accent)}
.emop .grille{overflow-y:auto;height:214px;padding:0 8px 10px;
 display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emop .grille .em{border:0;background:none;cursor:pointer;font-size:20px;line-height:1;
 height:36px;border-radius:8px;
 /* Les émojis sont des CARACTÈRES, pas des images : ils prennent la police du
    système, donc exactement l'aspect qu'ils ont partout ailleurs sur la
    machine de celui qui lit. Rien à héberger, rien à mettre à jour. */
 font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emop .grille .em:hover{background:var(--bg2);transform:scale(1.18)}
.emop .grille .vide{grid-column:1/-1;padding:22px 8px;text-align:center;font-size:12.5px;
 color:var(--tertiaire)}

/* ---------- au doigt ----------
   Deux colonnes ne tiennent pas sur 390 px. On n'en montre qu'une : la liste,
   ou le fil quand il est ouvert — avec une flèche pour revenir. C'est ce que
   fait toute messagerie sur téléphone, et la classe « ouvert » suffit à le
   dire parce que l'adresse porte déjà l'information. */
@media (max-width:820px){
  .shell > .main .feuille.pleine{height:auto;min-height:0}
  .mgr{grid-template-columns:minmax(0,1fr);height:70vh}
  .mgr .cot{border-right:0}
  .mgr.ouvert .cot{display:none}
  .mgr:not(.ouvert) .vol{display:none}
  .mgr .vol .hd .ret{display:block}
  .mgr .vol .hd .cc{display:none}
  .ms{max-width:90%}
  .emop{width:auto;left:14px;right:14px}
  .emop .grille{grid-template-columns:repeat(7,1fr)}
}

/* ---------- les véhicules joints au message ----------
   Une carte au-dessus de la zone d'écriture, comme une pièce jointe : on
   choisit une voiture dans la liste du « @ », elle se pose là, et le numéro ne
   traîne pas au milieu de la phrase. La croix l'enlève. */
.mgr .jointes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
.mgr .jointes[hidden]{display:none}
/* La carte jointe porte les mêmes quatre choses que celle du message : on
   compose ce qu'on va voir. */
.mgr .jv{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
 grid-template-areas:'ph b' 'ph d' 'ph s';align-items:center;column-gap:9px;row-gap:1px;
 padding:7px 34px 7px 7px;border:1px solid var(--trait);
 border-left:3px solid var(--accent);border-radius:10px;
 background:var(--bg2);max-width:290px}
.mgr .jv .ph{grid-area:ph;align-self:center;display:flex;align-items:center;
 justify-content:center;width:62px;height:47px;border-radius:6px;overflow:hidden;
 background:var(--carte)}
.mgr .jv .ph img{width:100%;height:100%;object-fit:cover;display:block}
.mgr .jv .ph.sans{background:repeating-linear-gradient(-45deg,var(--bg2),
 var(--bg2) 5px,var(--carte) 5px,var(--carte) 10px)}
.mgr .jv b{grid-area:b;font-size:12.5px;font-weight:650;color:var(--encre);overflow:hidden;
 text-overflow:ellipsis;white-space:nowrap}
.mgr .jv .d{grid-area:d;font-size:11px;color:var(--tertiaire);font-variant-numeric:tabular-nums;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr .jv .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;
 background:none;cursor:pointer;color:var(--tertiaire);font-size:17px;line-height:1;
 border-radius:7px}
.mgr .jv .x:hover{background:var(--trait);color:var(--erreur)}

/* Une carte jointe dont la voiture n'est pas de la concession du fil : on ne
   l'empêche plus — le partenaire voit tout le groupe — mais on nomme l'affaire
   qui la détient, pour que la question soit passée à qui de droit. */
.mgr .jv.ailleurs{border-left-color:var(--alerte)}
.mgr .jv .s{grid-area:s;display:block;font-size:10.5px;font-weight:700;
 letter-spacing:.04em;color:var(--alerte);overflow:hidden;text-overflow:ellipsis;
 white-space:nowrap}

/* ---------- les pièces jointes (registre 1.6) ---------- */
/* Les deux sortes de pièces — fiches véhicule et fichiers — vivent dans la même
   barre, au-dessus de la zone d'écriture. « display:contents » sur les deux
   listes : les cartes deviennent alors des enfants directs de la barre et se
   rangent sur une seule ligne qui se replie, au lieu de former deux blocs. */
.mgr .jointes .jl{display:contents}

.mgr .jf{position:relative;display:grid;grid-template-columns:auto 1fr;
 grid-template-areas:'ic n' 'ic d';column-gap:9px;align-items:center;
 padding:7px 32px 7px 9px;border:1px solid var(--trait);border-radius:10px;
 background:var(--bg2);max-width:260px}
.mgr .jf .ic{grid-area:ic;display:flex;align-items:center;justify-content:center;
 width:34px;height:34px;border-radius:8px;background:var(--accent-doux);
 color:var(--accent);font-size:9.5px;font-weight:800;letter-spacing:.02em}
.mgr .jf b{grid-area:n;font-size:12.5px;font-weight:650;color:var(--encre);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr .jf .d{grid-area:d;font-size:11px;color:var(--tertiaire);
 font-variant-numeric:tabular-nums}
.mgr .jf .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;
 background:none;cursor:pointer;color:var(--tertiaire);font-size:17px;line-height:1;
 border-radius:7px}
.mgr .jf .x:hover{background:var(--trait);color:var(--erreur)}

/* Le refus, sous la barre et nommant le fichier : « trop lourd » sans dire
   lequel, quand on en a choisi dix, oblige à tout recommencer. */
.mgr .pjko{margin:0 2px 9px;font-size:12px;line-height:1.5;color:var(--erreur)}
.mgr .pjko[hidden]{display:none}

/* Le champ de fichiers reste ATTEIGNABLE AU CLAVIER : masqué à l'œil, jamais
   « display:none » — sinon on ne peut plus joindre un fichier sans souris. */
.mgr .zone .pjc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mgr .zone .tr{flex:none;display:inline-flex;align-items:center;justify-content:center;
 width:34px;height:34px;border-radius:9px;cursor:pointer;color:var(--second)}
.mgr .zone .tr:hover{background:var(--bg2)}
.mgr .zone .tr svg{width:18px;height:18px}
.mgr .zone .pjc:focus-visible + .tr{background:var(--accent-doux);color:var(--accent);
 outline:2px solid var(--accent);outline-offset:1px}

/* Un fichier lâché sur la conversation : l'absence de réponse à un
   glisser-déposer se lit toujours comme une panne. La cible, c'est tout le
   volet — on lâche un devis sur les messages, pas sur la barre d'écriture. */
.mgr .vol.survol{outline:2px dashed var(--accent);outline-offset:-6px;
 background:var(--accent-doux)}
.mgr .vol.survol .pied{background:var(--accent-doux)}
.mgr .vol.survol .zone{border-color:var(--accent);border-style:dashed}

/* ---------- les pièces d'un message ---------- */
/* « align-items:flex-start » : sans lui, une carte de document posée à côté
   d'une vignette s'étire à la hauteur de l'image, et ses deux lignes de texte
   partent chacune de leur côté. */
.fmsg .pjs{display:flex;flex-wrap:wrap;align-items:flex-start;gap:7px;margin-top:8px}
.fmsg .pj{display:block;text-decoration:none}
.fmsg .pj.im{width:132px;height:100px;border-radius:10px;overflow:hidden;
 border:1px solid var(--trait);background:var(--bg2)}
.fmsg .pj.im img{width:100%;height:100%;object-fit:cover;display:block}
.fmsg .pj.im:hover{border-color:var(--accent)}

.fmsg .pj.do{display:grid;grid-template-columns:auto 1fr;
 grid-template-areas:'ic n' 'ic d';column-gap:9px;align-items:center;
 padding:8px 12px 8px 8px;border:1px solid var(--trait);border-radius:10px;
 background:var(--carte);max-width:250px}
.fmsg .pj.do:hover{border-color:var(--accent)}
.fmsg .pj.do .ic{grid-area:ic;display:flex;align-items:center;justify-content:center;
 width:34px;height:34px;border-radius:8px;background:var(--accent-doux);
 color:var(--accent);font-size:9.5px;font-weight:800}
.fmsg .pj.do .n{grid-area:n;font-size:12.5px;font-weight:650;color:var(--encre);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmsg .pj.do .d{grid-area:d;font-size:11px;color:var(--tertiaire)}

/* Passé soixante jours, le fichier n'est plus : la ligne reste, grise, et dit
   pourquoi. C'est la trace de l'échange qui rend la conversation lisible. */
.fmsg .pj.off{cursor:default;background:var(--bg2);border-style:dashed;max-width:320px}
.fmsg .pj.off:hover{border-color:var(--trait)}
.fmsg .pj.off .ic{background:var(--trait);color:var(--tertiaire)}
.fmsg .pj.off .n{color:var(--tertiaire);text-decoration:line-through}
.fmsg .pj.off .d{white-space:normal;line-height:1.45}

/* Sur les bulles de droite — les siennes — le fond est déjà teinté : la carte
   d'un document doit s'y détacher au lieu de s'y fondre. */
.fmsg .ms.moi .pj.do{background:rgba(255,255,255,.72);border-color:#D6E4FB}
.fmsg .ms.moi .pj.do .ic{background:#fff}
.fmsg .ms.moi .pj.off .ic{background:var(--trait);color:var(--tertiaire)}

/* ---------- les concessions et leurs adresses de notification ---------- */
/* Un formulaire par affaire : on corrige une concession à la fois, et
   l'enregistrement d'une ligne ne réécrit jamais les six autres. */
.conc{border:1px solid var(--trait);border-radius:var(--rb);padding:14px 16px 16px;
 background:var(--carte);margin-bottom:10px}
.conc + .conc{margin-top:0}
.conc .tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.conc .tete .id{display:flex;align-items:baseline;gap:8px;min-width:0}
.conc .tete .id b{font-size:14.5px;font-weight:700;color:var(--encre)}
.conc .tete .id span{font-size:11.5px;color:var(--tertiaire);
 font-variant-numeric:tabular-nums}
.conc .tete .et{margin-left:auto}
.conc .champ{display:block;margin:0 0 10px}
.conc .champ > span{display:block;font-size:12px;font-weight:600;color:var(--second);
 margin-bottom:5px}
.conc textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--trait);
 border-radius:10px;padding:9px 11px;font:inherit;font-size:13.5px;line-height:1.6;
 color:var(--encre);background:var(--bg);resize:vertical;min-height:44px}
.conc textarea:focus{outline:0;border-color:var(--accent)}

/* ---------- les carrosseries ---------- */
/* Un bloc vide le dit dans le bloc, pas dessous : sans regle, le paragraphe
   sortait de la carte et se collait au bord gauche de la page. */
.bloc > .in > .vide{margin:0;font-size:13px;color:var(--tertiaire)}
.bloc > .in > :last-child{margin-bottom:0}
/* Le compteur d'un titre de bloc : « Familles (9) », sans les parentheses. */
.bloc h2 .cpt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
 padding:0 6px;margin-left:6px;border-radius:999px;background:var(--puce);color:var(--second);
 font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;vertical-align:1px}

/* --- ce qui attend une decision --- */
.att-carr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
 border:1px solid #EFDCA8;background:var(--alerte-doux);border-radius:var(--rb);
 padding:12px 14px;margin-bottom:8px}
.att-carr .quoi{flex:1 1 220px;min-width:0}
.att-carr .quoi b{display:block;font-size:14.5px;font-weight:800;color:var(--encre)}
.att-carr .quoi span{font-size:11.5px;color:var(--alerte);font-variant-numeric:tabular-nums}
.att-carr select{flex:0 1 210px}
.att-carr input{flex:0 1 210px}
.att-carr select, .att-carr input{min-width:0;box-sizing:border-box;height:38px;
 border:1.5px solid #E8D6A6;border-radius:9px;padding:0 10px;font:inherit;font-size:13.5px;
 color:var(--encre);background:var(--blanc)}
.att-carr select:focus, .att-carr input:focus{outline:0;border-color:var(--accent)}
.att-carr .bt2{flex:none;height:38px}

/* --- une famille : son rang, son nom, son crayon, ses libelles --- */
.fam{border:1px solid var(--trait);border-radius:var(--rb);background:var(--carte);
 padding:12px 14px;margin-bottom:8px}
.fam .tete{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.fam h3{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--encre);
 margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam .tete .n{margin-left:auto;flex:none;font-size:12px;color:var(--tertiaire);
 font-variant-numeric:tabular-nums}

/* Le rang : deux fleches et un chiffre. Un numero a taper n'a de sens que
   relativement aux autres, et personne ne sait de tete celui du dessus. */
.fam .ord{display:flex;align-items:center;gap:2px;flex:none}
.fam .ord form{display:flex}
.fam .ord b{min-width:18px;text-align:center;font-size:12.5px;font-weight:800;
 color:var(--tertiaire);font-variant-numeric:tabular-nums}
.fam .ord button{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
 padding:0;border:0;border-radius:6px;background:none;color:var(--tertiaire);cursor:pointer;
 transition:.14s}
.fam .ord button svg{width:14px;height:14px}
.fam .ord button:hover:not(:disabled){background:var(--puce);color:var(--encre)}
.fam .ord button:disabled{opacity:.22;cursor:default}

/* Le crayon : un <details>, donc pas une ligne de script. Ouvert, il pose le
   champ de renommage sous le titre. */
.fam .crayon{flex:none}
.fam .crayon > summary{list-style:none;display:flex;align-items:center;justify-content:center;
 width:26px;height:26px;border-radius:8px;color:var(--tertiaire);cursor:pointer;transition:.14s}
.fam .crayon > summary::-webkit-details-marker{display:none}
.fam .crayon > summary svg{width:15px;height:15px}
.fam .crayon > summary:hover{background:var(--puce);color:var(--accent)}
.fam .crayon[open] > summary{background:var(--accent);color:#fff}
/* Ouvert, il pose un panneau SOUS la ligne, et non dedans : plie dans le flux,
   il repoussait le titre et le compteur sur le cote. Un panneau flottant ne
   deplace rien — la ligne reste ou elle est pendant qu'on renomme. */
.fam .crayon form{position:absolute;top:calc(100% + 8px);left:0;z-index:3;
 display:flex;align-items:center;gap:8px;flex-wrap:wrap;
 min-width:min(420px,100%);box-sizing:border-box;padding:10px;
 background:var(--carte);border:1px solid var(--trait);border-radius:11px;
 box-shadow:0 10px 26px rgba(13,27,42,.14)}
.fam .crayon input{flex:1 1 220px;min-width:0;box-sizing:border-box;height:38px;
 border:1.5px solid var(--trait);border-radius:9px;padding:0 11px;font:inherit;font-size:13.5px;
 color:var(--encre);background:var(--blanc)}
.fam .crayon input:focus{outline:0;border-color:var(--accent)}
.fam .crayon .bt2{flex:none;height:38px}
.fam .bt2.ko{color:var(--erreur)}
.fam .bt2.ko:hover{border-color:var(--erreur);background:var(--erreur-doux)}

/* Les libelles du DMS, en pastilles : il y en a dix sous « Utilitaire,
   Fourgon », et dix lignes pousseraient le reste de l'ecran hors de vue. */
.fam .mots{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fam .mot{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 9px;
 border-radius:999px;background:var(--puce);color:var(--second);border:1px solid var(--trait)}
.fam .mot i{font-style:normal;font-size:11px;font-weight:700;color:var(--tertiaire);
 font-variant-numeric:tabular-nums}
.fam .mot.rien{background:none;border-style:dashed;color:var(--tertiaire)}

/* Le pied : creer une famille, deplacer un libelle. */
.fam.pied{border-style:dashed;background:none}
.fam.pied form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fam.pied form + form{margin-top:10px;padding-top:10px;border-top:1px solid var(--trait)}
.fam.pied .lb{flex:none;font-size:12px;font-weight:700;color:var(--second);min-width:140px}
.fam.pied input, .fam.pied select{flex:1 1 180px;min-width:0;box-sizing:border-box;height:38px;
 border:1.5px solid var(--trait);border-radius:9px;padding:0 10px;font:inherit;font-size:13.5px;
 color:var(--encre);background:var(--blanc)}
.fam.pied input:focus, .fam.pied select:focus{outline:0;border-color:var(--accent)}
.fam.pied .bt2{flex:none;height:38px}

@media (max-width:760px){
  .att-carr select, .att-carr input, .att-carr .bt2{flex:1 1 100%}
  .fam.pied .lb{min-width:0;flex:1 1 100%}
  .fam.pied input, .fam.pied select, .fam.pied .bt2{flex:1 1 100%}
}

/* ---------- le détail d'un import : qui, quoi, avant, après ---------- */
/* Un compteur qui mène quelque part. Souligné en pointillé plutôt qu'en trait
   plein : c'est un nombre d'abord, un lien ensuite. */
.chif{color:var(--accent);text-decoration:none;border-bottom:1px dashed currentColor;
 font-variant-numeric:tabular-nums}
.chif:hover{border-bottom-style:solid}

/* Les écarts d'un véhicule se lisent en bloc : un filet plus marqué au premier
   champ dit où commence chaque dossier, sans répéter son numéro à chaque ligne. */
/* Les nombres du détail ne se coupent pas en deux lignes : « 133 800 » lu
   « 133 » puis « 800 » est un autre nombre. */
table.l.dense td.n{white-space:nowrap}
table.l.ecarts tr.deb > td{border-top:1px solid var(--trait)}
table.l.ecarts tr.deb:first-child > td{border-top:0}
table.l.ecarts .ch{color:var(--second);font-size:12.5px}
table.l.ecarts .av{color:var(--tertiaire);text-align:right;font-variant-numeric:tabular-nums;
 max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.l.ecarts .fl{color:var(--trait2);text-align:center;width:18px;padding:0}
table.l.ecarts .ap{color:var(--encre);font-weight:600;font-variant-numeric:tabular-nums;
 max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}