/* ============================================================
   OpsFacturePro — Feuille de style (socle repris d'OpsGaragePro)
   Charte OP SYNERGIE : l'ardoise du logo pour la structure, et
   l'émeraude propre à OpsFacturePro pour l'action et les repères.
   ============================================================ */
:root {
  --vert: #0F7B5A;         /* émeraude : icônes, liens actifs — 5,4:1 sur blanc */
  --vert-fonce: #2C2F3E;   /* ardoise du logo : en-tête de fiche, texte fort */
  --vert-pale: #E3F4EC;
  --encre: #18212D;        /* texte courant */
  --encre2: #4A5566;       /* texte secondaire — 7,4:1 sur blanc */
  --papier: #F2F4F7;       /* fond de page */
  --blanc: #FFFFFF;
  --trait: #D8DEE7;
  --action: #0E7D59;       /* bouton d'action émeraude — 5,2:1 avec le blanc */
  --action-fonce: #0A5E43;
  --rouge: #B42318;
  /* Rôles : ce qui change entre le thème clair et le thème sombre. */
  --lien: var(--vert-fonce);       /* texte de marque : liens, titres */
  --accent: var(--vert);           /* icônes, repères */
  --rouge-txt: var(--rouge);
  --encre3: #6B7686;
  --trait-leger: #EDF0F5; --trait-fort: #C8D0DB;
  --survol: #F6F8FB; --barre: rgba(255, 255, 255, .96); --toast: #18212D;
  --vert-trait: #C3E5D5; --vert-pastille: #DCEFD9; --vert-pastille-texte: #1B5E20;
  --ambre-fond: #FEF6E7; --ambre-texte: #7A3A06; --ambre-trait: #F3D9A4; --ambre-pale: #FDEFC8;
  --rouge-fond: #FEF3F2; --rouge-pale: #FDE4E2; --rouge-texte: #9B1C12; --rouge-trait: #FECDCA;
  --gris-pale: #ECEFF3; --gris-texte: #435063;
  --bleu-pale: #E0E8F9; --bleu-texte: #25408F;
  color-scheme: light;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(28, 38, 32, .06), 0 4px 14px rgba(28, 38, 32, .06);
  --sb: 310px;         /* largeur du menu (1.2.0 : 272 → 310 px) */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--encre);
  -webkit-text-size-adjust: 100%;
}
/* ── Thème sombre ──────────────────────────────────────────────
   Seule l'application le prend (index.php pose data-theme ou la classe
   theme-auto sur <html>) : billets, tickets, factures et attestations
   restent sur fond blanc, prêts à imprimer. Sélecteurs plus précis que
   :root, pour l'emporter aussi sur les couleurs de marque de l'organisateur. */
:root[data-theme="dark"] {
  --papier: #10151C; --blanc: #19202A; --trait: #2C3643; --trait-leger: #222A35; --trait-fort: #3A4553;
  --encre: #E4E8EE; --encre2: #A6B0BE; --encre3: #7F8A99;
  --lien: color-mix(in srgb, var(--vert) 50%, #FFFFFF); --accent: color-mix(in srgb, var(--vert) 60%, #FFFFFF);
  --vert-pale: color-mix(in srgb, var(--vert) 24%, #19202A); --vert-trait: color-mix(in srgb, var(--vert) 45%, #19202A);
  --vert-pastille: #1D3A22; --vert-pastille-texte: #A6DDA9;
  --rouge-txt: #F97066;
  --survol: #212936; --barre: rgba(25, 32, 42, .96); --toast: #2B3542;
  --ambre-fond: #2A2112; --ambre-texte: #F5C57A; --ambre-trait: #5C4520; --ambre-pale: #3A2C12;
  --rouge-fond: #2A1513; --rouge-pale: #3A1714; --rouge-texte: #FDA29B; --rouge-trait: #6B2A24;
  --gris-pale: #262F3B; --gris-texte: #C3CAD4;
  --bleu-pale: #1B2540; --bleu-texte: #A9BEF5;
  --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --papier: #10151C; --blanc: #19202A; --trait: #2C3643; --trait-leger: #222A35; --trait-fort: #3A4553;
    --encre: #E4E8EE; --encre2: #A6B0BE; --encre3: #7F8A99;
    --lien: color-mix(in srgb, var(--vert) 50%, #FFFFFF); --accent: color-mix(in srgb, var(--vert) 60%, #FFFFFF);
    --vert-pale: color-mix(in srgb, var(--vert) 24%, #19202A); --vert-trait: color-mix(in srgb, var(--vert) 45%, #19202A);
    --vert-pastille: #1D3A22; --vert-pastille-texte: #A6DDA9;
    --rouge-txt: #F97066;
    --survol: #212936; --barre: rgba(25, 32, 42, .96); --toast: #2B3542;
    --ambre-fond: #2A2112; --ambre-texte: #F5C57A; --ambre-trait: #5C4520; --ambre-pale: #3A2C12;
    --rouge-fond: #2A1513; --rouge-pale: #3A1714; --rouge-texte: #FDA29B; --rouge-trait: #6B2A24;
    --gris-pale: #262F3B; --gris-texte: #C3CAD4;
    --bleu-pale: #1B2540; --bleu-texte: #A9BEF5;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papier); font-size: 15px; line-height: 1.5; min-height: 100vh; }
a { color: var(--lien); }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; border-radius: 4px; }
.discret { color: var(--encre2); font-size: 13px; }
svg { flex-shrink: 0; }

/* ── Boutons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent;
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: progress; }
.btn-p { background: var(--action); color: #fff; }
.btn-p:hover { background: var(--action-fonce); }
.btn-s { background: var(--blanc); border-color: var(--trait); color: var(--encre); }
.btn-s:hover { border-color: var(--vert); color: var(--lien); }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger-txt { background: none; color: var(--rouge-txt); border-color: transparent; }
.btn-danger-txt:hover { background: var(--rouge-fond); }
.btn-wa { background: #1F7A4D; color: #fff; }
.btn-wa:hover { background: #17603C; }
.btn-petit { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn-plein { width: 100%; }
.lien-txt { background: none; border: 0; color: var(--encre2); font-weight: 600; cursor: pointer; padding: 8px 12px; }
.lien-txt:hover { color: var(--encre); text-decoration: underline; }

/* ── Pages hors application (connexion, invitation) ──────────── */
.page-simple { display: grid; place-items: center; padding: 24px 16px; min-height: 100vh;
  background: var(--papier) radial-gradient(circle at 15% 10%, var(--vert-pale) 0, transparent 45%); }
.ps-carte { width: 100%; max-width: 420px; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 14px; padding: 28px 26px; box-shadow: var(--ombre); }
.ps-marque { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--lien); margin-bottom: 22px; }
.ps-logo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--vert-pale); color: var(--accent); }
.ps-carte h1 { font-size: 22px; margin: 0 0 8px; letter-spacing: -.01em; }
.ps-texte { color: var(--encre2); margin: 0 0 16px; }
.ps-note { color: var(--encre2); font-size: 13px; margin: 16px 0 0; text-align: center; }
.ps-form { display: grid; gap: 14px; margin-top: 8px; }
.ps-form label { display: grid; gap: 5px; font-weight: 600; font-size: 13px; }
.ps-form input { font: inherit; font-weight: 400; min-height: 44px; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 8px; }
.ps-form input:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); }
.ps-erreur, .ps-info { border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-bottom: 14px; }
.ps-erreur { background: var(--rouge-fond); color: var(--rouge-txt); border: 1px solid var(--rouge-trait); }
.ps-info { background: var(--vert-pale); color: var(--lien); }
.ps-liste { display: grid; gap: 8px; }
.ps-choix { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; cursor: pointer; }
.ps-choix:hover { border-color: var(--vert); }
.ps-choix span { display: grid; }
.ps-choix small { color: var(--encre2); }
.ps-actuel { font-size: 11px; font-weight: 700; color: var(--lien); background: var(--vert-pale); padding: 1px 7px; border-radius: 10px; }

/* ── Menu latéral ────────────────────────────────────────────── */
.sb { position: fixed; inset: 0 auto 0 0; width: var(--sb); background: var(--blanc); border-right: 1px solid var(--trait);
  display: flex; flex-direction: column; z-index: 40; overflow-y: auto; }
.sb-tete { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--trait); }
.sb-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--vert-pale); color: var(--accent); }
.sb-noms { display: grid; min-width: 0; }
.sb-noms b { font-size: 16px; color: var(--lien); }
.sb-noms span { font-size: 12px; color: var(--encre2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-fermer { display: none; margin-left: auto; background: none; border: 0; font-size: 18px; cursor: pointer; padding: 6px; }
#menu-liens { padding: 10px 8px; display: grid; gap: 2px; }
.sb-lien { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px;
  color: var(--encre); text-decoration: none; font-weight: 500; }
.sb-lien svg { color: var(--accent); }
.sb-lien:hover { background: var(--papier); }
.sb-lien.actif { background: var(--vert-pale); color: var(--lien); font-weight: 700; }
.sb-voile { display: none; }

/* ── Bandeau du haut ─────────────────────────────────────────── */
.main { margin-left: var(--sb); min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px 24px; background: var(--barre); border-bottom: 1px solid var(--trait); }
.hamburger { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; padding: 4px 8px; }
.tb-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.tb-titre #titre-ico { color: var(--accent); display: inline-flex; }
.tb-titre #titre-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tb-rond { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanc); border: 1px solid var(--trait); cursor: pointer; color: var(--encre2); }
.tb-rond:hover { color: var(--lien); border-color: var(--vert); }
.tb-ava { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--vert-fonce); color: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer; }

/* Toute la largeur de l'écran (1.2.0) : plus de plafond à 1280 px sur les grands écrans. */
.contenu { padding: 22px 24px 60px; max-width: none; min-width: 0; }
.chargement { color: var(--encre2); padding: 40px 0; }

/* ── Accueil : tuiles du menu ────────────────────────────────── */
.accueil-intro { color: var(--encre2); margin: 0 0 16px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tuile { display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 16px 20px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px;
  color: var(--encre); text-decoration: none; font-size: 16px; font-weight: 600; }
a.tuile:hover { border-color: var(--vert); box-shadow: var(--ombre); }
.tuile-ico { display: grid; place-items: center; width: 60px; height: 60px; color: var(--accent); }
.tuile-ico svg { stroke-width: 1.6; }
.tuile-txt { display: grid; }
.tuile-txt small { font-size: 12px; font-weight: 400; color: var(--encre2); }
.tuile-avenir { background: transparent; border-style: dashed; color: var(--encre2); }
.tuile-avenir .tuile-ico { color: var(--encre3); }

/* ── Listes ──────────────────────────────────────────────────── */
.liste-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.recherche { flex: 1 1 240px; max-width: 380px; font: inherit; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); }
.recherche:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre { min-height: 34px; padding: 4px 12px; border-radius: 17px; border: 1px solid var(--trait);
  background: var(--blanc); cursor: pointer; font-size: 13px; }
.filtre b { margin-right: 3px; }
.filtre.actif { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.liste-compte { font-size: 13px; color: var(--encre2); margin: 4px 2px 8px; }
.tableau-zone { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-size: 12px; font-weight: 700; color: var(--encre2); background: var(--survol);
  padding: 10px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 11px 14px; border-bottom: 1px solid var(--trait-leger); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr[tabindex] { cursor: pointer; }
.tableau tbody tr[tabindex]:hover { background: var(--survol); }
.tableau .actions { text-align: right; white-space: nowrap; }
.ligne-inactive td { color: var(--encre2); }
.cartes { display: none; }

.pastille { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-vert { background: var(--vert-pastille); color: var(--vert-pastille-texte); }
.p-gris { background: var(--gris-pale); color: var(--gris-texte); }
.p-bleu { background: var(--bleu-pale); color: var(--bleu-texte); }
.p-rouge { background: var(--rouge-pale); color: var(--rouge-texte); }
.p-ambre { background: var(--ambre-pale); color: var(--ambre-texte); }

.vide { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; text-align: center; color: var(--encre2);
  background: var(--blanc); border: 1px dashed var(--trait); border-radius: 12px; }
.vide svg { color: var(--accent); }
.vide p { margin: 0; }
.vide-erreur svg { color: var(--rouge-txt); }

.bloc-tete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bloc-tete p { margin: 0; }
.titre-section { font-size: 15px; font-weight: 700; margin: 26px 0 10px; }
.note-bas { margin-top: 14px; }

/* ── Fiche : panneau latéral droit ───────────────────────────── */
.fp-voile { position: fixed; inset: 0; background: rgba(28, 38, 32, .28); z-index: 50; }
.fiche { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--fiche-l, 720px), 100vw); background: var(--blanc);
  z-index: 55; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(28, 38, 32, .14);
  animation: glisse .18s ease-out; }
@keyframes glisse { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.fp-tete { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; background: var(--vert-fonce); color: #fff; }
.fp-titres { display: grid; min-width: 0; }
.fp-titres h2 { margin: 0; font-size: 19px; line-height: 1.3; }
.fp-titres > span { font-size: 13px; color: #CFDDF0; }
.fp-titres h2 .pastille { vertical-align: 3px; margin-left: 6px; }
.fp-fermer { margin-left: auto; background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; font-size: 15px; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--trait); }
.fp-corps { overflow-y: auto; padding: 16px 20px 40px; }
.fp-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-champ { border: 1px solid var(--trait); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.fp-champ.large { grid-column: 1 / -1; }
.fp-lib { display: block; font-size: 11px; font-weight: 700; color: var(--encre2); text-transform: uppercase; letter-spacing: .04em; }
.fp-val { margin-top: 2px; overflow-wrap: anywhere; }
.fp-section { margin-top: 22px; }
.fp-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fp-section-tete h3 { margin: 0; font-size: 15px; }
.fp-enfants { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-enfant { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--trait); border-radius: 8px; padding: 9px 12px; background: var(--blanc); }
button.fp-enfant { cursor: pointer; }
button.fp-enfant:hover { border-color: var(--vert); }
.fp-enfant span { display: grid; min-width: 0; }
.fp-enfant small { color: var(--encre2); font-size: 12px; }

/* ── Formulaire : fenêtre centrée ────────────────────────────── */
.md-voile { position: fixed; inset: 0; z-index: 70; background: rgba(28, 38, 32, .42);
  display: grid; place-items: center; padding: 16px; }
.md { width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--blanc); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.md-tete { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--trait); }
.md-tete h2 { margin: 0; font-size: 17px; }
.md-fermer { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; padding: 6px; color: var(--encre2); }
.md-corps { padding: 18px 20px; overflow-y: auto; }
.md-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--trait); }
.md-texte { margin: 0 0 12px; }

.champ { display: grid; gap: 5px; margin-bottom: 14px; }
.champ label { font-weight: 600; font-size: 13px; }
.requis { color: var(--rouge-txt); }
.champ input, .champ select, .champ textarea, .panneau-form input, .panneau-form select {
  font: inherit; width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); }
.champ textarea { min-height: 84px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); }
.champ input:disabled, .champ select:disabled { background: var(--survol); color: var(--encre2); }
.aide { color: var(--encre2); font-size: 12px; line-height: 1.4; }
.case { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; margin: 4px 0 4px; cursor: pointer; }
.case input { width: 20px; height: 20px; accent-color: var(--vert); }
.case + .aide { display: block; margin-bottom: 14px; }
.form-erreur { background: var(--rouge-fond); color: var(--rouge-txt); border: 1px solid var(--rouge-trait); border-radius: 8px; padding: 9px 12px; font-size: 14px; margin-top: 4px; }
.panneau-form { max-width: 620px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 4px 22px 20px; }
.form-pied { display: flex; justify-content: flex-end; margin-top: 16px; }

.lien-invit { display: flex; gap: 8px; margin: 6px 0 14px; }
.lien-invit input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--survol); }
.envois { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Compte : panneau qui remonte du bas ─────────────────────── */
.pc-voile { position: fixed; inset: 0; background: rgba(28, 38, 32, .3); z-index: 80; }
.pc-feuille { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(480px, 100vw); z-index: 85;
  background: var(--blanc); border-radius: 16px 16px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); }
.pc-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pc-ava { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vert-fonce); color: #fff; font-weight: 700; }
.pc-noms { display: grid; min-width: 0; }
.pc-noms span { font-size: 13px; color: var(--encre2); }
.pc-fermer { margin-left: auto; background: none; border: 0; font-size: 16px; cursor: pointer; padding: 6px; }
.pc-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-grille a { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--trait); border-radius: 10px;
  text-decoration: none; color: var(--encre); font-size: 13px; font-weight: 600; text-align: center; }
.pc-grille a svg { color: var(--accent); }
.pc-grille a:hover { border-color: var(--vert); }
.pc-sortir svg { color: var(--rouge-txt) !important; }

/* ── Messages ────────────────────────────────────────────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 8px; }
.toast { background: var(--toast); color: #fff; padding: 11px 16px; border-radius: 9px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2); max-width: 360px; }
.toast-erreur { background: var(--rouge); }

/* ── Téléphone ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .sb { transform: translateX(-100%); transition: transform .2s ease; }
  .sb.ouvert { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .18); }
  .sb-fermer { display: block; }
  .sb-voile.ouvert { display: block; position: fixed; inset: 0; background: rgba(28, 38, 32, .35); z-index: 35; }
  .main { margin-left: 0; }
  .hamburger { display: block; }
  .topbar { padding: 8px 12px; }
  .contenu { padding: 16px 12px 70px; }
}
@media (max-width: 760px) {
  .btn-label { display: none; }
  .zone-liste { display: none; }
  .cartes { display: grid; gap: 8px; }
  .carte { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px;
    background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; }
  .carte-txt { display: grid; flex: 1; min-width: 0; }
  .carte-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .carte-txt small { color: var(--encre2); font-size: 12px; }
  .carte > svg { color: var(--encre2); }
  .tuiles { grid-template-columns: 1fr; gap: 10px; }
  .tuile { min-height: 76px; }
  .tuile-ico { width: 48px; height: 48px; }
  .fp-champs { grid-template-columns: 1fr; }
  .pc-grille { grid-template-columns: repeat(2, 1fr); }
  .recherche { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── Pièces du socle Event gardées telles quelles ─────────────── */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-resume { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.fp-resume > div { flex: 1 1 140px; display: grid; background: var(--vert-pale); border-radius: 10px; padding: 10px 14px; }
.fp-resume b { font-size: 20px; color: var(--lien); font-variant-numeric: tabular-nums; }
.fp-resume span { font-size: 12px; color: var(--encre2); }
.lien-page { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin: -2px 0 14px; }
.cases { display: grid; gap: 2px; }
.champ-lib { font-weight: 600; font-size: 13px; }
.logo-img { object-fit: contain; background: #fff; border-radius: 10px; }
.sb-logo.logo-img { width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--trait); }
.pub-logo.logo-img { width: 38px; height: 38px; }
.ps-logo.logo-img { width: 44px; height: 44px; border: 1px solid var(--trait); }
.tk-logo { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 6px; display: block; border-radius: 10px; }
.marque-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.marque-logo { display: flex; gap: 12px; align-items: center; }
.marque-apercu-logo { width: 84px; height: 84px; border: 1px dashed var(--trait); border-radius: 12px; display: grid; place-items: center; background: #fff; overflow: hidden; color: var(--encre2); flex: 0 0 84px; }
.marque-apercu-logo img { width: 100%; height: 100%; object-fit: contain; }
.marque-couleur label { font-weight: 600; font-size: 14px; }
.marque-couleur-ligne { display: flex; gap: 8px; align-items: center; margin: 6px 0 8px; }
.marque-couleur-ligne input[type=color] { width: 46px; height: 40px; padding: 2px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); }
.marque-couleur-ligne input[type=text] { width: 110px; font: inherit; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; }
.marque-apercu em { font-style: normal; background: #fff; color: var(--m); padding: 5px 12px; border-radius: 7px; }
@media (max-width: 700px) { .marque-edit { grid-template-columns: 1fr; } }
.pc-installer { margin-top: 10px; }
.pc-installer .aide { margin: 0; display: flex; gap: 6px; align-items: flex-start; }

.marque-logo > div { display: grid; gap: 6px; justify-items: start; }
.marque-couleur-ligne .lien-txt { white-space: nowrap; }
/* Menu latéral en groupes : un trait et un petit titre discret par groupe. */
.sb-groupe { display: grid; gap: 1px; }
.sb-groupe + .sb-groupe { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--trait); }
.sb-groupe-titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2);
  padding: 2px 12px 4px; }

/* Une couleur par groupe du menu : titre et icônes. Le texte des liens reste
   sombre (lisibilité) ; l'écran ouvert se teinte de la couleur de son groupe.
   Toutes ces couleurs font au moins 4,5:1 sur fond blanc. */
.sb-groupe { --g0: var(--accent); --g: var(--g0); --g-pale: color-mix(in srgb, var(--g) 12%, var(--blanc)); }
/* 1.3.0 — Plus de couleur : une teinte par groupe du menu (toutes à 4,5:1 au moins
   sur fond blanc), reprise par l'écran ouvert. */
.sb-groupe.g-cyan     { --g0: #0B7490; }
.sb-groupe.g-bleu     { --g0: #1D5FA8; }
.sb-groupe.g-violet   { --g0: #6941C6; }
.sb-groupe.g-sarcelle { --g0: #0F766E; }
.sb-groupe.g-indigo   { --g0: #4338CA; }
.sb-groupe.g-ambre    { --g0: #B45309; }
.sb-groupe.g-vert     { --g0: #15803D; }
.sb-groupe.g-orange   { --g0: #C2410C; }
.sb-groupe.g-rose     { --g0: #BE185D; }
.sb-groupe.g-pourpre  { --g0: #9333EA; }
.sb-groupe.g-ardoise  { --g0: #475569; }
.sb-groupe.g-petrole  { --g0: #155E75; }
:root[data-theme="dark"] .sb-groupe { --g: color-mix(in srgb, var(--g0) 55%, #FFFFFF); }
@media (prefers-color-scheme: dark) { :root.theme-auto .sb-groupe { --g: color-mix(in srgb, var(--g0) 55%, #FFFFFF); } }
.sb-groupe-titre { color: var(--g); display: flex; align-items: center; gap: 6px; }
.sb-groupe-titre::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--g); }
.sb-groupe .sb-lien svg { color: var(--g); flex: 0 0 auto; }
.sb-groupe .sb-lien:hover { background: var(--g-pale); }
.sb-groupe .sb-lien.actif { background: var(--g-pale); color: var(--g); box-shadow: inset 3px 0 0 var(--g); }

/* Texte du menu : 14,5 px (titres de groupe 11 px), entrées plus serrées
   pour que tout le menu tienne sur un écran d'ordinateur portable. */
.sb-lien { font-size: 14.5px; line-height: 1.25; padding: 7px 12px; gap: 10px; }
.sb-groupe-titre { font-size: 11px; line-height: 1.3; font-weight: 800; padding: 2px 12px 3px; }
.sb-noms b { font-size: 17px; }
.sb-noms span { font-size: 13px; }
.sb-tete { padding: 9px 16px; }

.champ-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .champ-ligne { grid-template-columns: 1fr; } }
/* Titres des sections de fiche : icône en pastille, nombre en badge. */
.fp-section-tete h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.fp-sec-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--vert-pale); color: var(--accent); flex: 0 0 32px; }
.fp-compte { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 11px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--gris-pale); color: var(--encre2); }
.fp-compte.plein { background: var(--vert); color: #fff; }
.fp-unite { font-size: 12px; font-weight: 700; color: var(--encre2); background: var(--gris-pale); border-radius: 6px; padding: 2px 6px; }
.fp-vide { margin: 2px 0 0; padding: 10px 12px; border: 1px dashed var(--trait); border-radius: 10px; color: var(--encre2); font-size: 14px; background: var(--papier); }

/* Sociétés : les mêmes boutons au même endroit sur chaque ligne. */
.soc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.soc-actions .btn { min-width: 104px; justify-content: center; }
.soc-place { display: inline-block; min-width: 104px; }
/* Mon compte : le choix de l'apparence. */
.pc-theme { display: grid; gap: 8px; margin: 14px 0 4px; }
.pc-theme-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--encre2); }
.pc-theme-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--papier); border: 1px solid var(--trait); border-radius: 10px; }
.pc-theme-choix button { min-height: 40px; border: 0; border-radius: 7px; background: transparent; color: var(--encre2); font-weight: 600; font-size: 14px; cursor: pointer; }
.pc-theme-choix button.actif { background: var(--blanc); color: var(--lien); box-shadow: var(--ombre); }

/* ============================================================
   GaragePro — écrans du métier
   ============================================================ */
.md.md-large { width: min(860px, 100%); }
.rouge { color: var(--rouge-txt); }
.titre-section.rouge { color: var(--rouge-txt); }
.bandeau { display: flex; gap: 8px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.bandeau svg { flex: 0 0 auto; margin-top: 1px; }
.bandeau-ambre { background: var(--ambre-fond); color: var(--ambre-texte); border: 1px solid var(--ambre-trait); }
.bandeau-rouge { background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); }
.bloc-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fk-ligne { display: flex; gap: 6px; align-items: stretch; }
.fk-ligne select { flex: 1; min-width: 0; }
.fk-ligne .btn { min-height: 42px; }
.champ-case { margin-bottom: 12px; }
.case-petite { font-weight: 500; font-size: 13px; margin: 2px 10px 2px 0; display: inline-flex; }
.case-petite input { width: 17px; height: 17px; }
.form-section { border: 1px solid var(--trait); border-radius: 10px; margin: 0 0 12px; background: var(--blanc); }
.form-section > summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 10px 14px; color: var(--lien); list-style: none; display: flex; align-items: center; gap: 8px; }
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary::before { content: '▸'; transition: transform .15s; }
.form-section[open] > summary::before { transform: rotate(90deg); }
.form-section-corps { padding: 2px 14px 4px; }
.pastille-couleur { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; border: 1px solid var(--trait); }
.lien-txt.lien-fort { padding: 0; color: var(--lien); font-weight: 700; text-align: left; }
.fp-note { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; margin: 0 0 12px; color: var(--encre2); }
.fp-note .lien-txt { padding: 0; }
.empreinte { font-size: 11px; word-break: break-all; color: var(--encre2); }
.fp-enfant.barre b, .fp-enfant.barre small { text-decoration: line-through; color: var(--encre3); }

/* Schéma des dommages : l'image reste sur fond blanc, même en thème sombre. */
.sd { display: grid; gap: 8px; }
.sd-cadre { position: relative; background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 8px 20px; }
.sd-cadre svg { display: block; width: 100%; height: auto; max-height: 300px; }
.sd-edit svg { cursor: crosshair; touch-action: manipulation; }
.sd-point { cursor: pointer; }
.sd-av, .sd-ar { position: absolute; bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #6B7686; }
.sd-av { left: 12px; } .sd-ar { right: 12px; }
.sd-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.sd-leg { display: inline-flex; align-items: center; gap: 5px; }
.sd-types { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-type { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 8px; border-radius: 18px;
  border: 2px solid var(--trait); background: var(--blanc); font-weight: 600; font-size: 13px; cursor: pointer; }
.sd-type.actif { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }

/* Signatures : fond blanc pour qu'elles s'impriment et se lisent partout. */
.sig { border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.sig-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sig-tete .lien-txt { padding: 4px 6px; }
.sig-pad { width: 100%; height: 160px; background: #fff; border: 1px dashed var(--trait-fort); border-radius: 8px; touch-action: none; cursor: crosshair; }
.sig-existante, .sig-img { display: block; max-width: 100%; max-height: 120px; background: #fff; border: 1px solid var(--trait); border-radius: 8px; margin: 4px 0; }
/* « Ma voix » (1.9.0) */
.vx-lecteur audio { width: 100%; }
.vx-section { display: grid; gap: 10px; margin-bottom: 18px; }
/* 1.11.0 — Mes sons et mes titres : la fiche du titre */
.tt-lecteur-zone { --ls-accent: var(--vert); --ls-fond-onde: var(--vert-pale); --ls-barre: color-mix(in srgb, var(--encre2) 40%, transparent); }
.tt-etapes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tt-etapes li > button, .tt-etapes li > span { width: 100%; display: grid; gap: 6px; justify-items: center; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--encre2);
  background: none; border: 0; padding: 4px 2px; border-radius: 8px; text-align: center; }
.tt-etapes li > button { cursor: pointer; }
.tt-etapes li > button:hover { background: var(--vert-pale); color: var(--encre); }
.tt-etapes i { width: 100%; height: 6px; border-radius: 999px; background: var(--trait); display: block; }
.tt-etapes li.fait i { background: var(--vert); }
.tt-etapes li.ici i { background: linear-gradient(90deg, var(--vert) 50%, var(--trait) 50%); }
.tt-etapes li.ici > button, .tt-etapes li.ici > span { color: var(--encre); font-weight: 800; }
.tt-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tt-version { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--trait-leger, var(--trait)); }
.tt-num { font-weight: 800; font-variant-numeric: tabular-nums; background: var(--vert-pale); color: var(--vert); border-radius: 8px; padding: 3px 8px; }
.tt-v-txt { display: grid; gap: 2px; min-width: 0; }
.tt-v-txt small { color: var(--encre2); }
.tt-v-note { display: flex; gap: 5px; align-items: flex-start; }
.tt-ok { color: var(--vert) !important; display: inline-flex; gap: 4px; align-items: center; }
.tt-v-act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.vx-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vx-tete h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.vx-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vx-exo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.vx-exo > span:first-child { display: grid; gap: 2px; min-width: 0; }
.vx-consigne { color: var(--gris-texte); display: flex; gap: 5px; align-items: flex-start; }
.vx-faits { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--gris-pale); color: var(--gris-texte); white-space: nowrap; }
.vx-faits.ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); }
.vx-morceau { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; }
.vx-rec { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--trait); }
.vx-rec:first-of-type { border-top: 0; padding-top: 0; }
.vx-rec audio { width: 100%; height: 38px; }
.vx-note { display: grid; gap: 6px; } .vx-note textarea { width: 100%; font: inherit; font-size: 14px; }
.vx-note > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vx-choix { border: 1px solid var(--trait); border-radius: 12px; padding: 8px 12px 10px; margin: 0 0 12px; display: grid; gap: 4px; }
.vx-choix legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
@media (max-width: 600px) { .vx-exo { grid-template-columns: minmax(0, 1fr) auto; } .vx-exo .vx-faits { grid-column: 1; justify-self: start; } }
.esp-edit { display: grid; gap: 10px; }
.esp-apercu { position: relative; height: 150px; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; padding: 16px;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--action) 55%, #1E2130) 0%, #1E2130 65%) center / cover no-repeat; }
.esp-apercu::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,32,.05), rgba(20,22,32,.7)); }
.esp-apercu-txt { position: relative; display: grid; color: #fff; }
.esp-apercu-txt b { font-size: 20px; } .esp-apercu-txt small { color: rgba(255,255,255,.85); font-size: 13px; }
.esp-boutons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sg-recap { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--gris-pale); font-size: 13.5px; }
.sg-recap dt { color: var(--gris-texte); font-weight: 600; }
.sg-recap dd { margin: 0; min-width: 0; }
@media (max-width: 600px) { .sg-recap { grid-template-columns: 1fr; gap: 0; } .sg-recap dd { margin-bottom: 6px; } }
.sig-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.sig-duo small { display: block; }
@media (max-width: 600px) { .sig-duo { grid-template-columns: 1fr; } }

.jauge { display: inline-block; width: 70px; height: 10px; border-radius: 5px; background: var(--gris-pale); overflow: hidden; vertical-align: middle; }
.jauge span { display: block; height: 100%; background: linear-gradient(90deg, #DC2626, #D97706 35%, #16A34A 70%); }
.choix-carb { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; }
.puce span { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 14px; border: 1px solid var(--trait); border-radius: 19px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--blanc); }
.puce input:checked + span { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
.puce input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; }
.cases-grille { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 12px; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
.ck-famille { display: grid; gap: 0; }
.ck-famille b { font-size: 13px; color: var(--lien); margin: 4px 0 2px; }
.edl .champ { margin-bottom: 16px; }
.edl-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.edl-col h4 { margin: 0 0 6px; font-size: 14px; }
.edl-col p { margin: 4px 0; font-size: 13px; }
@media (max-width: 640px) { .edl-duo { grid-template-columns: 1fr; } }

/* Lignes des devis, ordres et factures. */
.lg-ajouts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lg-liste { display: grid; gap: 8px; }
.lg { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; background: var(--blanc); }
.lg-num { font-size: 12px; font-weight: 800; color: var(--encre3); padding-top: 10px; text-align: center; }
.lg-corps { display: grid; gap: 6px; min-width: 0; }
.lg-l1 { display: flex; gap: 6px; }
.lg-l1 select { flex: 0 0 132px; }
.lg-l1 .lg-des { flex: 1; min-width: 0; }
.lg input, .lg select { font: inherit; font-size: 14px; min-height: 38px; padding: 6px 9px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); width: 100%; }
.lg-l2 { display: grid; grid-template-columns: 1.1fr .7fr 1fr 1fr .7fr .9fr 1.4fr; gap: 6px; align-items: end; }
.lg-l2 input, .lg-l2 select { font-weight: 400; }
.lg-l2 label { display: grid; gap: 2px; font-size: 11px; font-weight: 700; color: var(--encre2); }
.lg-total { font-weight: 800; text-align: right; align-self: center; min-width: 96px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lg-txt { grid-template-columns: 26px 1fr auto; background: var(--survol); }
.lg-txt .lg-des { font-style: italic; }
.lg-outils { display: flex; flex-direction: column; gap: 4px; }
.lg-btn { width: 30px; height: 28px; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc); cursor: pointer; color: var(--encre2); display: grid; place-items: center; }
.lg-btn:disabled { opacity: .35; cursor: default; }
.lg-suppr:hover { color: var(--rouge-txt); border-color: var(--rouge-trait); }
.lg-totaux { margin: 12px 0 0 auto; border-collapse: collapse; min-width: 280px; font-size: 14px; }
.lg-totaux td { padding: 5px 0 5px 16px; border-bottom: 1px solid var(--trait-leger); }
.lg-totaux .lg-ttc td { font-weight: 800; font-size: 16px; border-bottom: 0; padding-top: 8px; color: var(--lien); }
.lg-lecture td { vertical-align: top; }
.lg-texte td { font-style: italic; color: var(--encre2); background: var(--survol); }
@media (max-width: 760px) {
  .lg-l1 { flex-direction: column; } .lg-l1 select { flex: none; }
  .lg-l2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-outils { flex-direction: row; grid-column: 2; justify-content: flex-end; }
  .lg { grid-template-columns: 22px 1fr; }
}

/* Tableau de bord. */
.tdb { display: block; }
.tdb-entete { display: grid; gap: 4px; margin-bottom: 14px; }
.tdb-entete h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.tdb-entete p { margin: 0; }
.tdb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tdb-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tdb-tuile { --t: var(--vert); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--t); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--encre); }
.tdb-tuile:hover { box-shadow: var(--ombre); }
.tdb-tuile-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--t); }
.tdb-tuile b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tdb-tuile span:last-child { font-size: 13px; color: var(--encre2); }
.t-rouge { --t: #C4320A; } .t-vert { --t: #15803D; } .t-ambre { --t: #B45309; } .t-bleu { --t: var(--vert); }
.tdb-tuile.t-vide { border-left-color: var(--trait); opacity: .8; }
.tdb-tuile.t-vide .tdb-tuile-ico { background: var(--gris-pale); color: var(--encre3); }
.tdb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.tdb-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.tdb-carte h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.tdb-carte h3 svg { color: var(--accent); }
.tdb-alerte { border-color: var(--rouge-trait); }
.tdb-alerte h3 svg { color: var(--rouge-txt); }
.tdb-argent { grid-column: 1 / -1; }
.tdb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tdb-liste button { width: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; background: none; border: 0;
  border-radius: 8px; padding: 7px 8px; cursor: pointer; color: var(--encre); }
.tdb-liste button:hover { background: var(--survol); }
.tdb-liste b { font-variant-numeric: tabular-nums; }
.tdb-liste span { color: var(--encre2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdb-liste small { grid-column: 1 / -1; color: var(--encre2); font-size: 12px; }
.tdb-sous { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); margin: 14px 0 4px; }
.tdb-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.tdb-chiffres > div { display: grid; background: var(--vert-pale); border-radius: 10px; padding: 10px 12px; }
.tdb-chiffres b { font-size: 20px; color: var(--lien); font-variant-numeric: tabular-nums; }
.tdb-chiffres span { font-size: 12px; color: var(--encre2); }
.graphe { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 130px; padding: 6px 0 0; }
.graphe-col { display: grid; grid-template-rows: 1fr auto; height: 100%; text-align: center; }
.graphe-barre { align-self: end; background: var(--vert); border-radius: 5px 5px 0 0; min-height: 2px; }
.graphe-col:last-child .graphe-barre { background: var(--action); }
.graphe-col small { font-size: 10px; color: var(--encre2); margin-top: 3px; }
@media (max-width: 900px) { .tdb-grille { grid-template-columns: 1fr; } .tdb-chiffres { grid-template-columns: 1fr; } }

/* Planning de l'atelier. */
.pl-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-nav b { margin-left: 8px; }
.pl { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; overflow-x: auto; }
.pl-ligne { display: grid; grid-template-columns: 170px minmax(620px, 1fr); border-bottom: 1px solid var(--trait-leger); }
.pl-lib { display: grid; align-content: center; padding: 6px 10px; border-right: 1px solid var(--trait); min-width: 0; }
.pl-lib b { font-size: 14px; }
.pl-lib small { color: var(--encre2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-piste { display: grid; grid-template-columns: repeat(14, minmax(44px, 1fr)); position: relative; }
.pl-case { grid-row: 1; border-right: 1px solid var(--trait-leger); min-height: 44px; }
.pl-we { background: var(--survol); }
.pl-auj { background: color-mix(in srgb, var(--action) 9%, transparent); }
.pl-tete .pl-piste { position: sticky; top: 0; }
.pl-jour { grid-row: 1; display: grid; justify-items: center; padding: 6px 0; border-right: 1px solid var(--trait-leger); font-size: 12px; }
.pl-jour b { font-size: 15px; }
.pl-jour.pl-auj b { color: var(--action); }
.pl-barre { --tc: var(--vert); grid-row: 1; z-index: 1; align-self: center; margin: 6px 3px; min-height: 30px; border: 0; border-radius: 7px; padding: 4px 8px;
  background: var(--tc); color: #fff; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-barre:hover { filter: brightness(1.1); }
.pl-planifie { --tc: #64748B; } .pl-en_cours { --tc: #1D5FA8; } .pl-attente_pieces { --tc: #B45309; } .pl-termine { --tc: #15803D; }
.pl-livre { --tc: #94A3B8; } .pl-retard { --tc: #C4320A !important; } .pl-loc { --tc: #7C3AED; } .pl-pret { --tc: #0E7490; }
.pl-groupe { padding: 8px 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); background: var(--papier); border-bottom: 1px solid var(--trait); }
.pl-vide { padding: 12px 14px; margin: 0; }
.pl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--encre2); margin: 10px 0 4px; }
.pl-l { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--tc); }

/* Flotte. */
.fl-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fl-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; border-top: 4px solid var(--vert); }
.fl-vert { border-top-color: #15803D; } .fl-bleu { border-top-color: var(--vert); } .fl-ambre { border-top-color: #B45309; } .fl-rouge { border-top-color: #C4320A; }
.fl-tete { display: grid; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--encre); }
.fl-tete b { font-size: 18px; letter-spacing: .02em; }
.fl-tete span { color: var(--encre2); font-size: 13px; }
.fl-etat, .fl-carte p { margin: 0; }
.fl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.rc-table input { font: inherit; min-height: 38px; padding: 6px 9px; border: 1px solid var(--trait); border-radius: 7px; width: 100%; background: var(--blanc); color: var(--encre); }

@media print {
  .sb, .topbar, .fp-actions, .toasts { display: none !important; }
  .main { margin: 0; }
}
.tableau td.nw { white-space: nowrap; }
.fl-etat .pastille { white-space: normal; }
.cases-grille .case { margin: 3px 0; }
/* Sur téléphone, les actions d'une fiche passent à la ligne : aucune n'est cachée hors de l'écran. */
@media (max-width: 760px) {
  .fp-actions { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 10px 14px; }
  .fp-actions .btn { flex: 1 1 auto; min-height: 42px; padding: 8px 12px; font-size: 14px; justify-content: center; }
}

/* ── Gestion : dépenses, livre des recettes, recettes et dépenses, objectifs ── */
:root { --serie-ventes: #0F7B5A; --serie-charges: #D97706; }
:root[data-theme="dark"] { --serie-ventes: #4B8BD6; --serie-charges: #D97706; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-ventes: #4B8BD6; --serie-charges: #D97706; } }

.ico-seul { display: inline-flex; color: var(--accent); vertical-align: middle; }
.dep-tva { margin: 0; }
.dep-tva tfoot td { font-weight: 700; border-top: 1px solid var(--trait-fort); }
.dep-justif { display: grid; gap: 8px; }
.dep-justif img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--trait); border-radius: 8px; background: #fff; }
.dep-pdf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; color: var(--lien); text-decoration: none; background: var(--survol); }
.dep-pdf span { display: grid; } .dep-pdf small { color: var(--encre2); }
.dep-justif-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dep-justif-pied .lien-txt { display: inline-flex; align-items: center; gap: 4px; }
.dep-ttc-ligne { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 12px; background: var(--vert-pale); border-radius: 10px; }
.dep-ttc-ligne label { font-weight: 600; font-size: 14px; }
.dep-ttc-saisie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dep-ttc-saisie input, .dep-ttc-saisie select { font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.dep-ttc-saisie input { width: 140px; }
.dep-total { margin: 4px 0 12px; font-size: 15px; }
.rc-depense { display: grid; gap: 8px; margin: 12px 0 4px; padding: 12px; border: 1px solid var(--trait); border-radius: 10px; }

.gs-periode { flex-wrap: wrap; gap: 10px; }
.gs-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.gs-dates input, .gs-mois input { font: inherit; min-height: 38px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.gs-mois { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.gs-titre-impression { display: none; }
.gs-sous-titre { font-size: 17px; margin: 22px 0 10px; color: var(--lien); }
.gs-sous-titre small { font-size: 13px; font-weight: 500; color: var(--encre2); margin-left: 6px; }
.gs-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.gs-chiffres > div { display: grid; align-content: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; }
.gs-chiffres b { font-size: 21px; color: var(--encre); font-variant-numeric: tabular-nums; }
.gs-chiffres span { font-size: 13px; color: var(--encre2); }
.gs-chiffres .gs-positif { box-shadow: inset 3px 0 0 #15803D; }
.gs-chiffres .gs-negatif { box-shadow: inset 3px 0 0 var(--rouge); }
.gs-chiffres .gs-negatif b { color: var(--rouge-txt); }
.gs-modes { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin: 0 0 12px; }
.gs-table td, .gs-table th { font-variant-numeric: tabular-nums; }
.gs-table tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.gs-table tfoot td, .gs-table tfoot th { font-weight: 700; border-top: 2px solid var(--trait-fort); background: var(--survol); }
.gs-table .gs-sep { border-left: 2px solid var(--trait); }
.gs-table tr.gs-courant th, .gs-table tr.gs-courant td { background: var(--vert-pale); }
.gs-part { min-width: 120px; }
.gs-part { position: relative; }
.gs-part-barre { position: absolute; left: 6px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--vert-trait); max-width: calc(100% - 50px); }
.gs-part span:last-child { position: relative; }
.gs-obj { font: inherit; width: 110px; min-height: 36px; padding: 4px 8px; text-align: right; border: 1px solid var(--trait-fort); border-radius: 7px; background: var(--blanc); color: var(--encre); }
.gs-jauge { position: relative; display: inline-block; vertical-align: middle; width: 76px; height: 8px; border-radius: 4px; background: var(--gris-pale); margin-right: 8px; }
.gs-jauge span { display: block; height: 100%; border-radius: 4px; background: var(--serie-ventes); }
.gs-jauge.gs-ok span { background: var(--etat-ok); }
.gs-jauge.gs-proche span { background: var(--etat-proche); }
.gs-jauge.gs-loin span { background: var(--etat-loin); }
/* Le rythme attendu à ce jour (mois en cours). */
.gs-jauge i { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--encre); }
.gs-jauge-txt { font-size: 13px; font-variant-numeric: tabular-nums; }
.gs-prod-tete { margin-top: 8px; align-items: flex-end; }
.gs-prod-tete .gs-sous-titre { margin-bottom: 0; }
.gs-tdb-obj { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--trait-leger); }
.gs-tdb-obj > div { display: grid; }
.gs-tdb-obj b { font-size: 19px; font-variant-numeric: tabular-nums; }
.gs-tdb-obj span { font-size: 12px; color: var(--encre2); }

/* Graphique : deux séries, une seule échelle, bulle au survol et au clavier. */
.gs-graphe { position: relative; margin: 6px 0 4px; padding: 12px 14px 8px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; }
.gs-graphe figcaption { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre2); margin-bottom: 8px; }
.gs-leg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.gs-leg:first-child { margin-left: 0; }
.gs-leg-ventes { background: var(--serie-ventes); } .gs-leg-charges { background: var(--serie-charges); }
.gs-graphe-zone { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 170px; border-bottom: 1px solid var(--trait-fort); }
.gs-col { display: grid; grid-template-rows: 1fr auto; height: 100%; border-radius: 6px; outline-offset: 2px; cursor: default; }
.gs-col:hover, .gs-col:focus { background: var(--survol); }
.gs-barres { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; padding: 0 3px; }
.gs-b { display: block; width: min(18px, 40%); border-radius: 4px 4px 0 0; }
.gs-b-ventes { background: var(--serie-ventes); } .gs-b-charges { background: var(--serie-charges); }
.gs-col small { font-size: 11px; color: var(--encre2); text-align: center; padding: 4px 0 0; }
.gs-bulle { position: absolute; top: 34px; max-width: 280px; padding: 7px 10px; font-size: 13px; line-height: 1.35; color: var(--encre); background: var(--blanc);
  border: 1px solid var(--trait-fort); border-radius: 8px; box-shadow: var(--ombre); pointer-events: none; z-index: 2; }

@media print {
  .gs-periode, .gs-outils, .aide, .gs-graphe .gs-bulle { display: none !important; }
  .gs-titre-impression { display: block; font-size: 16px; margin: 0 0 10px; }
  .gs-chiffres > div { border-color: #999; }
  .tableau-zone { overflow: visible !important; }
}
.gs-chiffres span b { font-size: inherit; }
.tdb-chiffres span b, .gs-tdb-obj span b { font-size: inherit; }
.gs-objectifs td, .gs-table td:last-child { white-space: nowrap; }

/* ── TVA, export comptable, e-reporting ── */
.bandeau-bleu { background: var(--bleu-pale); color: var(--bleu-texte); border: 1px solid var(--vert-trait); }
.gs-regles { font-size: 14px; color: var(--encre2); margin: 0 0 12px; }
.gs-chiffres .gs-fort { box-shadow: inset 3px 0 0 var(--action); }
.gs-table tr.gs-fort td { font-weight: 700; background: var(--survol); }
.gs-ca3 td:first-child { width: 56px; color: var(--encre2); font-weight: 700; }
.gs-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gs-deux > section { min-width: 0; }
@media (max-width: 1000px) { .gs-deux { grid-template-columns: 1fr; } }
.gs-details { margin: 16px 0; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); padding: 4px 14px; }
.gs-details > summary { cursor: pointer; font-weight: 700; color: var(--lien); padding: 10px 0; }
.gs-details h4 { margin: 14px 0 8px; }
.gs-fichier { font-size: 15px !important; word-break: break-all; }
.gs-exports { align-items: center; margin-top: 14px; }
.gs-reglages { max-width: 780px; padding: 0 0 4px; border: 0; border-radius: 0; background: none; }
.gs-reglages .interrupteur { margin: 10px 0 4px; }
.gs-cloture { display: flex; gap: 8px; }
.gs-cloture select, .gs-compte { font: inherit; min-height: 38px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.gs-compte { width: 130px; font-variant-numeric: tabular-nums; }

/* ── Lecteur de codes-barres ── */
.scan-voile { position: fixed; inset: 0; z-index: 120; background: rgba(8, 12, 18, .72); display: grid; place-items: center; padding: 16px; }
.scan-boite { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--blanc); color: var(--encre); border-radius: 14px; box-shadow: var(--ombre); padding: 14px; display: grid; gap: 10px; }
.scan-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scan-tete .fp-fermer { color: var(--encre); background: var(--gris-pale); }
.scan-video { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 10px; overflow: hidden; }
.scan-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-cadre { position: absolute; left: 10%; right: 10%; top: 32%; bottom: 32%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 8px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.scan-etat { margin: 0; font-weight: 600; min-height: 22px; }
.scan-erreur { color: var(--rouge-txt); }
.scan-saisie { display: grid; gap: 4px; }
.scan-saisie > div { display: flex; gap: 8px; }
.scan-saisie input { flex: 1; font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.scan-liste { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; font-size: 14px; }
.scan-liste li { padding: 5px 0; border-bottom: 1px solid var(--trait-leger); }
.scan-pied { display: flex; justify-content: flex-end; }
.scan-champ { margin-top: 6px; }
.rc-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
tr.scan-vu td { background: var(--vert-pale); }
@media (max-width: 600px) {
  .gs-ca3 thead { display: none; }
  .gs-ca3 tr { display: grid; grid-template-columns: 44px 1fr; padding: 8px 0; border-bottom: 1px solid var(--trait-leger); }
  .gs-ca3 td { border: 0 !important; padding: 2px 10px !important; background: none !important; }
  .gs-ca3 td:nth-child(3), .gs-ca3 td:nth-child(4) { grid-column: 2; text-align: left; }
  .gs-ca3 td:nth-child(3):empty, .gs-ca3 td:nth-child(4):empty { display: none; }
  .gs-ca3 td:nth-child(3)::before { content: 'Base hors taxe : '; color: var(--encre2); font-weight: 400; }
  .gs-ca3 td:nth-child(4)::before { content: 'Taxe : '; color: var(--encre2); font-weight: 400; }
}
/* ── Rappels ── */
.rp-actions { white-space: nowrap; }
.rp-actions .btn { margin: 2px 4px 2px 0; }
.rp-code { display: block; padding: 8px 10px; margin: 4px 0 8px; background: var(--gris-pale); border-radius: 8px; font-size: 13px; word-break: break-all; user-select: all; }
@media (max-width: 760px) { .rp-actions { white-space: normal; } }

/* ── Objectifs et productivité : états, chiffres clés, graphiques ── */
/* États (jamais seuls : toujours une icône et un mot). Vérifiés : contraste ≥ 3:1 sur la surface. */
:root { --etat-ok: #15803D; --etat-proche: #D97706; --etat-loin: #B42318;
  --teinte-bleu-fond: #E3EDFA; --teinte-bleu: #1D5FA8; --teinte-violet-fond: #EEE9FB; --teinte-violet: #6D28D9;
  --teinte-ambre-fond: #FDF0DC; --teinte-ambre: #B54708; --teinte-vert-fond: #E3F4E6; --teinte-vert: #15803D; }
:root[data-theme="dark"] { --etat-ok: #23A04A; --etat-proche: #D6A10C; --etat-loin: #F0566A;
  --teinte-bleu-fond: #1B2A40; --teinte-bleu: #7FB0EA; --teinte-violet-fond: #2A2340; --teinte-violet: #B9A4F5;
  --teinte-ambre-fond: #33260F; --teinte-ambre: #F5B35C; --teinte-vert-fond: #16301F; --teinte-vert: #6FD08C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --etat-ok: #23A04A; --etat-proche: #D6A10C; --etat-loin: #F0566A;
  --teinte-bleu-fond: #1B2A40; --teinte-bleu: #7FB0EA; --teinte-violet-fond: #2A2340; --teinte-violet: #B9A4F5;
  --teinte-ambre-fond: #33260F; --teinte-ambre: #F5B35C; --teinte-vert-fond: #16301F; --teinte-vert: #6FD08C; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gs-etat { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-variant-numeric: tabular-nums; padding: 2px 8px 2px 6px; }
.gs-etat svg { flex: none; }
.gs-legende-etats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 2px; font-size: 13px; }
.gs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 12px; }
.gs-kpi { display: flex; gap: 12px; align-items: flex-start; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 14px; box-shadow: inset 4px 0 0 var(--trait-fort); }
.gs-kpi-ok { box-shadow: inset 4px 0 0 var(--etat-ok); }
.gs-kpi-proche { box-shadow: inset 4px 0 0 var(--etat-proche); }
.gs-kpi-loin { box-shadow: inset 4px 0 0 var(--etat-loin); }
.gs-kpi > div { display: grid; gap: 2px; min-width: 0; }
.gs-kpi b { font-size: 22px; color: var(--encre); font-variant-numeric: tabular-nums; line-height: 1.2; }
.gs-kpi span { font-size: 13px; color: var(--encre2); }
.gs-kpi .gs-kpi-jauge { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.gs-kpi .gs-kpi-jauge .gs-jauge { width: 110px; }
.gs-kpi-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; }
.gs-kpi .gs-kpi-ico { color: inherit; }
.gs-teinte-bleu { background: var(--teinte-bleu-fond); color: var(--teinte-bleu) !important; }
.gs-teinte-violet { background: var(--teinte-violet-fond); color: var(--teinte-violet) !important; }
.gs-teinte-ambre { background: var(--teinte-ambre-fond); color: var(--teinte-ambre) !important; }
.gs-teinte-vert { background: var(--teinte-vert-fond); color: var(--teinte-vert) !important; }
.gs-graphes-obj { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; margin-bottom: 12px; }
.gs-graphe-obj { margin: 0; }
.gs-graphe-obj figcaption b { color: var(--encre); margin-right: auto; font-size: 14px; }
.gs-graphe-obj .gs-graphe-zone { height: 150px; gap: 4px; }
.gs-barres-obj { position: relative; }
.gs-barres-obj .gs-b { width: min(22px, 60%); }
.gs-cible { position: absolute; left: 14%; right: 14%; height: 2px; margin-bottom: -1px; border-radius: 1px; background: var(--encre); }
.gs-leg-obj { width: 14px !important; height: 2px !important; border-radius: 1px !important; background: var(--encre); vertical-align: middle; }
.gs-col-courante { background: var(--vert-pale); }
.gs-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; font-size: 11px; font-weight: 800;
  background: var(--teinte-bleu-fond); color: var(--teinte-bleu); vertical-align: middle; }
.gs-obj { width: 88px; }
.gs-objectifs .gs-jauge { width: 60px; }
@media (max-width: 640px) { .gs-graphes-obj { grid-template-columns: 1fr; } .gs-kpis { grid-template-columns: 1fr; } }
@media print { .gs-legende-etats .discret { display: none; } }

/* ── Réglages des rappels ── */
.rp-reglages { padding: 0; }
.rp-reglages > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; list-style: none; }
.rp-reglages > summary::-webkit-details-marker { display: none; }
.rp-reglages > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.rp-reglages[open] > summary::after { transform: rotate(-135deg); }
.rp-reglages > summary svg { color: var(--accent); }
.rp-reglages[open] > summary { border-bottom: 1px solid var(--trait); }
.rp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.rp-bloc { padding: 18px 20px; border-bottom: 1px solid var(--trait-leger); display: grid; gap: 12px; }
.rp-bloc h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); }
.rp-bloc h4 .pastille { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
.rp-bloc .aide { margin: 0; }
.rp-bloc .champ { margin: 0; }
/* Interrupteur : case à cocher accessible (role="switch"), libellé et explication à côté. */
.interrupteur { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interrupteur input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.interrupteur-piste { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--trait-fort); transition: background .15s; }
.interrupteur-piste::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.interrupteur input:checked + .interrupteur-piste { background: var(--vert); }
.interrupteur input:checked + .interrupteur-piste::after { transform: translateX(18px); }
.interrupteur input:focus-visible + .interrupteur-piste { outline: 3px solid var(--vert); outline-offset: 2px; }
.interrupteur > span:last-child { display: grid; gap: 2px; padding-top: 2px; }
.interrupteur b { font-size: 14px; color: var(--encre); }
.interrupteur small { font-size: 13px; color: var(--encre2); line-height: 1.4; }
.rp-delais { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); gap: 12px 20px; }
.rp-jours { display: flex; align-items: center; gap: 8px; }
.rp-jours input { width: 88px !important; text-align: right; }
.rp-jours span { font-size: 14px; color: var(--encre2); white-space: nowrap; }
.rp-message { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-message textarea { width: 100%; resize: vertical; min-height: 96px; }
.rp-compteur { display: block; margin-top: 4px; }
.rp-apercu { margin: 0; border: 1px solid var(--trait); border-radius: 10px; background: var(--papier); overflow: hidden; }
.rp-apercu figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--encre2); border-bottom: 1px solid var(--trait); background: var(--blanc); }
.rp-apercu-objet { padding: 10px 12px 0; font-weight: 700; font-size: 14px; color: var(--encre); }
.rp-apercu-texte { padding: 6px 12px 12px; font-size: 13px; line-height: 1.5; color: var(--encre); white-space: pre-line; max-height: 260px; overflow: auto; }
.rp-code-ligne { display: flex; align-items: center; gap: 8px; }
.rp-code-ligne .rp-code { flex: 1; margin: 0; min-width: 0; }
.rp-web > summary { cursor: pointer; font-size: 14px; color: var(--lien); font-weight: 600; }
.rp-web[open] > summary { margin-bottom: 8px; }
.rp-web .aide { margin-bottom: 8px; }
.rp-reglages .form-erreur { margin: 12px 20px 0; }
.rp-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 20px; background: var(--blanc);
  border-top: 1px solid var(--trait); border-radius: 0 0 10px 10px; }
.rp-pied.actif { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -6px 16px rgba(16, 24, 40, .08); }
.rp-pied #rp-modifie { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ambre-texte); font-size: 13px; font-weight: 600; }
.rp-pied #rp-modifie[hidden] { display: none; }
.rp-pied .btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 760px) {
  .rp-message { grid-template-columns: 1fr; }
  .rp-bloc { padding: 16px 14px; }
  .rp-reglages > summary { padding: 12px 14px; }
  .rp-code-ligne { flex-direction: column; align-items: stretch; }
  .rp-pied { padding: 10px 14px; gap: 6px 12px; }
  .rp-pied #rp-modifie { flex-basis: 100%; }
  .rp-pied .btn { flex: 1; justify-content: center; }
}
.rp-reglages { scroll-margin-top: 76px; }

/* ── Éditeur de lignes : poignée, glisser-déposer, désignation extensible, remise globale ── */
#lg-zone { position: relative; }
.lg-liste { position: relative; }
.lg { grid-template-columns: 34px minmax(0, 1fr) auto; transition: box-shadow .2s, border-color .2s; }
.lg-poignee { display: grid; justify-items: center; align-content: start; gap: 2px; width: 30px; min-height: 40px; padding: 6px 0; border: 0; border-radius: 7px;
  background: none; color: var(--encre3); cursor: grab; touch-action: none; font: inherit; }
.lg-poignee span { font-size: 11px; font-weight: 800; }
.lg-poignee:hover, .lg-poignee:focus-visible { background: var(--survol); color: var(--encre); }
.lg-poignee:active { cursor: grabbing; }
.lg-source { opacity: .35; }
.lg-fantome { position: fixed; z-index: 90; pointer-events: none; margin: 0; box-shadow: 0 14px 34px rgba(16, 24, 40, .25); border-color: var(--vert); transform: rotate(.4deg); }
.lg-repere { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); pointer-events: none; }
.lg-deposee { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.lg-des-zone { position: relative; flex: 1; min-width: 0; }
.lg textarea.lg-des { display: block; width: 100%; min-height: 38px; font: inherit; font-size: 14px; line-height: 1.4; padding: 8px 32px 8px 9px; resize: none; overflow: hidden;
  border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); }
.lg textarea.lg-des:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); }
.lg textarea.lg-des.lg-grand { min-height: 150px; resize: vertical; }
.lg-txt textarea.lg-des { font-style: italic; }
.lg-agrandir { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none;
  color: var(--encre3); cursor: pointer; }
.lg-agrandir:hover, .lg-agrandir:focus-visible { background: var(--survol); color: var(--encre); }
/* Désignation agrandie : elle prend toute la largeur, sous le type et le montant. */
.lg-ouverte .lg-l1 { flex-wrap: wrap; }
.lg-ouverte .lg-l1 .lg-des-zone { order: 3; flex-basis: 100%; }
.lg-ouverte .lg-l1 .lg-total { margin-left: auto; }
.lg-txt { grid-template-columns: 34px minmax(0, 1fr) auto; }
.lg-total { display: grid; justify-items: end; padding-top: 8px; align-self: start; }
.lg-part { font-size: 11px; font-weight: 600; color: var(--encre2); }
.lg-outils { padding-top: 4px; }
.lg-multi { white-space: pre-line; }
/* Suggestions du catalogue sous la désignation. */
.lg-sugg { position: absolute; z-index: 5; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--blanc);
  border: 1px solid var(--trait-fort); border-radius: 10px; box-shadow: var(--ombre); }
.lg-sugg li { display: grid; gap: 1px; padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.lg-sugg li b { font-size: 14px; font-weight: 600; color: var(--encre); }
.lg-sugg li span { font-size: 12px; color: var(--encre2); }
.lg-sugg li:hover, .lg-sugg li.actif { background: var(--vert-pale); }
/* Pied : remise globale à gauche, totaux à droite. */
.lg-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--trait); }
.lg-pied .lg-totaux { margin: 0 0 0 auto; }
.lg-remise { display: grid; gap: 6px; max-width: 340px; }
.lg-remise > label { font-size: 13px; font-weight: 700; color: var(--encre); }
.lg-remise-saisie { display: flex; align-items: center; gap: 6px; }
.lg-remise-saisie input { width: 110px; font: inherit; font-size: 15px; min-height: 40px; padding: 6px 10px; text-align: right; border: 1px solid var(--trait-fort); border-radius: 8px;
  background: var(--blanc); color: var(--encre); font-variant-numeric: tabular-nums; }
.lg-remise-saisie input:focus { border-color: var(--vert); outline: none; box-shadow: 0 0 0 3px var(--vert-pale); }
.lg-bascule { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--gris-pale); }
.lg-bascule button { min-width: 44px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--encre2); cursor: pointer; }
.lg-bascule button.actif { background: var(--blanc); color: var(--lien); box-shadow: 0 1px 3px rgba(16, 24, 40, .15); }
.lg-remise .aide { margin: 0; line-height: 1.4; }
.lg-totaux .lg-remise-ligne td { color: var(--vert-pastille-texte); font-weight: 600; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action { margin-left: auto; border: 0; background: none; color: #fff; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
@media (max-width: 700px) {
  .lg { grid-template-columns: 30px minmax(0, 1fr); }
  .lg-outils { grid-column: 2; }
  .lg-pied .lg-totaux { margin: 0; width: 100%; }
}
.panneau-form > .interrupteur { margin: 10px 0 16px; }

/* ── Paramètres : rubriques à gauche, onglet à droite ── */
.corps-page.avec-prm { display: grid; grid-template-columns: 252px minmax(0, 1fr); max-width: none; }
.corps-page.avec-prm .contenu { max-width: none; min-width: 0; }
/* Les formulaires de réglages gardent une largeur de lecture ; les listes prennent tout. */
.corps-page.avec-prm .prm-form { max-width: 1100px; }
.prm-nav { position: sticky; top: 68px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; padding: 22px 0 24px 20px; }
.prm-groupe { margin-bottom: 14px; }
.prm-groupe-titre { padding: 0 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre3); }
.prm-lien { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 10px; border-radius: 9px; color: var(--encre); text-decoration: none; font-size: 14px; font-weight: 500; }
.prm-lien svg { flex: none; color: var(--encre3); }
.prm-lien:hover { background: var(--survol); }
.prm-lien.actif { background: var(--vert-pale); color: var(--lien); font-weight: 700; box-shadow: inset 3px 0 0 var(--vert); }
.prm-lien.actif svg { color: var(--accent); }
.prm-lien:focus-visible { outline: 3px solid var(--vert); outline-offset: -3px; }
/* Un onglet : une carte, des blocs séparés, la barre d'enregistrement en bas. */
.prm-form { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; }
.prm-tete { padding: 20px 22px 14px; border-bottom: 1px solid var(--trait); }
.prm-tete h2 { margin: 0 0 4px; font-size: 19px; color: var(--encre); }
.prm-tete p { margin: 0; font-size: 14px; color: var(--encre2); line-height: 1.45; }
.prm-bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--trait-leger); }
.prm-bloc h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); }
.prm-bloc h3 .pastille { text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }
.prm-bloc .champ { margin: 0; }
.prm-bloc .aide, .prm-bloc p { margin: 0; }
.prm-bloc p .pastille { white-space: normal; }
.prm-bloc .champ-ligne { gap: 12px 16px; align-items: start; }
.prm-bloc .bandeau { margin: 0; }
.prm-form .form-erreur { margin: 12px 22px 0; }
.prm-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; padding: 12px 22px; border-radius: 0 0 12px 12px; background: var(--blanc); }
.prm-pied.actif { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid var(--trait); box-shadow: 0 -6px 16px rgba(16, 24, 40, .08); }
.prm-modifie { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ambre-texte); font-size: 13px; font-weight: 600; }
.prm-modifie[hidden], .prm-annuler[hidden] { display: none; }
.prm-pied .btn:disabled { opacity: .5; cursor: default; }
.prm-form .marque-edit { margin: 0; }
@media (max-width: 900px) {
  .corps-page.avec-prm { display: block; }
  /* Sur téléphone : les rubriques deviennent une bande qui défile, sous la barre du haut. */
  .prm-nav { position: sticky; top: 56px; z-index: 5; display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 12px;
    background: var(--papier); border-bottom: 1px solid var(--trait); scrollbar-width: none; }
  .prm-nav::-webkit-scrollbar { display: none; }
  .prm-groupe { display: contents; }
  .prm-groupe-titre { display: none; }
  .prm-lien { flex: none; min-height: 36px; padding: 6px 12px; border: 1px solid var(--trait); border-radius: 18px; background: var(--blanc); white-space: nowrap; font-size: 13px; }
  .prm-lien.actif { box-shadow: none; border-color: var(--vert); }
  .prm-tete, .prm-bloc { padding-left: 14px; padding-right: 14px; }
  .prm-pied { padding: 10px 14px; }
  .prm-modifie { flex-basis: 100%; }
  .prm-pied .btn { flex: 1; justify-content: center; }
}
@media print { .prm-nav { display: none !important; } }

/* Rappels : le nom du client aligné sur ses coordonnées. */
.rp-table td .lien-txt { padding: 0; text-align: left; }
.rp-contact { display: block; margin-top: 2px; }
span.nw { white-space: nowrap; }

/* ── Historique des envois ── */
.env-tete { margin-bottom: 12px; }
.env-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.env-kpis .gs-kpi { padding: 12px; gap: 10px; }
.env-kpis .gs-kpi-ico { width: 34px; height: 34px; }
.env-type { font: inherit; min-height: 40px; padding: 6px 10px; border: 1px solid var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.env-table td { vertical-align: top; }
.env-table .lien-txt { padding: 0; text-align: left; }
.env-objet, .env-vu { display: block; margin-top: 2px; }
.env-dest { overflow-wrap: anywhere; }
.env-piece { min-width: 180px; }
.env-piece .lien-txt, .env-piece b { white-space: nowrap; }
.env-par { white-space: nowrap; }
.env-etat { display: inline-flex; align-items: center; gap: 4px; }
.env-erreur { display: block; margin-top: 3px; font-size: 12px; color: var(--rouge-txt); max-width: 260px; }
.env-heure { display: block; margin-top: 1px; }
.env-relance { display: flex; margin-top: 6px; white-space: nowrap; }
.env-fiche { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.env-fiche li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
@media (max-width: 760px) {
  /* Sur téléphone, chaque envoi devient une carte. */
  .env-table thead { display: none; }
  .env-table, .env-table tbody, .env-table tr, .env-table td { display: block; width: 100%; }
  .env-table tr { padding: 10px 12px; border-bottom: 1px solid var(--trait); }
  .env-table td { padding: 2px 0; border: 0; }
  .env-table td:first-child { font-size: 12px; color: var(--encre2); }
}
.env-attente { display: block; margin-top: 3px; font-size: 12px; color: var(--ambre-texte); }
.soc-messagerie { margin-top: 18px; }
.env-vu svg { vertical-align: -2px; }

/* ── Envoi des e-mails, relances, paiement en ligne (1.8) ─────────────── */
.em-sous, .em-smtp { margin-left: 56px !important; }
.em-smtp { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--trait-leger); border-radius: 12px; background: var(--survol); }
.em-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px 16px; }
.em-grille .champ { margin: 0; }
.em-note { font-size: 13px; }
.em-test { display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap; }
.em-test .champ { flex: 1 1 260px; margin: 0; }
.em-res { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 11px 14px; font-size: 14px; }
.em-res > div { display: grid; gap: 3px; min-width: 0; }
.em-res span { font-size: 13px; }
.em-res.ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); border: 1px solid color-mix(in srgb, var(--vert-pastille-texte) 25%, transparent); }

.em-res.ko { background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); }
.em-res details { margin-top: 4px; font-size: 12.5px; }
.em-res pre { white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.05); font-size: 12px; }
.rl-apercu { align-self: stretch; }
.rl-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rl-chiffres > div { display: grid; background: var(--vert-pale); border-radius: 10px; padding: 8px 10px; }
.rl-chiffres b { font-size: 18px; color: var(--lien); font-variant-numeric: tabular-nums; }
.rl-chiffres span { font-size: 11.5px; color: var(--encre2); line-height: 1.3; }
.rl-apercu small { display: block; margin-top: 6px; }
.rl-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.fp-impaye { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: -4px 0 12px; font-size: 13px; color: var(--encre2); }
.fp-impaye .lien-txt { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.fp-enfant.echec b { color: var(--rouge-texte); }
.pp-compte { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--trait-leger); border-radius: 12px; }
.pp-compte > div { display: grid; flex: 1; min-width: 0; }
.pp-compte span { font-size: 12.5px; color: var(--encre2); overflow-wrap: anywhere; }
.prm-bloc code { font-size: 12.5px; }
@media (max-width: 700px) {
  .em-sous, .em-smtp { margin-left: 0 !important; }
  .em-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .em-grille .em-hote { grid-column: 1 / -1; }
  .rl-chiffres { grid-template-columns: 1fr 1fr 1fr; }
  .fp-impaye .lien-txt { margin-left: 0; }
}
.md-pied .lien-txt { white-space: nowrap; }
@media (max-width: 520px) { .rl-tete { font-size: 13px; } }
.pp-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: 12px; cursor: pointer; background: var(--blanc); }
.pp-mode input { margin-top: 3px; accent-color: var(--vert); }
.pp-mode > span { display: grid; gap: 3px; }
.pp-mode b { display: inline-flex; align-items: center; gap: 6px; }
.pp-mode small { color: var(--encre2); font-size: 12.5px; line-height: 1.4; }
.pp-mode.choisi { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.pp-frais { display: grid; grid-template-columns: repeat(3, auto) minmax(0, 1fr); gap: 10px 16px; align-items: end; }
.pp-frais .champ { margin: 0; }
.pp-simu-res { font-size: 13.5px; line-height: 1.45; padding: 8px 12px; border-radius: 10px; background: var(--vert-pale); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.pp-bilan { margin-top: 4px; }
.pp-essais { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-essais li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.pp-essais small { display: block; color: var(--encre2); font-size: 12px; }
@media (max-width: 700px) {
  .pp-modes { grid-template-columns: 1fr; }
  .pp-frais { grid-template-columns: 1fr 1fr; }
  .pp-simu-res { grid-column: 1 / -1; }
}

/* ── Éditeur des lignes (2.0) ──────────────────────────────────────────── */
:root { --p-piece-f: #E3ECF9; --p-piece-t: #1D4F91; --p-mo-f: #FDE9DA; --p-mo-t: #9A3412; --p-forfait-f: #ECE6FA; --p-forfait-t: #5B3A9E;
        --p-kit-f: #FFF1E6; --p-kit-t: #9A3412; --nuit: #13294B; --courant: #FFF7F1; --courant-trait: #F4B48E; }
:root[data-theme="dark"] { --p-piece-f: #1B2A45; --p-piece-t: #A9C4F5; --p-mo-f: #3A2416; --p-mo-t: #F8B98E; --p-forfait-f: #2A2240; --p-forfait-t: #CDB8F5;
        --p-kit-f: #35230F; --p-kit-t: #F5C57A; --nuit: #0E1B30; --courant: #2A2118; --courant-trait: #7A4A2A; }
@media (prefers-color-scheme: dark) {
  :root.theme-auto { --p-piece-f: #1B2A45; --p-piece-t: #A9C4F5; --p-mo-f: #3A2416; --p-mo-t: #F8B98E; --p-forfait-f: #2A2240; --p-forfait-t: #CDB8F5;
        --p-kit-f: #35230F; --p-kit-t: #F5C57A; --nuit: #0E1B30; --courant: #2A2118; --courant-trait: #7A4A2A; }
}
.md.md-lignes { width: min(1240px, 100%); min-width: 0; height: calc(100vh - 32px); }
.md.md-lignes .md-corps, #lg-zone, .le-table, #lg-liste { min-width: 0; }
.md.md-lignes .md-tete { background: var(--nuit); color: #FFFFFF; border-radius: 14px 14px 0 0; border-bottom: 0; }
.md.md-lignes .md-tete h2 { color: #FFFFFF; }
.md.md-lignes .md-fermer { color: #FFFFFF; background: rgba(255,255,255,.12); border-radius: 9px; width: 36px; height: 36px; }
.md.md-lignes .md-corps { padding: 0; flex: 1; }
.md.md-lignes .md-pied { padding: 12px 20px; background: var(--survol); border-radius: 0 0 14px 14px; }
.le-zone { position: relative; }
.le-outils { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 20px; background: var(--survol); border-bottom: 1px solid var(--trait); }
.le-cherche { position: relative; flex: 1 1 360px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 12px; background: var(--blanc);
  border: 1.5px solid var(--trait-fort); border-radius: 10px; color: var(--encre2); }
.le-cherche:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); }
.le-cherche input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14.5px; background: transparent; color: var(--encre); }
.le-cherche kbd, .le-menu kbd { font: 700 11px/1 inherit; color: var(--encre3); border: 1px solid var(--trait); border-radius: 5px; padding: 3px 6px; }
.le-scan { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--gris-pale); color: var(--lien); font: inherit; font-weight: 600; font-size: 13px; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.le-ajouts { display: flex; flex-wrap: wrap; gap: 6px; }
.le-ajout { height: 42px; padding: 0 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--encre); }
.le-ajout:hover { background: var(--survol); }
.le-ajout.le-p-piece { color: var(--p-piece-t); } .le-ajout.le-p-mo { color: var(--p-mo-t); } .le-ajout.le-p-forfait { color: var(--p-forfait-t); }
.le-ajout.le-p-divers, .le-ajout.le-p-texte { color: var(--gris-texte); }
.le-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 20px 0; font-size: 13px; color: var(--encre2); }
.le-opt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.le-opt small { font-weight: 500; color: var(--encre3); }
.le-interr { position: relative; cursor: pointer; }
.le-interr input { position: absolute; opacity: 0; width: 38px; height: 22px; margin: 0; cursor: pointer; }
.le-interr .interrupteur-piste { transform: scale(.8); transform-origin: left center; margin-right: -6px; }
.le-interr input:checked + .interrupteur-piste { background: var(--vert); }
.le-interr input:checked + .interrupteur-piste::after { transform: translateX(18px); }
.le-interr input:focus-visible + .interrupteur-piste { outline: 3px solid var(--vert); outline-offset: 2px; }
.le-leg { display: none; }
.le-raccourcis { margin-left: auto; font-size: 12px; color: var(--encre3); }
.le-bascule { display: inline-flex; background: var(--gris-pale); border-radius: 8px; padding: 3px; }
.le-bascule button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--encre2); padding: 4px 11px; border-radius: 6px; cursor: pointer; min-height: 30px; }
.le-bascule button.actif { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.le-table { display: flex; flex-direction: column; padding: 8px 20px 0; }
.le-tete, .le-rang { display: grid; grid-template-columns: 24px 108px 98px minmax(0, 1fr) 62px 70px 90px 58px 76px 104px 34px; column-gap: 8px; align-items: start; }
.le-tete { padding: 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre3); border-bottom: 2px solid var(--trait); }
.le-tete .n, .le-rang .n { text-align: right; }
.le-rang { position: relative; padding: 8px; border-bottom: 1px solid var(--trait-leger); border-radius: 8px; }
.le-rang.courant { background: var(--courant); box-shadow: inset 0 0 0 1.5px var(--courant-trait); }
.le-rang input, .le-rang select, .le-rang textarea { font: inherit; font-size: 13.5px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 7px;
  background: var(--blanc); color: var(--encre); width: 100%; box-sizing: border-box; min-width: 0; }
.le-rang select { padding: 5px 4px; }
.le-rang input:focus, .le-rang select:focus, .le-rang textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 20%, transparent); }
.le-ref { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px !important; }
.le-des { resize: none; line-height: 1.4; display: block; }
.le-des-zone { display: grid; gap: 4px; min-width: 0; }
.le-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--encre2); min-height: 0; }
.le-info:empty { display: none; }
.le-sep { color: var(--trait-fort); }
.le-info .le-tech { width: auto !important; min-height: 26px !important; padding: 1px 6px !important; font-size: 12px !important; border-radius: 999px !important; background: var(--bleu-pale) !important;
  color: var(--bleu-texte) !important; border-color: transparent !important; font-weight: 600; }
.le-stock { font-weight: 700; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
.le-s-ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); }
.le-s-bas { background: var(--ambre-pale); color: var(--ambre-texte); }
.le-s-rupture { background: var(--rouge-pale); color: var(--rouge-texte); }
.le-marge { font-weight: 700; }
.le-marge.bonne { color: var(--vert-pastille-texte); } .le-marge.moyenne { color: var(--ambre-texte); } .le-marge.faible { color: var(--rouge-texte); }
.le-pastille { justify-self: start; margin-top: 5px; border: 0; font: inherit; font-size: 12px; font-weight: 700; line-height: 1.25; padding: 4px 10px; border-radius: 12px; cursor: pointer;
  max-width: 100%; text-align: center; overflow-wrap: normal; background: var(--gris-pale); color: var(--gris-texte); }
.le-p-piece.le-pastille, .le-puce.le-p-piece { background: var(--p-piece-f); color: var(--p-piece-t); }
.le-p-mo.le-pastille, .le-puce.le-p-mo { background: var(--p-mo-f); color: var(--p-mo-t); }
.le-p-forfait.le-pastille, .le-puce.le-p-forfait { background: var(--p-forfait-f); color: var(--p-forfait-t); }
.le-p-kit.le-pastille, .le-puce.le-p-kit { background: var(--p-kit-f); color: var(--p-kit-t); box-shadow: inset 0 0 0 1px var(--courant-trait); }
span.le-pastille { cursor: default; }
.le-tot { display: flex; flex-direction: column; align-items: flex-end; padding-top: 7px; font-variant-numeric: tabular-nums; }
.le-tot b { font-size: 14px; }
.le-tot s { font-size: 11.5px; color: var(--encre3); }
.le-tot small { font-size: 11px; color: var(--vert-pastille-texte); white-space: nowrap; }
.le-poignee { margin-top: 5px; }
.le-plus { height: 34px; width: 34px; border: 0; background: transparent; border-radius: 7px; color: var(--encre2); font-size: 18px; line-height: 1; cursor: pointer; }
.le-plus:hover, .le-plus[aria-expanded="true"] { background: var(--gris-pale); }
.le-rang.le-sec { grid-template-columns: 24px minmax(0, 1fr) auto auto 34px; align-items: center; margin-top: 10px; background: var(--gris-pale); border-bottom: 0; }
.le-rang.le-sec.courant { background: var(--courant); }
.le-sec-titre { font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em; color: var(--lien) !important; background: transparent !important; border-color: transparent !important; }
.le-sec-titre:focus { background: var(--blanc) !important; }
.le-sec-info { font-size: 12.5px; color: var(--encre2); white-space: nowrap; }
.le-sec-st { font-size: 13px; color: var(--encre2); white-space: nowrap; }
.le-sec-st b { color: var(--lien); font-size: 14px; }
.le-rang.le-txt { grid-template-columns: 24px 108px minmax(0, 1fr) 34px; }
.le-rang.le-txt .le-des { font-style: italic; background: var(--survol); }
.le-vide { padding: 24px 8px; color: var(--encre2); text-align: center; }
.le-ajout-bas { align-self: flex-start; margin: 10px 20px 20px 28px; border: 1.5px dashed var(--trait-fort); background: transparent; color: var(--lien); font: inherit; font-weight: 600;
  font-size: 13.5px; padding: 9px 14px; border-radius: 9px; cursor: pointer; }
.le-res { position: absolute; left: 20px; top: 58px; z-index: 6; width: min(680px, calc(100% - 40px)); margin: 0; padding: 0 0 0; list-style: none; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 14px; box-shadow: 0 18px 44px rgba(19, 41, 75, .22); overflow: hidden; max-height: 470px; overflow-y: auto; }
.le-res li[data-k] { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 88px; gap: 12px; align-items: center; padding: 9px 14px; cursor: pointer; }
.le-res li[data-k].actif, .le-res li[data-k]:hover { background: var(--courant); }
.le-res .le-pastille { margin-top: 0; }
.le-res-des { display: grid; gap: 1px; min-width: 0; }
.le-res-des b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.le-res-des small { font-size: 12px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-res mark { background: transparent; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 2px; }
.le-res .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.le-puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--trait-leger); }
.le-puce { border: 0; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--gris-pale); color: var(--gris-texte); cursor: pointer; }
.le-puce.actif { background: var(--nuit); color: #FFFFFF; box-shadow: none; }
.le-res-pied { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--trait-leger); background: var(--survol); font-size: 12px; color: var(--encre3); }
.le-res-pied button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--lien); cursor: pointer; padding: 4px 0; }
.le-res-pied span { margin-left: auto; }
/* 1.18.2 — Le catalogue à portée de main : le bouton, la liste du champ vide, le panneau. */
.le-ajout.le-cat-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--action); border-color: var(--action); color: #FFFFFF; padding: 0 15px; }
.le-ajout.le-cat-btn:hover { background: var(--action-fonce, var(--action)); }
.le-ajout.le-cat-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 30%, transparent); }
.le-res.le-res-tout { max-height: min(62vh, 560px); }
.le-res-vide { padding: 12px 14px; font-size: 13.5px; color: var(--encre2); }
.le-res-pied button { display: inline-flex; align-items: center; gap: 6px; }
.md.md-lignes { position: relative; }
.md:not(.md-lignes) > .le-cat { display: none; }
.le-cat { position: absolute; z-index: 9; right: 0; top: var(--le-cat-haut, 64px); bottom: var(--le-cat-bas, 0px); width: min(660px, 60%);
  display: flex; flex-direction: column; min-height: 0; background: var(--blanc); color: var(--encre); border-left: 1px solid var(--trait);
  box-shadow: -18px 0 40px rgba(19, 41, 75, .18); outline: none; transform: translateX(16px); opacity: 0; transition: transform .16s ease-out, opacity .16s ease-out; }
.le-cat.ouvert { transform: none; opacity: 1; }
.le-cat-tete { display: grid; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--trait); background: var(--survol); }
.le-cat-titre { display: flex; align-items: center; gap: 8px; }
.le-cat-titre h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: var(--encre); }
.le-cat-x { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--encre2); font-size: 16px; cursor: pointer; }
.le-cat-x:hover { background: var(--gris-pale); color: var(--encre); }
.le-cat-cherche { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 11px; color: var(--encre2); }
.le-cat-cherche:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); }
.le-cat-cherche input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--encre); font: inherit; font-size: 15px; }
.le-cat-categorie { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--encre2); min-width: 0; }
.le-cat-categorie select { flex: 1; min-width: 0; min-height: 38px; font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); }
.le-cat-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.le-cat-puces:empty { display: none; }
.le-cat-puces .le-puce { min-height: 34px; padding: 5px 12px; }
.le-cat-puces .le-puce b { font-weight: 800; margin-left: 2px; }
.le-cat-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px 0 10px; list-style: none; }
.le-cat-groupe { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 10px 16px 6px; background: var(--blanc);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); border-bottom: 1px solid var(--trait-leger); }
.le-cat-groupe small { margin-left: auto; font-weight: 700; letter-spacing: 0; color: var(--encre3); }
.le-cat-groupe svg { color: var(--ambre-texte, var(--encre2)); }
.le-cat-art { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; min-height: 52px; padding: 7px 10px 7px 16px;
  border-bottom: 1px solid var(--trait-leger); cursor: pointer; }
.le-cat-art:hover { background: var(--survol); }
.le-cat-art.actif { background: var(--courant); box-shadow: inset 3px 0 0 var(--action); }
.le-cat-art .le-pastille { margin-top: 0; cursor: pointer; justify-self: start; }
.le-cat-des { display: grid; gap: 2px; min-width: 0; }
.le-cat-des b { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.le-cat-des small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: var(--encre2); min-width: 0; }
.le-cat-des small i { font-style: normal; }
.le-cat-des .mono { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.le-cat-liste mark { background: transparent; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--action); text-underline-offset: 2px; }
.le-cat-prix { display: grid; justify-items: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.le-cat-prix b { font-size: 14px; }
.le-cat-prix small { font-size: 11px; color: var(--encre3); }
.le-cat-ajout { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; border-radius: 999px;
  border: 1.5px solid var(--trait); color: var(--action); background: var(--blanc); font-size: 12px; justify-self: end; }
.le-cat-art:hover .le-cat-ajout, .le-cat-art.actif .le-cat-ajout { border-color: var(--action); }
.le-cat-art.ajoute .le-cat-ajout { width: auto; min-width: 36px; padding: 0 7px; border-color: transparent; background: var(--action); color: #FFFFFF; }
.le-cat-art.ajoute .le-cat-ajout b { font-weight: 800; }
.le-cat-art.flash { animation: le-cat-flash .7s ease-out; }
@keyframes le-cat-flash { from { background: color-mix(in srgb, var(--action) 22%, transparent); } to { background: transparent; } }
.le-cat-vide { display: grid; gap: 12px; padding: 26px 18px; text-align: center; color: var(--encre2); font-size: 14px; }
.le-cat-vide p { margin: 0; line-height: 1.5; }
.le-cat-vide b { color: var(--encre); }
.le-cat-vide-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.le-cat-nouveau { padding: 8px 10px; }
.le-cat-nouveau .lien-txt { display: inline-flex; align-items: center; gap: 6px; color: var(--lien); }
.le-cat-creer { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 16px; }
.le-cat-creer h4 { margin: 0; font-size: 15px; }
.le-cat-creer label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--encre2); min-width: 0; }
.le-cat-creer label small { font-weight: 500; color: var(--encre3); }
.le-cat-creer input, .le-cat-creer select { font: inherit; font-size: 15px; font-weight: 400; min-height: 42px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 9px;
  background: var(--blanc); color: var(--encre); min-width: 0; width: 100%; box-sizing: border-box; }
.le-cat-creer-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.le-cat-creer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.le-cat-pied { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--trait); background: var(--survol); }
.le-cat-etat { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; color: var(--encre2); }
.le-cat-etat b { color: var(--encre); font-size: 14px; }
.le-cat-dernier { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-cat-total { font-weight: 700; color: var(--lien); }
.le-cat-pied .btn { flex: 0 0 auto; }
@media (max-width: 860px) {
  /* Sur téléphone : un volet plein écran qui monte du bas, de grandes lignes faciles à toucher. */
  .le-cat { position: fixed; inset: 0; width: auto; z-index: 75; border-left: 0; box-shadow: none; transform: translateY(40px); }
  .le-cat-tete { padding: 12px 12px 10px; padding-top: max(12px, env(safe-area-inset-top)); }
  .le-cat-cherche input, .le-cat-categorie select { font-size: 16px; }
  .le-cat-art { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-areas: "t p a" "d p a"; row-gap: 3px; min-height: 64px; padding: 9px 10px 9px 14px; }
  .le-cat-art > .le-pastille { grid-area: t; font-size: 11px; padding: 2px 8px; }
  .le-cat-art > .le-cat-des { grid-area: d; }
  .le-cat-art > .le-cat-prix { grid-area: p; }
  .le-cat-art > .le-cat-ajout { grid-area: a; width: 42px; height: 42px; }
  .le-cat-art.ajoute > .le-cat-ajout { min-width: 42px; }
  .le-cat-des b { font-size: 15px; }
  .le-cat-groupe { padding: 10px 14px 6px; }
  .le-cat-pied { padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .le-cat-pied .btn { min-height: 46px; padding: 8px 18px; }
  .le-cat-creer-2 { grid-template-columns: minmax(0, 1fr); }
  .le-ajout.le-cat-btn { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .le-cat { transition: none; } .le-cat-art.flash { animation: none; } }
.le-menu { position: absolute; z-index: 8; min-width: 240px; max-width: 360px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 16px 40px rgba(19, 41, 75, .22);
  padding: 6px; display: flex; flex-direction: column; }
.le-menu > button { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13.5px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--encre); min-height: 38px; }
.le-menu > button:hover, .le-menu > button:focus { background: var(--survol); outline: none; }
.le-menu > button.rouge { color: var(--rouge-txt); font-weight: 600; }
.le-menu-sep { height: 1px; background: var(--trait-leger); margin: 4px 6px; }
.le-kit-form { display: grid; gap: 8px; padding: 8px; min-width: 300px; }
.le-kit-form input:not([type=checkbox]) { font: inherit; min-height: 38px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.le-kit-lignes { display: grid; gap: 2px; max-height: 220px; overflow-y: auto; }
.le-kit-lignes .case { font-weight: 500; font-size: 13.5px; }
.le-kit-actions { display: flex; justify-content: flex-end; gap: 10px; align-items: center; }
.le-kit-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.le-kit-liste li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.le-kit-liste small { color: var(--encre2); display: block; }
.le-pied { width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px 22px; align-items: center; }
.le-pied-remise { display: grid; gap: 4px; }
.le-pied-remise label { font-size: 12px; font-weight: 700; color: var(--encre2); }
.le-pied-remise .lg-remise-saisie { display: flex; gap: 6px; align-items: center; }
.le-pied-remise input { width: 72px; min-height: 36px; font: inherit; text-align: right; padding: 4px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.le-pied-remise .aide { max-width: 230px; }
.le-marge-tot { display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; font-size: 12px; max-width: 230px; }
.le-marge-tot b { font-size: 15px; }
.le-marge-tot.bonne { background: var(--vert-pastille); color: var(--vert-pastille-texte); }
.le-marge-tot.moyenne { background: var(--ambre-pale); color: var(--ambre-texte); }
.le-marge-tot.faible { background: var(--rouge-pale); color: var(--rouge-texte); }
.le-recap { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.le-recap-det { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 2px; font-size: 12.5px; color: var(--encre2); white-space: nowrap; }
.le-recap-det b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); }
.le-recap-det .vert { color: var(--vert-pastille-texte); }
.le-ttc { display: grid; justify-items: end; }
.le-ttc span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre2); }
.le-ttc strong { font-size: 26px; font-weight: 800; color: var(--lien); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.le-pied-actions { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; justify-items: end; }
.le-pied-actions .le-etat { grid-column: 1 / -1; }
.le-pied-actions .le-etat:empty { display: none; }
.le-etat { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.le-etat.modifie { color: var(--ambre-texte); }
.le-etat.alerte { color: var(--rouge-texte); background: var(--rouge-fond); padding: 6px 10px; border-radius: 8px; }
.le-etat .lien-txt { font-size: 12.5px; }
@media (max-width: 1100px) {
  .le-pied { grid-template-columns: auto minmax(0, 1fr); }
  .le-recap { grid-column: 1 / -1; justify-content: space-between; }
  .le-pied-actions { grid-column: 1 / -1; }
  .le-raccourcis { display: none; }
}
@media (max-width: 860px) {
  .le-tete { display: none; }
  .le-table { padding: 8px 12px 0; gap: 8px; }
  .le-outils, .le-options { padding-left: 12px; padding-right: 12px; }
  .le-ajouts { flex-wrap: wrap; width: 100%; }
  .le-ajout, .le-kits { flex: 1 1 auto; }
  .le-ajout { flex: 0 0 auto; }
  .le-rang { row-gap: 6px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; }
  .le-rang > .le-poignee { grid-area: p; }
  .le-rang > .le-pastille { grid-area: t; margin-top: 4px; }
  .le-rang > .le-ref { grid-area: r; }
  .le-rang > .le-des-zone { grid-area: d; }
  .le-rang > [data-k="quantite"] { grid-area: q; }
  .le-rang > [data-k="unite"] { grid-area: u; }
  .le-rang > [data-k="prix_unitaire_ht"], .le-rang > [data-k="prix_ttc"] { grid-area: pu; }
  .le-rang > [data-k="remise_pct"] { grid-area: rem; }
  .le-rang > [data-k="taux_tva"] { grid-area: tva; }
  .le-rang > .le-tot { grid-area: tot; padding-top: 4px; }
  .le-rang > .le-plus { grid-area: m; justify-self: end; }
  .le-rang input, .le-rang select, .le-rang textarea { font-size: 16px; min-height: 40px; width: 100%; min-width: 0; box-sizing: border-box; }
  .le-rang > * { min-width: 0; }
  .md.md-lignes { width: 100%; max-width: 100vw; }
  .le-cherche { min-width: 0; width: 100%; box-sizing: border-box; }
  .le-options { flex-wrap: wrap; row-gap: 8px; }
  .le-options .le-raccourcis { display: none; }
  .le-rang { grid-template-columns: 24px repeat(6, minmax(0, 1fr)) 34px; grid-template-areas: "p t t t tot tot tot m" "p d d d d d d d" "p l1 l1 l1 l1 l1 l1 l1" "p r r q q u u u" "p l2 l2 l2 l2 l2 l2 l2" "p pu pu rem rem tva tva tva"; }
  .le-rang > .le-leg { display: grid; grid-template-columns: subgrid; margin-bottom: -4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre3); }
  .le-rang > .le-leg1 { grid-area: l1; }
  .le-rang > .le-leg2 { grid-area: l2; }
  .le-leg i { font-style: normal; grid-column: span 2; padding-left: 2px; }
  .le-leg i:last-child { grid-column: span 3; }
  .le-rang.le-sec > *, .le-rang.le-txt > * { grid-area: auto; }
  .le-rang.le-sec { align-items: center; grid-template-columns: 24px minmax(0, 1fr) 34px; row-gap: 2px; }
  .le-rang.le-sec > .le-poignee { grid-column: 1; grid-row: 1 / span 2; }
  .le-rang.le-sec > .le-sec-titre { grid-column: 2; grid-row: 1; }
  .le-rang.le-sec > .le-sec-st { grid-column: 2; grid-row: 2; justify-self: start; padding-left: 10px; }
  .le-rang.le-sec > .le-plus { grid-column: 3; grid-row: 1; }
  .le-rang.le-sec { grid-template-areas: none; grid-template-columns: 24px minmax(0, 1fr) auto 34px; background: var(--gris-pale); border: 0; }
  .le-rang.le-sec .le-sec-info { display: none; }
  .le-rang.le-txt { grid-template-areas: none; grid-template-columns: 24px minmax(0, 1fr) 34px; }
  .le-rang.le-txt > .le-pastille { display: none; }
  .le-res { left: 12px; width: calc(100% - 24px); }
  .le-res li[data-k] { grid-template-columns: minmax(0, 1fr) 80px; }
  .le-res li[data-k] .le-pastille, .le-res li[data-k] .le-stock { display: none; }
  .le-res li[data-k] > span:empty { display: none; }
  .md.md-lignes { height: 100vh; border-radius: 0; }
  .md.md-lignes .md-tete { border-radius: 0; }
  .le-pied { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .le-pied-remise .aide, .le-marge-tot, .le-recap-det { display: none; }
  .le-recap { grid-column: 2; justify-content: flex-end; }
  .le-pied-actions { grid-column: 1 / -1; }
  .le-ttc strong { font-size: 22px; }
}
@media (max-width: 860px) { .md-voile:has(.md-lignes) { padding: 0; } }

.lg-lecture .lg-section td { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; color: var(--lien); background: var(--gris-pale); }
.lg-lecture .lg-sous-total td { font-weight: 700; border-bottom: 2px solid var(--trait); }
.lg-lecture .lg-sous-total td:first-child { text-align: right; color: var(--encre2); font-weight: 600; }

/* ── Import de fichiers (2.1) ─────────────────────────────────── */
.md.md-import { width: min(980px, 100%); min-width: 0; }
.md.md-import .md-corps { min-width: 0; }
.im-etapes { display: flex; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; flex-wrap: wrap; }
.im-etapes li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--encre3); padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--survol); }
.im-etapes li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--trait); color: var(--encre2); }
.im-etapes li.actif { color: var(--lien); background: var(--vert-pale); }
.im-etapes li.actif span { background: var(--vert); color: #FFFFFF; }
.im-etapes li.fait span { background: var(--vert-pastille); color: var(--vert-pastille-texte); }
.im-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.im-type { display: grid; align-content: start; gap: 8px; text-align: left; padding: 16px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); color: var(--encre); font: inherit; }
button.im-type { cursor: pointer; }
button.im-type:hover, button.im-type:focus-visible { border-color: var(--vert); background: var(--survol); }
.im-type > svg, .im-type-tete svg { color: var(--accent); }
.im-type b { font-size: 16px; }
.im-type span { font-size: 13.5px; color: var(--encre2); line-height: 1.45; }
.im-type-tete { display: flex; align-items: center; gap: 10px; }
.im-type-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.im-depot { position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 20px; margin: 6px 0 12px; border: 2px dashed var(--trait-fort); border-radius: 14px;
  background: var(--survol); color: var(--encre2); text-align: center; cursor: pointer; }
.im-depot svg { color: var(--accent); }
.im-depot b { color: var(--encre); font-size: 15.5px; }
.im-depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.im-depot.survol, .im-depot:focus-within { border-color: var(--vert); background: var(--vert-pale); }
.im-depot.lecture { opacity: .6; pointer-events: none; }
.im-fichier { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px; border-radius: 10px; background: var(--survol); font-size: 14px; margin-bottom: 10px; }
.im-fichier svg { color: var(--accent); }
.im-fichier label { display: inline-flex; align-items: center; gap: 6px; color: var(--encre2); font-size: 13px; }
.im-fichier select { max-width: min(320px, 100%); min-width: 0; }
.im-fichier label { max-width: 100%; min-width: 0; }
.im-cols { display: grid; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.im-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(200px, 1fr); gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--trait-leger); }
.im-col-tete { border-top: 0; background: var(--survol); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--encre2); }
.im-col:not(.relie):not(.im-col-tete) { background: var(--survol); }
.im-col:not(.relie):not(.im-col-tete) b { color: var(--encre3); }
.im-col.relie select { border-color: var(--vert); font-weight: 600; }
.im-col select { width: 100%; }
.im-ex { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.im-ex i { font-style: normal; font-size: 12.5px; padding: 2px 7px; border-radius: 6px; background: var(--gris-pale); color: var(--gris-texte); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-bilan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.im-bilan > div { display: grid; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); }
.im-bilan b { font-size: 24px; font-variant-numeric: tabular-nums; }
.im-bilan span { font-size: 13px; color: var(--encre2); }
.im-bilan .im-bilan-err { border-color: var(--rouge-trait); background: var(--rouge-fond); }
.im-bilan .im-bilan-err b { color: var(--rouge-txt); }
.im-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; padding: 0; margin: 12px 0; }
.im-mode legend { font-weight: 700; font-size: 14px; margin-bottom: 6px; padding: 0; }
.im-mode-opt { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; background: var(--blanc); }
.im-mode-opt input { grid-row: 1 / span 2; margin-top: 3px; }
.im-mode-opt small { color: var(--encre2); font-size: 12.5px; line-height: 1.4; }
.im-mode-opt.actif { border-color: var(--vert); background: var(--vert-pale); }
.im-filtres { margin: 8px 0; flex-wrap: wrap; }
.im-table { max-height: 46vh; overflow: auto; }
.im-table thead th { position: sticky; top: 0; z-index: 1; }
.im-detail { display: grid; gap: 3px; font-size: 13px; color: var(--encre2); min-width: 240px; }
.im-detail svg { vertical-align: -2px; }
.im-motif { color: var(--lien); }
.im-avert { color: var(--ambre-texte); }
tr.im-err td { background: var(--rouge-fond); }
.im-fin { display: flex; gap: 16px; align-items: flex-start; padding: 8px 4px; }
.im-fin > svg { color: #15803D; flex: 0 0 auto; }
.im-fin h3 { margin: 0 0 6px; font-size: 19px; }
.im-fin p { margin: 0 0 6px; }
tr.im-annule td { color: var(--encre3); }
@media (max-width: 760px) {
  .im-col { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .im-col select { min-width: 0; max-width: 100%; }
  .md.md-import { width: 100%; max-width: 100vw; }
  .im-col-tete { display: none; }
  .im-bilan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-mode { grid-template-columns: 1fr; }
  .im-etapes li { padding-right: 8px; font-size: 0; gap: 0; }
  .im-etapes li.actif { font-size: 13px; gap: 8px; padding-right: 12px; }
}

/* ── Pilotage (2.1) ───────────────────────────────────────────── */
.pil { display: grid; gap: 14px; }
.pil-periode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pil-periode .filtres { flex-wrap: wrap; }
.pil-dates { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--encre2); }
.pil-dates label { display: inline-flex; align-items: center; gap: 6px; }
.pil-dates input { min-height: 38px; }
.pil-intro { margin: 0; color: var(--encre2); font-size: 14px; }
.pil-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pil-tuile { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; min-width: 0; }
.pil-tuile > div { display: grid; gap: 3px; min-width: 0; }
.pil-tuile b { font-size: 23px; line-height: 1.15; color: var(--encre); font-variant-numeric: tabular-nums; }
.pil-tuile > div > span { font-size: 13px; color: var(--encre2); line-height: 1.35; }
.pil-tuile small { font-size: 12.5px; color: var(--encre2); line-height: 1.35; }
.pil-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); }
.pil-tuile.pil-fort { box-shadow: inset 3px 0 0 var(--vert); }
.pil-tuile.pil-neg b { color: var(--rouge-txt); }
.pil-evo { font-weight: 700; }
.pil-evo span { font-weight: 400; }
.pil-hausse { color: #15803D; } .pil-baisse { color: var(--rouge-txt); }
.pil-obj { display: flex; align-items: center; gap: 8px; }
.pil-obj .gs-jauge { width: 64px; flex: 0 0 64px; }
.pil-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pil-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pil-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 16px; min-width: 0; }
.pil-carte h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.pil-carte h3 svg { color: var(--accent); }
.pil-carte h3 small { font-weight: 500; font-size: 13px; color: var(--encre2); margin-left: auto; }
.pil-sous { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); }
.pil-note { margin: 10px 0 0; font-size: 13px; color: var(--encre2); line-height: 1.45; }
.pil-classe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pil-classe button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "r n m" "r b b"; gap: 2px 8px; align-items: center;
  padding: 7px 6px; border: 0; background: none; font: inherit; color: var(--encre); text-align: left; border-radius: 8px; cursor: pointer; }
.pil-classe button:disabled { cursor: default; }
.pil-classe button:not(:disabled):hover { background: var(--survol); }
.pil-rang { grid-area: r; font-size: 13px; font-weight: 700; color: var(--encre3); align-self: start; padding-top: 1px; }
.pil-nom { grid-area: n; display: grid; min-width: 0; }
.pil-nom b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pil-nom small { font-size: 12.5px; color: var(--encre2); }
.pil-mt { grid-area: m; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pil-barre { display: block; height: 6px; border-radius: 3px; background: var(--trait-leger); overflow: hidden; }
.pil-classe .pil-barre { grid-area: b; }
.pil-barre i { display: block; height: 100%; border-radius: 3px; background: var(--serie-ventes); }
.pil-natures { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pil-natures li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.pil-natures b { font-variant-numeric: tabular-nums; }
/* Ancienneté des impayés : une seule teinte qui fonce avec le retard, et le libellé écrit. */
.pil-age { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pil-age > div { display: grid; gap: 1px; padding: 8px 8px; border-radius: 10px; background: var(--survol); border: 1px solid var(--trait); min-width: 0; }
.pil-age span { font-size: 12px; color: var(--encre2); }
.pil-age b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .pil-age { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pil-age small { font-size: 12px; color: var(--encre2); }
.pil-age .pil-age-1 { box-shadow: inset 0 3px 0 #F0B429; } .pil-age .pil-age-2 { box-shadow: inset 0 3px 0 #E07B24; }
.pil-age .pil-age-3 { box-shadow: inset 0 3px 0 #C8411B; } .pil-age .pil-age-4 { box-shadow: inset 0 3px 0 #8F1D10; }
.pil-age .pil-age-3:not(.vide) b, .pil-age .pil-age-4:not(.vide) b { color: var(--rouge-txt); }
.pil-age .vide b { color: var(--encre3); font-weight: 600; }
.pil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pil-liste button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n m" "d m"; gap: 2px 10px; align-items: center; padding: 8px; border: 0;
  background: none; font: inherit; color: var(--encre); text-align: left; border-radius: 8px; cursor: pointer; }
.pil-liste button:hover { background: var(--survol); }
.pil-liste button > b:first-child { grid-area: n; font-size: 14px; font-weight: 600; }
.pil-liste button > span { grid-area: d; font-size: 12.5px; color: var(--encre2); }
.pil-liste .pil-mt { grid-area: m; }
.pil-avenir { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pil-avenir button { width: 100%; display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc);
  font: inherit; color: var(--encre); text-align: left; cursor: pointer; }
.pil-avenir button:hover { border-color: var(--vert); background: var(--survol); }
.pil-avenir b { min-width: 64px; white-space: nowrap; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--lien); }
.pil-avenir span { font-size: 13.5px; color: var(--encre2); }
.pil-pdp p { margin: 0; font-size: 14px; }
.pil-treso-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pil-treso-tete h3 { margin: 0 auto 0 0; }
.pil-treso-chiffres { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0; font-size: 14px; color: var(--encre2); }
.pil-treso-chiffres b { color: var(--encre); font-variant-numeric: tabular-nums; margin-left: 4px; }
.pil-graphe { position: relative; margin: 6px 0 10px; outline-offset: 4px; border-radius: 8px; }
.pil-graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.pil-grille-l { stroke: var(--trait-leger); stroke-width: 1; }
.pil-zero { stroke: var(--trait-fort); stroke-width: 1.5; }
.pil-axe { font-size: 11.5px; fill: var(--encre3); font-variant-numeric: tabular-nums; }
.pil-ligne { fill: none; stroke: var(--serie-ventes); stroke-width: 2; stroke-linejoin: round; }
.pil-aire { fill: var(--serie-ventes); opacity: .13; }
.pil-vise { stroke: var(--encre3); stroke-width: 1; stroke-dasharray: 3 3; }
.pil-point { fill: var(--serie-ventes); stroke: var(--blanc); stroke-width: 2; }
.pil-bulle { top: 8px; min-width: 180px; pointer-events: none; }
.pil-mv { max-height: 360px; overflow: auto; }
.pil-mv thead th { position: sticky; top: 0; z-index: 1; }
.pil-mv .lien-txt { text-align: left; }
.pil-in { color: #15803D; font-weight: 600; } .pil-out { color: var(--rouge-txt); font-weight: 600; }
:root[data-theme="dark"] .pil-in, :root[data-theme="dark"] .pil-hausse { color: #4ADE80; }
@media (prefers-color-scheme: dark) { :root.theme-auto .pil-in, :root.theme-auto .pil-hausse { color: #4ADE80; } }
@media (max-width: 1180px) { .pil-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pil-grille-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .pil-grille, .pil-grille-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pil-tuiles { grid-template-columns: 1fr; } .pil-natures li { grid-template-columns: 96px minmax(0, 1fr) auto; } }

/* TVA collectée (six colonnes) et déductible : l'une au-dessus de l'autre, sauf sur très grand écran. */
.gs-deux.tva-deux { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1700px) { .gs-deux.tva-deux { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.tva-deux .tableau-zone { overflow-x: auto; }

/* Navigation de période (TVA, e-reporting) : le libellé garde la même largeur d'un mois à l'autre,
   pour que les boutons et les dates à côté ne se décalent pas (« mars » / « septembre »). */
.gs-periode .pl-nav b { display: inline-block; min-width: 11em; text-align: center; margin: 0 2px; white-space: nowrap; }
@media (max-width: 560px) { .gs-periode .pl-nav b { min-width: 9.5em; } }

/* ── Tableaux sur téléphone (2.2.2) ───────────────────────────────
   Un tableau plus large que l'écran devient une pile de cartes : chaque
   ligne est une carte, chaque cellule garde le titre de sa colonne
   (posé par adapterTableaux() dans app.js). Plus rien ne se cache à droite. */
@media (max-width: 760px) {
  .tableau.pile, .tableau.pile tbody, .tableau.pile tfoot, .tableau.pile tr, .tableau.pile td, .tableau.pile th { display: block; width: auto !important; }
  .tableau.pile { table-layout: auto; }
  .tableau.pile thead { display: none; }
  .tableau.pile tr { padding: 8px 12px; border-bottom: 1px solid var(--trait); }
  .tableau.pile tbody tr:last-child, .tableau.pile tfoot tr:last-child { border-bottom: 0; }
  .tableau.pile tfoot tr { background: var(--survol); }
  /* Titre de colonne à gauche (flottant), contenu de la cellule aligné à droite, d'un seul tenant. */
  .tableau.pile td, .tableau.pile tfoot th, .tableau.pile tbody th:not([scope="row"]) { display: block; padding: 5px 0; border: 0; text-align: right; min-height: 0; overflow-wrap: anywhere; }
  .tableau.pile td::after, .tableau.pile tfoot th::after { content: ''; display: table; clear: both; }
  .tableau.pile td::before, .tableau.pile tfoot th::before { content: attr(data-label); float: left; max-width: 48%; margin-right: 12px; text-align: left;
    font-size: 12.5px; font-weight: 600; color: var(--encre2); line-height: 1.6; }
  .tableau.pile td[data-label=""]::before, .tableau.pile td:not([data-label])::before { content: none; }
  .tableau.pile td[data-label=""], .tableau.pile td:not([data-label]) { text-align: left; }
  .tableau.pile td > input, .tableau.pile td > select { display: inline-block; }
  .pil-mv { max-height: 75vh; }
  .tableau.pile th[scope="row"], .tableau.pile td[colspan] { display: block; padding: 4px 0; border: 0; text-align: left; font-size: 15px; }
  .tableau.pile td > input, .tableau.pile td > select { max-width: 55%; min-width: 0; }
  .tableau.pile td.num, .tableau.pile .nw { white-space: normal; }
  .tableau.pile td .soc-actions, .tableau.pile td .actions, .tableau.pile td .actions-ligne { display: inline-flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
}

/* Planning : sur téléphone, la frise défile en largeur — on le dit. */
.pl-astuce { display: none; }
@media (max-width: 760px) { .pl-astuce { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--encre2); } }

/* Sauvegardes (écran Garages) et export complet */
.prm-tete h2 .pastille { margin-left: 8px; vertical-align: middle; font-size: 12.5px; }
#sauvegardes .bandeau { margin: 0 0 12px; }
.occupe { opacity: .6; pointer-events: none; }

/* 2.4.0 — Anciennes factures */
.liste-simple { margin: 6px 0 10px; padding-left: 18px; max-height: 260px; overflow: auto; font-size: 14px; }
.liste-simple li { margin: 2px 0; }
.fp-impaye .case { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.fp-impaye .case.desactive { opacity: .7; }
#ra-client { width: 100%; margin-top: 6px; }

/* 2.5.0 — Filtres complémentaires et tri des listes */
.filtres-plus { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre-plus { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 4px 0 12px; border: 1px solid var(--trait);
  border-radius: 10px; background: var(--blanc); font-size: 13px; color: var(--encre2); }
.filtre-plus select { border: 0; background: transparent; font: inherit; color: var(--encre); min-height: 38px; max-width: 220px; padding: 0 6px; cursor: pointer; }
.filtre-plus select:focus { outline: 2px solid var(--vert-pale); }
.filtre-plus.actif { border-color: var(--vert-fonce); box-shadow: inset 0 0 0 1px var(--vert-fonce); }
.filtre-plus.actif select { font-weight: 700; }
#liste-pastilles .filtres { margin: 0 0 8px; }
.th-tri { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.tableau th.num .th-tri { justify-content: flex-end; width: 100%; }
.th-tri:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 3px; }
.th-fleche { font-size: 11px; opacity: .6; }
.th-tri:hover .th-fleche, .th-tri.actif .th-fleche { opacity: 1; }
.th-tri.actif { color: var(--encre); }
/* 1.4.1 — « Trier par » aussi sur ordinateur : le tri par les en-têtes reste possible. */
.tri-mobile { display: inline-flex; }
@media (max-width: 760px) {
  /* Sur téléphone : filtres sur deux colonnes, pastilles sur une ligne qui défile. */
  .liste-outils { display: grid; grid-template-columns: 1fr 1fr; }
  .liste-outils .recherche { grid-column: 1 / -1; }
  .filtres-plus { display: contents; }
  .filtre-plus { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 4px 8px 2px; min-width: 0; }
  .filtre-plus span { font-size: 11px; }
  .filtre-plus select { max-width: none; min-height: 30px; padding: 0; }
  .tri-mobile { display: flex; }
  .liste-outils > .lien-txt { grid-column: 1 / -1; justify-self: start; }
  #liste-pastilles .filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #liste-pastilles .filtre { flex: 0 0 auto; }
}

/* 2.5.2 — Couleurs du catalogue : une teinte par catégorie, le type, le stock.
   Une seule couleur par catégorie (--cat) : le fond et le texte en sont tirés
   contre --blanc et --encre, qui s'inversent en thème sombre. */
.cat-x { --cat: #8A94A3; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  white-space: nowrap; background: color-mix(in srgb, var(--cat) 14%, var(--blanc)); color: color-mix(in srgb, var(--cat) 58%, var(--encre)); }
.cat-pill i, .cat-point { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: 0 0 auto; display: inline-block; }
.filtre.filtre-cat { display: inline-flex; align-items: center; gap: 6px; border-color: color-mix(in srgb, var(--cat) 35%, var(--trait)); }
.filtre.filtre-cat:hover { background: color-mix(in srgb, var(--cat) 10%, var(--blanc)); }
.filtre.filtre-cat.actif { background: var(--cat); border-color: var(--cat); color: #FFFFFF; }
.filtre.filtre-cat.actif .cat-point { background: #FFFFFF; }
.filtre.filtre-cat.cat-claire.actif { color: #18212D; }
.filtre.filtre-cat.cat-claire.actif .cat-point { background: #18212D; }
.type-pill { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.type-piece { background: var(--p-piece-f); color: var(--p-piece-t); }
.type-main_oeuvre { background: var(--p-mo-f); color: var(--p-mo-t); }
.type-forfait { background: var(--p-forfait-f); color: var(--p-forfait-t); }
.stock-q { display: inline-block; min-width: 2.2em; padding: 1px 8px; border-radius: 6px; text-align: center; }
.stock-ok { background: var(--vert-pastille); color: var(--vert-pastille-texte); }
.stock-bas { background: var(--ambre-pale); color: var(--ambre-texte); }
.stock-neg { background: var(--rouge-pale); color: var(--rouge-texte); }
.stock-zero { color: var(--encre3); }
.oui-non { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.oui-non.oui { color: var(--vert-pastille-texte); }
.oui-non.non { color: var(--encre3); font-weight: 500; }
.carte .cat-pill { flex: 0 0 auto; }

/* OpsFacturePro — le liseré d'état des lignes de liste */
.tableau tr.ligne-etat td:first-child { box-shadow: inset 4px 0 0 var(--etat, transparent); }
.etat-vert { --etat: #16A34A; } .etat-ambre { --etat: #F59E0B; } .etat-rouge { --etat: #DC2626; }
.etat-bleu { --etat: #2563EB; } .etat-gris { --etat: #94A3B8; } .etat-violet { --etat: #8B5CF6; }

/* Reprise OpsFact */
.im-type.im-reprise { grid-column: 1 / -1; border-color: var(--vert-trait); background: var(--vert-pale); }
.rp-parties { display: grid; gap: 8px; margin: 6px 0 12px; }
.rp-partie { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); cursor: pointer; }
.rp-partie > svg { color: var(--accent); flex: none; }
.rp-partie span { display: grid; }
.rp-partie small { color: var(--encre2); font-size: 12.5px; }
.rp-partie.vide { opacity: .55; cursor: default; }
.rp-verif th { text-align: left; width: 38%; font-weight: 600; }
.rp-verif td .pastille { margin: 2px 4px 2px 0; }
.rp-err { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--rouge, #B42318); }
.rp-avance { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.rp-avance li { padding: 8px 12px; border-radius: 8px; background: var(--survol); font-size: 14px; }
.rp-avance li.ok { background: var(--vert-pale); }
.rp-avance li.attention { background: #FEF3C7; color: #7A4B00; }
.rp-avance li.ko { background: #FDE8E8; color: #9B1C1C; }
.rp-avance li.encours { font-style: italic; }
:root[data-theme="dark"] .rp-avance li.attention, :root[data-theme="dark"] .rp-avance li.ko { color: inherit; background: var(--survol); }
.rp-bloc { border-color: var(--vert-trait); background: var(--vert-pale); }
.rp-bloc > .btn { justify-self: start; }

/* 1.1.0 — Paramètres → Numérotation */
.num-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.num-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--trait-leger); }
.num-liste li:first-child { border-top: 0; }
.num-nom b { display: block; font-size: 14.5px; }
.num-nom small { color: var(--encre2); font-size: 12.5px; }
.num-perso { color: var(--bleu-texte); font-weight: 700; }
.num-prochain { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.num-prochain span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); }
.num-prochain code, .num-apercu code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-weight: 700; background: var(--bleu-pale); color: var(--bleu-texte); padding: 4px 10px; border-radius: 8px; font-size: 14px; }
.num-apercu { display: grid; justify-items: center; gap: 6px; padding: 16px; margin-bottom: 14px; border-radius: 12px; background: var(--survol); text-align: center; }
.num-apercu span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre2); }
.num-apercu code { font-size: 22px; padding: 6px 16px; }
.num-apercu code.rouge { background: #FDECEC; color: #9B1C1C; }
.num-apercu small { color: var(--encre2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.num-pas { display: inline-flex; border: 1px solid var(--trait); border-radius: 8px; overflow: hidden; }
.num-pas button { width: 38px; border: 0; background: var(--survol); font-size: 17px; font-weight: 700; cursor: pointer; color: var(--encre); }
.num-pas input { flex: 0 0 56px; width: 56px !important; min-width: 0; border: 0 !important; text-align: center; border-radius: 0 !important; -moz-appearance: textfield; }
.num-pas input::-webkit-inner-spin-button, .num-pas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num-page > .aide { padding: 4px 22px 18px; margin: 0; }
.num-apercu ~ .champ-ligne { align-items: start; }
.num-apercu ~ .champ-ligne .champ select, .num-apercu ~ .champ-ligne .champ input { flex: 0 0 auto; }
.num-pas { align-self: flex-start; height: 42px; width: max-content; }
.num-pas button, .num-pas input { height: 100%; }
@media (max-width: 640px) { .num-liste li { grid-template-columns: minmax(0, 1fr) auto; } .num-prochain { grid-column: 1; align-items: flex-start; } }

/* ── 1.2.0 — Contrôle de la facture électronique avant envoi ── */
.ctl-attente { display: flex; gap: 10px; align-items: center; padding: 18px; color: var(--encre2); }
.ctl-verdict { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px; }
.ctl-verdict div { display: grid; gap: 2px; }
.ctl-verdict b { font-size: 16px; }
.ctl-verdict span { font-size: 13px; }
.ctl-verdict.ok { background: #E7F6EC; color: #14532D; }
.ctl-verdict.ko { background: #FDECEC; color: #9B1C1C; }
.ctl-bloc { border: 1px solid var(--trait-leger); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.ctl-bloc h4 { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 14px; }
.ctl-bloc h4 small { font-weight: 400; color: var(--encre2); }
.ctl-liste { margin: 4px 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; }
.ctl-liste code { font-size: 12px; background: var(--survol); padding: 1px 6px; border-radius: 6px; margin-right: 4px; }
.ctl-liste.ko li::marker { color: #B42318; }
.ctl-liste.avt li::marker { color: #B45309; }
.ctl-ok { display: flex; gap: 6px; align-items: center; color: #15803D; margin: 4px 0; }
.ctl-sous { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); }
.ctl-etat { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; }
.ctl-etat.ok { color: #15803D; }
.ctl-etat.ko { color: #B42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ctl-verdict.ok { background: #12301F; color: #BBF7D0; } :root:not([data-theme="light"]) .ctl-verdict.ko { background: #3A1515; color: #FECACA; } }

/* 1.2.0 — Conditions de paiement et échéance */
.pe-ligne { align-items: start; }
.pe-ligne .aide .lien-txt { font-size: inherit; padding: 0 0 0 4px; }

/* 1.3.0 — Poignée de redimensionnement de la fiche (bord gauche). */
.fp-poignee { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 3; touch-action: none; }
.fp-poignee::after { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 48px; margin-top: -24px; border-radius: 3px; background: var(--trait-fort, #B8C1CE); opacity: 0; transition: opacity .15s; }
.fp-poignee:hover::after, .fp-poignee.actif::after, .fp-poignee:focus-visible::after { opacity: 1; }
.fp-poignee:focus-visible { outline: none; }
body.fp-redim, body.fp-redim * { cursor: ew-resize !important; user-select: none !important; }
@media (max-width: 760px) { .fp-poignee { display: none; } }

/* ── 1.3.0 — Plus de couleur ─────────────────────────────────────────────
   L'écran ouvert reçoit la teinte de son groupe (--page, posée par aller()). */
:root { --page: var(--accent); --page-pale: color-mix(in srgb, var(--page) 12%, var(--blanc)); }
/* La fiche de droite reprend la teinte de l'écran : liseré en tête, libellés et titres de section. */
.fiche .fp-tete { box-shadow: inset 0 4px 0 var(--page); }
.fiche .fp-lib { color: color-mix(in srgb, var(--page) 65%, var(--encre2)); }
.fiche .fp-champ { border-left: 3px solid color-mix(in srgb, var(--page) 35%, var(--blanc)); }
.fiche .fp-section-tete h3 { color: color-mix(in srgb, var(--page) 70%, var(--encre)); }
.fiche .fp-resume > div { background: var(--page-pale); }
.topbar { box-shadow: inset 0 -3px 0 var(--page); }
.tb-titre #titre-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--page-pale); color: var(--page); flex: 0 0 auto; }
.tableau th { background: color-mix(in srgb, var(--page) 9%, var(--blanc)); color: color-mix(in srgb, var(--page) 72%, var(--encre));
  border-bottom: 2px solid color-mix(in srgb, var(--page) 28%, var(--blanc)); }
.tableau tbody tr[tabindex]:hover { background: color-mix(in srgb, var(--page) 5%, var(--blanc)); }
.filtre.actif { background: var(--page); border-color: var(--page); color: #fff; }
.titre-section { color: color-mix(in srgb, var(--page) 70%, var(--encre)); }
.tableau-zone { border-top: 3px solid color-mix(in srgb, var(--page) 55%, var(--blanc)); }

/* La tête du menu aux couleurs OP SYNERGIE : fond ardoise, anneau cyan. */
.sb-tete { background: #2C2F3E; border-bottom: 0; }
.sb-tete .sb-logo { background: rgba(10, 186, 228, .16); color: #0ABAE4; }
.sb-tete .sb-noms b { color: #FFFFFF; }
.sb-tete .sb-noms span { color: #B9C0CE; }
.sb-tete .sb-fermer { color: #FFFFFF; }
/* En thème sombre, les teintes sont éclaircies : le texte du filtre actif passe au sombre. */
:root[data-theme="dark"] .filtre.actif { color: #10151C; }
@media (prefers-color-scheme: dark) { :root.theme-auto .filtre.actif { color: #10151C; } }
/* Sur téléphone, chaque carte de liste porte un liseré de la couleur de l'écran. */
@media (max-width: 760px) { .carte { box-shadow: inset 4px 0 0 var(--page); } }

/* 1.17.2 — Le fond du menu, au choix (Paramètres → Documents → Habillage).
   CLAIR (par défaut) : gris ardoise très clair, l'écran ouvert en blanc. En thème sombre : le fond sombre habituel.
   FONCE (html.menu-fonce) : ardoise #2C2F3E, comme le haut du menu, texte clair. */
.sb { background: #F3F5F8; border-right-color: #DDE2EA; }
.sb .sb-groupe + .sb-groupe { border-top-color: rgba(44, 47, 62, .10); }
.sb .sb-lien:hover { background: rgba(255, 255, 255, .8); }
.sb .sb-groupe .sb-lien.actif { background: #FFFFFF; box-shadow: inset 3px 0 0 var(--g), 0 1px 3px rgba(28, 38, 60, .12); }
:root[data-theme="dark"] .sb { background: var(--blanc); border-right-color: var(--trait); }
:root[data-theme="dark"] .sb .sb-groupe + .sb-groupe { border-top-color: var(--trait); }
:root[data-theme="dark"] .sb .sb-lien:hover { background: var(--g-pale); }
:root[data-theme="dark"] .sb .sb-groupe .sb-lien.actif { background: var(--g-pale); box-shadow: inset 3px 0 0 var(--g); }
@media (prefers-color-scheme: dark) {
  :root.theme-auto .sb { background: var(--blanc); border-right-color: var(--trait); }
  :root.theme-auto .sb .sb-groupe + .sb-groupe { border-top-color: var(--trait); }
  :root.theme-auto .sb .sb-lien:hover { background: var(--g-pale); }
  :root.theme-auto .sb .sb-groupe .sb-lien.actif { background: var(--g-pale); box-shadow: inset 3px 0 0 var(--g); }
}
:root.menu-fonce .sb { background: #2C2F3E; border-right-color: #2C2F3E; }
:root.menu-fonce .sb-tete { border-bottom: 1px solid rgba(255, 255, 255, .08); }
:root.menu-fonce .sb .sb-lien { color: #E4E7EE; }
:root.menu-fonce .sb .sb-groupe { --g: color-mix(in srgb, var(--g0) 50%, #FFFFFF); --g-pale: rgba(255, 255, 255, .08); }
:root.menu-fonce .sb .sb-groupe + .sb-groupe { border-top-color: rgba(255, 255, 255, .10); }
:root.menu-fonce .sb .sb-lien:hover { background: rgba(255, 255, 255, .06); }
:root.menu-fonce .sb .sb-groupe .sb-lien.actif { background: rgba(255, 255, 255, .11); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--g); }
:root.menu-fonce .sb .sb-lien svg { color: var(--g); }
/* Le choix, dans les Paramètres : deux vignettes du menu. */
.mc-edit { display: grid; gap: 8px; margin-bottom: 18px; }
.mc-titre { margin: 0; font-weight: 700; font-size: 14px; }
.mc-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mc-choix { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; background: var(--blanc); }
.mc-choix:has(input:checked) { border-color: var(--vert-fonce); box-shadow: 0 0 0 1px var(--vert-fonce) inset; }
.mc-choix input { accent-color: var(--vert-fonce); }
.mc-choix > span:last-child { display: grid; gap: 2px; min-width: 0; }
.mc-choix small { color: var(--encre2); font-size: 12.5px; line-height: 1.35; }
.mc-ech { flex: 0 0 auto; width: 54px; height: 64px; border-radius: 8px; padding: 8px 7px; display: grid; gap: 5px; align-content: start; box-sizing: border-box; border: 1px solid var(--trait); }
.mc-ech i { display: block; height: 6px; border-radius: 3px; }
.mc-clair { background: #F3F5F8; } .mc-clair i { background: #C9D0DB; } .mc-clair i.mc-actif { background: #FFFFFF; box-shadow: inset 3px 0 0 #6941C6, 0 1px 2px rgba(0, 0, 0, .12); height: 9px; }
.mc-fonce { background: #2C2F3E; border-color: #2C2F3E; } .mc-fonce i { background: rgba(255, 255, 255, .35); } .mc-fonce i.mc-actif { background: rgba(255, 255, 255, .18); box-shadow: inset 3px 0 0 #A78BFA; height: 9px; }
@media (max-width: 560px) { .mc-liste { grid-template-columns: 1fr; } }

/* Repris d'OpsFormaPro 1.9.0 — Désignation mise en forme : la zone, la barre d'outils, l'affichage en lecture. */
.le-rang .le-riche { font: inherit; font-size: 13.5px; line-height: 1.4; min-height: 34px; max-height: 240px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--trait);
  border-radius: 7px; background: var(--blanc); color: var(--encre); width: 100%; box-sizing: border-box; min-width: 0; word-break: break-word; cursor: text; }
.le-rang .le-riche:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 20%, transparent); }
.le-riche:empty::before { content: attr(data-ph); color: var(--encre3, #8A93A3); pointer-events: none; }
.le-riche ul, .le-riche ol, .lg-riche ul, .lg-riche ol { margin: 2px 0 2px 20px; padding: 0; }
.le-riche li, .lg-riche li { margin: 1px 0; }
.le-riche div, .lg-riche div { min-height: 1em; }
.le-rang.le-txt .le-riche { font-style: italic; background: var(--survol); }
.le-format { position: fixed; z-index: 1300; display: flex; gap: 2px; padding: 3px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 9px;
  box-shadow: 0 6px 18px -6px rgba(20, 24, 34, .28); }
.le-format button { min-width: 32px; height: 30px; padding: 0 7px; border: 0; border-radius: 6px; background: transparent; color: var(--encre); font: inherit; font-size: 13.5px; cursor: pointer; }
.le-format button:hover { background: var(--survol); }
.le-format button.actif { background: var(--bleu-pale); color: var(--bleu-texte); }
.le-format button:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
@media (max-width: 760px) { .le-rang .le-riche { font-size: 16px; min-height: 40px; } .le-format button { min-width: 40px; height: 38px; } }


/* 1.4.1 — Fiche sur téléphone : deux actions et « Plus » ; le reste dans un volet. */
.fp-plus { display: none; }
.fp-plus small { font-size: 12px; font-weight: 800; background: var(--gris-pale); color: var(--gris-texte); border-radius: 999px; padding: 1px 7px; }
.lo-bascule { display: none; }
.feuille-voile { position: fixed; inset: 0; z-index: 90; background: rgba(15, 22, 32, .45); display: flex; align-items: flex-end; justify-content: center; }
.feuille-voile[hidden] { display: none; }
.feuille { width: min(560px, 100%); max-height: 80vh; overflow-y: auto; background: var(--blanc); border-radius: 18px 18px 0 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 40px rgba(15, 22, 32, .25); animation: monte .16s ease-out; }
@keyframes monte { from { transform: translateY(30px); opacity: .5; } to { transform: none; opacity: 1; } }
.feuille::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--trait-fort); margin: 2px auto 10px; }
.feuille-liste { display: grid; }
.feuille-item { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--trait-leger);
  background: transparent; color: var(--encre); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; border-radius: 10px; }
.feuille-item:hover, .feuille-item:focus { background: var(--survol); outline: none; }
.feuille-item.rouge { color: var(--rouge-txt); }
.feuille-item:disabled { opacity: .5; }
.feuille-annuler { width: 100%; min-height: 48px; margin-top: 8px; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier);
  color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) {
  .fp-actions { flex-wrap: nowrap; }
  .fp-actions .fp-repli { display: none; }
  .fp-actions .fp-plus { display: inline-flex; flex: 0 0 auto; }
  .fp-actions { gap: 6px; padding: 8px 10px; }
  .fp-actions .btn { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; padding: 6px 10px; gap: 6px; font-size: 14px; }
  .fp-actions .btn:not(.fp-plus) { flex: 1 1 auto; justify-content: center; }
  .fp-actions .btn:not(.fp-plus) svg { display: none; }
  .fp-actions .fp-plus { padding: 8px 10px; }
  .liste-outils { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lo-bascule { min-width: 0; white-space: nowrap; overflow: hidden; }
  .fp-tete { padding: 12px 14px; }
  .fp-titres h2 { font-size: 17px; }
  .fp-corps { padding: 12px 14px 32px; }
  /* Listes : recherche et bouton « Filtres et tri » ; le détail s'ouvre à la demande. */
  .liste-outils .lo-bascule { display: inline-flex; justify-content: center; min-height: 42px; }
  .liste-outils .lo-bascule b { background: var(--vert-fonce); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
  .liste-outils:not(.ouvert) .filtre-plus { display: none; }
  .liste-outils .recherche { grid-column: 1; }
}

/* Le carnet de prise en main, dans « Mon compte ». */
.pc-carnet { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 10px;
  color: var(--encre); text-decoration: none; background: var(--vert-pale); }
.pc-carnet:hover { border-color: var(--accent); }
.pc-carnet svg { color: var(--accent); flex: 0 0 auto; }
.pc-carnet span { display: grid; gap: 2px; min-width: 0; }
.pc-carnet small { color: var(--encre2); font-size: 12.5px; }

/* ============================================================
   1.5.0 — Module « Mon instrument »
   ============================================================ */
.bandeau-vert { background: var(--vert-pale); color: var(--vert-pastille-texte); border: 1px solid var(--vert-trait); }
/* Les étapes d'un dépôt : un clic fait avancer le statut. */
.dp-zone { container-type: inline-size; margin: 0 0 14px; }
.dp-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.dp-etape { width: 100%; height: 100%; min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 10px; border: 1.5px solid var(--trait);
  background: var(--blanc); color: var(--encre2); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.2; }
.dp-etape:not([disabled]):hover { border-color: var(--accent); color: var(--encre); }
.dp-etape[disabled] { cursor: default; opacity: .75; }
.dp-etape.fait { color: var(--encre); border-color: var(--vert-trait); }
.dp-etape.courant { background: var(--vert-pale); border-color: var(--accent); color: var(--encre); opacity: 1; }
.dp-puce { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--trait-fort); display: grid; place-items: center; color: #fff; }
.dp-etape.fait .dp-puce { background: var(--accent); border-color: var(--accent); }
.dp-etape.courant .dp-puce { border: 5px solid var(--accent); }
.dp-etape:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@container (max-width: 760px) { .dp-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dp-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.fp-enfant-droite { display: flex !important; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Forfait de séances : le compteur et les cases. */
.fs-compteur { display: grid; justify-items: center; padding: 6px 0 10px; }
.fs-compteur b { font-size: 46px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.fs-compteur span { font-weight: 600; color: var(--encre2); }
.fs-pastilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; margin: 0 0 14px; }
.fs-pastilles span { height: 22px; border-radius: 6px; border: 1.5px solid var(--vert-trait); background: var(--blanc); }
.fs-pastilles span.pl { background: var(--accent); border-color: var(--accent); }
.fs-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fs-liste li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait-leger); }
.fs-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-pastille-texte); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.fs-txt { flex: 1; display: grid; min-width: 0; }
.fs-txt small { color: var(--encre2); font-size: 12.5px; }
.fs-txt b { font-weight: 600; }
/* 1.5.1 — Photos d'un dépôt (à l'arrivée, à la remise). */
.ph-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ph-bloc { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); }
.ph-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-tete small { color: var(--encre2); font-size: 12px; }
.ph-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.ph-vignette { padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: zoom-in; background: var(--trait-leger); aspect-ratio: 1; }
.ph-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-vignette:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ph-ajout { justify-self: start; cursor: pointer; }
.ph-grande { display: grid; place-items: center; background: #11151C; border-radius: 10px; overflow: hidden; }
.ph-grande img { max-width: 100%; max-height: 68vh; display: block; }

/* ── 1.12.0 — Le planning des rendez-vous (module Mon instrument) ─────────
   Une semaine en colonnes (une heure = 56 px), un jour sur téléphone. Chaque type
   a sa couleur (--ev) ; le fond se mélange au blanc du thème, clair ou sombre. */
.ag-entete { align-items: center; }
.ag-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ag { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre); }
.ag-tetes { display: grid; grid-template-columns: 52px repeat(var(--n, 7), minmax(0, 1fr)); border-bottom: 1px solid var(--trait); background: var(--blanc); }
.ag-tetes { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.ag-tel .ag-tetes { grid-template-columns: 52px 1fr; }
.ag-tete-jour { display: grid; justify-items: center; padding: 8px 0 7px; position: relative; border-left: 1px solid var(--trait-leger); }
.ag-tete-jour small { font-size: 12px; color: var(--encre2); text-transform: capitalize; }
.ag-tete-jour b { font-size: 20px; line-height: 1.15; font-weight: 700; }
.ag-tete-jour i { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; background: var(--bleu-pale); color: var(--bleu-texte); padding: 0 5px; }
.ag-tete-jour.ag-auj b { background: var(--action); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; }
.ag-corps { display: grid; grid-template-columns: 52px 1fr; max-height: calc(100vh - 250px); min-height: 360px; overflow-y: auto; position: relative; }
.ag-heures { position: relative; border-right: 1px solid var(--trait); }
.ag-heures span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11.5px; color: var(--encre3); font-variant-numeric: tabular-nums; }
.ag-heures span:first-child { transform: none; top: 2px !important; }
.ag-jours { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.ag-col { position: relative; border-left: 1px solid var(--trait-leger); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, var(--trait-leger) 0 1px, transparent 1px 28px, color-mix(in srgb, var(--trait-leger) 45%, transparent) 28px 29px, transparent 29px 56px); }
.ag-col:first-child { border-left: 0; }
.ag-we { background-color: var(--survol); }
.ag-col.ag-auj { background-color: color-mix(in srgb, var(--action) 5%, transparent); }
.ag-evt { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; text-align: left; cursor: pointer;
  padding: 3px 6px 3px 8px; border: 0; border-left: 4px solid var(--ev); border-radius: 7px; font: inherit; color: var(--encre);
  background: color-mix(in srgb, var(--ev) 17%, var(--blanc)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: box-shadow .15s, transform .15s; }
.ag-evt:hover, .ag-evt:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); z-index: 2; transform: translateY(-1px); }
.ag-evt .ag-h { white-space: nowrap; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--ev) 70%, var(--encre)); display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.ag-evt b { font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-evt small { font-size: 12px; color: var(--encre2); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-evt.ag-court { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; }
.ag-evt.ag-court small { display: none; }
.ag-evt.ag-indispo { border-left-color: var(--encre3); color: var(--encre2);
  background: repeating-linear-gradient(-45deg, var(--gris-pale) 0 6px, color-mix(in srgb, var(--gris-pale) 50%, var(--blanc)) 6px 12px); }
.ag-evt.ag-st-fait { opacity: .72; }
.ag-evt.ag-st-fait .ag-h { color: var(--action); }
.ag-evt.ag-st-absent { border-left-color: var(--rouge); background: var(--rouge-fond); }
.ag-evt.ag-st-absent .ag-h { color: var(--rouge-txt); }
.ag-evt.ag-chev { outline: 2px dashed color-mix(in srgb, var(--ambre-texte) 55%, transparent); outline-offset: -2px; }
.ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--rouge); z-index: 3; pointer-events: none; }
.ag-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); }
.ag-promis { margin-top: 3px; font-size: 11px; font-weight: 600; border-radius: 9px; padding: 1px 7px; background: var(--ambre-fond); color: var(--ambre-texte); display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.ag-annules { position: absolute; z-index: 2; right: 4px; bottom: 4px; font-size: 11px; font-weight: 600; border-radius: 9px; padding: 1px 7px; pointer-events: none; background: var(--gris-pale); color: var(--gris-texte); }
.ag-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 2px 0; font-size: 13px; color: var(--encre2); }
.ag-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ag-l { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border-left: 4px solid var(--ev); background: color-mix(in srgb, var(--ev) 22%, var(--blanc)); vertical-align: -2px; }
.ag-l-indispo { background: repeating-linear-gradient(-45deg, var(--gris-pale) 0 3px, var(--blanc) 3px 6px); border-left-color: var(--encre3); }
.ag-l-fait { --ev: var(--action); opacity: .72; }
/* Téléphone : les jours en pastilles, un seul jour en colonne. */
.ag-puces { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 10px; }
.ag-puces button { display: grid; justify-items: center; gap: 0; padding: 6px 0 4px; border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); font: inherit; cursor: pointer; }
.ag-puces button small { font-size: 11.5px; color: var(--encre2); text-transform: capitalize; }
.ag-puces button b { font-size: 17px; line-height: 1.2; }
.ag-puces button i { font-style: normal; font-size: 12px; line-height: 1; color: var(--action); min-height: 12px; letter-spacing: 1px; }
.ag-puces button.ag-auj b { color: var(--action); }
.ag-puces button.actif { background: var(--action); border-color: var(--action); color: #fff; }
.ag-puces button.actif small, .ag-puces button.actif i, .ag-puces button.actif.ag-auj b { color: #fff; }
.ag-tel .ag-corps { max-height: none; }
.ag-tel .ag-tetes { display: none; }
@media (max-width: 760px) {
  .ag-txt-large { display: none; }
  .ag-entete .pl-nav { width: 100%; }
  .ag-periode { flex: 1 1 100%; margin-left: 0 !important; order: -1; font-size: 17px; }
  .ag-boutons { width: 100%; }
  .ag-boutons .btn-p { margin-left: auto; }
  .ag-evt b { font-size: 14px; } .ag-evt small { font-size: 12.5px; }
}
/* Les rappels de demain, et les réglages. */
.ag-raps { list-style: none; margin: 8px 0 0; padding: 0; }
.ag-rap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait-leger); }
.ag-rap div { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.ag-rap small { color: var(--encre2); }
.ag-gcal { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--survol); border: 1px solid var(--trait-leger); }
.ag-gcal h3 { margin: 0 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.ag-gcal p { margin: 0 0 10px; color: var(--encre2); font-size: 14px; }
.ag-lien { display: flex; gap: 8px; margin-bottom: 6px; }
.ag-lien input { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ag-etapes { margin: 10px 0 8px; padding-left: 20px; font-size: 14px; color: var(--encre2); }
.ag-etapes li { margin-bottom: 3px; }
@media print { .ag-corps { max-height: none; overflow: visible; } .ag-boutons, .ag-puces { display: none; } }
/* 1.12.1 — Glisser-déplacer : la main pour prendre, la poignée du bas pour la durée. */
.ag-evt.ag-mobile { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ag-poignee { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.ag-poignee::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 3px; margin-left: -11px; border-radius: 2px;
  background: color-mix(in srgb, var(--ev) 55%, transparent); opacity: 0; transition: opacity .15s; }
.ag-evt.ag-mobile:hover .ag-poignee::after, .ag-evt.ag-glisse .ag-poignee::after { opacity: 1; }
.ag-evt.ag-glisse { z-index: 5; cursor: grabbing; transform: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); outline: 2px solid var(--ev); outline-offset: 1px; opacity: .95; transition: none; }
.ag-glisse-en-cours, .ag-glisse-en-cours * { cursor: grabbing !important; }
.ag-glisse-en-cours .ag-col { cursor: grabbing; }
.ag-puces button.ag-cible { outline: 3px solid var(--action); outline-offset: 2px; background: color-mix(in srgb, var(--action) 14%, var(--blanc)); }
@media (hover: none) { .ag-poignee { height: 14px; } .ag-poignee::after { opacity: 1; } }

/* 1.12.1 — Les messages à envoyer (espace du client, rappel de rendez-vous) : une zone haute, lisible d'un coup d'œil. */
textarea.ta-message { min-height: 300px; resize: vertical; line-height: 1.5; }
@media (max-width: 620px) { textarea.ta-message { min-height: 240px; } }

/* 1.13.0 — L'habillage : une image dans le bandeau des fenêtres (bd-fen) et dans le haut des fiches de droite (bd-fic).
   Posé par index.php sur <html> (--bandeau = l'image) et par appliquerBandeau() après Paramètres → Documents.
   Deux façons de poser l'image : un objet détouré (PNG transparent), couché de biais avec une ombre ;
   ou une photo (bd-photo) qui remplit le côté droit et se fond dans la couleur du bandeau.
   bd-auto : la basse du module Musique, avec sa lueur de bois. */
.bd-fen { --bd-ardoise: #24252F; }
.bd-fen .md:not(.md-lignes) { overflow: hidden; }
.bd-fen .md:not(.md-lignes) .md-tete { position: relative; overflow: hidden; flex-shrink: 0; min-height: 78px; border-bottom: 0; color: #FFFFFF;
  background: radial-gradient(90% 160% at 78% 50%, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, 0) 70%) var(--bd-ardoise); }
.bd-fen.bd-auto .md:not(.md-lignes) .md-tete { background: radial-gradient(90% 160% at 78% 50%, #6A4428 0%, #3B2B25 38%, #24252F 72%) #24252F; }
.bd-fen .md:not(.md-lignes) .md-tete::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 50px; top: 50%; width: 240px; height: 72px; margin-top: -33px; transform: rotate(-7deg);
  background: var(--bandeau) center / contain no-repeat; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .55)); }
.bd-fen .md:not(.md-lignes) .md-tete::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bd-ardoise) 0%, rgba(36, 37, 47, .85) 30%, rgba(36, 37, 47, 0) 52%); }
.bd-fen .md:not(.md-lignes) .md-tete h2 { position: relative; z-index: 2; color: #FFFFFF; max-width: calc(100% - 270px); line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.bd-fen .md:not(.md-lignes) .md-fermer { position: relative; z-index: 2; color: #FFFFFF; background: rgba(255, 255, 255, .14); border-radius: 9px; width: 34px; height: 34px; }
.bd-fen .md:not(.md-lignes) .md-fermer:hover { background: rgba(255, 255, 255, .26); }
.bd-fen .md.md-large:not(.md-lignes) .md-tete h2 { max-width: calc(100% - 300px); }
/* Une photo : elle occupe les deux tiers de droite, en fondu. */
.bd-fen.bd-photo .md:not(.md-lignes) .md-tete::after { right: 0; top: 0; bottom: 0; width: 66%; height: auto; margin: 0; transform: none; filter: none;
  background: var(--bandeau) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.bd-fen.bd-photo .md:not(.md-lignes) .md-tete::before { background: linear-gradient(90deg, rgba(36, 37, 47, .55) 0%, rgba(36, 37, 47, .15) 55%, rgba(36, 37, 47, .25) 100%); }
.bd-fen.bd-photo .md:not(.md-lignes) .md-tete h2, .bd-fen.bd-photo .md.md-large:not(.md-lignes) .md-tete h2 { max-width: 62%; }
@media (max-width: 560px) {
  .bd-fen .md:not(.md-lignes) .md-tete { min-height: 70px; }
  .bd-fen .md:not(.md-lignes) .md-tete::after { width: 190px; height: 60px; margin-top: -30px; right: 34px; opacity: .6; }
  .bd-fen.bd-photo .md:not(.md-lignes) .md-tete::after { width: 80%; height: auto; margin: 0; right: 0; opacity: .8; }
  .bd-fen .md:not(.md-lignes) .md-tete::before { background: linear-gradient(90deg, #24252F 0%, rgba(36, 37, 47, .8) 45%, rgba(36, 37, 47, .15) 85%); }
  .bd-fen .md:not(.md-lignes) .md-tete h2, .bd-fen.bd-photo .md:not(.md-lignes) .md-tete h2 { max-width: none; }
}
/* Le haut des fiches de droite : l'image à droite, plus discrète, sous un fondu de la couleur de la fiche. */
.bd-fic .fp-tete { position: relative; overflow: hidden; flex-shrink: 0; }
.bd-fic .fp-tete > * { position: relative; z-index: 2; }
.bd-fic .fp-tete::after { content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 58px; top: 50%; width: 190px; height: 58px; margin-top: -27px; transform: rotate(-7deg); opacity: .9;
  background: var(--bandeau) center / contain no-repeat; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .45)); }
.bd-fic .fp-tete::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--vert-fonce) 0%, var(--vert-fonce) 38%, transparent 78%); opacity: .92; }
.bd-fic.bd-photo .fp-tete::after { right: 0; top: 0; bottom: 0; width: 60%; height: auto; margin: 0; transform: none; filter: none; opacity: 1;
  background: var(--bandeau) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.bd-fic.bd-photo .fp-tete::before { background: linear-gradient(90deg, transparent 40%, rgba(0, 0, 0, .18) 100%); opacity: 1; }
.bd-fic .fp-titres h2 { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
@media (max-width: 560px) { .bd-fic .fp-tete::after { width: 150px; height: 46px; margin-top: -21px; right: 52px; opacity: .55; } }
@media print { .bd-fic .fp-tete::after, .bd-fic .fp-tete::before, .bd-fen .md-tete::after, .bd-fen .md-tete::before { display: none; } }

/* 1.13.0 — Paramètres → Documents → Habillage : les trois choix, l'aperçu d'une fenêtre et d'une fiche. */
.bd-edit { display: grid; gap: 14px; }
.bd-edit > .aide { margin: 0; }
.bd-choix-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bd-choix { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; cursor: pointer; background: var(--blanc); }
.bd-choix:has(input:checked) { border-color: var(--vert-fonce); box-shadow: 0 0 0 1px var(--vert-fonce) inset; }
.bd-choix input { margin-top: 3px; accent-color: var(--vert-fonce); }
.bd-choix span { display: grid; gap: 2px; min-width: 0; }
.bd-choix small { color: var(--encre2); font-size: 12.5px; line-height: 1.35; }
.bd-apercus { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px; border-radius: 14px; background: var(--gris-pale, #EEF0F3); }
.bd-apercus .md { width: 100%; max-height: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.bd-apercus .md-fermer, .bd-apercus .fp-fermer { display: inline-grid; place-items: center; cursor: default; }
.bd-apercus .md-corps { display: grid; gap: 8px; }
.bd-ligne { display: block; height: 9px; border-radius: 5px; background: var(--trait); }
.bd-ligne.court { width: 60%; }
.bd-apercu-fiche { border-radius: 12px; overflow: hidden; background: var(--blanc); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.bd-apercu-fiche .fp-tete { padding: 14px 16px; }
.bd-apercu-fiche .fp-titres h2 { font-size: 16px; }
.bd-apercu-fiche .fp-fermer { margin-left: auto; flex: 0 0 auto; }
.bd-apercu-actions { display: flex; gap: 6px; padding: 10px 14px; }
.bd-apercu-actions span { height: 22px; flex: 1; border-radius: 7px; background: var(--trait); }
.bd-apercus.bd-sans-fen .bd-apercu-md, .bd-apercus.bd-sans-fic .bd-apercu-fiche { opacity: .55; }
.bd-image { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.bd-image .bd-genre { margin: 0; min-width: 240px; }
.bd-ou { display: grid; gap: 8px; }
@media (max-width: 760px) {
  .bd-choix-liste, .bd-apercus { grid-template-columns: minmax(0, 1fr); }
  .bd-apercus { padding: 12px; }
  .bd-image .bd-genre { min-width: 0; flex: 1 1 100%; }
}

/* 1.14.0 — Fiche de réglage : le pupitre de l'ampli, l'instrument, la chaîne d'effets, le conseil. */
.rg-fiche { display: grid; gap: 12px; margin: 14px 0; }
.rg-panneau { background: #1B1B22; border-radius: 16px; padding: 14px 12px 12px; color: #E6E6E6; box-shadow: inset 0 0 0 2px #0C0C10, inset 0 0 0 4px #3A3D4C; }
.rg-etiq { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #FC9508; margin: 0 4px 8px; }
.rg-led { width: 9px; height: 9px; border-radius: 50%; background: #FC9508; box-shadow: 0 0 8px 2px rgba(252, 149, 8, .7); }
.rg-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 4px; }
.rg-bouton { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rg-bouton svg { width: 100%; max-width: 74px; height: auto; overflow: visible; }
.rg-grad line { stroke: #8A8D9C; }
.rg-nom { font-size: 12px; font-weight: 700; }
.rg-val { font-size: 12.5px; font-weight: 800; color: #FC9508; font-variant-numeric: tabular-nums; }
.rg-instr { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-instr span { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--gris-pale); font-weight: 700; font-size: 14px; line-height: 1.25; }
.rg-instr small { font-size: 11px; font-weight: 600; color: var(--encre2); text-transform: uppercase; letter-spacing: .04em; }
.rg-fx { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: fx; }
.rg-fx li { counter-increment: fx; font-size: 13.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--vert-fonce); }
.rg-fx li::before { content: counter(fx); font-size: 11px; font-weight: 800; color: var(--vert-fonce); margin-right: 6px; }
.rg-conseil { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gris-pale); margin: 0 0 14px; line-height: 1.45; }
.rg-conseil b { display: block; font-size: 13px; }

/* 1.15.0 — Espace du client : dernière ouverture, code à 4 chiffres, nouveau lien. */
.esp-secu { display: grid; gap: 8px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--gris-pale); }
.esp-secu-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.esp-secu-ligne svg { color: var(--encre2); flex-shrink: 0; }
.esp-secu-mode { margin: 0; }
.esp-secu .btn { justify-self: start; }

/* 1.16.0 — Le planning : bascule Semaine / Mois, et la grille du mois. */
.ag-vues { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--gris-pale); border: 1px solid var(--trait); }
.ag-vues button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--encre2); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.ag-vues button[aria-pressed="true"] { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ag-mois { border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; background: var(--blanc); }
.ag-m-noms { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--gris-pale); border-bottom: 1px solid var(--trait); }
.ag-m-noms span { padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: var(--encre2); text-transform: capitalize; }
.ag-m-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-m-jour { min-height: 118px; min-width: 0; padding: 6px 6px 8px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background .15s; }
.ag-m-jour:nth-child(7n) { border-right: 0; }
.ag-m-jour:hover { background: color-mix(in srgb, var(--action) 4%, transparent); }
.ag-m-jour.ag-we { background: color-mix(in srgb, var(--gris-pale) 55%, transparent); }
.ag-m-jour.ag-m-hors > * { opacity: .45; }
.ag-m-jour.ag-cible { background: color-mix(in srgb, var(--action) 14%, transparent); outline: 2px dashed var(--action); outline-offset: -3px; }
.ag-m-tete { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 2px; }
.ag-m-num { border: 0; background: none; font: inherit; font-weight: 800; font-size: 14px; color: var(--encre); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.ag-m-num:hover { background: var(--gris-pale); }
.ag-m-jour.ag-auj .ag-m-num { background: var(--action); color: #fff; }
.ag-m-evt { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--ev); background: color-mix(in srgb, var(--ev) 13%, var(--blanc)); color: var(--encre);
  font: inherit; font-size: 12.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-m-evt span { font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-m-evt[draggable="true"] { cursor: grab; }
.ag-m-evt.ag-glisse { opacity: .5; }
.ag-m-evt.ag-st-fait { opacity: .62; }
.ag-m-evt.ag-st-absent { text-decoration: line-through; }
.ag-m-evt.ag-indispo { background: repeating-linear-gradient(135deg, var(--gris-pale) 0 6px, transparent 6px 12px); border-left-color: #8A94A3; }
.ag-m-plus { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--action); text-align: left; padding: 1px 6px; cursor: pointer; }
.ag-m-jour .ag-promis { font-size: 11px; }
/* Sur téléphone : des pastilles, et la liste du jour touché en dessous. */
.ag-mois-tel .ag-m-noms span { padding: 6px 0; text-align: center; font-size: 11px; }
.ag-mois-tel .ag-m-jour { min-height: 54px; padding: 4px 0; align-items: center; justify-content: flex-start; gap: 2px; border: 0; border-bottom: 1px solid var(--trait); background: none; font: inherit; color: var(--encre); }
.ag-mois-tel .ag-m-jour b { font-size: 15px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.ag-mois-tel .ag-m-jour.ag-auj b { color: var(--action); }
.ag-mois-tel .ag-m-jour.actif b { background: var(--action); color: #fff; }
.ag-mois-tel .ag-m-jour i { display: flex; gap: 2px; min-height: 6px; }
.ag-mois-tel .ag-m-jour i em { width: 6px; height: 6px; border-radius: 50%; background: var(--ev); }
.ag-mois-tel .ag-m-jour small { font-size: 10px; color: var(--encre2); line-height: 1; }
.ag-m-liste { margin: 14px 0 6px; display: grid; gap: 8px; }
.ag-m-liste h3 { margin: 0; font-size: 16px; }
.ag-m-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-m-ligne { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--trait); border-left: 4px solid var(--ev); background: var(--blanc); color: var(--encre);
  border-radius: 10px; padding: 10px 12px; font: inherit; cursor: pointer; }
.ag-m-ligne b { font-variant-numeric: tabular-nums; min-width: 4.2em; }
.ag-m-ligne span { display: grid; min-width: 0; }
.ag-m-ligne small { color: var(--encre2); font-size: 13px; }
.ag-m-ligne.ag-st-fait { opacity: .7; }
.ag-m-liste .btn { justify-self: start; }
.ag-m-liste .lien-txt { justify-self: start; }
@media print { .ag-vues { display: none; } .ag-m-jour { min-height: 90px; } }

/* 1.16.0 — La photo de l'instrument, dans sa fiche : une vignette, les boutons à côté ; un clic l'agrandit. */
.in-photo { margin: 0 0 14px; display: flex; align-items: center; gap: 14px; }
.in-photo-img { flex: 0 0 auto; padding: 0; border: 0; background: var(--gris-pale); border-radius: 12px; overflow: hidden; cursor: zoom-in; display: block; width: 168px; height: 126px; }
.in-photo-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.in-photo figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.in-photo figcaption small, .in-photo-vide small { color: var(--encre2); font-size: 13px; }
.in-photo-vide { display: grid; justify-items: start; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 2px dashed var(--trait); border-radius: 12px; }
@media (max-width: 560px) { .in-photo-img { width: 128px; height: 96px; } }
.in-photo figcaption .lien-txt { padding-left: 0; padding-right: 0; }
.in-photo-grande { display: block; max-width: 100%; max-height: 62vh; margin: 0 auto; border-radius: 10px; }

/* 1.17.0 — Mes documents : brochure, Kbis, RIB… (repris d'OpsFormaPro). */
.bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.bib-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.bib-carte.inactif { opacity: .6; }
.bib-tete { display: flex; gap: 8px; align-items: flex-start; }
.bib-tete svg { color: var(--accent); flex: none; margin-top: 2px; }
.bib-tete small { display: block; color: var(--encre2); font-size: 12px; }
.bib-carte p { margin: 0; font-size: 13px; color: var(--encre2); }
.bib-carte p svg { vertical-align: -2px; }
.bib-fichier { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-fichier a { color: var(--lien); text-decoration: none; }
.bib-fichier svg { vertical-align: -2px; }
.bib-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-ent-actions { align-items: center; }
.doc-ent-actions .bib-icones { display: inline-flex; gap: 6px; margin-left: auto; }
.doc-ent-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.doc-ent-suggest .filtre svg { vertical-align: -2px; }
.pj-ent { border: 1px solid var(--trait); border-radius: 10px; padding: 8px 12px 6px; background: var(--gris-pale); }
.pj-titre { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.pj-titre svg { color: var(--accent); }
.pj-liste .case { font-weight: 500; font-size: 14px; align-items: flex-start; }
.pj-liste .case span { line-height: 1.35; padding-top: 1px; }
.pj-liste .case small { display: block; font-size: 12px; }
.case.desactive { cursor: not-allowed; opacity: .75; }
.env-pj { display: block; margin-top: 2px; font-size: 12px; }
.env-pj svg { vertical-align: -2px; }

/* ══ 1.18.0 — Métallerie ═══════════════════════════════════════════════════
   Un atelier : la planche (plan coté sur papier millimétré), l'établi (les
   réglages), et la barre du prix qui suit chaque geste. */
.sb-groupe.g-rouille  { --g0: #B4431C; }
.mt-accueil { background: radial-gradient(420px 220px at 92% 0%, rgba(232,137,26,.28), transparent 70%), linear-gradient(135deg, #263241, #1C2430);
  color: #fff; border-radius: 18px; padding: 22px 22px 20px; margin-bottom: 16px; position: relative; overflow: hidden; }
.mt-accueil::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 2px dashed rgba(232,137,26,.35); }
.mt-accueil-tete { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1; }
.mt-kick { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #F4A64A; }
.mt-accueil h2 { margin: 4px 0 6px; font-size: 24px; line-height: 1.15; color: #fff; }
.mt-accueil p { margin: 0; color: #C9D2DD; max-width: 620px; font-size: 14.5px; }
.mt-compteurs { display: flex; gap: 10px; }
.mt-compteurs div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 8px 14px; display: grid; min-width: 96px; }
.mt-compteurs b { font-size: 19px; } .mt-compteurs span { font-size: 12px; color: #C9D2DD; }
.mt-types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.mt-type { background: #fff; color: #1E2833; border: 0; border-radius: 14px; padding: 12px 10px 11px; display: grid; justify-items: center; gap: 3px; cursor: pointer;
  text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease; font: inherit; }
.mt-type:hover, .mt-type:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.28); outline: none; }
.mt-type:focus-visible { box-shadow: 0 0 0 3px #F4A64A; }
.mt-type-ico svg { width: 72px; height: 50px; display: block; }
.mt-type b { font-size: 14px; } .mt-type small { font-size: 11.5px; color: #5B6878; line-height: 1.25; }
.mt-types-modale { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.mt-types-modale .mt-type { border: 1px solid var(--trait); box-shadow: none; }
@media (max-width: 1100px) { .mt-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mt-types, .mt-types-modale { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-accueil h2 { font-size: 20px; } }
.mt-outils { margin-bottom: 12px; }
.mt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mt-carte { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 12px;
  cursor: pointer; font: inherit; color: var(--encre); transition: border-color .15s, transform .15s; min-width: 0; }
.mt-carte:hover { border-color: #E8891A; transform: translateY(-1px); }
.mt-carte-ico { flex: none; width: 64px; height: 48px; border-radius: 10px; background: #F3F5F8; display: grid; place-items: center; }
.mt-carte-ico svg { width: 56px; height: 40px; }
.mt-carte-corps { display: grid; gap: 3px; min-width: 0; flex: 1; }
.mt-carte-haut { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.mt-carte-haut b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-carte small { color: var(--encre2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-carte-bas { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.mt-carte-bas svg { vertical-align: -2px; }
.mt-niv { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; font-size: 12px; border-radius: 20px; padding: 1px 8px; }
.mt-niv-ok { background: #E3F4EA; color: #17663A; } .mt-niv-alerte { background: #FDEBD8; color: #9A4F00; }

/* L'atelier */
.mt-atelier { display: grid; gap: 12px; }
.mt-barre-haut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mt-titre-ouvrage { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.mt-titre-ouvrage b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-titre-ouvrage small { color: var(--encre2); }
.mt-mini svg { width: 42px; height: 30px; display: block; }
.mt-actions-haut { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.mt-planche { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; min-width: 0; }
.mt-onglets { display: flex; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.mt-onglets button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 11px 16px; font: inherit; font-weight: 700; color: var(--encre2); cursor: pointer; white-space: nowrap; }
.mt-onglets button[aria-selected="true"] { color: #B4431C; border-bottom-color: #E8891A; }
.mt-vue { padding: 12px; min-width: 0; }
.mt-plan { background-color: #FBFCFD; background-image: linear-gradient(#E9EEF4 1px, transparent 1px), linear-gradient(90deg, #E9EEF4 1px, transparent 1px);
  background-size: 22px 22px; border: 1px solid #E1E7EE; border-radius: 10px; padding: 6px; }
.mt-plan svg { width: 100%; height: auto; max-height: 56vh; display: block; }
.mt-infos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mt-infos span { background: #F3F5F8; border-radius: 10px; padding: 5px 10px; display: grid; }
.mt-infos small { font-size: 11px; color: #5B6878; } .mt-infos b { font-size: 14px; color: #1E2833; }
.mt-controles { display: grid; gap: 6px; padding: 0 12px 12px; }
.mt-ctrl { display: flex; gap: 9px; align-items: flex-start; border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.35; }
.mt-ctrl svg { flex: none; margin-top: 1px; }
.mt-ctrl b { display: block; font-size: 13.5px; }
.mt-ctrl-ok { background: #ECF7F0; color: #155B33; } .mt-ctrl-alerte { background: #FFF1E2; color: #8A4300; border-left: 4px solid #E8891A; }
.mt-ctrl-info { background: #F1F4F8; color: #3D4B5C; }
.mt-table td, .mt-table th { font-variant-numeric: tabular-nums; }
.mt-rep { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 6px; background: #B4431C; color: #fff; font-weight: 800; font-size: 12px; }
.mt-quinc { font-size: 13px; margin: 10px 2px 0; }
.mt-chute { font-weight: 700; margin: 2px 0 10px; }
.mt-profil { margin-bottom: 12px; font-size: 13px; }
.mt-barre { display: flex; height: 22px; margin-top: 4px; border: 1.5px solid #1E2833; border-radius: 3px; overflow: hidden; background: #fff; }
.mt-barre span { background: #3D4B5C; color: #fff; font-size: 10.5px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; border-right: 1px solid #fff; }
.mt-barre span:nth-child(even) { background: #5F7083; }
.mt-barre em { background: repeating-linear-gradient(135deg, #F8E3CF 0 5px, #FFF 5px 10px); }
.mt-postes, .mt-lignes { display: grid; gap: 2px; }
.mt-poste, .mt-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 7px 4px; border-bottom: 1px dashed var(--trait); align-items: baseline; }
.mt-poste span, .mt-ligne span { display: grid; min-width: 0; } .mt-poste small, .mt-ligne small { color: var(--encre2); font-size: 12px; }
.mt-poste b, .mt-ligne b { font-variant-numeric: tabular-nums; }
.mt-ligne .n { text-align: right; font-size: 12.5px; color: var(--encre2); white-space: nowrap; }
.mt-poste-total { border-bottom: 2px solid var(--encre); }
.mt-h4 { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #B4431C; }

/* L'établi */
.mt-panneau { display: grid; gap: 10px; min-width: 0; }
.mt-bloc { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; padding: 12px 13px; display: grid; gap: 9px; }
.mt-bloc h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre2); display: flex; gap: 6px; align-items: center; }
details.mt-bloc summary { cursor: pointer; list-style: none; } details.mt-bloc summary::-webkit-details-marker { display: none; }
details.mt-bloc summary h3::after { content: '＋'; margin-left: auto; font-weight: 400; } details.mt-bloc[open] summary h3::after { content: '−'; }
details.mt-bloc summary h3 { display: flex; }
.mt-champ { display: grid; gap: 4px; min-width: 0; }
.mt-lib { font-size: 12.5px; font-weight: 700; color: var(--encre); }
.mt-champ select, .mt-champ textarea, .mt-champ > input[type=text] { width: 100%; box-sizing: border-box; }
.mt-champ small { font-size: 11.5px; color: var(--encre2); line-height: 1.3; }
.mt-num { display: flex; align-items: stretch; border: 1px solid var(--trait); border-radius: 9px; overflow: hidden; background: var(--blanc); }
.mt-num:focus-within { border-color: #E8891A; box-shadow: 0 0 0 3px rgba(232,137,26,.18); }
.mt-num input { border: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; font-size: 17px; font-weight: 700; padding: 8px 10px; font-variant-numeric: tabular-nums; background: transparent; color: var(--encre); }
.mt-num i { font-style: normal; display: grid; place-items: center; padding: 0 10px; background: #F3F5F8; color: #5B6878; font-size: 12.5px; font-weight: 700; }
.mt-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.mt-seg button { flex: 1 1 auto; border: 1px solid var(--trait); background: var(--blanc); color: var(--encre); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mt-seg button.actif { background: #263241; border-color: #263241; color: #fff; box-shadow: inset 0 -3px 0 #E8891A; }
.mt-seg button:disabled { cursor: default; opacity: .8; }
.mt-bool { display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; }
.mt-bool input { width: 18px; height: 18px; accent-color: #E8891A; }
.mt-astuce { display: flex; gap: 8px; align-items: flex-start; background: #FFF6EA; border: 1px dashed #F0B36B; color: #6B3A00; border-radius: 12px; padding: 9px 11px; font-size: 13px; margin: 0; }
.mt-astuce svg { flex: none; color: #E8891A; margin-top: 1px; }
.mt-libre { display: grid; gap: 6px; }
.mt-libre-l { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 92px 64px auto; gap: 5px; align-items: center; }
.mt-libre-l .mt-num input { font-size: 14px; padding: 6px; }
@media (max-width: 520px) { .mt-libre-l { grid-template-columns: 1fr 1fr; } }

/* Le prix qui suit */
.mt-resume { position: sticky; bottom: 0; z-index: 5; }
.mt-resume-in { background: #1C2430; color: #fff; border-radius: 16px; padding: 11px 14px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; box-shadow: 0 -6px 22px rgba(0,0,0,.18); }
.mt-prix { display: grid; min-width: 150px; } .mt-prix small { color: #AEB9C6; font-size: 11.5px; }
.mt-prix b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; } .mt-prix b span { font-size: 13px; color: #F4A64A; }
.mt-chiffres { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; font-size: 13px; color: #DCE3EB; }
.mt-chiffres span { display: inline-flex; gap: 5px; align-items: center; }
.mt-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-resume .btn-s { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.25); }
.mt-pulse { animation: mt-pulse 1.6s ease-in-out infinite; }
@keyframes mt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,137,26,.0); } 50% { box-shadow: 0 0 0 4px rgba(232,137,26,.45); } }
@media (prefers-reduced-motion: reduce) { .mt-pulse { animation: none; box-shadow: 0 0 0 2px #E8891A; } .mt-type, .mt-carte { transition: none; } }
.mt-lien-devis { margin: 6px 4px 0; font-size: 13px; }
.mt-choix-devis { display: grid; gap: 6px; margin-top: 8px; }
.mt-etapes { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-tdb { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 8px; }
.mt-tdb button { border: 1px solid var(--trait); background: var(--blanc); border-radius: 10px; padding: 7px; display: grid; cursor: pointer; font: inherit; color: var(--encre); }
.mt-tdb b { font-size: 18px; } .mt-tdb span { font-size: 11.5px; color: var(--encre2); }

/* Le relevé */
.mt-releve { display: grid; gap: 10px; }
.mt-releve-schema svg { width: 100%; max-height: 210px; display: block; background: #FBFCFD; border: 1px solid var(--trait); border-radius: 12px; }
.mt-releve-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .mt-releve-champs { grid-template-columns: minmax(0, 1fr); } }
.mt-lettre { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #C2410C; color: #fff; font-size: 11.5px; margin-right: 4px; }
.mt-releve-bilan { background: #F3F5F8; border-radius: 10px; padding: 9px 11px; font-size: 13.5px; }
.mt-ecart { color: #9A4F00; } .mt-ecart svg { vertical-align: -2px; }

/* Les tarifs */
.mt-tarifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 10px; }
.mt-tarif .mt-num input { font-size: 15px; }

@media (max-width: 1000px) {
  .mt-grille { grid-template-columns: 1fr; }
  .mt-plan svg { max-height: 44vh; }
}
@media (max-width: 600px) {
  .mt-resume-in { padding: 9px 11px; gap: 8px; border-radius: 14px 14px 0 0; }
  .mt-chiffres { font-size: 12px; gap: 8px; order: 3; flex-basis: 100%; }
  .mt-prix b { font-size: 20px; }
  .mt-boutons { margin-left: auto; }
  .mt-boutons .btn { padding: 8px 10px; }
}
:root[data-theme="dark"] .mt-type, :root[data-theme="dark"] .mt-carte-ico, :root[data-theme="dark"] .mt-infos span { background: #EEF2F6; }
.mt-champ select, .mt-champ > input[type=text], .mt-champ textarea, .mt-libre-l select, .mt-libre-l > input[type=text] {
  border: 1px solid var(--trait); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 14.5px; background: var(--blanc); color: var(--encre); min-width: 0; }
.mt-champ select:focus, .mt-champ > input[type=text]:focus, .mt-champ textarea:focus, .mt-libre-l select:focus, .mt-libre-l > input:focus { border-color: #E8891A; outline: none; box-shadow: 0 0 0 3px rgba(232,137,26,.18); }
.mt-champ select:disabled, .mt-champ input:disabled { background: var(--survol); color: var(--encre2); }
@media (min-width: 1001px) { .mt-planche { position: sticky; top: 12px; } }
.mt-carte-haut b { min-width: 0; flex: 1; }
.mt-carte-haut .pastille { flex: none; }
.mt-outils .recherche, .mt-outils input[type=search] { min-width: 0; }
.mt-carte-corps { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
  .mt-titre-ouvrage { order: -1; flex-basis: 100%; }
  .mt-actions-haut { margin-left: auto; }
  .mt-prix { min-width: 0; flex: 1; }
  .mt-btxt { display: none; }
  .mt-boutons { margin-left: 0; }
  .mt-chiffres span:nth-child(3) { display: none; }
}
.mt-carte-client { display: flex; gap: 5px; align-items: center; font-size: 13px; font-weight: 600; color: var(--encre); min-width: 0; }
.mt-carte-client svg { flex: none; color: var(--encre2); }
.mt-carte-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mt-carte-client svg { vertical-align: -2px; margin-right: 2px; }
.mt-carte-client.discret { font-weight: 400; color: var(--encre2); }
.mt-releve, .mt-releve-champs > *, .mt-astuce span { min-width: 0; }
.mt-releve .mt-num { min-width: 0; }
.mt-releve-schema { contain: inline-size; }
.mt-titre-ouvrage b { min-width: 0; } .mt-titre-ouvrage small, .mt-mini { flex: none; }
.mt-atelier { grid-template-columns: minmax(0, 1fr); }
.mt-btxt-court { display: none; }
.mt-prix b { white-space: nowrap; }
@media (max-width: 600px) { .mt-btxt-court { display: inline; } }
@media (max-width: 600px) { .mt-prix { flex: 1 0 auto; } .mt-prix b { font-size: 19px; } .mt-prix b span { font-size: 11px; } }

/* 1.19.1 — Métallerie, liste des ouvrages sur téléphone : la recherche sur toute la largeur,
   les étapes dessous, sur toute la largeur (au lieu d'être serrées à côté de la recherche). */
@media (max-width: 760px) {
  .liste-outils.mt-outils { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .liste-outils.mt-outils .recherche { grid-column: 1 / -1; width: 100%; }
  .liste-outils.mt-outils .filtres { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; }
  .liste-outils.mt-outils .filtre { flex: none; white-space: nowrap; }
  /* Même règle pour les autres listes à pastilles (Historique des envois) : les pastilles sous la recherche. */
  .liste-outils > .filtres { grid-column: 1 / -1; min-width: 0; }
}

/* ── 1.20.0 — Interventions ──────────────────────────────────────────────
   La fiche (étapes, tâches à cocher, photos, compte rendu), « Ma journée » du technicien
   (une carte par passage, les gros boutons au pouce), l'équipe à cocher, la couche de l'agenda. */
.bandeau-gris { background: var(--gris-pale); color: var(--gris-texte); border: 1px solid var(--trait); }
.segments { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 9px; overflow: hidden; flex: none; background: var(--blanc); }
.segments button { border: 0; background: transparent; color: var(--encre2); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer; min-height: 34px; }
.segments button + button { border-left: 1px solid var(--trait-fort); }
.segments button.actif { background: var(--vert-fonce); color: #fff; }
.segments button:disabled { cursor: default; }
.segments button:not(.actif):not(:disabled):hover { background: var(--survol); color: var(--encre); }
.iv-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 14px; }
.iv-texte { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
.iv-barre { height: 6px; border-radius: 4px; background: var(--trait-leger); overflow: hidden; margin: 0 0 8px; }
.iv-barre span { display: block; height: 100%; background: var(--action); transition: width .2s; }
.iv-taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.iv-tache { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 38%) auto; align-items: center; gap: 8px; padding: 7px 8px 7px 10px;
  border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); }
.iv-tache.fait { background: var(--vert-pale); border-color: var(--vert-trait); }
.iv-tache.fait .iv-lib { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.iv-case { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.iv-case input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--action); }
.iv-lib { overflow-wrap: anywhere; line-height: 1.35; }
.iv-lib small { display: block; color: var(--encre2); font-size: 11.5px; text-decoration: none; }
.iv-com { width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 7px; background: var(--blanc); color: var(--encre); }
.iv-com-lu { grid-column: 2 / 4; color: var(--encre2); }
.iv-ajout { display: flex; gap: 8px; margin-top: 8px; }
.iv-ajout input { flex: 1; min-width: 0; font: inherit; padding: 7px 10px; border: 1px dashed var(--trait-fort); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.iv-cr { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--trait); border-radius: 9px; background: var(--blanc); color: var(--encre); resize: vertical; }
.iv-cr-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; min-height: 30px; }
.iv-fournitures { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.iv-fournitures li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--trait-leger); border-radius: 8px; }
.iv-fournitures li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
@media (max-width: 600px) {
  .iv-tache { grid-template-columns: minmax(0, 1fr) auto; }
  .iv-tache .iv-com { grid-column: 1 / 2; grid-row: 2; }
  .iv-tache > .btn { grid-row: 1 / 3; grid-column: 2; }
  .iv-com-lu { grid-column: 1 / -1; }
}
/* L'équipe d'une intervention : des fiches à cocher. */
.lib-groupe { font-weight: 600; font-size: 13px; }
.mfk { display: flex; flex-wrap: wrap; gap: 6px; }
.mfk-choix { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid var(--trait-fort); border-radius: 20px; cursor: pointer;
  font-size: 13.5px; background: var(--blanc); min-height: 36px; }
.mfk-choix input { width: 17px; height: 17px; margin: 0; accent-color: var(--action); }
.mfk-choix:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 9%, var(--blanc)); font-weight: 600; }
.mfk-choix:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* « Ma journée » : pensée pour le téléphone, tenu d'une main sur le chantier. */
.mj { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.mj-tete { display: grid; gap: 10px; }
.mj-nav { display: flex; align-items: center; gap: 10px; }
.mj-nav .btn { min-width: 44px; min-height: 44px; font-size: 18px; }
.mj-titre { flex: 1; min-width: 0; text-align: center; display: grid; }
.mj-titre h2 { margin: 0; font-size: 22px; }
.mj-titre span { font-size: 13px; color: var(--encre2); }
.mj-outils { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.mj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mj-carte { background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--ev); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px;
  box-shadow: var(--ombre); }
.mj-carte.mj-terminee { opacity: .78; }
.mj-carte.mj-en_cours { border-color: color-mix(in srgb, var(--ambre-texte) 40%, var(--trait)); border-left-color: var(--ev); background: color-mix(in srgb, var(--ambre-fond) 55%, var(--blanc)); }
.mj-ouvrir { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: start; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mj-ouvrir:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.mj-heure { display: grid; font-variant-numeric: tabular-nums; }
.mj-heure b { font-size: 19px; color: color-mix(in srgb, var(--ev) 65%, var(--encre)); }
.mj-heure small { font-size: 12.5px; color: var(--encre2); }
.mj-txt { display: grid; gap: 1px; min-width: 0; }
.mj-txt b { font-size: 16px; overflow-wrap: anywhere; }
.mj-txt span { font-size: 14px; overflow-wrap: anywhere; }
.mj-txt small { font-size: 12.5px; color: var(--encre2); }
.mj-barre { margin: 0; }
.mj-adresse { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--encre2); overflow-wrap: anywhere; }
.mj-adresse svg { flex: none; margin-top: 2px; }
.mj-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mj-actions .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }
@media (max-width: 480px) { .mj-ouvrir { grid-template-columns: 50px minmax(0, 1fr); } .mj-ouvrir > .pastille { grid-column: 2; justify-self: start; } }
/* Le tableau de bord, les réglages. */
.iv-mots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.iv-mot { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; background: var(--blanc); }
.iv-mot input { margin: 3px 0 0; accent-color: var(--action); }
.iv-mot span { display: grid; gap: 2px; } .iv-mot small { color: var(--encre2); font-size: 12px; }
.iv-mot:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 7%, var(--blanc)); }
.iv-etapes-aide { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
/* L'agenda : une intervention se reconnaît à sa mallette, à la couleur de son type. */
.ag-evt.ag-iv { border-left-width: 5px; background: color-mix(in srgb, var(--ev) 22%, var(--blanc)); }
.ag-evt.ag-iv .ag-h svg { opacity: .7; }
.ag-evt.ag-iv-terminee, .ag-m-evt.ag-iv-terminee { opacity: .7; }
.ag-evt.ag-iv-en_cours { outline: 2px solid color-mix(in srgb, var(--ev) 70%, transparent); outline-offset: -2px; }
.ag-m-evt.ag-iv svg { vertical-align: -1px; opacity: .7; }
.ag-l-iv { border-left-width: 5px; }

/* ============================================================
   OpsInterventionPro 1.0.0 — l'édition « intervention » (interventions_pro.js, demande.php, equipement.php).
   Dans l'édition « facture », aucune de ces classes n'est employée.
   ============================================================ */
/* Sa couleur d'accent : le bleu pétrole de l'anneau du logo « ops » (5,8:1 sur blanc). */
:root.ed-intervention { --vert: #0B6E8F; --action: #0A6A8A; --action-fonce: #08516A; --vert-pale: #E1F1F7; --vert-trait: #BEE0EC; }

/* Le tableau de bord des interventions. */
.tdb-iv .tdb-grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.tdb-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ev); margin-right: 4px; vertical-align: 0; }
.iv-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-barres li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.iv-barres-lib { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-barres-lib i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ev); }
.iv-barres-piste { height: 10px; border-radius: 5px; background: var(--trait-leger); overflow: hidden; }
.iv-barres-piste span { display: block; height: 100%; border-radius: 5px; background: var(--ev); }
.iv-barres b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-ca td:first-child { white-space: nowrap; }

/* Le planning multi-techniciens. */
.pt-entete { align-items: center; }
.pt-chev-liste { margin-top: 2px; }
.pt-bandeau { background: var(--blanc); border: 1px dashed var(--trait-fort); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.pt-bandeau-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.pt-bandeau-tete b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.pt-afaires { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; min-height: 58px; align-items: stretch; }
.pt-afaires.pt-cible { background: var(--vert-pale); border-radius: 10px; }
/* Sur grand écran, tout « À planifier » se voit : les cartes passent à la ligne (deux rangs visibles, puis défilement). */
@media (min-width: 761px) { .pt-afaires { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; max-height: 142px; } }
.pt-rien { align-self: center; }
.pt-afaire { flex: 0 0 210px; display: grid; gap: 1px; text-align: left; font: inherit; color: var(--encre); cursor: pointer; padding: 6px 9px 6px 10px; border: 1px solid var(--trait);
  border-left: 4px solid var(--ev, #64748B); border-radius: 9px; background: color-mix(in srgb, var(--ev, #64748B) 10%, var(--blanc)); min-width: 0; }
.pt-afaire b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-afaire small { font-size: 12px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-afaire span { font-size: 11.5px; color: var(--encre3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-afaire.pt-dem { --ev: #7C3AED; border-style: dashed; border-left-style: solid; }
.pt-urgent { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rouge) 70%, transparent); }
.pt-mobile { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.pt-zone { background: var(--blanc); border: 1px solid var(--trait); border-radius: 14px; overflow-x: auto; box-shadow: var(--ombre); }
.pt { min-width: 100%; }
.pt-ligne { display: grid; grid-template-columns: 180px var(--pt-l, 1fr); border-bottom: 1px solid var(--trait-leger); }
.pt-ligne:last-child { border-bottom: 0; }
.pt-nom { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--blanc); border-right: 1px solid var(--trait); min-width: 0; }
.pt-nom i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ev); }
.pt-nom span { display: grid; min-width: 0; }
.pt-nom b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-nom small { font-size: 12px; color: var(--encre2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tete { position: sticky; top: 0; z-index: 5; background: var(--blanc); }
.pt-piste { position: relative; min-height: 58px;
  background-image: repeating-linear-gradient(90deg, var(--trait-leger) 0 1px, transparent 1px var(--pt-h, 60px)); }
.pt-piste.pt-cible { background-color: var(--vert-pale); }
.pt-heures { height: 30px; min-height: 0; background-image: none; }
.pt-heures span { position: absolute; top: 7px; font-size: 11.5px; color: var(--encre3); padding-left: 4px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--trait); height: 23px; }
.pt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rouge); z-index: 2; pointer-events: none; }
.pt-evt { position: absolute; height: 50px; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden; text-align: left;
  padding: 3px 6px 3px 8px; line-height: 1.2; border: 0; border-left: 4px solid var(--ev); border-radius: 7px; font: inherit; color: var(--encre); cursor: pointer;
  background: color-mix(in srgb, var(--ev) 17%, var(--blanc)); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pt-evt:hover, .pt-evt:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .16); z-index: 3; }
.pt-evt .pt-h { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: color-mix(in srgb, var(--ev) 70%, var(--encre)); display: inline-flex; align-items: center; gap: 3px; }
.pt-evt b { font-size: 12.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-evt small { font-size: 11.5px; color: var(--encre2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-evt.pt-terminee, .pt-puce.pt-terminee { opacity: .7; }
.pt-evt.pt-en_cours { background: color-mix(in srgb, var(--ambre-fond) 70%, var(--blanc)); }
.pt-chev { outline: 2px solid var(--rouge); outline-offset: -2px; }
.pt-glisse { opacity: .35; }
.pt-fantome { position: fixed; z-index: 90; pointer-events: none; opacity: .92; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); transform: rotate(-1.5deg); }
.pt-fantome.pt-evt { height: 50px; }
.pt-semaine .pt-ligne { grid-template-columns: 180px repeat(7, minmax(118px, 1fr)); }
.pt-jtete { display: grid; justify-items: center; padding: 6px 0; border-left: 1px solid var(--trait-leger); font-size: 12px; }
.pt-jtete small { color: var(--encre2); text-transform: capitalize; }
.pt-jtete b { font-size: 16px; }
.pt-jtete.pt-auj b { color: var(--action); }
.pt-case { border-left: 1px solid var(--trait-leger); padding: 4px; display: flex; flex-direction: column; gap: 4px; min-height: 58px; min-width: 0; }
.pt-case.pt-we, .pt-jtete.pt-we { background: var(--survol); }
.pt-case.pt-auj { background: color-mix(in srgb, var(--action) 6%, transparent); }
.pt-case.pt-cible { background: var(--vert-pale); outline: 2px dashed var(--vert); outline-offset: -3px; }
.pt-puce { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; line-height: 1.25; color: var(--encre); padding: 4px 6px 4px 7px; border: 0;
  border-left: 3px solid var(--ev); border-radius: 6px; background: color-mix(in srgb, var(--ev) 15%, var(--blanc)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pt-puce b { font-variant-numeric: tabular-nums; }
.pt-l-chev { --ev: var(--rouge); background: var(--blanc); outline: 2px solid var(--rouge); outline-offset: -2px; border-left-width: 0; }
.pt-l-urgent { --ev: var(--rouge); box-shadow: inset 0 0 0 2px var(--rouge); background: var(--blanc); border-left-width: 0; }
/* Téléphone : une liste par technicien. */
.pt-tel { display: grid; gap: 14px; }
.pt-tel-tech h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.pt-tel-tech h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--ev); }
.pt-tel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pt-tel-carte { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait); border-left: 5px solid var(--ev); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.pt-tel-h { display: grid; font-variant-numeric: tabular-nums; }
.pt-tel-h b { font-size: 17px; } .pt-tel-h small { font-size: 12px; color: var(--encre2); }
.pt-tel-txt { display: grid; min-width: 0; }
.pt-tel-txt b, .pt-tel-txt span { overflow-wrap: anywhere; }
.pt-tel-txt span { font-size: 13.5px; color: var(--encre2); }
@media (max-width: 760px) {
  .pt-entete .pl-nav { width: 100%; }
  .pt-entete .ag-boutons { width: 100%; }
  .pt-entete .ag-boutons .btn-p { margin-left: auto; }
  .pt-afaire { flex-basis: 78%; }
  .pt-bandeau-tete .discret { flex: 1 1 100%; }
}

/* La fiche de l'intervention : temps pointé, équipements. */
.iv-pt { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.iv-pt li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 10px; border-radius: 8px; background: var(--survol); font-variant-numeric: tabular-nums; }
.iv-pt small { color: var(--encre2); }
.iv-pt-total { font-size: 18px; font-variant-numeric: tabular-nums; }
.iv-eqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iv-eq { border: 1px solid var(--trait); border-radius: 12px; padding: 10px; background: var(--blanc); display: grid; gap: 6px; min-width: 0; }
.iv-eq-tete { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.iv-eq-tete img, .iv-eq-ico { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); }
.iv-eq-tete > span:nth-child(2) { display: grid; min-width: 0; }
.iv-eq-tete b { overflow-wrap: anywhere; }
.iv-eq-tete small { font-size: 12.5px; color: var(--encre2); overflow-wrap: anywhere; }
.iv-eq-notes { margin: 0; font-size: 13px; color: var(--encre2); background: var(--ambre-fond); border-radius: 8px; padding: 6px 9px; }
.iv-eq-vide { margin: 0; font-size: 13px; }
.iv-eq-hist summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--lien); padding: 2px 0; }
.iv-eq-hist ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.iv-eq-hist button { width: 100%; display: grid; gap: 1px; text-align: left; font: inherit; font-size: 13.5px; color: var(--encre); background: var(--survol); border: 0; border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.iv-eq-hist small { color: var(--encre2); font-size: 12px; }
.iv-eq-hist span { color: var(--encre2); font-size: 12.5px; white-space: pre-line; }
.iv-eq-choix { display: grid; gap: 6px; }
@media (max-width: 480px) { .iv-eq-tete { grid-template-columns: 42px minmax(0, 1fr); } .iv-eq-tete > .pastille { grid-column: 2; justify-self: start; } }

/* « Ma journée » : équipements et temps pointé sur la carte. */
.mj-eq svg, .mj-temps svg { color: var(--accent); }
.mj-temps { color: var(--ambre-texte); font-weight: 600; }

/* La fiche d'un équipement. */
.eq-haut { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px; }
.eq-photo { width: 132px; height: 132px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); border: 1px solid var(--trait); }
.eq-resume { margin: 0; }
.eq-resume > div { flex-basis: 150px; }
.eq-resume b { font-size: 16px; }
.eq-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eq-hist button { width: 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: start; text-align: left; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--ev); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.eq-hist button:hover { background: var(--survol); }
.eq-hist-date { display: grid; font-variant-numeric: tabular-nums; }
.eq-hist-date small { color: var(--encre3); font-size: 12px; }
.eq-hist-txt { display: grid; gap: 2px; min-width: 0; }
.eq-hist-txt b { overflow-wrap: anywhere; }
.eq-hist-txt small { color: var(--encre2); font-size: 12.5px; }
.eq-hist-cr { font-size: 13px; color: var(--encre2); white-space: pre-line; overflow-wrap: anywhere; }
.dem-photo img { max-height: 420px; }
@media (max-width: 560px) {
  .eq-haut { grid-template-columns: 1fr; }
  .eq-photo { width: 100%; height: 180px; }
  span.eq-photo { display: none; }
  .eq-hist button { grid-template-columns: minmax(0, 1fr) auto; }
  .eq-hist-date { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
}

/* Le stock des véhicules. */
.sv-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 14px; margin-bottom: 18px; }
.sv-carte { background: var(--blanc); border: 1px solid var(--trait); border-top: 4px solid var(--ev); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.sv-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sv-tete > div { flex: 1; display: grid; min-width: 0; }
.sv-tete small { font-size: 12.5px; color: var(--encre2); }
.sv-pt { width: 12px; height: 12px; border-radius: 50%; background: var(--ev); flex: none; }
.sv-table td.actions { width: 1%; white-space: nowrap; }

/* Paramètres : le lien et le code QR du formulaire de demande. */
.iv-lien-dem { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
.iv-lien-qr { width: 132px; padding: 8px; background: #fff; border: 1px solid var(--trait); border-radius: 10px; }
.iv-lien-qr svg { display: block; width: 100%; height: auto; }
.iv-lien-txt { display: grid; gap: 8px; min-width: 0; }
.iv-lien-txt .rp-code { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 560px) { .iv-lien-dem { grid-template-columns: 1fr; } }

/* Les pages publiques : la demande d'intervention et la page d'un équipement (téléphone d'abord). */
body.pub { background: var(--papier) radial-gradient(circle at 12% 0%, var(--vert-pale) 0, transparent 42%); min-height: 100vh; }
.pub-page { max-width: 640px; margin: 0 auto; padding: 16px 16px 28px; display: grid; gap: 14px; }
.pub-tete { display: flex; align-items: center; gap: 12px; }
.pub-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--vert-pale); color: var(--accent); object-fit: contain; }
.pub-noms { flex: 1; display: grid; min-width: 0; }
.pub-noms b { font-size: 17px; color: var(--lien); overflow-wrap: anywhere; }
.pub-noms span { font-size: 13px; color: var(--encre2); }
.pub-appel { flex: none; }
.pub-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 20px 18px; box-shadow: var(--ombre); display: grid; gap: 12px; min-width: 0; }
.pub-carte h1 { margin: 0; font-size: 23px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pub-intro { margin: -4px 0 0; color: var(--encre2); }
.pub-erreur { display: flex; gap: 8px; align-items: flex-start; background: var(--rouge-fond); color: var(--rouge-texte); border: 1px solid var(--rouge-trait); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.pub-eq { display: flex; gap: 10px; align-items: flex-start; background: var(--vert-pale); border-radius: 12px; padding: 10px 12px; color: var(--encre); }
.pub-eq svg { color: var(--accent); flex: none; margin-top: 2px; }
.pub-eq div { display: grid; min-width: 0; }
.pub-eq span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); font-weight: 700; }
.pub-eq small { color: var(--encre2); overflow-wrap: anywhere; }
.pub-form { display: grid; gap: 14px; }
.pub-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.pub-form legend { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); margin-bottom: 4px; padding: 0; }
.pub-form .champ { display: grid; gap: 5px; margin: 0; min-width: 0; }
.pub-form label, .pub-form .lib-groupe { font-weight: 600; font-size: 14px; }
.pub-form input[type=text], .pub-form input[type=tel], .pub-form input[type=email], .pub-form textarea { font: inherit; font-size: 16px; width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--blanc); color: var(--encre); }
.pub-form input:focus, .pub-form textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.pub-form input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
.pub-form .champ-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.pub-urgence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pub-urgence label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--trait-fort); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 400; }
.pub-urgence label:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); }
.pub-urgence .pub-urgent:has(input:checked) { border-color: var(--rouge); background: var(--rouge-fond); }
.pub-urgence span { display: grid; flex: 1 1 auto; min-width: 0; text-align: left; }
.pub-urgence small { color: var(--encre2); font-size: 12.5px; }
.pub-urgence input, .champ .pub-urgence input[type=radio] { margin: 2px 0 0; accent-color: var(--vert); width: 20px; height: 20px; min-height: 0; min-width: 0; max-width: 20px; padding: 0; flex: none; box-shadow: none; border: 0; }
.pub-miel { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pub-envoyer { min-height: 52px; font-size: 16px; }
.pub-note, .pub-pied { margin: 0; font-size: 12.5px; color: var(--encre2); text-align: center; }
.pub-ok { display: grid; gap: 10px; justify-items: start; }
.pub-ok > svg { color: var(--vert); }
.pub-ok p { margin: 0; }
.pub-recap { width: 100%; background: var(--survol); border-radius: 12px; padding: 10px 12px; }
.pub-recap span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--encre2); }
.pub-recap p { margin: 4px 0 0; overflow-wrap: anywhere; }
.pub-eq-tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.pub-eq-photo, .pub-eq-ico { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; display: grid; place-items: center; background: var(--vert-pale); color: var(--accent); }
.pub-sur { font: 700 12.5px ui-monospace, Menlo, monospace; color: var(--encre2); }
.pub-garantie { margin: 4px 0 0; font-size: 14px; }
.pub-demander { min-height: 52px; font-size: 16px; }
.pub-bloc { border-top: 1px solid var(--trait-leger); padding-top: 12px; }
.pub-bloc h2 { margin: 0 0 8px; font-size: 15px; }
.pub-bloc p { margin: 0 0 6px; }
.pub-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 14px; }
.pub-dl div { display: grid; min-width: 0; }
.pub-dl dt { font-size: 12px; color: var(--encre2); }
.pub-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pub-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pub-hist li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
.pub-hist-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-hist div { display: grid; gap: 2px; min-width: 0; }
.pub-hist small { color: var(--encre2); }
.pub-hist p { margin: 2px 0 0; font-size: 14px; color: var(--encre2); white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .pub-urgence { grid-template-columns: 1fr; }
  .pub-eq-tete { grid-template-columns: 72px minmax(0, 1fr); }
  .pub-eq-photo, .pub-eq-ico { width: 72px; height: 72px; }
  .pub-hist li { grid-template-columns: 1fr; gap: 2px; }
  .pub-appel span { display: none; }
}

.iv-cell-texte { display: block; min-width: 220px; max-width: 360px; }
.iv-cell-texte small { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12px; }
.iv-tel { white-space: nowrap; }
.sv-table td:first-child { min-width: 180px; }
/* Les colonnes chiffrées gardent la même largeur d'un véhicule à l'autre. */
@media (min-width: 761px) { .sv-table th.num { width: 150px; } }
.sv-table th.num, .sv-depot th.num { text-align: right; }
.mj-ouvrir { grid-template-columns: minmax(58px, max-content) minmax(0, 1fr) auto; }
@media (max-width: 480px) { .mj-ouvrir { grid-template-columns: minmax(50px, max-content) minmax(0, 1fr); } }
@media (max-width: 760px) { :root.ed-intervention .carte-txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
.iv-cell-objet { display: block; min-width: 200px; }