/* Mercure — la feuille de style.
   Stéphane, 07/11 : « il fallait garder ce système de cartes que j'avais avant. Dans tri des demandes. Dans atelier
   […] Là, il n'y a plus de couleurs, il n'y a plus rien. C'est du texte sur du blanc […] le but c'était de prendre les
   visuels qu'on a déjà fait. Ok, peut-être d'harmoniser un petit peu les couleurs ». Donc les codes de Tri et de VESTA
   (« sur Vesta, la gueule que ça a, c'est magnifique », 22/10) pour TOUT Mercure : des surfaces franches séparées par
   des bordures visibles, une seule échelle d'arrondis, des cartes, des couleurs qui disent quelque chose, de l'air.
   Sombre par défaut comme Tri, VESTA et Stockelec ; clair au choix (bouton ◐, gardé sur l'appareil). Les filtres restent
   des sélecteurs (Tri, 27/10 : « toutes ces petites bulles là, je ne les aime pas […] Je préfère largement un beau
   sélecteur »). */

@font-face {
  font-family: "Inter";
  src: url("/polices/inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root, html[data-theme="sombre"] {
  --fond: #0f1115; --surface: #16181d; --surface-2: #1c1f26; --surface-3: #23272f;
  --bordure: #262a32; --bordure-forte: #363b46;
  --texte: #e6e8eb; --texte-doux: #a1a7b0; --texte-tres-doux: #6e747d;
  --accent: #22d3ee; --accent-texte: #04141a; --accent-doux: color-mix(in srgb, var(--accent) 14%, transparent);
  --c-vert: #4ade80; --c-orange: #fb923c; --c-rouge: #f87171; --c-bleu: #60a5fa; --c-jaune: #facc15; --c-violet: #a78bfa;
  --f-vert: rgba(74,222,128,.12); --f-orange: rgba(251,146,60,.14); --f-rouge: rgba(248,113,113,.14); --f-bleu: rgba(96,165,250,.14);
  --f-violet: rgba(167,139,250,.15); --f-jaune: rgba(250,204,21,.13);
  --ombre-1: 0 1px 2px rgba(0,0,0,.28);
  --ombre-2: 0 4px 12px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.24);
  --ombre-3: 0 12px 32px rgba(0,0,0,.44), 0 2px 8px rgba(0,0,0,.28);
  /* graphiques : palette contrôlée au validateur sur le fond sombre (cyan, orange, violet, vert) */
  --serie-1: #1aa3c4; --serie-2: #d95926; --serie-3: #9085e9; --serie-4: #199e70;
  --serie-douce: color-mix(in srgb, var(--serie-1) 38%, var(--surface-3));
  color-scheme: dark;
}
html[data-theme="clair"] {
  --fond: #f6f7f9; --surface: #ffffff; --surface-2: #f3f4f6; --surface-3: #e9ebef;
  --bordure: #e6e8ec; --bordure-forte: #d3d7de;
  --texte: #14161a; --texte-doux: #5c636d; --texte-tres-doux: #8b919a;
  --accent: #0891b2; --accent-texte: #ffffff;
  --c-vert: #16a34a; --c-orange: #d9730d; --c-rouge: #dc2626; --c-bleu: #2563eb; --c-jaune: #ca8a04; --c-violet: #7c3aed;
  --f-vert: #ecf7ef; --f-orange: #fdf0e3; --f-rouge: #fdecec; --f-bleu: #eaf1fd; --f-violet: #f1ecfe; --f-jaune: #fdf6d8;
  --ombre-1: 0 1px 2px rgba(16,24,40,.05);
  --ombre-2: 0 4px 10px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.05);
  --ombre-3: 0 12px 28px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  --serie-1: #0891b2; --serie-2: #d9730d; --serie-3: #7c3aed; --serie-4: #16a34a;
  --serie-douce: color-mix(in srgb, var(--serie-1) 30%, var(--surface-3));
  color-scheme: light;
}
:root {
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --rayon: var(--r-md);
  --menu: 248px;
  /* anciens noms (encore lus par quelques règles) */
  --fond-2: var(--surface-2); --fond-3: var(--surface-3); --survol: var(--surface-2); --trait: var(--bordure);
  --encre: var(--texte); --encre-2: var(--texte-doux); --encre-3: var(--texte-tres-doux); --vert: var(--c-vert); --rouge: var(--c-rouge);
  --ombre: var(--ombre-3);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { min-height: 100%; background: var(--fond); color: var(--texte); }
body { font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.montant, .chiffre { font-variant-numeric: tabular-nums; white-space: nowrap; }
svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--fond); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- les mots de statut : un mot coloré sur un fond doux (comme les badges de Tri) */
.st-retard, .st-payee, .st-signe, .st-facture, .st-a_encaisser, .st-attente, .st-brouillon, .st-abandonnee, .st-annule,
.st-refuse, .st-avoir, .st-en_cours, .st-file, .st-bloque, .st-sous_traite, .st-pret, .st-termine {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1.25; white-space: nowrap; background: var(--surface-3); color: var(--texte-doux); }
.st-retard, .st-refuse { background: var(--f-rouge); color: var(--c-rouge); }
.st-payee, .st-signe, .st-facture, .st-pret { background: var(--f-vert); color: var(--c-vert); }
.st-a_encaisser, .st-en_cours { background: var(--f-bleu); color: var(--c-bleu); }
.st-attente, .st-bloque { background: var(--f-orange); color: var(--c-orange); }
.st-sous_traite { background: var(--accent-doux); color: var(--accent); }
.discret { color: var(--texte-tres-doux); }
.positif { color: var(--c-vert); }
.negatif { color: var(--c-rouge); }
.accent { color: var(--accent); }
.petit { font-size: 12.5px; }

/* ---------- boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-md); font-weight: 650; font-size: 14px; background: var(--accent); color: var(--accent-texte);
  border: 1px solid transparent; white-space: nowrap; transition: filter .15s ease, box-shadow .15s ease, transform .12s ease, background-color .15s ease; }
.bouton:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--ombre-2); }
.bouton:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.bouton.second { background: var(--surface-2); color: var(--texte); border-color: var(--bordure); }
.bouton.second:hover:not(:disabled) { background: var(--surface-3); border-color: var(--bordure-forte); filter: none; }
.bouton.attention { color: var(--c-rouge); }
.bouton.rouge { background: var(--c-rouge); color: #fff; }
.bouton.large { width: 100%; min-height: 50px; font-size: 15px; }
.bouton.petit-bouton { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.lien { color: var(--accent); font-weight: 550; }
.lien:hover { text-decoration: underline; }
.lien-noir { color: inherit; }
.lien-noir:hover { color: var(--accent); }
.icone-bouton { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--texte-doux);
  border: 1px solid var(--bordure); background: var(--surface-2); transition: background-color .15s ease, color .15s ease; }
.icone-bouton:hover { background: var(--surface-3); color: var(--texte); }
.icone-bouton.petit { width: 30px; height: 30px; border-radius: var(--r-sm); }
.icone-bouton.petit svg.ic { width: 15px; height: 15px; }

/* ---------- champs */
.recherche { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--bordure); color: var(--texte-tres-doux); }
.recherche input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--texte); }
.recherche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.champ { display: block; margin-top: 14px; }
.champ > span { display: block; font-size: 12.5px; color: var(--texte-doux); margin-bottom: 6px; font-weight: 600; }
.champ input, .champ select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--bordure); border-radius: var(--r-md);
  background: var(--surface-2); outline: 0; color: var(--texte); }
.champ input:focus, .champ select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.zone-texte { width: 100%; display: block; border: 1px solid var(--bordure); border-radius: var(--r-md); padding: 10px 12px;
  resize: vertical; outline: 0; line-height: 1.5; background: var(--surface-2); color: var(--texte); margin-top: 6px; }
.zone-texte:focus { border-color: var(--accent); }
.deux-champs { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.deux-champs.egaux, .deux-champs.large-gauche { grid-template-columns: 1fr 1fr; }
.erreur { color: var(--c-rouge); margin-top: 12px; font-weight: 550; }
select.selecteur { height: 40px; border-radius: var(--r-md); border: 1px solid var(--bordure); background: var(--surface); color: var(--texte);
  padding: 0 34px 0 12px; font-weight: 600; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%), linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.filtre { display: inline-flex; align-items: center; gap: 8px; color: var(--texte-tres-doux); font-size: 13px; }

/* ---------- onglets en segments (comme l'historique de Tri) */
.onglets, .segments { display: flex; gap: 3px; padding: 4px; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r-lg); overflow-x: auto; scrollbar-width: none; max-width: 100%; width: max-content; }
.onglets::-webkit-scrollbar, .segments::-webkit-scrollbar { display: none; }
.onglets button, .segments button { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 38px;
  padding: 7px 14px; border-radius: var(--r-md); color: var(--texte-doux); font-size: 14px; font-weight: 600; white-space: nowrap; }
.onglets button:hover, .segments button:hover { background: var(--surface-2); color: var(--texte); }
.onglets button.actif, .segments button.actif { background: var(--surface-3); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bordure-forte); }
.onglets .n, .segments .n { font-size: 12px; font-weight: 650; color: var(--texte-tres-doux); font-variant-numeric: tabular-nums; }
.segments button.point::after { content: ""; position: absolute; top: 7px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- les tuiles (« À traiter » de Tri, chiffres de l'accueil) */
.tuiles { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.tuiles::-webkit-scrollbar { display: none; }
.tuile { --tuile-c: var(--accent); --tuile-fond: var(--accent-doux);
  flex: 1 1 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; align-items: center;
  min-width: 190px; padding: 12px 16px 12px 12px; border-radius: var(--r-lg); border: 1px solid var(--bordure); background: var(--surface);
  color: var(--texte); text-align: left; box-shadow: var(--ombre-1); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.tuile > svg.ic { grid-row: 1 / 4; width: 42px; height: 42px; padding: 10px; border-radius: var(--r-md); background: var(--tuile-fond); color: var(--tuile-c); }
.tuile .t-nom { font-size: 13px; font-weight: 600; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile .t-n { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; color: var(--tuile-c); }
.tuile .t-sous { font-size: 12px; color: var(--texte-tres-doux); line-height: 1.35; }
.tuile:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-2); }
.tuile.actif { border-color: var(--tuile-c); background: color-mix(in srgb, var(--tuile-c) 8%, var(--surface)); box-shadow: inset 0 0 0 1px var(--tuile-c), var(--ombre-2); }
.tuile.actif .t-nom { color: var(--texte); }
.tuile.zero .t-n { color: var(--texte-tres-doux); }
.t-vert { --tuile-c: var(--c-vert); --tuile-fond: var(--f-vert); }
.t-bleu { --tuile-c: var(--c-bleu); --tuile-fond: var(--f-bleu); }
.t-violet { --tuile-c: var(--c-violet); --tuile-fond: var(--f-violet); }
.t-orange { --tuile-c: var(--c-orange); --tuile-fond: var(--f-orange); }
.t-rouge { --tuile-c: var(--c-rouge); --tuile-fond: var(--f-rouge); }
.titre-famille { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texte-tres-doux); }
.titre-famille + * { margin-top: 0; }

/* ============================================================ ORDINATEUR */
.bureau { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); min-height: 100vh; }
.menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--bordure);
  display: flex; flex-direction: column; padding: 16px 12px; }
.marque { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; }
.logo { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 800; font-size: 15px;
  letter-spacing: -.4px; color: var(--accent-texte); background: linear-gradient(135deg, var(--accent), #818cf8); box-shadow: var(--ombre-2); flex: none; }
.logo img { width: 100%; height: 100%; border-radius: inherit; display: block; }
.marque b { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.2px; }
.marque small { display: block; font-size: 12px; color: var(--texte-tres-doux); }
.bouton.nouveau-menu { width: 100%; margin: 0 0 14px; }
.menu .entree { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-md); color: var(--texte-doux); font-weight: 550; }
.menu .entree:hover { background: var(--surface-2); color: var(--texte); }
.menu .entree.actif { background: var(--accent-doux); color: var(--accent); }
.menu .entree .fleche { margin-left: auto; color: var(--texte-tres-doux); width: 14px; height: 14px; }
.menu .entree .nombre { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 12px;
  font-weight: 700; background: var(--surface-3); color: var(--texte); font-variant-numeric: tabular-nums; }
.menu .entree.actif .nombre { background: var(--accent); color: var(--accent-texte); }
.menu .rubrique { font-size: 11.5px; color: var(--texte-tres-doux); padding: 20px 10px 6px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.menu .pied-menu { margin-top: auto; padding-top: 16px; }
.menu .moi { display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--texte-doux); font-size: 13px; }
.menu .moi .icone-bouton { margin-left: auto; }

.page { margin: 0; padding: 28px 36px 72px; }   /* toute la largeur (Stéphane, 07/11 : « pense bien à utiliser toute la page ») */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.entete h1 { font-size: 26px; font-weight: 750; letter-spacing: -.4px; line-height: 1.2; }
.entete p { color: var(--texte-doux); margin-top: 4px; }
.entete .recherche { width: 300px; }
.outils-entete { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.outils-entete .recherche { width: 260px; }

/* les listes : un tableau dans une surface */
.surface, table.liste { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); box-shadow: var(--ombre-1); }
table.liste { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-top: 14px; }
.liste th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--texte-tres-doux); padding: 12px 14px 10px; letter-spacing: .5px;
  text-transform: uppercase; border-bottom: 1px solid var(--bordure); white-space: nowrap; background: var(--surface); }
.liste td { padding: 12px 14px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.liste tr:last-child td { border-bottom: 0; }
.liste tr.ligne { cursor: pointer; }
.liste tr.ligne:hover td { background: var(--surface-2); }
.liste tr.choisie td { background: var(--accent-doux); }
.liste .droite { text-align: right; }
.liste .fort { font-weight: 650; }
.liste .sous { color: var(--texte-tres-doux); font-size: 13px; }
td.coupe { max-width: 340px; }
td.coupe div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vide { padding: 40px 4px; color: var(--texte-tres-doux); text-align: center; }
.petit-vide { padding: 12px 4px; text-align: left; }
.bureau.avec-panneau main { padding-right: min(540px, 94vw); }
.bureau.avec-panneau.panneau-large main { padding-right: min(740px, 60vw); }
.bureau.avec-panneau .page { padding-left: 28px; padding-right: 24px; }
.bureau.avec-panneau .secondaire { display: none; }
.bureau.avec-panneau .entete .recherche { width: 200px; }
.bureau.panneau-large .liste td .sous { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

/* ---------- accueil */
.hero-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
.carte-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-xl); padding: 20px 22px; box-shadow: var(--ombre-1); min-width: 0; }
.hero { position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); pointer-events: none; }
.etiquette { color: var(--texte-doux); font-weight: 600; }
.hero .valeur { font-size: 48px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.1; margin: 8px 0 6px; color: var(--texte); }
.hero .explication { color: var(--texte-tres-doux); font-size: 13px; }
.hero .recu { color: var(--texte-doux); font-size: 13px; margin-top: 16px; }
.jauge { height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; margin-top: 18px; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #818cf8); border-radius: 6px; }
.jauge-legende { display: flex; justify-content: space-between; color: var(--texte-doux); font-size: 13px; margin-top: 8px; }
.titre-graphe { font-weight: 700; font-size: 14.5px; margin-bottom: 12px; }
.titre-graphe.avec-choix { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
select.selecteur.petit { height: 32px; font-size: 13px; font-weight: 500; }
.accueil-tuiles { margin-top: 18px; }
.graphes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.graphes.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trois-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 1240px) {
  .graphes, .trois-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.titre-bloc { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; }
.titre-bloc h2 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.mini { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: var(--r-md); cursor: pointer; }
.mini + .mini { border-top: 1px solid var(--bordure); border-radius: 0; }
.mini:hover { background: var(--surface-2); }
.mini .milieu { flex: 1; min-width: 0; }
.mini .t1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .t2 { color: var(--texte-tres-doux); font-size: 13px; }
.mini .droite { text-align: right; }

/* ---------- panneau de détail, à droite */
.panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 94vw); background: var(--surface); border-left: 1px solid var(--bordure);
  box-shadow: var(--ombre-3); display: flex; flex-direction: column; z-index: 20; animation: glisser .18s ease-out; }
.panneau.large { width: min(740px, 96vw); }
@keyframes glisser { from { transform: translateX(28px); opacity: 0; } }
.panneau .haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 14px 24px; border-bottom: 1px solid var(--bordure); }
.panneau .haut .ref { color: var(--texte-doux); font-weight: 650; }
.panneau .corps { overflow-y: auto; padding: 22px 24px 32px; flex: 1; }
.panneau .pied { padding: 14px 24px; border-top: 1px solid var(--bordure); display: flex; gap: 10px; flex-wrap: wrap; background: var(--surface); }
.panneau .pied .bouton { flex: 1 1 auto; }
.panneau.large .pied .bouton { flex: 0 1 auto; }

/* contenu commun des fiches */
.tete-fiche .qui { color: var(--accent); font-weight: 650; }
.tete-fiche .gros { font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; margin: 6px 0 6px; }
.tete-fiche .nom-client { font-size: 24px; font-weight: 750; letter-spacing: -.4px; line-height: 1.2; display: block; }
.infos { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; margin-top: 18px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--bordure); border-radius: var(--r-lg); }
.infos dt { color: var(--texte-tres-doux); }
.infos dd { min-width: 0; overflow-wrap: anywhere; }
.titre-section { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--texte-tres-doux); margin: 26px 0 8px; }
.l-doc { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bordure); }
.l-doc .d { color: var(--texte-tres-doux); font-size: 13px; white-space: pre-line; margin-top: 2px; }
.l-doc .q { color: var(--texte-tres-doux); font-size: 13px; }
.l-total { display: flex; justify-content: space-between; padding: 14px 0 0; font-weight: 750; font-size: 16px; }
.l-debours { color: var(--c-orange); font-size: 12px; font-weight: 650; padding-top: 14px; text-transform: uppercase; letter-spacing: .4px; }
.manque { color: var(--c-orange); margin-top: 8px; }
.manque b { font-weight: 700; }
.texte-long { white-space: pre-line; overflow-wrap: anywhere; }
.puces { padding-left: 18px; margin-top: 6px; color: var(--texte-doux); }
.boutons-ligne { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ============================================================ TÉLÉPHONE */
.mobile { min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.m-entete { position: sticky; top: 0; z-index: 5; padding: calc(10px + env(safe-area-inset-top)) 16px 12px;
  background: color-mix(in srgb, var(--fond) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure); }
.m-entete .haut { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 8px; }
.m-entete .haut > span { display: flex; gap: 8px; align-items: center; }
.m-entete h1 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; margin-top: 2px; }
.m-entete .recherche { margin-top: 10px; height: 42px; }
.m-retour { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-size: 16px; font-weight: 600; margin-left: -8px; padding: 6px 4px; }
.m-retour svg.ic { width: 24px; height: 24px; }
.m-onglets { padding: 12px 16px 0; }
.m-liste { margin: 12px 16px 0; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); overflow: hidden; }
.m-liste .r { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.m-liste .r + .r { border-top: 1px solid var(--bordure); }
.m-liste .r:active { background: var(--surface-2); }
.r .milieu { flex: 1; min-width: 0; }
.r .t1 { font-size: 16px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .t2 { font-size: 13.5px; color: var(--texte-tres-doux); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .droite { text-align: right; flex: none; }
.r .m1 { font-size: 16px; font-weight: 650; }
.r .m2 { font-size: 13px; margin-top: 2px; }
.r .chevron { color: var(--texte-tres-doux); width: 18px; height: 18px; }
.m-titre-section { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--texte-tres-doux); padding: 22px 18px 0; }
.m-bloc { margin: 12px 16px 0; }
.m-hero { margin: 14px 16px 0; }
.m-hero .valeur { font-size: 42px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; margin: 6px 0 4px; }
.m-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 16px 0; }
.m-tuiles .tuile { min-width: 0; padding: 10px 12px 10px 10px; column-gap: 10px; }
.m-tuiles .tuile > svg.ic { width: 36px; height: 36px; padding: 8px; }
.m-tuiles .tuile .t-n { font-size: 20px; }
.m-tuiles .tuile .t-sous { display: none; }
.m-graphe { margin: 12px 16px 0; }
.m-fiche { padding: 14px 16px 130px; }
.m-actions { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 6;
  padding: 14px 16px 12px; background: linear-gradient(transparent, var(--fond) 30%); display: flex; gap: 10px; }
.m-actions .bouton { flex: 1; min-height: 50px; font-size: 15px; }
.m-actions .bouton.second { flex: 0 0 auto; padding: 0 16px; }
.m-actions.defile { overflow-x: auto; scrollbar-width: none; }
.m-actions.defile .bouton { flex: 0 0 auto; padding: 0 16px; }
.onglets-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordure); }
.onglets-bas a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--texte-tres-doux); }
.onglets-bas a.actif { color: var(--accent); }
.onglets-bas svg.ic { width: 23px; height: 23px; }
.onglets-bas .nombre { font-weight: 800; color: var(--accent); }
.m-reglage { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--bordure); }
.m-reglage .milieu { flex: 1; min-width: 0; }
.m-reglage .fort { font-weight: 650; }
.reglages-liste { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); overflow: hidden; margin: 10px 16px 0; }
.page .reglages-liste { margin: 10px 0 0; }
.reglages-liste .m-reglage:last-child { border-bottom: 0; }

/* ============================================================ FEUILLE (téléphone) / FENÊTRE (ordinateur) */
.voile { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; animation: fondu .15s ease-out; }
@keyframes fondu { from { opacity: 0; } }
.feuille { background: var(--surface); color: var(--texte); width: 100%; max-height: 94vh; overflow-y: auto; border-radius: 18px 18px 0 0;
  border: 1px solid var(--bordure); padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); animation: monter .22s ease-out; box-shadow: var(--ombre-3); }
@keyframes monter { from { transform: translateY(40px); opacity: .4; } }
.feuille .poignee { width: 38px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 2px auto 16px; }
.feuille .haut-feuille { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.feuille h2 { font-size: 20px; font-weight: 750; letter-spacing: -.3px; }
.feuille .sous-titre { color: var(--texte-doux); margin-top: 3px; }
.feuille .gros { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 14px 0 8px; }
.feuille .actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.feuille .texte-feuille { color: var(--texte-doux); margin-top: 10px; }
.choix { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 12px; border-radius: var(--r-md); border: 1px solid var(--bordure);
  background: var(--surface-2); margin-top: 8px; transition: border-color .15s ease, background-color .15s ease; }
.choix:hover { border-color: var(--bordure-forte); }
.choix svg.ic { width: 22px; height: 22px; color: var(--texte-doux); }
.choix .milieu { flex: 1; min-width: 0; }
.choix .t1 { font-size: 15.5px; font-weight: 650; }
.choix .t2 { font-size: 13px; color: var(--texte-tres-doux); }
.choix .coche { color: var(--accent); visibility: hidden; }
.choix.actif { border-color: var(--accent); background: var(--accent-doux); }
.choix.actif .coche { visibility: visible; }
.choix.actif .t1 { color: var(--accent); }
.fait { text-align: center; padding: 18px 0 6px; }
.fait .rond { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; background: var(--f-vert); color: var(--c-vert); display: grid; place-items: center; }
.fait .rond svg.ic { width: 28px; height: 28px; stroke-width: 2.4; }
.choix-lieu { margin-top: 14px; }
.retouche { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.retouche input { flex: 1; min-width: 200px; height: 40px; border: 1px solid var(--bordure); border-radius: var(--r-md); padding: 0 12px; outline: 0; background: var(--surface-2); }
.retouche input:focus { border-color: var(--accent); }
@media (min-width: 821px) {
  .voile { align-items: center; }
  .feuille { width: 480px; border-radius: var(--r-xl); padding: 24px 26px 26px; }
  .feuille.large { width: 700px; }
  .feuille .poignee { display: none; }
}

/* ============================================================ CONNEXION, MESSAGES */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--fond); }
.connexion form { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--ombre-3); }
.connexion .logo { width: 46px; height: 46px; font-size: 17px; margin-bottom: 20px; }
.connexion h1 { font-size: 24px; font-weight: 750; letter-spacing: -.4px; }
.connexion p { color: var(--texte-doux); margin-top: 6px; }
.connexion .bouton { margin-top: 22px; }
.message { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 50; background: var(--texte); color: var(--fond);
  padding: 11px 18px; border-radius: var(--r-md); box-shadow: var(--ombre-3); font-weight: 650; animation: fondu .2s; }
.chargement { padding: 60px 4px; color: var(--texte-tres-doux); text-align: center; }
.alerte-ligne { color: var(--c-rouge); padding: 12px 14px; background: var(--f-rouge); border-radius: var(--r-md); margin-top: 10px; }

/* ============================================================ GRAPHIQUES (graphiques.js) */
svg.graphe { width: 100%; height: auto; display: block; overflow: visible; }
svg .grille { stroke: var(--bordure); stroke-width: 1; }
svg .grille.base { stroke: var(--bordure-forte); }
svg .objectif { stroke: var(--c-orange); stroke-width: 1.5; }
svg text { font-family: inherit; }
svg .axe { fill: var(--texte-tres-doux); font-size: 11px; font-variant-numeric: tabular-nums; }
svg .axe.fort { fill: var(--texte); font-weight: 700; }
svg .axe.objectif-texte { fill: var(--c-orange); font-weight: 650; }
svg .valeur-graphe { fill: var(--texte); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
svg .centre { fill: var(--texte); font-size: 17px; font-weight: 800; }
.anneau { display: flex; align-items: center; gap: 18px; }
.anneau svg { width: 120px; height: 120px; flex: none; }
.legende { list-style: none; flex: 1; min-width: 0; }
.legende li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 34px; align-items: center; gap: 7px; padding: 5px 0; font-size: 13px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; }
.legende .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte-doux); }
.legende .montant { font-weight: 650; }
.legende .part { color: var(--texte-tres-doux); text-align: right; }
.legende.en-ligne { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; }
.legende.en-ligne li { grid-template-columns: 10px auto auto auto; }
.barres-h .bh { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
a.bh:hover .nom { color: var(--accent); }
.bh .nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte-doux); }
.bh .piste { height: 10px; }
.bh .piste i { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.bh .val { color: var(--texte); font-weight: 650; }
.segmente { display: flex; gap: 2px; height: 28px; }
.segmente span { border-radius: 4px; display: flex; align-items: center; padding-left: 8px; font-size: 12px; font-weight: 700; min-width: 4px; white-space: nowrap; }
.vide-graphe { color: var(--texte-tres-doux); padding: 18px 0; }
.survol-info { position: fixed; z-index: 60; background: var(--surface-2); color: var(--texte); border: 1px solid var(--bordure-forte);
  border-radius: var(--r-sm); padding: 6px 10px; font-size: 12.5px; pointer-events: none; max-width: 300px; box-shadow: var(--ombre-2); }

/* ============================================================ DEMANDES — les cartes de Tri */
.dem-mise { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1280px) { .dem-mise.avec-atelier { grid-template-columns: 330px minmax(0, 1fr); } }
@media (min-width: 1900px) { .dem-mise.avec-atelier { grid-template-columns: 420px minmax(0, 1fr); } }
.dem-atelier { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r-xl); padding: 16px 14px 20px; }
.dem-familles { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; margin-bottom: 16px; }
.dem-famille { min-width: 0; max-width: 100%; }
.outils-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.grille-cartes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); align-items: start; }
.carte { position: relative; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-xl); padding: 18px;
  box-shadow: var(--ombre-1); min-width: 0; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.carte:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-2); }
.carte::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--texte-tres-doux); }
.carte.note-bien::before, .carte.note-pertinent::before { background: var(--c-vert); }
.carte.note-moyen::before { background: var(--c-orange); }
.carte.a-repondu { border-color: color-mix(in srgb, var(--accent) 55%, var(--bordure)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--ombre-2); }
.carte > * { margin: 0; }
.bandeau { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.35; }
.bandeau b { font-size: 14px; letter-spacing: 2px; font-weight: 800; }
.bandeau.public { background: color-mix(in srgb, var(--c-jaune) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c-jaune) 45%, transparent); }
.bandeau.public b { color: var(--c-jaune); }
.bandeau.repondu { background: var(--accent-doux); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--texte); }
.bandeau.repondu svg.ic { color: var(--accent); }
.carte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.carte-qui { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ligne1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.note-mot, .marque-mot { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; line-height: 1.1;
  white-space: nowrap; background: var(--surface-2); color: var(--texte-doux); }
.note-mot { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.note-bien .note-mot, .note-pertinent .note-mot { background: var(--f-vert); color: var(--c-vert); }
.note-moyen .note-mot { background: var(--f-orange); color: var(--c-orange); }
.marque-mot.discret { background: transparent; padding-left: 2px; padding-right: 2px; color: var(--texte-tres-doux); }
.marque-mot.orange { background: var(--f-orange); color: var(--c-orange); font-weight: 650; }
.marque-mot.bleu { background: var(--f-bleu); color: var(--c-bleu); font-weight: 600; }
.marque-mot.violet { background: var(--f-violet); color: var(--c-violet); font-weight: 600; }
.marque-mot.vert { background: var(--f-vert); color: var(--c-vert); font-weight: 600; }
.marque-mot.accent { background: var(--accent-doux); color: var(--accent); font-weight: 650; }
.titre-demande { font-size: 19px; font-weight: 750; letter-spacing: -.2px; line-height: 1.3; overflow-wrap: anywhere; color: var(--texte); }
button.titre-demande { text-align: left; }
button.titre-demande:hover { color: var(--accent); }
.client-ligne { font-size: 14px; color: var(--texte-doux); line-height: 1.4; }
.client-ligne b { color: var(--texte); font-weight: 650; }
.client-ligne a:hover b { color: var(--accent); }
.gain { flex: none; text-align: right; padding: 10px 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--bordure); min-width: 128px; }
.gain-mot { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texte-tres-doux); }
.gain-chiffre { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.8px; color: var(--texte-doux); font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.note-bien .gain-chiffre { color: var(--c-vert); } .note-moyen .gain-chiffre { color: var(--c-orange); }
.gain-detail { font-size: 12px; color: var(--texte-tres-doux); line-height: 1.45; }
.panne { font-size: 16px; line-height: 1.5; color: var(--texte); font-weight: 600; }
.conseil-bloc { --avis: var(--c-orange); padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--avis) 45%, transparent);
  background: color-mix(in srgb, var(--avis) 9%, var(--surface)); display: flex; flex-direction: column; gap: 8px; }
.conseil-bloc.avis-oui { --avis: var(--c-vert); } .conseil-bloc.avis-non { --avis: var(--c-rouge); }
.conseil-avis { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texte-doux); }
.conseil-avis svg.ic { color: var(--avis); width: 15px; height: 15px; }
.conseil-avis b { font-size: 17px; color: var(--avis); font-weight: 800; }
.conseil-phrase { font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.conseil-prix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.prix-case { display: flex; flex-direction: column; padding: 9px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--bordure); }
.prix-quoi { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-tres-doux); }
.prix-montant { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--texte); font-variant-numeric: tabular-nums; }
.prix-detail { font-size: 12.5px; color: var(--texte-doux); line-height: 1.4; }
.prediag { padding: 12px 14px; border-radius: var(--r-md); background: var(--f-bleu); border: 1px solid color-mix(in srgb, var(--c-bleu) 25%, transparent); font-size: 14px; line-height: 1.5; }
.prediag-titre { font-weight: 700; margin-bottom: 4px; color: var(--c-bleu); display: flex; gap: 8px; align-items: center; }
.prediag ul { margin: 4px 0 2px; padding-left: 20px; }
.decision { font-size: 13.5px; color: var(--texte-doux); padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--bordure); }
.decision b { color: var(--texte); }
.dernier-mot { font-size: 13.5px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border-left: 3px solid var(--accent); color: var(--texte); }
.dernier-mot .qui-mot { font-size: 12px; color: var(--texte-tres-doux); margin-bottom: 2px; }
.boutons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.boutons button, .boutons a.bouton { min-height: 44px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--accent); color: var(--accent-texte);
  font-weight: 700; font-size: 13.5px; padding: 8px 12px; line-height: 1.25; text-align: center; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease; }
.boutons button.secondaire { background: var(--surface-2); color: var(--texte); border-color: var(--bordure); }
.boutons button:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--ombre-2); transform: translateY(-1px); }
.boutons button.secondaire:hover:not(:disabled) { background: var(--surface-3); border-color: var(--bordure-forte); filter: none; }
.boutons button.conseil { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c-vert); }
.boutons button.secondaire.conseil { border-color: var(--c-vert); }
.boutons button.proposer { background: transparent; color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
button.lien-carte { color: var(--accent); font-size: 13px; text-align: left; padding: 2px 0; }
button.lien-carte:hover { text-decoration: underline; }
button.lien-carte.masquer { color: var(--texte-tres-doux); font-size: 12.5px; }
.photos { display: grid; gap: 6px; border-radius: var(--r-lg); overflow: hidden; }
.photos.plusieurs { grid-template-columns: 3fr 1fr; }
.photos a { display: block; position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.photo-une { height: 240px; isolation: isolate; }
.photo-une::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--ph) center / cover no-repeat; filter: blur(22px) brightness(.55) saturate(1.2); }
.photo-une img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vignettes { display: grid; grid-auto-rows: 1fr; gap: 6px; height: 240px; }
.vignettes img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pied-carte { border-top: 1px solid var(--bordure); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--texte-tres-doux); }
.pied-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; line-height: 1.5; }
.pied-lien { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-doux); }
.pied-lien svg.ic { width: 13px; height: 13px; color: var(--texte-tres-doux); }
a.pied-lien:hover { color: var(--accent); }
.pied-lien.eteint { color: var(--texte-tres-doux); }
.pied-sep { margin: 0 8px; }
.pied-suivi { color: var(--c-orange); }
.qui-nom { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; color: var(--texte-doux); }
.qui-nom.conseil { color: var(--c-vert); font-weight: 650; }
.qui-nom svg.ic { width: 12px; height: 12px; }
.attente-rang { font-size: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-doux); display: flex; align-items: center; gap: 14px; }
.attente-rang .rang { font-size: 28px; font-weight: 800; color: var(--accent); min-width: 2.4ch; text-align: center; }

/* la fiche d'une demande (panneau) */
.fil { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.message-fil { max-width: 88%; padding: 10px 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--bordure); align-self: flex-start; }
.message-fil.de-moi { align-self: flex-end; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.message-fil .auteur { font-weight: 700; font-size: 12.5px; display: flex; gap: 8px; align-items: baseline; color: var(--texte-doux); }
.message-fil .auteur span { color: var(--texte-tres-doux); font-weight: 500; }
.message-fil .texte { white-space: pre-line; margin-top: 3px; overflow-wrap: anywhere; }
.photos-fiche { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.photos-fiche img { width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-md); display: block; background: var(--surface-2); }
.a-copier .texte { white-space: pre-line; color: var(--texte-doux); padding: 10px 0; }
.grille-rdv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.grille-rdv .champ, .panneau .champ { margin-top: 10px; }
.boutons-fiche { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 820px) { .grille-rdv { grid-template-columns: 1fr 1fr; } }

/* ============================================================ ATELIER — les cartes de la file (VESTA, Tri) */
.etat-atelier { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; border-radius: 999px; padding: 6px 12px; }
.etat-atelier::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etat-atelier.libre { background: var(--f-vert); color: var(--c-vert); }
.etat-atelier.plein { background: var(--f-rouge); color: var(--c-rouge); }
.atl-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atl-tete h2 { font-size: 19px; font-weight: 750; letter-spacing: -.3px; display: flex; align-items: center; gap: 9px; }
.atl-tete h2 svg.ic { color: var(--accent); }
.atl-groupes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); align-items: start; margin-top: 18px; }
.atl-groupe { min-width: 0; }
.dem-atelier .atl-groupe { margin-top: 20px; }
.atl-groupe h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--texte-tres-doux); }
.compte { min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center; background: var(--surface-3); color: var(--texte-doux);
  letter-spacing: 0; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.affaire { position: relative; display: flex; align-items: stretch; margin: 0 0 8px; min-height: 70px; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r-lg); color: var(--texte); transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.dem-atelier .affaire { background: var(--fond); }
.affaire:hover { border-color: var(--bordure-forte); box-shadow: var(--ombre-2); }
.affaire.choisie { border-color: var(--accent); }
.aff-rang { flex: none; width: 50px; display: grid; place-items: center; border-right: 1px solid var(--bordure); color: var(--texte-tres-doux); }
.aff-rang svg.ic { width: 18px; height: 18px; }
.rang-num { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.5px; color: var(--texte); font-variant-numeric: tabular-nums; }
.aff-corps { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.aff-nom { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--texte); overflow-wrap: anywhere; }
.aff-objet { font-size: 13px; line-height: 1.35; color: var(--texte-doux); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aff-objet:empty { display: none; }
.aff-marques { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.aff-marques .marque-mot { font-size: 11.5px; padding: 3px 8px; }
.aff-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aff-actions .mini-b { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; padding: 5px 11px; min-height: 32px;
  min-width: 34px; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--bordure); background: var(--surface-2); color: var(--texte); }
.aff-actions .mini-b:hover:not(:disabled) { background: var(--surface-3); border-color: var(--bordure-forte); }
.aff-actions .mini-b.plein { background: var(--accent); border-color: transparent; color: var(--accent-texte); }
.aff-actions .mini-b svg.ic { width: 14px; height: 14px; }
.affaire.en_cours { border-color: color-mix(in srgb, var(--c-bleu) 60%, var(--bordure)); box-shadow: inset 3px 0 0 var(--c-bleu); }
.affaire.en_cours .aff-rang { color: var(--c-bleu); }
.affaire.bloque { box-shadow: inset 3px 0 0 var(--c-orange); }
.affaire.bloque .aff-rang { color: var(--c-orange); }
.affaire.sous_traite { box-shadow: inset 3px 0 0 var(--c-violet); }
.affaire.sous_traite .aff-rang { color: var(--c-violet); }
.affaire.pret { box-shadow: inset 3px 0 0 var(--c-vert); }
.affaire.pret .aff-rang { color: var(--c-vert); }
.affaire.termine, .affaire.annule { opacity: .8; }
.suivant { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; margin-top: 16px;
  background: var(--accent-doux); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-lg); color: var(--texte); }
.suivant svg.ic { color: var(--accent); }

/* ============================================================ ÉDITION (edition.js) */
.l-doc-edition { align-items: flex-start; }
.l-doc-edition .milieu-ligne { flex: 1; min-width: 0; }
.l-doc-edition .droite-ligne { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.outils-ligne { display: flex; gap: 4px; }
.l-debours-edition { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 4px; border-bottom: 1px solid var(--bordure); }
.l-edit { padding: 6px 12px 14px; margin: 6px 0; border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--accent-doux); }
.ajouts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ajouts .bouton svg.ic { width: 15px; height: 15px; }
.boutons-edition { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 820px) {
  .outils-ligne .icone-bouton.petit { width: 34px; height: 34px; }
  .ajouts .bouton { flex: 1 1 45%; }
}

/* ============================================================ la page Stock : Stockelec tel quel, dans Mercure */
#appli-stock { position: fixed; top: 0; left: var(--menu); width: calc(100% - var(--menu)); height: 100vh; border: 0; z-index: 4; background: var(--fond); }
@media (max-width: 820px) {
  #appli-stock { left: 0; width: 100%; height: calc(100vh - 64px - env(safe-area-inset-bottom)); }
}

/* téléphone : les tuiles « À traiter » en deux colonnes, comme Tri */
@media (max-width: 820px) {
  .dem-familles .tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .dem-familles .tuile { min-width: 0; padding: 9px 12px 9px 10px; column-gap: 10px; }
  .dem-familles .tuile > svg.ic { width: 36px; height: 36px; padding: 8px; }
  .dem-familles .tuile .t-n { font-size: 20px; }
  .dem-famille { width: 100%; }
  .outils-liste .filtre { width: 100%; justify-content: space-between; }
  .outils-liste .selecteur { flex: 1; max-width: 75%; }
  .carte { padding: 15px; }
  .titre-demande { font-size: 18px; }
  .gain { min-width: 112px; padding: 8px 10px; }
  .gain-chiffre { font-size: 24px; }
  .atl-groupes { grid-template-columns: minmax(0, 1fr); }
}

/* Réglages → Clés API (07/11) */
.cle-api { align-items: flex-start; }
.cle-api .deux-champs { margin-top: 8px; }
/* Budget (E19) : le trait du prévu sur la barre du dépensé */
.budget-postes .piste { background: var(--surface-3); border-radius: 0 4px 4px 0; }
.budget-postes .repere { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--texte); border-radius: 1px; }
.repere-legende { width: 2px !important; height: 12px !important; border-radius: 1px !important; background: var(--texte); margin: 0 4px; }
tr.prevu td { color: var(--texte-doux); }
@media (max-width: 900px) { .graphes.deux.budget-graphes { grid-template-columns: 1fr; } }

/* La liste qui se déroule sous un champ (communes, client déjà connu — 08/11) : elle passe au-dessus, d'où l'ombre */
.suggestions { position: fixed; z-index: 80; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-md);
  box-shadow: var(--ombre-2); padding: 4px; max-height: 300px; overflow-y: auto; }
.suggestions button { display: flex; width: 100%; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 10px;
  border: 0; background: none; color: var(--texte); border-radius: var(--r-sm); text-align: left; font: inherit; cursor: pointer; }
.suggestions button:hover, .suggestions button:focus { background: var(--surface-2); }
.suggestions .t1 { font-weight: 600; }
.suggestions .t2 { color: var(--texte-doux); font-size: 13px; white-space: nowrap; }

/* ---- Aperçu des PDF (apercu.js) — Stéphane, 08/11 : « il me faut absolument une prévisualisation ».
   La page reste blanche comme le papier, quel que soit le thème. */
.apercu-vignette { position: relative; display: block; width: 100%; padding: 0; margin: 4px 0 2px; border: 1px solid var(--bordure);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); color: var(--texte-doux); font: inherit; cursor: zoom-in;
  aspect-ratio: 210 / 297; box-shadow: var(--ombre-1); }
.apercu-vignette.prete { aspect-ratio: auto; background: #fff; }
.apercu-vignette img { display: block; width: 100%; height: auto; }
.apercu-vignette .apercu-attente, .apercu-vignette .apercu-message { position: absolute; inset: 0; display: grid; place-items: center;
  padding: 18px; text-align: center; font-size: 14px; }
.apercu-vignette .apercu-agrandir { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; background: rgba(15, 15, 20, .72); color: #fff; font-size: 13px; font-weight: 600; }
.apercu-vignette .apercu-agrandir svg { width: 15px; height: 15px; }
.apercu-vignette:hover { border-color: var(--accent); }
.apercu-vignette:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apercu-outils { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.apercu-aide { margin-top: 6px; }
.apercu-pages { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.apercu-page { display: block; width: 100%; height: auto; max-width: none; background: #fff; border-radius: 6px; box-shadow: var(--ombre-2); cursor: zoom-in; }
.apercu-feuille.zoom .apercu-page { width: 200%; cursor: zoom-out; }
.apercu-pages .apercu-attente, .apercu-pages .apercu-message { padding: 26px 10px; text-align: center; color: var(--texte-doux); }
.apercu-pages .apercu-message { color: var(--rouge); }
.feuille:has(.apercu-feuille) { max-height: 96vh; }
@media (min-width: 821px) { .feuille.large:has(.apercu-feuille) { width: min(940px, 96vw); } }
@media (max-width: 820px) { .apercu-feuille .haut-feuille h2 { font-size: 17px; } }

/* ---- Sécurité (securite.js) : QR du code à 6 chiffres, codes de secours ; Stock vu de dehors */
.qr-cadre { width: min(240px, 70vw); margin: 10px auto; padding: 10px; background: #fff; border-radius: var(--r-md); }
.qr-cadre svg { display: block; width: 100%; height: auto; }
.qr-cadre.vide-qr { aspect-ratio: 1; display: grid; place-items: center; color: #555; }
.cle-totp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; word-break: break-all; }
.codes-secours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 4px; }
.codes-secours code { padding: 10px; text-align: center; border-radius: var(--r-sm); background: var(--surface-2); font-size: 16px; letter-spacing: 1px; }
.stock-dehors { display: grid; place-items: center; padding: 24px; }