/* MyHEPTA — habillage commun.
   Une couleur, un sens : le bleu marine porte la structure, l'or ce qui se
   saisit, le rouge l'alerte, le vert-sarcelle le gain. Tout est en variables :
   changer la teinte de l'application se fait dans ce bloc, nulle part ailleurs. */

:root{
  --ground:#EEF2F7; --panel:#F7FAFC; --paper:#FFFFFF; --carte2:#F7FAFC;
  --ink:#0B2138; --ink2:#42586E; --ink3:#7C8EA1;
  --line:#CBD8E4; --line2:#E3EBF2; --trait:#DCE6F0; --trait2:#EDF2F7;
  --accent:#0E3355; --accent-soft:#E8F0F8; --accent-ink:#1B5C97; --or:#B07E2B;
  --bleu:#1B5C97; --bleu-clair:#E8F0F8; --marine:#0E3355;
  --or-clair:#FBF3E4;
  --signal:#B0431C; --signal-soft:#FBE7DE; --ok:#0F766E; --ok-soft:#DCF0ED;
  --alerte:#B0431C; --alerte-clair:#FBE7DE;
  --field:#FFFFFF; --field-line:#B7C7D6;
  --ombre:0 1px 2px rgba(11,33,56,.05),0 8px 24px rgba(11,33,56,.07);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B131C; --panel:#0F1A25; --paper:#131F2C; --carte2:#0F1A25;
    --ink:#E4ECF3; --ink2:#A3B4C4; --ink3:#728699;
    --line:#24333F; --line2:#1B2833; --trait:#24333F; --trait2:#1B2833;
    --accent:#9CC3E6; --accent-soft:#152634; --accent-ink:#6BA6DC; --or:#D2A34E;
    --bleu:#6BA6DC; --bleu-clair:#152634; --marine:#0A1721;
    --or-clair:#241C10;
    --signal:#E4694B; --signal-soft:#2A1912; --ok:#37A87F; --ok-soft:#12261F;
    --alerte:#E4694B; --alerte-clair:#2A1912;
    --field:#111A21; --field-line:#33434E;
    --ombre:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#0B131C; --panel:#0F1A25; --paper:#131F2C; --carte2:#0F1A25;
  --ink:#E4ECF3; --ink2:#A3B4C4; --ink3:#728699;
  --line:#24333F; --line2:#1B2833; --trait:#24333F; --trait2:#1B2833;
  --accent:#9CC3E6; --accent-soft:#152634; --accent-ink:#6BA6DC; --or:#D2A34E;
  --bleu:#6BA6DC; --bleu-clair:#152634; --marine:#0A1721;
  --or-clair:#241C10;
  --signal:#E4694B; --signal-soft:#2A1912; --ok:#37A87F; --ok-soft:#12261F;
  --alerte:#E4694B; --alerte-clair:#2A1912;
  --field:#111A21; --field-line:#33434E;
  --ombre:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink)}

/* --- Bandeau --- */
/* Tous les bandeaux sont sur fond MARINE : le texte des onglets et les liens
   passent donc en clair, et l'onglet actif devient une pastille blanche. */
.bandeau{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:10px 22px; background:#0E3355; border-bottom:1px solid #0A2942;
}
.marque img{height:34px; display:block}
.marque svg{height:34px; width:auto; display:block}
.onglets{display:flex; gap:4px; margin-right:auto}
.onglets a,.onglets span{
  padding:7px 14px; border-radius:3px; text-decoration:none; font-size:13.5px;
  font-weight:600; color:#C7D4E1;
}
.onglets a:hover{background:rgba(255,255,255,.10); color:#FFFFFF}
.onglets a.courant{background:#FFFFFF; color:#0E3355}
.onglets .inactif{color:#6E859B; cursor:default}
.moi{display:flex; flex-direction:column; line-height:1.2; text-align:right}
.moi span{font-size:13px; font-weight:600; color:#FFFFFF}
.moi small{font-size:11px; color:#9DB0C4}
.lien-sortie{font-size:12.5px; color:#9DB0C4; text-decoration:none}
.lien-sortie:hover{color:#FFFFFF}

/* Toutes les pages occupent la largeur de l'écran : un tableau de gestion
   pleine page à côté d'une liste de clients à moitié page, ça se remarque.
   Les paragraphes d'explication restent bridés à 70 caractères par .aide —
   c'est la ligne de texte qui doit être courte, pas la page. */
main{max-width:none; margin:0 auto; padding:28px 30px 70px}
main.large{max-width:none}
h1{font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 18px}
.titre-ligne{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.titre-ligne h1{margin:0; margin-right:auto}
.aide{color:var(--ink2); font-size:13.5px; max-width:70ch}

/* --- Boutons --- */
.bouton{
  display:inline-block; font:inherit; font-size:13.5px; font-weight:600;
  padding:8px 15px; border-radius:3px; cursor:pointer; text-decoration:none;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.bouton:hover{border-color:var(--accent-ink); color:var(--accent-ink)}
.bouton.primaire{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.bouton.primaire:hover{opacity:.88; color:var(--paper)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--or); outline-offset:2px;
}

/* --- Tuiles d'accueil --- */
.tuiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:24px}
.tuile{
  display:flex; flex-direction:column; gap:2px; padding:18px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  text-decoration:none; color:inherit; box-shadow:var(--ombre);
}
.tuile:hover{border-color:var(--or)}
.tuile .chiffre{font-family:"IBM Plex Mono",monospace; font-size:30px; font-weight:500; color:var(--accent-ink)}
.tuile .etiquette{font-size:13px; font-weight:600}
.tuile small{font-size:11.5px; color:var(--ink3)}
.tuile.vide{opacity:.55; box-shadow:none}

/* --- Tableaux --- */
.tableau{width:100%; border-collapse:collapse; background:var(--paper); box-shadow:var(--ombre)}
.tableau th,.tableau td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line2); font-size:13.5px}
.tableau th{
  background:var(--accent-soft); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent-ink); border-bottom:1px solid var(--line);
}
.tableau tr:last-child td{border-bottom:0}
.tableau a{text-decoration:none}
.tableau a:hover{text-decoration:underline}
.tableau small{display:block; color:var(--ink3); font-size:11.5px}
/* LES NOMBRES S'ALIGNENT À DROITE, PARTOUT.
   Cette règle existait depuis toujours et n'a jamais rien fait : `.tableau td`
   la bat en spécificité et alignait tout à gauche. Les colonnes de chiffres
   n'avaient l'air alignées que là où le contenu remplissait la cellule — et
   deux nombres de largeurs différentes ne se comparaient plus d'un coup d'œil,
   ce qui est pourtant la seule raison de les mettre en colonne. */
.chiffres{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.tableau th.chiffres, .tableau td.chiffres{
  text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
}
.jeton{
  font-family:"IBM Plex Mono",monospace; font-size:12px; padding:2px 7px;
  border:1px solid var(--line); border-radius:2px; background:var(--accent-soft); color:var(--accent-ink);
}
.statut{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:3px; border:1px solid;
}
.statut.oui{color:var(--ok); border-color:var(--ok); background:var(--ok-soft)}
.statut.non{color:var(--signal); border-color:var(--signal); background:var(--signal-soft)}

/* --- Recherche --- */
.recherche{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.recherche input,.recherche select{
  font:inherit; font-size:13.5px; padding:8px 10px; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.recherche input{flex:1; min-width:220px}

/* --- Formulaires --- */
fieldset{border:0; margin:0 0 6px; padding:16px 0; border-top:1px solid var(--line2)}
legend{
  padding:0; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:var(--accent-ink);
}
.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-top:12px}
label.f{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink2)}
label.f>span{font-weight:500}
label.f input,label.f select{
  font:inherit; font-size:13.5px; padding:8px 10px; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.barre-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}

/* --- Connexion --- */
body.nue{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.connexion{
  width:100%; max-width:380px; background:var(--paper); border:1px solid var(--line);
  border-radius:5px; padding:34px 32px; box-shadow:var(--ombre); text-align:center;
}
.logo-connexion{width:190px; max-width:100%; margin:0 auto 22px; display:block}
.connexion h1{font-size:22px; margin:0 0 4px; letter-spacing:.02em}
.connexion .sous{font-size:12.5px; color:var(--ink3); margin:0 0 22px}
.connexion form{display:flex; flex-direction:column; gap:12px; text-align:left}
.connexion label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink2); font-weight:500}
.connexion input{
  font:inherit; font-size:14px; padding:9px 11px; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.connexion button{
  font:inherit; font-size:14px; font-weight:600; padding:10px; margin-top:6px;
  border:0; border-radius:3px; background:var(--accent); color:var(--paper); cursor:pointer;
}
.connexion .erreur{
  background:var(--signal-soft); color:var(--signal); font-size:13px;
  padding:9px 12px; border-radius:3px; margin:0 0 14px; text-align:left;
}

/* --- Import d'une fiche Excel --- */
.import{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; margin-bottom:14px; border-radius:4px;
  background:var(--accent-soft); border:1px dashed var(--or);
}
.import-texte{display:flex; flex-direction:column; gap:2px; margin-right:auto}
.import-texte b{font-size:13.5px}
.import-texte span{font-size:12.5px; color:var(--ink2); max-width:62ch}
.import label.bouton{cursor:pointer}
.import-msg{
  font-size:13px; padding:9px 12px; border-radius:3px; margin:0 0 14px;
  background:var(--panel); color:var(--ink2); border-left:3px solid var(--line);
}
.import-msg.ok{background:var(--ok-soft); color:var(--ok); border-left-color:var(--ok)}
.import-msg.ko{background:var(--signal-soft); color:var(--signal); border-left-color:var(--signal)}

/* --- Rôles et sites --- */
.cases{display:flex; flex-wrap:wrap; gap:8px 18px}
.case{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink2); cursor:pointer}
.case input{accent-color:var(--accent-ink); width:16px; height:16px}
.site{
  display:grid; grid-template-columns:auto 1.2fr 1.6fr 70px 1fr 1fr 32px;
  gap:6px; align-items:center; margin-bottom:8px;
}
.site input{
  font:inherit; font-size:13px; padding:6px 8px; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.site .jeton{white-space:nowrap}
@media (max-width:900px){ .site{grid-template-columns:auto 1fr 32px} }
.mdel{
  border:1px solid var(--field-line); background:transparent; color:var(--ink3);
  border-radius:3px; cursor:pointer; height:32px; font-size:12px; font-family:inherit;
}
.mdel:hover{border-color:var(--signal); color:var(--signal)}

/* --- Vigilance assurances --- */
.vigilance{
  display:grid; gap:3px; padding:10px 13px; margin-bottom:12px; border-radius:3px;
  font-size:12.5px; border-left:3px solid;
}
.vigilance.ok{background:var(--ok-soft); color:var(--ok); border-left-color:var(--ok)}
.vigilance.bientot{background:var(--accent-soft); color:var(--accent-ink); border-left-color:var(--or)}
.vigilance.ko{background:var(--signal-soft); color:var(--signal); border-left-color:var(--signal)}
.statut.attente{color:var(--accent-ink); border-color:var(--or); background:var(--accent-soft)}
.tuile.alerte{border-color:var(--signal)}
.tuile.alerte .chiffre{color:var(--signal)}

/* --- Vérification SIRET --- */
.verif{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 10px}
.verif .hint{max-width:66ch}
.verif-panneau{
  padding:11px 14px; margin:0 0 14px; border-radius:3px; font-size:12.5px; line-height:1.55;
  background:var(--panel); color:var(--ink2); border-left:3px solid var(--line);
}
.verif-panneau.ok{background:var(--ok-soft); color:var(--ok); border-left-color:var(--ok)}
.verif-panneau.bientot{background:var(--accent-soft); color:var(--accent-ink); border-left-color:var(--or)}
.verif-panneau.ko{background:var(--signal-soft); color:var(--signal); border-left-color:var(--signal)}
.verif-panneau i{opacity:.85}

/* --- Direction : comptes et délégations --- */
.provisoire{
  display:flex; flex-direction:column; gap:6px; padding:14px 18px; margin-bottom:16px;
  background:var(--accent-soft); border:1px dashed var(--or); border-radius:4px;
}
.provisoire b{font-size:14px}
.provisoire code{
  font-family:"IBM Plex Mono",monospace; font-size:17px; letter-spacing:.08em;
  background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:2px 9px;
}
.provisoire span{font-size:12.5px; color:var(--ink2); max-width:70ch}
.tableau tr.inactive{opacity:.5}
.rien{color:var(--ink3); font-size:12.5px}
.bandeau .lien-sortie + .lien-sortie{margin-left:12px}

/* --- Lignes de tableau cliquables --- */
.tableau tr[data-href]{cursor:pointer}
.tableau tr[data-href]:hover{background:var(--accent-soft)}
.tableau tr[data-href]:hover a{color:var(--accent-ink)}

/* --- Paramètres de prix --- */
.synthese{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:22px}
.bloc-syn{
  display:flex; flex-direction:column; gap:3px; padding:16px 18px;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--or);
  border-radius:4px; box-shadow:var(--ombre);
}
.bloc-syn.couvert{border-left-color:var(--ok)}
.bloc-syn .etiq{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3)}
.bloc-syn .val{font-family:"IBM Plex Mono",monospace; font-size:24px; font-weight:500; color:var(--accent-ink)}
.bloc-syn small{font-size:11.5px; color:var(--ink3)}
/*
 * Un tableau de paramètres ne s'étire pas jusqu'au bord de l'écran.
 *
 * Le gabarit est le même pour tous, mais le nombre de colonnes change : dix
 * pour l'encadrement, cinq pour les catégories de main d'œuvre, deux pour les
 * charges. À largeur totale imposée, chaque colonne reçoit sa part — et un
 * champ de pourcentage se retrouvait large de 400 pixels pendant que celui
 * d'à côté, dans un autre tableau, tenait dans 190.
 *
 * On borne donc le tableau, on fixe la largeur des colonnes de chiffres, et
 * on limite le champ de libellé. Les tableaux de deux colonnes et ceux de dix
 * se ressemblent enfin.
 */
.tab-param{margin-bottom:8px; max-width:1200px}
.tab-param th.chiffres, .tab-param td.chiffres{width:132px}
.tab-param td:first-child input, .tab-param td:first-child select{max-width:340px}
.tab-param td{padding:5px 8px}
.tab-param input,.tab-param select{
  font:inherit; font-size:13px; padding:5px 7px; width:100%; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.tab-param td.chiffres input{text-align:right; font-family:"IBM Plex Mono",monospace}
.tab-param td.chiffres{font-family:"IBM Plex Mono",monospace}
.tab-param td:last-child{width:34px}
.ajout{margin-bottom:6px}
.bloc-syn.recommande{border-left-color:var(--ok)}
.bloc-syn.recommande .val{color:var(--ok)}
.tab-param small.manque{color:var(--signal); font-weight:600}
.histo{margin-bottom:22px}
.histo summary{cursor:pointer; font-size:13px; color:var(--ink2); padding:6px 0}
.histo summary:hover{color:var(--accent-ink)}
.histo .tableau{margin-top:8px}

/* --- Contrôles avant enregistrement d'une commande --- */
.controles{display:grid; gap:10px}
.controle{
  display:flex; flex-direction:column; gap:3px; padding:12px 16px; border-radius:4px;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid;
}
.controle.ok{border-left-color:var(--ok)}
.controle.ko{border-left-color:var(--signal)}
.controle b{font-size:13.5px}
.controle.ok b{color:var(--ok)}
.controle.ko b{color:var(--signal)}
.controle span{font-size:12.5px; color:var(--ink2)}
.temoin{
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:3px;
  background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--or);
}
.bloc-syn.incomplet{border-left-color:var(--line)}
.bloc-syn.incomplet .val{color:var(--ink3)}
.tab-param td[data-calc]{color:var(--ink2)}
.tab-param td[data-calc] .manque{color:var(--signal); font-weight:600}
.choix-agence select{
  font:inherit; font-size:13.5px; padding:7px 10px; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.code-agence{
  font-family:"IBM Plex Mono",monospace; text-transform:uppercase; text-align:center;
  max-width:78px; font-weight:600;
}

/* --- Disposer d'une fiche tiers : archiver ou supprimer ------------------ */
.disposer{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:26px 0 8px; padding:14px 16px;
  border:1px solid var(--trait,var(--trait)); border-radius:6px;
  background:var(--carte2);
}
.disposer-texte{ flex:1 1 340px; display:flex; flex-direction:column; gap:3px; }
.disposer-texte b{ font-size:13px; }
.disposer-texte span{ font-size:12px; color:#6b6459; line-height:1.5; }
.disposer form{ margin:0; }
.bouton.danger{ border-color:var(--alerte); color:var(--alerte); background:#fff; }
.bouton.danger:hover{ background:var(--alerte); color:#fff; }

/* --- Quantité reprise d'une DPGF puis retouchée -------------------------- */
input.ecart-dpgf{
  border-color:var(--or); background:var(--or-clair);
  box-shadow:inset 3px 0 0 var(--or);
}

/* --- Commandes : imputation ---------------------------------------------- */
.grille-devis select{ width:100%; }
.grille-devis td small{ display:block; color:var(--ink3); font-size:11px; }

/* ======================================================================
   Accueil par rôle et gestion d'affaire
   Deux colonnes denses, la couleur réservée à l'état, jamais à la décoration.
   ====================================================================== */

.salut{ margin:4px 0 18px }
.salut h1{ margin:0; font-size:22px; letter-spacing:-.01em }
.salut p{ margin:2px 0 0; color:var(--ink3); font-size:12.5px }

.accueil{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start }
@media (max-width:1080px){ .accueil{ grid-template-columns:1fr } }
.colonne{ display:flex; flex-direction:column; gap:18px }

.bloc{
  border:1px solid var(--trait,var(--trait)); border-radius:5px; background:#fff; overflow:hidden;
}
.bloc h2{
  margin:0; padding:11px 15px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--bleu);
  background:var(--bleu-clair); border-bottom:1px solid var(--trait,var(--trait));
  display:flex; align-items:center; gap:9px;
}
.bloc h2.rouge{ color:var(--alerte); background:var(--alerte-clair) }
.bloc h2 .pastille{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto }
.bloc .aide{ padding:14px 15px; margin:0 }

.rangee{
  display:flex; align-items:center; gap:12px; padding:11px 15px;
  border-bottom:1px solid var(--trait2); text-decoration:none; color:inherit;
}
.rangee:last-child{ border-bottom:0 }
.rangee:hover{ background:var(--carte2) }
.rangee .etiq{
  flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--ink); border-radius:2px; color:var(--ink); white-space:nowrap;
}
.rangee .txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0 }
.rangee .txt b{ font-size:13px; font-weight:600 }
.rangee .txt small{ font-size:11.5px; color:var(--ink3) }
.rangee .val{ flex:0 0 auto; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums }
.rangee .marque{
  flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; background:var(--alerte-clair); color:var(--alerte); white-space:nowrap;
}
.rangee .marque.bloquant{ background:var(--alerte); color:#fff }
.perte{ color:var(--alerte) }
.gain{ color:var(--ok) }

.flux{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 15px; border-bottom:1px solid var(--trait2) }
.flux:last-child{ border-bottom:0 }
.flux-nom{
  flex:0 0 58px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink3);
}
.etape-flux{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:5px 9px; border:1px solid var(--trait,var(--trait)); border-radius:3px;
  text-decoration:none; color:inherit; min-width:58px; background:#fff;
}
.etape-flux:hover{ border-color:var(--bleu) }
.etape-flux b{ font-size:15px; font-variant-numeric:tabular-nums }
.etape-flux span{ font-size:10px; color:var(--ink3); text-align:center; line-height:1.2 }
.fleche{ color:var(--trait); font-style:normal; font-size:12px }

.paires{ display:grid; grid-template-columns:1fr 1fr; gap:0 }
.paire-c{
  display:flex; flex-direction:column; gap:3px; padding:13px 15px;
  border-right:1px solid var(--trait2); border-bottom:1px solid var(--trait2);
}
.paire-c:nth-child(2n){ border-right:0 }
.paire-c:nth-last-child(-n+2){ border-bottom:0 }
.paire-c span{ font-size:11.5px; color:var(--ink3) }
.paire-c b{ font-size:19px; font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* --- Bandeau de chiffres d'une affaire --- */
.bandeau-chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--trait,var(--trait)); border-radius:5px; background:#fff; overflow:hidden;
}
.tuile-chiffre{
  display:flex; flex-direction:column; gap:3px; padding:14px 16px;
  border-right:1px solid var(--trait2);
}
.tuile-chiffre:last-child{ border-right:0 }
.tuile-chiffre .etq{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink3);
}
.tuile-chiffre b{ font-size:20px; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.tuile-chiffre small{ font-size:11px; color:var(--ink3) }
/* La prévision de facturation se saisit là où elle se lit : dans sa tuile. */
.tuile-chiffre input.prevision{
  width:104px; text-align:right; font-size:19px; font-variant-numeric:tabular-nums;
  border:1px solid var(--or); border-radius:4px; padding:1px 6px; background:var(--or-clair);
}

/* La base de facturation du mois, en tête de la liste des affaires. */
.bandeau-prevision{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  border:1px solid var(--or); border-left:4px solid var(--or); border-radius:4px;
  background:var(--or-clair); padding:11px 15px; margin:0 0 16px; font-size:13px;
}
.bandeau-prevision b{ font-size:15px }
.bandeau-prevision span{ color:var(--ink3) }
.bandeau-prevision .manque{ color:var(--accent-ink); font-weight:600 }

/* --- La réception, ligne par ligne ---
   Chaque ligne a sa case et son bouton : une commande se réceptionne rarement
   d'un bloc. Une ligne reçue en totalité passe en vert et se tait. */
.recu-clos td{ background:var(--ok-soft) }
.recu-ok{ color:var(--ok); font-weight:600; font-size:12.5px }
.tab-param input.recu-q{ max-width:92px }
.tab-param small.recu-eur{ display:block; color:var(--ink3); font-size:11.5px; margin-top:2px }
.tab-param .bouton.valider{
  padding:5px 12px; font-size:12.5px; border-color:var(--ok); color:var(--ok);
}
.tab-param .bouton.valider:hover{ background:var(--ok-soft); color:var(--ok) }
.ensemble-recu{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  border:1px solid var(--line2); border-radius:5px; padding:11px 14px; margin:12px 0;
  background:var(--carte2);
}
.ensemble-recu .f{ margin:0 }
.ensemble-recu input{ max-width:110px }
.ensemble-recu .aide{ margin:0; max-width:52ch }

/* Le journal des réceptions : un mouvement négatif se lit comme tel. */
#journalReception .mvt-negatif td{ background:var(--signal-soft) }
#journalReception small.manque{ color:var(--signal) }
form.annul-recu{ display:flex; gap:6px; align-items:center }
form.annul-recu input{
  width:190px; padding:5px 8px; border:1px solid var(--field-line); border-radius:3px;
  font:12.5px/1.3 inherit; background:var(--field); color:var(--ink);
}

/* --- Le désengagement d'une commande ---
   Un engagement qui se dénoue est une décision : elle se lit d'un coup d'œil.
   Le montant libéré en tête à droite, là où l'œil le cherche ; le motif sur
   toute la largeur, parce que c'est une phrase qu'on écrit et non un code
   qu'on tape ; le bouton détaché à droite, en rouge quand l'action retire
   quelque chose. */
.deseng{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--ombre); overflow:hidden; margin-top:22px;
  /* Un tiers de l'écran : une carte qui court sur toute la largeur pour une
     phrase et un champ pèse plus que ce qu'elle dit. */
  max-width:620px;
}
.deseng-tete{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:13px 18px; border-bottom:1px solid var(--trait2); background:var(--carte2);
}
.deseng-tete b{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--accent-ink);
}
.deseng-tete .chiffre{
  margin-left:auto; font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; color:var(--ink);
}
.deseng-tete .chiffre small{
  display:block; font-size:10.5px; font-weight:400; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3); text-align:right;
}
.deseng-corps{ padding:15px 18px 17px }
.deseng p.aide{ margin:0 0 14px; max-width:66ch }
.deseng p.aide b{ color:var(--ink); font-variant-numeric:tabular-nums }
.deseng .qui{ font-size:12.5px; color:var(--ink2); margin:0 0 12px }
.deseng .qui b{ color:var(--ink) }
.deseng .citation{
  border-left:3px solid var(--or); padding:4px 0 4px 12px; margin:0 0 14px;
  color:var(--ink); font-size:13.5px;
}
.champ-motif{ display:flex; flex-direction:column; gap:5px }
.champ-motif span{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); font-weight:600;
}
.champ-motif input{
  width:100%; padding:9px 11px; border:1px solid var(--field-line); border-radius:4px;
  background:var(--field); color:var(--ink); font:14px/1.4 inherit;
}
.deseng-pied{ display:flex; align-items:center; gap:12px; margin-top:14px }
.deseng-pied .note{ font-size:12.5px; color:var(--ink3) }
.deseng-pied .droite{ margin-left:auto }
.deseng .bouton.danger{ border-color:var(--signal); color:var(--signal); background:var(--paper) }
.deseng .bouton.danger:hover{ background:var(--signal-soft); color:var(--signal) }
.deseng.attente{ border-color:var(--or) }
.deseng.attente .deseng-tete{ background:var(--or-clair); border-bottom-color:#E8D6B4 }

/* --- Tableau de gestion --- */
.tableau.gestion td, .tableau.gestion th{ font-size:12.5px; padding:7px 9px }
.tableau.gestion tr.groupe td{
  background:var(--bleu-clair); font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bleu); padding:7px 9px;
}
.tableau.gestion td small{ display:block; color:var(--ink3); font-size:11px }
.tableau.gestion .raf{ background:var(--or-clair) }
.tableau.gestion th.raf{ background:var(--bleu); color:#fff }

/* Le reste à faire : la seule colonne qu'on remplit, la seule teintée. Elle se
   repère du premier coup d'œil au milieu d'un tableau de douze colonnes. */
.tableau.gestion td.or{ background:var(--or-clair) }
.tableau.gestion th.or{ background:var(--or); color:#fff }
.tableau.gestion th.or small{ color:#fff; opacity:.82 }
.tableau.gestion td.or input.num{ max-width:88px }
.tableau.gestion td.or input.h{ max-width:56px }
.tableau.gestion td.or small.taux{ color:var(--ink3); font-size:10.5px }

/* Les titres de BLOC sont centrés au-dessus de leur groupe — ils le coiffent.
   Les sous-titres, eux, restent alignés à droite sur les chiffres qu'ils
   nomment : un intitulé centré au-dessus d'une colonne de nombres alignés à
   droite s'en écarte, et l'œil ne sait plus lequel il lit. */
.tableau.gestion thead th.groupe{ text-align:center }

/* Le mouvement de transfert : gris. Un transfert déplace du budget, il n'en
   crée ni n'en détruit — le vert et le rouge restent réservés à la marge. */
.tableau.gestion td small.mouvement{ color:var(--ink3); font-weight:600 }
.tableau.gestion thead tr.etage1 th.groupe[rowspan]{ vertical-align:bottom }
.tableau.gestion .fdv{ color:var(--ink3) }
.tableau.gestion .residuel{ color:var(--alerte); font-weight:600 }
.tableau.gestion tfoot td{ border-top:2px solid var(--ink); font-weight:700; background:var(--carte2) }
.tableau.gestion input.num{ text-align:right; max-width:110px }
.tableau.gestion tr.ligne-alerte{ background:var(--alerte-clair) }

.alerte-raf{
  border:1px solid var(--alerte); border-left:4px solid var(--alerte); border-radius:4px;
  background:var(--alerte-clair); padding:12px 15px; margin:16px 0; font-size:12.5px; line-height:1.55;
}
.alerte-raf b{ display:block; margin-bottom:5px; color:var(--alerte) }
.alerte-raf div{ margin-top:4px }

.deux-colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0 }
@media (max-width:900px){ .deux-colonnes{ grid-template-columns:1fr } }
.encart{ border:1px solid var(--trait,var(--trait)); border-radius:5px; padding:14px 16px; background:#fff }
.encart>b{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--bleu); margin-bottom:10px }
.encart .paire{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13px }
.encart .paire b{ font-variant-numeric:tabular-nums }
.encart .etape{ display:flex; align-items:center; gap:9px; padding:5px 0; font-size:12.5px }
.encart .etape i{
  font-style:normal; width:19px; height:19px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bleu-clair); color:var(--bleu); font-size:11px; font-weight:700;
}

/* --- Justification : petite au repos, grande quand on écrit dedans ------- */
.tableau.gestion td.just{ position:relative; min-width:120px }
.tableau.gestion td.just textarea{
  width:100%; min-width:110px; height:30px; resize:none; overflow:hidden;
  font-size:12px; padding:5px 7px; line-height:1.35;
  transition:height .12s ease, box-shadow .12s ease;
}
.tableau.gestion td.just textarea:focus{
  position:absolute; right:9px; top:4px; z-index:8;
  width:340px; height:76px; overflow:auto; resize:vertical;
  box-shadow:0 6px 22px rgba(11,33,56,.18);
}
.tableau.gestion tr.sous-ligne td{
  padding:4px 9px 9px 9px; border-top:0; font-size:12px; color:var(--ink2,#42586E);
  background:var(--carte2,#F7FAFC);
}
.etq-just{
  display:inline-block; margin-right:8px; font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bleu,#1B5C97);
}
@media (prefers-reduced-motion:reduce){ .tableau.gestion td.just textarea{ transition:none } }


/* --- Ajustements du bleu marine ---------------------------------------- */
.tableau thead th{ background:var(--marine); color:#fff; border-color:var(--marine) }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tableau thead th{ background:#162634; color:var(--ink) }
}
:root[data-theme="dark"] .tableau thead th{ background:#162634; color:var(--ink) }
.tableau.gestion th.raf{ background:var(--or); color:#fff }
.tableau tbody tr:hover{ background:var(--carte2) }
.tableau.gestion tfoot td{ border-top-color:var(--marine) }
a{ color:var(--bleu) }

/* --- Lignes libres sous un poste ---------------------------------------- */
.tableau.gestion td.outils{ white-space:nowrap; width:1%; text-align:right; padding:5px 7px }
/* Icône « aperçu » en bout de ligne (devis, factures) : discrète, accent au survol. */
.apercu-cell,.apercu-col{ width:1%; text-align:center; white-space:nowrap }
.apercu{ display:inline-flex; align-items:center; justify-content:center; color:var(--ink3);
  padding:4px; border-radius:7px; line-height:0 }
.apercu:hover{ color:var(--accent-ink); background:var(--accent-soft) }
.mini{
  border:1px solid var(--field-line); background:transparent; color:var(--ink3);
  border-radius:3px; cursor:pointer; width:22px; height:22px; line-height:1;
  font-size:13px; font-family:inherit; padding:0; margin-left:3px;
}
.mini:hover{ border-color:var(--bleu); color:var(--bleu) }
.mini[data-sup]:hover{ border-color:var(--alerte); color:var(--alerte) }
.mini.plus{ border-color:var(--bleu); color:var(--bleu); font-weight:700 }
.mini.plus:hover{ background:var(--bleu); color:#fff }
.tableau.gestion .suite{ color:var(--ink3); padding-left:14px }
.tableau.gestion small.manquant{ color:var(--accent-ink) }
.tableau.gestion input.nom-ligne{
  display:block; margin-top:4px; font-size:11.5px; padding:3px 6px; max-width:190px;
}
.tableau.gestion tr.neuve td{ background:var(--carte2) }

/* --- Transferts de budget ------------------------------------------------ */
fieldset.transferts{ margin-top:18px }
.grille-transfert{
  display:grid; grid-template-columns:1.2fr 1.2fr .7fr 2fr auto;
  gap:10px; align-items:end; margin-top:12px;
}
@media (max-width:900px){ .grille-transfert{ grid-template-columns:1fr 1fr } }

/* --- Tableau de gestion, présentation PFA -------------------------------- */
.cadre-tableau{
  background:var(--carte,#fff); border:1px solid var(--trait); border-radius:5px;
  overflow:auto; max-height:74vh; margin-top:4px;
}
.tableau.pfa{ border:0; border-radius:0; margin:0 }
.tableau.pfa th, .tableau.pfa td{ white-space:nowrap; border-bottom:1px solid var(--trait2,#EDF2F7) }
.tableau.pfa thead th{ position:sticky; z-index:30; background:var(--marine); color:#fff }
.tableau.pfa thead tr.etage1 th{
  top:0; font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:#BDD4E8;
  border-bottom:1px solid rgba(255,255,255,.18); font-weight:600;
}
.tableau.pfa thead tr.etage2 th{
  top:27px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.tableau.pfa thead th.sep{ border-left:1px solid rgba(255,255,255,.22) }
.tableau.pfa thead th.saisie{ background:var(--or); color:#fff }
.tableau.pfa td.sep{ border-left:1px solid var(--trait) }
.tableau.pfa td.saisie{ background:var(--or-clair) }
.tableau.pfa th.fige, .tableau.pfa td.fige{
  position:sticky; left:0; z-index:20; background:#fff; text-align:left;
  min-width:250px; max-width:250px; white-space:normal;
}
.tableau.pfa thead th.fige{ background:var(--marine); z-index:40 }
.tableau.pfa tr.bloc td{
  background:var(--bleu-clair); color:var(--bleu); font-weight:700;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.13em;
}
.tableau.pfa tr.bloc td.chiffres{ font-size:12px; text-transform:none; letter-spacing:0 }
.tableau.pfa tr.bloc td.fige{ background:var(--bleu-clair) }
.tableau.pfa tr.famille td{ background:var(--carte2); font-weight:700 }
.tableau.pfa tr.famille td.fige{ background:var(--carte2) }
.tableau.pfa tr.ligne td.fige{ padding-left:20px }
.tableau.pfa tr.ligne:hover td{ background:var(--carte2) }
.tableau.pfa tr.ligne:hover td.fige{ background:var(--carte2) }
.tableau.pfa tr.ligne:hover td.saisie{ background:#F6EAD3 }
.tableau.pfa tr.ligne-attente td.fige{ border-left:3px solid var(--or) }
.tableau.pfa .code{ font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ink2); font-size:11.5px }
.tableau.pfa .nom{ display:block; color:var(--ink3); font-size:11px }
.tableau.pfa .h{ color:var(--ink3) }
.tableau.pfa tfoot td{
  position:sticky; bottom:0; z-index:25; background:var(--carte2);
  border-top:1px solid var(--line,var(--trait)); font-weight:600;
}
.tableau.pfa tfoot tr.marge td{ background:var(--marine); color:#fff; border-top:2px solid var(--marine) }
.tableau.pfa tfoot tr.marge td.fige{ background:var(--marine); color:#fff }
.tableau.pfa tfoot tr.marge .pc{ display:block; color:#F0D9AE; font-size:11px }
.tableau.pfa tfoot tr.marge .gain{ color:#7FD3C6 }
.tableau.pfa tfoot tr.marge .perte{ color:#F0A88C }
.plier{
  border:0; background:none; cursor:pointer; color:inherit; font:inherit; font-weight:inherit;
  display:inline-flex; align-items:center; gap:7px; padding:0; text-align:left; width:100%;
}
.plier i{ font-style:normal; width:12px; display:inline-block; transition:transform .12s ease }
tr.replie .plier i{ transform:rotate(-90deg) }
.tableau.pfa input.num{ max-width:96px }
.tableau.pfa input.nom-ligne{ display:block; margin-top:4px; font-size:11.5px; padding:3px 6px; max-width:185px }

/* --- Transferts : une colonne qu'on ouvre, pas un formulaire à part ------- */
.col-transfert{ display:none }
body.transfert .col-transfert{ display:table-cell }
.barre-transfert{
  display:none; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; padding:12px 15px;
  border:1px solid var(--or); border-left:4px solid var(--or); border-radius:5px; background:var(--or-clair);
}
body.transfert .barre-transfert{ display:flex }
.barre-transfert .solde{ font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:600 }
.barre-transfert .motif{
  flex:1; min-width:230px; font:inherit; font-size:12.5px; padding:6px 9px;
  border:1px solid var(--field-line); border-radius:3px; background:var(--field); color:var(--ink);
}
.confirme{ display:none; flex:1 0 100%; margin-top:4px; padding:12px 15px; border-radius:5px;
  border:1px solid var(--alerte); border-left:4px solid var(--alerte);
  background:var(--alerte-clair); font-size:12.5px; line-height:1.55 }
.confirme.visible{ display:block }
.confirme b{ display:block; margin-bottom:4px; color:var(--alerte) }
.confirme label{ display:flex; gap:8px; align-items:flex-start; margin-top:9px; cursor:pointer }

.sous-tableau{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px }
.sous-tableau .aide{ margin:0 }
[hidden]{ display:none !important }
.ajout-vente{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end;
  margin-top:12px; padding:13px 15px; border:1px solid var(--trait); border-radius:5px; background:var(--carte2);
}
.ajout-vente .grand{ grid-column:span 2 }
.lien-retablir{
  border:1px solid var(--line,var(--trait)); background:transparent; color:var(--bleu);
  border-radius:3px; cursor:pointer; font:inherit; font-size:11.5px; padding:2px 8px; margin-right:5px;
}
.lien-retablir:hover{ border-color:var(--bleu); background:var(--bleu-clair) }
.alerte-raf.attente{ border-color:var(--or); border-left-color:var(--or); background:var(--or-clair) }
.alerte-raf.attente b{ color:var(--or) }

/* --- Familles repliées, lignes d'ajout, panneau central ------------------ */
.tableau.pfa tr.famille td{ cursor:default }
.tableau.pfa tr.bloc.famille td{ background:var(--bleu-clair); color:var(--bleu) }
.tableau.pfa tr.bloc.famille td.fige .plier{ text-transform:uppercase; letter-spacing:.13em; font-size:10.5px }
.tableau.pfa tr.ligne.ajout td{ background:var(--carte2) }
.tableau.pfa tr.ligne.ajout .aide{ display:flex; align-items:center; gap:9px }
.mini-select{
  font:inherit; font-size:11.5px; padding:3px 6px; border-radius:3px; max-width:190px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.detail-ligne{
  flex:1; min-width:180px; font:inherit; font-size:11.5px; padding:3px 7px; border-radius:3px;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink);
}
.bouton.mini-bouton{ padding:4px 10px; font-size:11.5px; white-space:nowrap }
.tableau.pfa input.faux{ border-color:var(--alerte); background:var(--alerte-clair); color:var(--alerte) }
.tableau.pfa tr.vise td{ background:var(--alerte-clair) !important }

/* La barre de transfert reste sous les yeux tant qu'on saisit : un bouton
   qu'il faut aller chercher au bas d'un long tableau n'existe pas. */
body.transfert .barre-transfert{
  position:sticky; bottom:0; z-index:45; box-shadow:0 -6px 18px rgba(11,33,56,.10);
}
.barre-transfert .case{ display:flex; align-items:center; gap:7px; font-size:12.5px }

.panneau-fond{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(11,33,56,.38); padding:20px;
}
.panneau{
  background:var(--carte,#fff); border-radius:6px; padding:22px 26px; max-width:520px;
  box-shadow:0 18px 50px rgba(11,33,56,.28); border-top:4px solid var(--alerte);
}
.panneau .p-titre{ display:block; font-size:15px; color:var(--alerte); margin-bottom:8px }
.panneau .p-texte{ margin:0 0 16px; font-size:13px; line-height:1.6; color:var(--ink2) }

/* Colonne d'activité des listes de tiers : deux lignes serrées, le chiffre
   en tête et son contexte dessous, sans l'interligne d'un paragraphe. */
.suivi-tiers{line-height:1.35}
.suivi-tiers small{display:block; color:var(--ink3); font-size:11.5px}

/* ======================================================================
   Fiches du personnel et parc
   Les échéances portent la couleur : vert ce qui est à jour, ambre ce qui
   approche, rouge ce qui est passé. Rien d'autre n'est coloré.
   ====================================================================== */
.aide-champ{font-size:11px; color:var(--ink3); line-height:1.35; margin-top:2px}
.echeances{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 18px}
.statut.attente{color:var(--or); border-color:var(--or); background:var(--or-clair)}
.tableau tfoot td{border-top:2px solid var(--line); background:var(--panel); font-size:13.5px}
#formFiche fieldset .grille{margin-top:10px}
.mdel{
  font:inherit; font-size:15px; line-height:1; padding:3px 8px; cursor:pointer;
  border:1px solid var(--field-line); background:var(--field); color:var(--ink3); border-radius:3px;
}
.mdel:hover{border-color:var(--signal); color:var(--signal)}

/* Une fiche incomplète se signale en ambre, pas en rouge : ce n'est pas une
   faute, c'est du travail qui reste. */
.tableau small.manque{color:var(--or); font-weight:600}

/* L'auteur d'un reste à faire, sous sa case : discret, mais présent. Une
   estimation sans auteur ne se discute pas — on ne sait pas à qui la demander. */
.tableau.pfa small.auteur{display:block; font-size:10.5px; color:var(--ink3); margin-top:2px; text-align:right}
.tab-profils td{font-size:12.5px}
.tab-profils th{font-size:9.5px; letter-spacing:.06em}
.tab-profils tr.courante{background:var(--accent-soft)}
.tab-profils tr.courante td{font-weight:600}
.oui-p{color:var(--ok); font-weight:700}
.non-p{color:var(--ink3)}

/* ======================================================================
   Documents à imprimer — avancement et facture
   Une feuille, pas un écran : marges généreuses, aucune couleur décorative,
   et tout ce qui n'appartient pas au document disparaît à l'impression.
   ====================================================================== */
.doc{max-width:900px; margin:0 auto; padding:34px 40px; background:var(--paper); color:var(--ink)}
.doc-entete{display:flex; justify-content:space-between; gap:40px; margin-bottom:30px; font-size:13px}
.doc-eux{text-align:right}
.doc-titre{font-size:21px; margin:0 0 16px; padding-bottom:8px; border-bottom:2px solid var(--ink)}
.doc-ref{width:100%; border-collapse:collapse; margin-bottom:18px; font-size:13px}
.doc-ref th{text-align:left; font-weight:600; padding:3px 12px 3px 0; width:190px; vertical-align:top; color:var(--ink2)}
.doc-ref td{padding:3px 0}
.doc-table{width:100%; border-collapse:collapse; font-size:12.5px; margin:14px 0}
.doc-table th,.doc-table td{padding:5px 7px; border-bottom:1px solid var(--line2); text-align:left}
.doc-table thead th{border-bottom:1.5px solid var(--ink); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em}
.doc-table tfoot th{border-top:1.5px solid var(--ink); border-bottom:0; font-size:13px; padding-top:9px}
.doc-table .chiffres{font-family:"IBM Plex Mono",monospace}
.doc-lot td{font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding-top:12px; border-bottom:0}
.doc-auto td{font-style:italic; color:var(--ink2)}
.doc-recap{margin-left:auto; border-collapse:collapse; font-size:13.5px; margin-top:16px; min-width:340px}
.doc-recap th{text-align:left; font-weight:400; padding:4px 22px 4px 0}
.doc-recap td{font-family:"IBM Plex Mono",monospace; text-align:right; padding:4px 0}
.doc-recap .doc-total th,.doc-recap .doc-total td{font-weight:700; border-top:1.5px solid var(--ink); padding-top:7px; font-size:15px}
.doc-note{font-size:12.5px; color:var(--ink2); margin:14px 0; max-width:76ch}
.doc-mentions{font-size:10.5px; color:var(--ink3); line-height:1.5; margin-top:26px;
  padding-top:10px; border-top:1px solid var(--line2)}
.doc-signatures{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px}
.doc-case b{display:block; font-size:12px; margin-bottom:8px}
.doc-lignes{display:flex; gap:16px; font-size:11px; color:var(--ink3); margin-bottom:4px}
.doc-lignes span{flex:1; border-bottom:1px solid var(--line); padding-bottom:14px}
.doc-cadre{border:1px solid var(--line); height:92px; font-size:11px; color:var(--ink3); padding:5px 7px}
.doc-cadre-tampon{display:flex; align-items:center; justify-content:center}
.doc-cadre-tampon img{object-fit:contain}
.doc-tampon-vide{font-style:italic; color:var(--ink3)}
@media print{.doc-tampon-vide{color:#999}}
.doc-imprimer{margin-top:28px; text-align:right}
.doc-cg{margin-top:34px}
.doc-cg-titre{font-size:13px; margin:0 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line)}
/* Deux colonnes, petit format : les conditions générales tiennent sur UNE page. */
.doc-cg-corps{white-space:pre-wrap; font-size:8px; line-height:1.32; color:var(--ink2,#33414f);
  text-align:justify; column-count:2; column-gap:22px; -webkit-column-count:2; orphans:2; widows:2}
@media print{.doc-cg{page-break-before:always; break-before:page} .doc-imprimer{display:none}}
@media print{
  body.nue{display:block; background:#fff; padding:0}
  .doc{max-width:none; padding:0; box-shadow:none}
  .doc-imprimer{display:none}
}
.tableau.pfa tr.avenant td.fige{border-left:3px solid var(--or)}
.tableau.pfa tr.auto td{font-style:italic; color:var(--ink2)}

/* Second niveau de menu : discret, sous le bandeau, seulement sur l'onglet courant. */
.sous-onglets{
  display:flex; gap:2px; padding:0 30px; background:#0B2A47;
  border-bottom:1px solid #0A2942;
}
.sous-onglets a{
  padding:7px 13px; font-size:12.5px; font-weight:600; color:#C7D4E1;
  text-decoration:none; border-bottom:2px solid transparent;
}
.sous-onglets a:hover{color:#FFFFFF; border-bottom-color:#C8962A}
.sous-onglets a.courant{color:#FFFFFF; border-bottom-color:#C8962A}
/* Les chapitres du menu RH : un titre de section, pas un lien. */
.sous-onglets .sous-groupe{
  align-self:center; padding:0 8px 0 12px; margin-left:6px; white-space:nowrap;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#7E93A8; border-left:1px solid #1B3E5E;
}
.sous-onglets .sous-groupe:first-child{border-left:none; margin-left:0; padding-left:0}

/* Le menu à familles de l'onglet RH : chaque famille est un menu déroulant. */
.sous-onglets.sous-familles{overflow:visible; flex-wrap:wrap}
.sous-familles details.famille{position:relative}
.sous-familles summary{
  list-style:none; cursor:pointer; user-select:none; white-space:nowrap;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:#C7D4E1;
  border-bottom:2px solid transparent;
}
.sous-familles summary:hover{color:#FFFFFF}
.sous-familles summary::-webkit-details-marker{display:none}
.sous-familles summary::after{content:"▾"; font-size:9px; margin-left:5px; opacity:.55}
.sous-familles details[open] summary{color:#FFFFFF; border-bottom-color:#C8962A}
.sous-familles .menu{
  position:absolute; top:100%; left:0; z-index:60; min-width:190px;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-top:none;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.sous-familles .menu a, .sous-familles .menu .ferme{
  padding:9px 15px; font-size:12.5px; font-weight:600; color:var(--ink2);
  text-decoration:none; border-bottom:1px solid var(--line);
}
.sous-familles .menu a:last-child, .sous-familles .menu .ferme:last-child{border-bottom:none}
.sous-familles .menu a:hover{background:var(--ok-soft); color:var(--accent-ink)}

/* La grille des accès (Direction) : large, elle défile dans son cadre. */
.table-large{overflow-x:auto}
.tab-acces{min-width:100%}
.tab-acces th.acc-col{text-align:center; font-size:11px; font-weight:600; white-space:nowrap; padding:6px 4px; vertical-align:bottom}
.tab-acces td.acc-case{text-align:center; padding:6px 4px}
.tab-acces .acc-nom{position:sticky; left:0; background:var(--panel); z-index:1; white-space:nowrap}
.tab-acces td.acc-nom small{display:block; color:var(--ink2); font-weight:400}

/* Bibliothèque : le moins cher se voit d'un coup d'œil, l'écart aussi. */
.tableau tr.premier td{background:var(--ok-soft)}
.tableau td.prix-unitaire b{font-family:"IBM Plex Mono",monospace; font-size:15px; color:var(--accent-ink)}
.ecart{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--signal)}

/* Le cadre de validation du document d'avancement : une seule case, et l'on
   précise dedans qui signe — parfois la maîtrise d'œuvre seule, parfois les deux. */
.doc-case-large{grid-column:1 / -1}
.doc-visa-nature{font-size:11px; color:var(--ink3); margin:2px 0 8px}
.doc-coches{display:flex; gap:34px; font-size:12.5px; margin-bottom:14px}

/* Une fiche en consultation : les champs restent lisibles, mais on voit
   d'un coup d'œil qu'ils ne se saisissent pas. */
.lecture-seule input,.lecture-seule select{background:var(--panel); color:var(--ink2); cursor:not-allowed}

/* ======================================================================
   L'accueil
   Trois questions, dans l'ordre : où en est-on, qu'est-ce qui m'attend,
   qu'est-ce qui cloche. La couleur ne sert qu'à l'urgence.
   ====================================================================== */
.bonjour{font-size:26px; margin:0 0 4px}
.sous-accueil{color:var(--ink2); font-size:14px; margin:0 0 20px}

.carte{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--ombre); margin-bottom:14px; overflow:hidden;
}
.carte h2{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent-ink); margin:0; padding:12px 16px;
  border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:10px;
}
.carte h2 .droite{margin-left:auto; font-weight:400; text-transform:none; letter-spacing:0;
  font-size:11px; color:var(--ink3)}
.carte .compte{
  font-family:"IBM Plex Mono",monospace; font-size:11px; background:var(--accent-soft);
  border:1px solid var(--line); border-radius:10px; padding:1px 8px; color:var(--accent-ink);
}
.carte .vide{padding:16px; margin:0; color:var(--ink3); font-size:13px}

.tuiles-accueil{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tuiles-accueil .tuile{
  padding:14px 16px; border-right:1px solid var(--line2); box-shadow:none;
  border-radius:0; border-top:0; border-bottom:0; border-left:0; background:transparent;
}
.tuiles-accueil .tuile:last-child{border-right:0}
.tuiles-accueil .etq{display:block; font-size:10px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--ink3); font-weight:600}
.tuiles-accueil b{font-family:"IBM Plex Mono",monospace; font-size:22px; font-weight:500;
  display:block; margin-top:3px; color:var(--accent-ink)}
.tuiles-accueil b.perte{color:var(--signal)}
.tuiles-accueil b.gain{color:var(--ok)}
.tuiles-accueil small{font-size:11px; color:var(--ink3)}

.grille-accueil{display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start}
@media (max-width:1100px){ .grille-accueil{grid-template-columns:1fr} }
.colonne-droite{display:grid; gap:14px; align-content:start}

/* Une tâche : la pastille dit l'urgence, le titre dit quoi, le délai dit quand. */
.tache{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:baseline;
  padding:11px 16px; border-bottom:1px solid var(--trait2); text-decoration:none; color:inherit;
}
.tache:last-child{border-bottom:0}
.tache:hover{background:var(--accent-soft)}
.tache .pastille{width:8px; height:8px; border-radius:50%; background:var(--line); display:block; margin-top:5px}
.tache.rouge .pastille{background:var(--signal)}
.tache.or .pastille{background:var(--or)}
.tache b{font-size:13.5px; font-weight:600; display:block}
.tache small{display:block; color:var(--ink2); font-size:12px; margin-top:2px; line-height:1.45}
.tache .delai{font-size:11px; color:var(--ink3); white-space:nowrap; text-align:right}
/* L'âge sous le délai : ce qui attend depuis longtemps doit se voir de loin. */
.tache .delai .age{display:block; font-style:normal; font-size:10.5px; margin-top:2px; color:var(--ink3)}
.tache.rouge .delai .age{color:var(--signal)}
.tache.or .delai .age{color:var(--or)}

/* --- Le tiroir de l'accueil : replié, discret, en bas de page. ----------- */
.tiroir-accueil{margin:18px 0 6px; border-top:1px solid var(--trait2); padding-top:12px}
.tiroir-accueil>summary{
  cursor:pointer; font-size:12.5px; color:var(--ink2); list-style:none;
  display:inline-flex; align-items:center; gap:7px; padding:5px 0;
}
.tiroir-accueil>summary::-webkit-details-marker{display:none}
.tiroir-accueil>summary::before{content:'▸'; font-size:11px; color:var(--ink3)}
.tiroir-accueil[open]>summary::before{content:'▾'}
.tiroir-accueil>summary:hover{color:var(--ink)}
.tiroir-accueil form{margin-top:10px; max-width:940px}
.tiroir-groupes{display:grid; gap:10px; margin-top:10px}
.tiroir-groupes fieldset{border:1px solid var(--trait2); border-radius:8px; padding:9px 13px 11px}
.tiroir-groupes legend{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); padding:0 5px}
.tiroir-groupes label{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  margin:3px 18px 3px 0; white-space:nowrap;
}
.tiroir-groupes label.epingle{color:var(--ink3)}
.tiroir-groupes label em{font-style:normal; font-size:11px; color:var(--ink3)}

/* Une ligne copiée de la semaine précédente : hachurée, jusqu'à sa validation.
   Elle charge la marge d'un chantier comme une heure pointée — celui qui valide
   doit voir qu'elle a été recopiée et non constatée. */
.pt-ligne.est-copie{
  background-image:repeating-linear-gradient(135deg,transparent 0 7px,var(--or-clair) 7px 14px);
  border-radius:7px;
}

/* Le logo sur les pièces imprimées. Discret, en tête du bloc émetteur : une
   facture n'est pas une affiche, mais elle doit se reconnaître d'un regard. */
.doc-logo{height:38px; width:auto; display:block; margin-bottom:8px}
.doc-nous b{display:block}
.doc-nous div{line-height:1.45}
@media print{ .doc-logo{height:34px} }

/* --- La grille du mois ----------------------------------------------------
   Trente et une colonnes et une ligne par personne : c'est dense par nature.
   On garde donc les cases petites, la colonne des noms figée à gauche, et le
   défilement horizontal à l'intérieur du cadre — jamais sur la page. */
.pt-grille-mois{overflow-x:auto; border:1px solid var(--trait); border-radius:9px; background:var(--paper)}
.grille-mois{margin:0; border:0; font-size:12px; border-collapse:separate; border-spacing:0}
.grille-mois th,.grille-mois td{padding:4px 3px; border-bottom:1px solid var(--trait2)}
.grille-mois .pt-qui{
  position:sticky; left:0; z-index:2; background:var(--paper);
  min-width:158px; text-align:left; padding-left:12px; border-right:1px solid var(--trait);
}
.grille-mois thead th.pt-qui{z-index:3; background:var(--marine); color:#fff; border-right-color:var(--marine)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .grille-mois thead th.pt-qui{background:#162634; color:var(--ink)}
}
:root[data-theme="dark"] .grille-mois thead th.pt-qui{background:#162634; color:var(--ink)}
.grille-mois thead th.pt-j{background:var(--marine); color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .grille-mois thead th.pt-j{background:#162634; color:var(--ink2)}
}
:root[data-theme="dark"] .grille-mois thead th.pt-j{background:#162634; color:var(--ink2)}
.grille-mois thead th.pt-j small{color:rgba(255,255,255,.62)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .grille-mois thead th.pt-j small{color:var(--ink3)}
}
:root[data-theme="dark"] .grille-mois thead th.pt-j small{color:var(--ink3)}
.grille-mois thead th.pt-j.week,.grille-mois thead th.pt-j.ferie{opacity:.6}
.grille-mois tfoot td.pt-qui{background:var(--paper)}
.grille-mois .pt-qui a{text-decoration:none; color:inherit}
.grille-mois .pt-qui small{display:block; color:var(--ink3); font-size:10.5px}
.grille-mois th.pt-j{
  width:26px; min-width:26px; text-align:center; font-weight:600; color:var(--ink2);
  font-size:11px; line-height:1.15; padding:5px 2px;
}
.grille-mois th.pt-j small{display:block; color:var(--ink3); font-size:9.5px; font-weight:400; text-transform:uppercase}
.grille-mois td.pt-c{
  width:26px; min-width:26px; text-align:center; line-height:1.1; padding:3px 2px;
}
.grille-mois td.pt-c b{display:block; font-size:9.5px; font-weight:700; letter-spacing:.02em}
.grille-mois td.pt-c i{display:block; font-style:normal; font-size:10px; color:var(--ink3)}
.grille-mois td.pt-c.trav{background:var(--accent-soft); color:var(--accent-ink)}
.grille-mois td.pt-c.abs{background:var(--or-clair); color:var(--or)}
.grille-mois td.pt-c.autre{background:var(--trait2); color:var(--ink2)}
.grille-mois td.pt-c.multi{
  background-image:linear-gradient(135deg,transparent 46%,var(--line) 46%,var(--line) 54%,transparent 54%);
}
.grille-mois .week,.grille-mois th.week{background:var(--ground)}
.grille-mois .ferie,.grille-mois th.ferie{background:var(--ground); color:var(--ink3)}
.grille-mois th.ferie{box-shadow:inset 0 -2px 0 var(--line)}
.grille-mois td.pt-c.vide.week,.grille-mois td.pt-c.vide.ferie{background:var(--ground)}
.grille-mois tfoot td{border-top:1px solid var(--line); border-bottom:0; font-weight:600; color:var(--ink2)}
.grille-mois td.somme{font-size:10.5px; text-align:center}
.grille-mois .attention{font-size:10.5px}

/* --- La fin de vie d'une affaire ------------------------------------------
   Un bloc qui ne crie pas : il dit où en est l'affaire et ce qui manque pour
   la fermer. Les conditions réglées s'effacent, celles qui restent se voient. */
.fin-affaire{margin:18px 0}
.fin-affaire.close{opacity:.92}
details.fin-affaire{border:1px dashed var(--trait); border-radius:9px; padding:10px 14px; background:var(--carte2)}
details.fin-affaire>summary{
  cursor:pointer; font-size:12.5px; color:var(--ink2); list-style:none;
  display:inline-flex; align-items:center; gap:7px;
}
details.fin-affaire>summary::-webkit-details-marker{display:none}
details.fin-affaire>summary::before{content:'▸'; font-size:11px; color:var(--ink3)}
details.fin-affaire[open]>summary::before{content:'▾'}
details.fin-affaire>summary:hover{color:var(--ink)}

/* Les deux étapes de la fin de vie, toujours visibles toutes les deux : on doit
   comprendre où l'on va avant de poser la première. */
.etapes-fin{list-style:none; margin:12px 0; padding:0; display:grid; gap:12px}
.etapes-fin.serree{gap:6px; margin:10px 0 14px}
.etapes-fin li{
  padding:11px 14px; border-radius:9px; border:1px solid var(--trait2); background:var(--carte2);
}
.etapes-fin li b{display:block; font-size:13px}
.etapes-fin li small{display:block; color:var(--ink2); font-size:12px; line-height:1.5; margin-top:3px}
.etapes-fin li.active{border-color:var(--line); background:var(--paper)}
.etapes-fin li.grise{opacity:.62}
.etapes-fin li.grise b{color:var(--ink2)}
.etapes-fin li.faite{border-color:var(--ok); background:var(--ok-soft)}
.etapes-fin li.faite b{color:var(--ok)}
.etapes-fin form{margin-top:9px}

.controles-cloture{list-style:none; margin:12px 0 4px; padding:0; display:grid; gap:6px}
.controles-cloture li{display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:baseline; font-size:13px}
.controles-cloture .coche{
  width:17px; height:17px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; line-height:1;
}
.controles-cloture .fait .coche{background:var(--ok-soft); color:var(--ok)}
.controles-cloture .reste .coche{background:var(--signal-soft); color:var(--signal)}
.controles-cloture .fait b{color:var(--ink3); font-weight:500}
.controles-cloture .reste b{color:var(--ink); font-weight:600}
.controles-cloture small{display:block; color:var(--ink2); font-size:11.5px; margin-top:1px; line-height:1.45}

/* Le filtre d'état de la liste des affaires. */
.filtres-etat{display:flex; flex-wrap:wrap; gap:16px; margin:10px 0 14px; font-size:12.5px}
.filtres-etat a{color:var(--ink3); text-decoration:none}
.filtres-etat a:hover{color:var(--ink)}
.filtres-etat b{color:var(--ink); font-weight:600}
.filtres-etat .compte{
  display:inline-block; min-width:17px; padding:0 5px; margin-left:3px;
  border-radius:9px; background:var(--trait2); color:var(--ink3);
  font-size:11px; font-weight:600; text-align:center;
}

/* --- Les graphiques -------------------------------------------------------
   Deux séries, deux teintes, et rien d'autre : le texte reste en encre, jamais
   en couleur de série. Les valeurs passent la validation daltonienne aussi bien
   en clair qu'en sombre — les teintes sombres ne sont pas l'inverse des claires,
   elles sont choisies séparément. */
/* Borné à sa largeur de dessin : au-delà, ce sont les libellés qui grossissent. */
.graphe{width:100%; max-width:1040px; height:auto; display:block; margin:6px 0 4px; overflow:visible}
.graphe .g-nom{font-size:11px; fill:var(--ink2); font-weight:600}
.graphe .g-val{font-size:10.5px; fill:var(--ink3)}
.graphe .g-val2{fill:var(--ink3)}
.graphe .g-cap{font-size:10px; fill:var(--ink3); text-transform:uppercase; letter-spacing:.05em}
.graphe .g-axe,.graphe .g-zero{stroke:var(--line); stroke-width:1}
.graphe .g-ligne:hover .g-nom{fill:var(--ink)}
.graphe .g-s1 path,.graphe .g-s1 rect{fill:#1B5C97}
.graphe .g-s2 path,.graphe .g-s2 rect{fill:#B07E2B}
.graphe .g-fae path,.graphe .g-fae rect{fill:#1B5C97}
.graphe .g-pca path,.graphe .g-pca rect{fill:#B0431C}
.graphe g[class^="g-"]:hover path,.graphe g[class^="g-"]:hover rect{opacity:.82}

.legende-g{display:flex; flex-wrap:wrap; gap:18px; margin:2px 0 0; font-size:11.5px; color:var(--ink2)}
.legende-g span{display:inline-flex; align-items:center; gap:6px}
.legende-g i{width:11px; height:11px; border-radius:3px; display:block}
.legende-g .p-s1{background:#1B5C97}
.legende-g .p-s2{background:#B07E2B}
.legende-g .p-fae{background:#1B5C97}
.legende-g .p-pca{background:#B0431C}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .graphe .g-s1 path,
  :root:not([data-theme="light"]) .graphe .g-s1 rect,
  :root:not([data-theme="light"]) .graphe .g-fae path,
  :root:not([data-theme="light"]) .graphe .g-fae rect{fill:#3E88C4}
  :root:not([data-theme="light"]) .graphe .g-s2 path,
  :root:not([data-theme="light"]) .graphe .g-s2 rect{fill:#B5822C}
  :root:not([data-theme="light"]) .graphe .g-pca path,
  :root:not([data-theme="light"]) .graphe .g-pca rect{fill:#C4593A}
  :root:not([data-theme="light"]) .legende-g .p-s1,
  :root:not([data-theme="light"]) .legende-g .p-fae{background:#3E88C4}
  :root:not([data-theme="light"]) .legende-g .p-s2{background:#B5822C}
  :root:not([data-theme="light"]) .legende-g .p-pca{background:#C4593A}
}
:root[data-theme="dark"] .graphe .g-s1 path,
:root[data-theme="dark"] .graphe .g-s1 rect,
:root[data-theme="dark"] .graphe .g-fae path,
:root[data-theme="dark"] .graphe .g-fae rect{fill:#3E88C4}
:root[data-theme="dark"] .graphe .g-s2 path,
:root[data-theme="dark"] .graphe .g-s2 rect{fill:#B5822C}
:root[data-theme="dark"] .graphe .g-pca path,
:root[data-theme="dark"] .graphe .g-pca rect{fill:#C4593A}
:root[data-theme="dark"] .legende-g .p-s1,
:root[data-theme="dark"] .legende-g .p-fae{background:#3E88C4}
:root[data-theme="dark"] .legende-g .p-s2{background:#B5822C}
:root[data-theme="dark"] .legende-g .p-pca{background:#C4593A}

.alerte-l{
  display:grid; grid-template-columns:auto 1fr; gap:11px; padding:11px 16px;
  border-bottom:1px solid var(--trait2); text-decoration:none; color:inherit;
}
.alerte-l:last-child{border-bottom:0}
.alerte-l:hover{background:var(--accent-soft)}
.alerte-l b{font-size:13px; font-weight:600; display:block}
.alerte-l small{display:block; color:var(--ink2); font-size:12px; margin-top:2px; line-height:1.45}
.alerte-l .jeton{font-size:10px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap}
.alerte-l .jeton.rouge{color:var(--signal); border-color:var(--signal); background:var(--signal-soft)}
.alerte-l .jeton.or{color:var(--or); border-color:var(--or); background:var(--or-clair)}

.fil{padding:6px 16px 12px}
.evt{display:grid; grid-template-columns:auto 1fr; gap:11px; padding:7px 0; font-size:12.5px;
  text-decoration:none; color:inherit; border-bottom:1px solid var(--trait2)}
.evt:last-child{border-bottom:0}
.evt:hover .qui{color:var(--accent-ink)}
.evt .heure{color:var(--ink3); font-size:11px; font-family:"IBM Plex Mono",monospace;
  white-space:nowrap; padding-top:1px}
.evt .qui{color:var(--ink2); font-weight:600}

/* ==========================================================================
 * Le pointage
 * ==========================================================================
 * Seul écran de MyHEPTA pensé d'abord pour un téléphone. Les zones de touche
 * y sont larges — 44 px de haut au minimum, ce qu'il faut pour un doigt et
 * pas pour un curseur — et rien ne se fait glisser sur le côté. Sur un écran
 * de bureau les mêmes blocs se rangent simplement en colonnes plus larges.
 */

.pt-jour-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 8px 0 18px;
}
.pt-jour-tete h1 { margin: 0; font-size: 1.5rem; text-transform: capitalize; }
.pt-jour-tete small { color: var(--gris, #64748b); }
.pt-jour-tete > div { text-align: center; flex: 1; }

.pt-fleche {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border: 1px solid var(--bord, #d8dee9); border-radius: 10px;
  font-size: 1.6rem; line-height: 1; text-decoration: none;
  color: var(--encre, #1e293b); background: #fff;
}
.pt-fleche:hover { background: #f1f5f9; }

.pt-raccourcis {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px;
}
.pt-raccourcis a {
  padding: 8px 14px; border-radius: 999px; background: #eef2f7;
  color: var(--encre, #1e293b); text-decoration: none; font-size: .9rem;
}
.pt-raccourcis a:hover { background: #e2e8f0; }

.pt-personne {
  background: #fff; border: 1px solid var(--bord, #d8dee9);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.pt-personne.fige { background: #f8fafc; opacity: .75; }

.pt-nom {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.pt-nom b { font-size: 1.05rem; }
.pt-nom small { color: var(--gris, #64748b); }
.pt-nom .pt-total {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: var(--gris, #64748b); font-weight: 600;
}
.pt-nom .pt-total.rempli { color: var(--bleu, #1d4ed8); }

.pt-ligne { display: flex; gap: 8px; margin-bottom: 8px; }
.pt-ligne select {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 8px 10px; border: 1px solid var(--bord, #d8dee9);
  border-radius: 8px; background: #fff; font-size: 1rem;
}
.pt-ligne input[type="number"] {
  width: 76px; flex: none; min-height: 44px; text-align: center;
  padding: 8px; border: 1px solid var(--bord, #d8dee9);
  border-radius: 8px; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.pt-ligne select:disabled, .pt-ligne input:disabled {
  background: #f1f5f9; color: #64748b;
}

.pt-fige { margin: 6px 0 0; font-size: .85rem; color: var(--gris, #64748b); }
.pt-rien { margin: 4px 0; font-size: .9rem; color: var(--gris, #94a3b8); }

.pt-envoi { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.pt-envoi .bouton { min-height: 46px; }

.pt-nav-semaine { display: flex; gap: 8px; flex-wrap: wrap; }

.pt-semaine { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .pt-semaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pt-jour {
  background: #fff; border: 1px solid var(--bord, #d8dee9);
  border-radius: 12px; padding: 12px;
}
.pt-jour.fige { background: #f8fafc; }
.pt-jour-nom {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
}
/* La capitale ne va que sur le nom du jour. Appliquée au bloc entier, elle
   transformait « 7 h » en « 7 H ». */
.pt-jour-nom > b { text-transform: capitalize; }
.pt-jour-nom span {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: var(--gris, #64748b);
}
.pt-jour-nom small { color: #94a3b8; text-transform: none; }

.pt-valider-tout {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin: 18px 0;
}

.tableau td.nul { color: #cbd5e1; text-align: center; }
.tableau td.fort { color: #b45309; font-weight: 600; text-align: center; }
.tableau th.etroit { text-align: center; width: 56px; }
.tableau th.etroit small { font-weight: 400; color: #94a3b8; }

.liste-plate a { margin-right: 4px; }
.en-ligne { display: inline; }

/* --------------------------------------------------------------------------
 * Le bandeau sur un téléphone
 * --------------------------------------------------------------------------
 * Depuis le pointage, MyHEPTA s'ouvre aussi sur un écran de six pouces. La
 * barre d'onglets y déborde : on la fait défiler horizontalement plutôt que
 * de la couper, et l'identité passe sous le logo. Rien ne disparaît — sur un
 * chantier, un menu qu'on ne trouve plus est un menu qui n'existe pas.
 */
@media (max-width: 720px) {
  .bandeau {
    flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px;
  }
  .bandeau .marque { flex: none; }
  .bandeau .moi { margin-left: auto; text-align: right; }
  .bandeau .moi span { font-size: .9rem; }
  .bandeau .moi small { font-size: .75rem; }
  .onglets {
    order: 3; width: 100%;
    display: flex; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets a, .onglets span { flex: none; white-space: nowrap; }
  .lien-sortie { font-size: .85rem; }

  .sous-onglets {
    overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  }
  .sous-onglets::-webkit-scrollbar { display: none; }

  main { padding-left: 12px; padding-right: 12px; }
  .tete-liste { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* Un module fermé : visible, gris, non cliquable. On voit que l'outil sait le
   faire, on sait quoi demander. */
.onglets .ferme, .sous-onglets .ferme {
  opacity: .38; cursor: not-allowed; user-select: none;
}

.mod-groupe { margin: 10px 0 14px; }
.mod-groupe > b { display: block; margin-bottom: 6px; color: var(--gris, #64748b);
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

/* Une journée proposée, pas encore enregistrée : elle se voit d'un coup d'œil,
   sinon on la valide sans savoir qu'on a validé quelque chose. */
.pt-jour.propose { border-style: dashed; background: #fdfcf6; }
.pt-jour .etiq-propose {
  color: #b45309; background: #fef3c7; border-radius: 999px;
  padding: 1px 8px; font-size: .72rem; text-transform: none;
}
.pt-ligne.est-propose select, .pt-ligne.est-propose input { border-style: dashed; color: #92400e; }

.ligne-charge { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 10px 12px; background: #f8fafc;
  border: 1px solid var(--bord, #d8dee9); border-radius: 10px; }
.ligne-charge .f { margin: 0; min-width: 280px; }
.ligne-charge .aide-champ { flex-basis: 100%; }

/* La ligne de routage sous la barre de visa : à qui la pièce s'adresse.
   Elle occupe toute la largeur — c'est une phrase, pas un bouton. */
.visa-routage {
  flex-basis: 100%; margin: 6px 0 0; font-size: .88rem;
  color: var(--gris, #64748b); line-height: 1.45;
}
.visa-routage b { color: var(--encre, #1e293b); }

/* Un bouton qui n'a pas encore lieu d'être : présent, gris, inerte. On voit
   qu'il existe et pourquoi il ne marche pas encore. */
.bouton.desactive {
  opacity: .5; cursor: not-allowed;
  background: #eef2f7; color: #64748b; border-color: #dbe2ea;
}

/* Les pièces jointes d'une commande */
.pj-liste { list-style: none; padding: 0; margin: 0 0 10px; }
.pj-liste li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--bord, #e2e8f0); flex-wrap: wrap; }
.pj-liste small { color: var(--gris, #64748b); }
.pj-liste form { margin-left: auto; }
.pj-depot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.pj-depot input[type=file] { max-width: 100%; }
.pj-propose { margin: 10px 0; }

/* Où en sont la réception et la facturation d'une commande.
   Deux barres superposées : ce qu'on a reçu, ce qu'on nous facture. Quand la
   seconde dépasse la première, ça se voit avant de lire le moindre chiffre. */
.avancement { margin: 14px 0 18px; }
.av-barre {
  position: relative; height: 14px; border-radius: 7px;
  background: #e6ebf1; overflow: hidden;
}
.av-barre span { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 7px; }
.av-recu { background: #cbd9e8; }
.av-fact { background: #2f5b87; height: 6px !important; top: 4px !important; opacity: .95; }
.av-texte { margin: 8px 0 0; font-size: .92rem; color: var(--gris, #64748b); }
.av-texte b { color: var(--encre, #1e293b); }
.controle.attente { border-left-color: #b45309; background: #fffbeb; }

.grille-devis input.etroit, .grille-devis th.etroit { width: 74px; }
.grille-devis td input.num { text-align: right; }
.barre-lignes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.barre-lignes .aide { flex-basis: 100%; margin: 0; }
.bouton.lien { background: none; border: none; color: var(--bleu, #1d4ed8);
  text-decoration: underline; padding: 6px 0; cursor: pointer; }

/* Une mention obligatoire qui manque : on l'écrit plutôt que de laisser un
   blanc. Un blanc ne se remarque pas ; une phrase, si. */
.doc-manque { color: #b45309; font-style: italic; }
@media print { .doc-manque { color: #000; } }

/* Les extractions comptables */
.cpt-periode { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin: 16px 0 24px; padding: 12px 14px; background: #f8fafc;
  border: 1px solid var(--bord, #d8dee9); border-radius: 10px; }
.cpt-periode .f { margin: 0; }
.cpt-grille { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cpt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cpt-carte { background: #fff; border: 1px solid var(--bord, #d8dee9);
  border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cpt-carte h3 { margin: 0; font-size: 1.02rem; }
.cpt-carte p { margin: 0; color: var(--gris, #64748b); font-size: .93rem; flex: 1; }
.cpt-pied { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cpt-pied small { color: var(--gris, #94a3b8); }

/* --------------------------------------------------------------------------
 * Le mouvement de budget garde sa couleur
 * --------------------------------------------------------------------------
 * « .tableau.gestion td small » vaut deux classes et deux éléments ; « .gain »
 * n'en vaut qu'une. Le gris l'emportait donc sur le vert et le rouge, et le
 * transfert s'affichait bien mais en neutre — on voyait le chiffre sans voir
 * son sens. On remonte la spécificité au même niveau, sans toucher à la règle
 * générale.
 */
.tableau.gestion td small.gain  { color: var(--ok); font-weight: 600; }
.tableau.gestion td small.perte { color: var(--alerte); font-weight: 600; }

/* --- Sous-traitance : le contrat qui conditionne le bon de commande ------ */

/* Le motif d'un bouton grisé se lit à côté du bouton, jamais dans un title
   qu'il faut aller chercher à la souris. */
.visa-serveur small.manque{ color:var(--signal); font-weight:600 }
.barre-actions{ flex-wrap:wrap; align-items:center }
.barre-actions small.manque{
  color:var(--ink3); font-size:12.5px; line-height:1.45; max-width:56ch;
  flex-basis:100%; text-align:right;
}

/* --- Les fenêtres d'ajout du point de gestion ---------------------------
 *
 * La saisie a quitté la grille. Elle s'étalait sur dix colonnes et poussait
 * la colonne des heures — vide tant que rien n'est pointé — à absorber tout
 * l'excédent de largeur : d'où le grand blanc au milieu du tableau.
 */
.plus-ligne{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; margin-left:7px; vertical-align:middle;
  border:1px solid var(--field-line); border-radius:4px;
  background:rgba(255,255,255,.8); color:var(--accent-ink);
  font:600 14px/1 inherit; cursor:pointer;
}
.plus-ligne:hover{ border-color:var(--accent-ink); background:#fff }

dialog.fen-ajout{
  width:min(430px, calc(100vw - 32px)); padding:0; border:1px solid var(--line);
  border-radius:7px; background:var(--paper); color:var(--ink);
  box-shadow:0 12px 34px rgba(11,33,56,.22);
}
dialog.fen-ajout::backdrop{ background:rgba(11,33,56,.34) }
.fen-ajout .fen-tete{
  display:flex; align-items:baseline; padding:12px 16px;
  border-bottom:1px solid var(--trait2); background:var(--ground);
}
.fen-ajout .fen-tete b{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink);
}
.fen-ajout .fen-x{
  margin-left:auto; border:0; background:none; color:var(--ink3);
  font-size:17px; line-height:1; cursor:pointer; padding:0 2px;
}
.fen-ajout .fen-x:hover{ color:var(--ink) }
.fen-ajout .fen-corps{ padding:14px 16px 4px }
.fen-ajout .fen-ch{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px }
.fen-ajout .fen-ch > span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink3); font-weight:600;
}
.fen-ajout .fen-ch input,
.fen-ajout .fen-ch select{
  width:100%; padding:7px 10px; border:1px solid var(--field-line); border-radius:4px;
  background:var(--field); color:var(--ink); font:13.5px/1.4 inherit;
}
.fen-ajout .fen-ch small{ color:var(--ink3); font-size:11.5px }
.fen-ajout .fen-duo{ display:flex; gap:10px }
.fen-ajout .fen-duo .fen-ch{ flex:1 }
.fen-ajout .fen-etiq{
  margin:2px 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink3); font-weight:700;
}
.fen-ajout .fen-etiq .oblig{ color:var(--signal) }
.fen-ajout .fen-aide{ margin:4px 0 8px; font-size:12px; color:var(--ink3); line-height:1.45 }
.fen-ajout .fen-pied{ display:flex; gap:10px; justify-content:flex-end; padding:6px 16px 16px }

/* ======================================================================
   Le détail des heures d'un poste
   Ouvert depuis la cellule d'heures du tableau de gestion. Une lecture :
   trois totaux par état, puis une ligne par journée pointée. Aucune saisie.
   ====================================================================== */

/* La cellule qui s'ouvre. Le pointillé sous le chiffre dit qu'il y a
   quelque chose derrière — un curseur main ne se voit qu'une fois dessus. */
/* Le chiffre et son annonce, l'un sous l'autre et alignés à droite. La cellule
   d'heures n'a pas la classe .chiffres sur toutes ses variantes ; on la
   redresse ici pour que le nombre et sa mention se lisent comme un couple. */
/* ======================================================================
   L'aperçu côte à côte
   Le formulaire à gauche, la pièce à droite — comme pour les contrats. Le
   volet se replie : sur un portable de chantier, deux colonnes ne tiennent
   pas, et celui qui ressaisit vingt lignes n'a pas besoin de voir le document
   à chaque fois.
   ====================================================================== */
.volet-apercu{
  position:fixed; top:0; right:0; bottom:0; width:min(42vw, 680px); z-index:60;
  display:flex; flex-direction:column; background:var(--panel);
  border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(11,33,56,.10);
}
.volet-tete{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--ground); border-bottom:1px solid var(--trait);
}
.volet-tete b{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink) }
.volet-lien{ margin-left:auto; font-size:12.5px; color:var(--accent-ink); text-decoration:none }
.volet-lien:hover{ text-decoration:underline }
.volet-x{
  border:0; background:none; color:var(--ink3); font-size:19px; line-height:1;
  cursor:pointer; padding:0 2px;
}
.volet-x:hover{ color:var(--ink) }
.volet-cadre{ flex:1; width:100%; border:0; background:#fff }

/* La page se rétrécit au lieu de passer dessous : on doit pouvoir corriger le
   formulaire en regardant le document, sinon l'aperçu ne sert à rien. */
body.avec-apercu .page,
body.avec-apercu main,
body.avec-apercu .bandeau{ margin-right:min(42vw, 680px) }
@media (max-width:1100px){
  .volet-apercu{ width:100%; }
  body.avec-apercu .page,
  body.avec-apercu main,
  body.avec-apercu .bandeau{ margin-right:0 }
}
@media print{ .volet-apercu{ display:none } body.avec-apercu .page{ margin-right:0 } }

/* Panier et grand déplacement : au pied de la journée, discrets. Ce ne sont
   pas des heures, ils ne doivent pas peser autant que la grille. */
.pt-indem{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--trait);
}
.pt-indem .case{ font-size:12.5px; color:var(--ink2) }
.pt-indem .case input{ margin-right:5px }

.tableau.gestion td.h{ text-align:right }
.tableau.gestion td.h.ouvrable{ cursor:pointer }
.tableau.gestion td.h.ouvrable b{ font-weight:600; border-bottom:1px dotted var(--accent-ink) }
.tableau.gestion td.h.ouvrable:hover{ background:var(--accent-soft) }
.tableau.gestion td.h.ouvrable:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:-2px }
/* L'annonce de ce qui n'est pas encore compté : en ocre, la couleur de ce qui
   se saisit et de ce qui n'est pas arrêté. Jamais en rouge — rien n'est en
   faute, des heures attendent la clôture du mois, c'est le fonctionnement
   normal. */
.tableau.gestion td.h small.attente{ color:var(--or); font-weight:600; font-size:10.5px }

dialog.fen-heures{
  width:min(880px, calc(100vw - 32px)); padding:0; border:1px solid var(--line);
  border-radius:7px; background:var(--paper); color:var(--ink);
  box-shadow:0 12px 34px rgba(11,33,56,.22);
}
dialog.fen-heures::backdrop{ background:rgba(11,33,56,.34) }
.fen-heures .fen-tete{
  display:flex; align-items:baseline; gap:10px; padding:12px 18px;
  border-bottom:1px solid var(--trait2); background:var(--ground);
}
.fen-heures .fen-tete b{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-ink);
}
.fen-heures .fen-tete .ou{ font-size:12.5px; color:var(--ink3) }
.fen-heures .fen-x{
  margin-left:auto; border:0; background:none; color:var(--ink3);
  font-size:19px; line-height:1; cursor:pointer; padding:0 2px;
}
.fen-heures .fen-x:hover{ color:var(--ink) }
.fen-heures .fen-rien{ margin:0; padding:22px 18px; color:var(--ink3); font-size:13px }

.fen-heures .trois{ display:flex; border-bottom:1px solid var(--trait2) }
.fen-heures .trois .bloc{ flex:1; padding:13px 18px; border-left:1px solid var(--trait2) }
.fen-heures .trois .bloc:first-child{ border-left:0 }
.fen-heures .trois .etq{
  display:flex; align-items:center; gap:7px; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink3); font-weight:700; margin-bottom:5px;
}
.fen-heures .trois .bloc b{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.fen-heures .trois .bloc small{ display:block; color:var(--ink3); font-size:11.5px; margin-top:2px }
.fen-heures .trois .bloc.clos b{ color:var(--ok) }
.fen-heures .trois .bloc.att b{ color:var(--or) }
.fen-heures .trois .bloc.brut b{ color:var(--ink3) }
/* Un état vide ne se peint pas : le tiret suffit, et la tuile s'efface au
   profit de celles qui portent quelque chose. */
.fen-heures .trois .bloc.vide b{ color:var(--ink3); font-weight:400 }
.fen-heures .trois .bloc.vide .etq{ opacity:.6 }

/* La pastille ne porte jamais l'information seule : le mot est à côté. */
.fen-heures .pt{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block }
.fen-heures .pt.clos{ background:var(--ok) }
.fen-heures .pt.att{ background:var(--or) }
.fen-heures .pt.brut{ background:var(--paper); border:1.5px solid var(--ink3) }

.fen-heures .fen-liste{ max-height:52vh; overflow-y:auto }
.fen-heures .fen-liste table{ width:100%; border-collapse:collapse }
.fen-heures .fen-liste th{
  position:sticky; top:0; z-index:1; background:var(--accent-soft); font-size:10px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--accent-ink); font-weight:700;
  padding:7px 18px; text-align:left; border-bottom:1px solid var(--line);
}
.fen-heures .fen-liste td{
  padding:6px 18px; border-bottom:1px solid var(--trait2); font-size:12.5px;
}
.fen-heures .fen-liste th.chiffres, .fen-heures .fen-liste td.chiffres{
  text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
}
.fen-heures .fen-liste tr:hover td{ background:var(--panel) }
.fen-heures .fen-liste td.d{ font-family:"IBM Plex Mono",monospace; color:var(--ink2); white-space:nowrap }
.fen-heures .fen-liste td.qui{ white-space:nowrap }
.fen-heures .fen-liste td.qui small{ display:block; color:var(--ink3); font-size:11px }
.fen-heures .fen-liste td.vise{ color:var(--ink2) }
/* Le bandeau de semaine : ce qui manque manque par semaine entière, parce que
   c'est la semaine qu'on valide. */
.fen-heures .fen-liste tr.sem td{
  background:var(--carte2); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink3); font-weight:700; padding:5px 18px;
}
.fen-heures .eta{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink2);
  white-space:nowrap;
}
.fen-heures .fen-pied{
  display:flex; align-items:center; gap:14px; padding:11px 18px;
  border-top:1px solid var(--trait2); background:var(--ground);
  font-size:12.5px; color:var(--ink3);
}
.fen-heures .fen-pied .droite{ margin-left:auto }

/* Les quatre niveaux de pondération. Aucun n'est proposé par défaut : le bon
   niveau dépend du client et de l'interlocuteur, que l'outil ne connaît pas.
   Chacun s'explique au survol. */
.fen-ajout .niveaux{ display:flex; gap:6px }
.fen-ajout .niv{
  flex:1; text-align:center; padding:7px 0; cursor:pointer;
  border:1px solid var(--field-line); border-radius:4px;
  background:var(--field); color:var(--ink2); font:600 13px/1.2 inherit;
}
.fen-ajout .niv input{ position:absolute; opacity:0; width:0; height:0 }
.fen-ajout .niv:has(input:checked){
  background:var(--or-clair); border-color:var(--or); color:var(--or);
}

/* Le rappel de ce qui n'a pas été repris ce mois-ci. */
.non-reprises{
  margin:14px 0 0; padding:12px 16px; border:1px solid var(--or);
  border-radius:6px; background:var(--or-clair); max-width:900px;
}
.non-reprises h4{
  margin:0 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--or); font-weight:700;
}
.non-reprises .item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:7px }
.non-reprises .item:last-child{ margin-bottom:0 }
.non-reprises .quoi{ font-size:13px; color:var(--ink2) }
.non-reprises .quoi b{ color:var(--ink) }
.non-reprises .reprendre{ margin-left:auto; white-space:nowrap }

/* La demande de justification : elle n'apparaît que là où ça dépasse. */
.demande-justif{
  margin:14px 0 0; padding:12px 16px; border:1px solid var(--or);
  border-radius:6px; background:var(--or-clair); max-width:900px;
}
.demande-justif .t{ font-size:13.5px; color:var(--ink2); line-height:1.5 }
.demande-justif .t b{ color:var(--ink) }
.demande-justif input{
  width:100%; margin-top:9px; padding:8px 11px; border:1px solid var(--or);
  border-radius:4px; background:var(--field); color:var(--ink); font:13.5px/1.4 inherit;
}
.demande-justif.faite{ border-color:var(--line2); background:var(--paper) }
.demande-justif.faite input{ border-color:var(--field-line) }

/* --- Le compte rendu de gestion -----------------------------------------
 *
 * Il ne se tape pas, il s'assemble. Chaque mois se fige et reste : la suite
 * des mois devient la chronique de l'affaire, et c'est elle qu'on lit en
 * revue d'affaires plutôt qu'un tableau de quatorze colonnes.
 */
.compte-rendu{ margin:26px 0 0; max-width:900px }
.compte-rendu h2{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--accent-ink); font-weight:700; margin:0 0 10px;
}
.cr-mois{
  background:var(--paper); border:1px solid var(--line); border-top-width:0;
  overflow:hidden;
}
.cr-mois:first-of-type{ border-top-width:1px; border-radius:6px 6px 0 0 }
.cr-mois:last-of-type{ border-radius:0 0 6px 6px }
.cr-mois:only-of-type{ border-radius:6px }
.cr-mois > header{
  display:flex; align-items:baseline; gap:10px; padding:10px 18px;
  border-bottom:1px solid var(--trait2); background:var(--ground);
}
.cr-mois > header b{ font-size:13px }
.cr-mois > header .etat{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  padding:2px 8px; border-radius:3px; background:var(--or-clair); color:var(--or);
}
.cr-mois.fige > header .etat{ background:var(--trait2); color:var(--ink3) }
.cr-mois > header .qui{ margin-left:auto; font-size:11.5px; color:var(--ink3) }
.cr-mois .cr-corps{ padding:13px 18px 16px }
.cr-mois .etiq{
  margin:0 0 7px; font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink3); font-weight:700;
}
ul.cr-auto{ margin:0 0 15px; padding-left:14px; border-left:2px solid var(--line); list-style:none }
ul.cr-auto li{ margin:0 0 4px; font-size:13px; color:var(--ink2) }
.cr-ecrit{
  border-left:2px solid var(--or); padding:2px 0 2px 14px; margin:0 0 9px; font-size:13.5px;
}
.cr-ecrit .sig{ display:block; font-size:11.5px; color:var(--ink3); margin-top:3px }
textarea.cr-mot{
  width:100%; padding:9px 11px; border:1px solid var(--field-line); border-radius:4px;
  background:var(--field); color:var(--ink); font:13.5px/1.5 inherit; resize:vertical;
}
@media print{ .compte-rendu{ break-inside:avoid } }

/* --- Les délégations -----------------------------------------------------
 *
 * Une délégation n'est pas un réglage, c'est un acte signé. Le plafond de
 * visa en est le montant : un seul chiffre, qui ne peut plus contredire le
 * papier puisque c'est le même.
 */
.deleg{
  margin:14px 0 0; padding:13px 16px 14px;
  border:1px solid var(--line2); border-radius:6px; background:var(--ground);
}
.deleg h3{
  margin:0 0 10px; font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent-ink); font-weight:700;
}
.deleg .import-msg{ margin:10px 0 0 }
.tableau tr.a-voir td{ background:var(--or-clair) }
.tableau td span.manque{ color:var(--signal); font-weight:600 }

/* --- « Ce que cette personne peut ouvrir » : un onglet, une ligne --------
 *
 * Les cases ne s'étirent plus pour remplir l'écran : elles se suivent et se
 * replient. Le bloc est borné en largeur, sinon deux modules du même onglet
 * se retrouvent aux deux bouts d'un écran de 1 800 pixels.
 */
.mods-lignes{ max-width:820px; margin-top:10px }
.mod-ligne{
  display:flex; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--trait2);
}
.mod-ligne:last-child{ border-bottom:0 }
.mod-ligne > b{
  flex:0 0 96px; font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--accent-ink); font-weight:700; padding-top:1px;
}
.mod-ligne .cases{ display:flex; flex-wrap:wrap; gap:8px 20px }

/* Le récapitulatif des heures : une affaire, et qui a pointé dessus. */
.rec-titre{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--accent-ink); font-weight:700; margin:26px 0 6px;
}
tr.rec-affaire td{ background:var(--bleu-clair) }
tr.rec-affaire.ouverte .plier i{ transform:rotate(0deg) }
tr.rec-personne td{ color:var(--ink2); font-size:12.5px }
#tPaie th{ white-space:nowrap }

/* ---------------------------------------------------------------------------
   Les pièces déjà déposées chez le comptable.

   Elles restent lisibles — on doit pouvoir vérifier ce qu'on a fait — mais
   elles reculent d'un plan : ce qui compte, en haut de l'écran, c'est ce qui
   reste à faire.
   --------------------------------------------------------------------------- */
.tableau tr.fait td { opacity: .62; }
.tableau tr.fait:hover td { opacity: 1; }

/* ---------------------------------------------------------------------------
   Le bandeau de verrou : quelqu'un d'autre travaille sur ce document.

   Il se distingue d'une alerte ordinaire — ce n'est pas une faute, c'est une
   file d'attente — et il reste visible quand on fait défiler la page : sur un
   long écran de saisie, on oublierait sinon pourquoi rien ne s'enregistre.
   --------------------------------------------------------------------------- */
.alerte.verrou {
  position: sticky; top: 0; z-index: 30;
  border-left: 4px solid var(--or, #b07d00);
}
.alerte.verrou small { display: block; margin-top: 6px; opacity: .8; }

/* ==========================================================================
   Grille de saisie et de validation À LA SEMAINE
   ========================================================================== */
:root{ --abs-soft:#F0ECFA; --abs-ink:#6B4EA8; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --abs-soft:#221B33; --abs-ink:#B49BE0; } }
:root[data-theme="dark"]{ --abs-soft:#221B33; --abs-ink:#B49BE0; }

.pt-grille-semaine{ overflow-x:auto; border:1px solid var(--trait); border-radius:9px; background:var(--paper) }
.grille-semaine{ margin:0; border:0; border-collapse:separate; border-spacing:0; font-size:13px; width:100% }
.grille-semaine th,.grille-semaine td{ border-bottom:1px solid var(--trait2); border-right:1px solid var(--trait2); text-align:center }
.grille-semaine thead th{ background:var(--marine); color:#fff; padding:8px 6px; font-size:11.5px; font-weight:600 }
.grille-semaine thead th small{ display:block; color:rgba(255,255,255,.6); font-weight:400; font-size:9.5px }
.grille-semaine thead th.week-end{ opacity:.72 }
.grille-semaine td.pt-qui{ text-align:left; padding:9px 12px; min-width:150px; background:var(--paper) }
.grille-semaine td.pt-qui a{ text-decoration:none; color:inherit }
.grille-semaine td.pt-qui small{ display:block; color:var(--ink3); font-size:11px }
.grille-semaine td.pt-c{ height:46px; vertical-align:middle; padding:2px; min-width:44px }
.grille-semaine td.pt-c .pt-code{ display:block; font-weight:700; font-size:12px; color:var(--marine) }
.grille-semaine td.pt-c .pt-h{ display:block; font-size:11px; color:var(--ink3) }
.grille-semaine td.pt-c.trav{ background:var(--accent-soft) }
.grille-semaine td.pt-c.trav .pt-code{ color:var(--accent-ink) }
.grille-semaine td.pt-c.abs{ background:var(--abs-soft) }
.grille-semaine td.pt-c.abs .pt-code{ color:var(--abs-ink) }
.grille-semaine td.pt-c.week-end{ background:var(--trait2) }
.grille-semaine td.pt-c.vide{ color:var(--ink3) }
.grille-semaine td.pt-c.man{ background:var(--signal-soft) }
.grille-semaine td.pt-c-edit{ cursor:pointer; position:relative }
.grille-semaine td.pt-c-edit:hover{ outline:2px solid var(--or); outline-offset:-2px }
.grille-semaine td.pt-c-edit.vide::after{ content:"+"; color:var(--ink3); font-size:16px }
.grille-semaine td.pt-c.multi{ background-image:linear-gradient(135deg,transparent 45%,var(--or) 45%,var(--or) 55%,transparent 55%) }
.grille-semaine td.nombre{ padding:6px 10px }

/* L'éditeur d'une case, en fenêtre */
.pt-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center }
.pt-modal-fond{ position:absolute; inset:0; background:rgba(11,33,56,.45) }
.pt-modal-carte{ position:relative; background:var(--paper); border-radius:12px; padding:18px; width:min(360px,92vw); box-shadow:0 20px 50px rgba(0,0,0,.3) }
.pt-modal-carte h3{ margin:0 0 12px; font-size:16px; color:var(--marine) }
.pt-modal-carte .f{ display:block; margin-bottom:10px }
.pt-modal-case{ display:flex; align-items:center; gap:8px; margin:10px 0; font-size:13px }
.pt-modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px }

/* ==========================================================================
   Notifications — avis sur ses heures
   ========================================================================== */
.notif-bandeau{ background:var(--or-clair); border:1px solid #e6d3a8; border-left:4px solid var(--or);
  border-radius:10px; padding:12px 16px; margin:0 0 16px }
.notif-tete{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.notif-tete b{ color:var(--or) }
.notif-liste{ margin:8px 0 0; padding-left:18px; font-size:13px; color:var(--ink2) }
.notif-liste li{ margin:2px 0 }

/* ==========================================================================
   Ma semaine — cartes + saisie
   ========================================================================== */
.pt-semaine-cartes{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin:10px 0 6px }
.pt-carte{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:12px; min-height:110px;
  position:relative; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.04) }
.pt-carte.pt-c-edit{ cursor:pointer }
.pt-carte.pt-c-edit:hover{ border-color:var(--or) }
.pt-carte-jour{ font-weight:700; font-size:13px }
.pt-carte-jour small{ display:block; color:var(--ink3); font-weight:400; font-size:11px }
.pt-carte-h{ font-weight:800; color:var(--marine); font-size:18px; margin-top:auto }
.pt-carte-aff{ font-size:11px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pt-carte-asais{ color:var(--or); font-weight:700; font-size:13px; margin-top:auto }
.pt-carte-abs{ color:var(--abs-ink); font-weight:700; font-size:13px; margin-top:auto }
.pt-carte-pan{ position:absolute; top:9px; right:10px; font-size:13px }
.pt-carte.trav{ border-left:3px solid var(--marine) }
.pt-carte.abs{ background:var(--abs-soft); border-left:3px solid var(--abs-ink) }
.pt-carte.man{ background:var(--signal-soft) }
.pt-carte.we{ background:var(--trait2); opacity:.6 }
@media (max-width:820px){ .pt-semaine-cartes{ grid-template-columns:repeat(2,1fr) } }
.pt-steppe{ display:flex; align-items:center; gap:12px; justify-content:center }
.pt-steppe button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  font-size:20px; color:var(--marine); cursor:pointer }
.pt-steppe .val{ font-size:24px; font-weight:800; color:var(--marine); min-width:56px; text-align:center }
.pt-hin{ width:64px; padding:6px 8px; border:1px solid var(--field-line); border-radius:7px; text-align:right;
  font-weight:700; font-size:13.5px; background:var(--field) }
.grille-mois td.pt-pk{ background:var(--accent-soft) }

/* Vue globale — option A : chantier dans la case + colonnes récap sobres.
   Colonnes récap dans le même bleu discret que les cases de travail ; l'en-tête
   reste marine comme le reste de la ligne de titres (pas de fond crème). */
.grille-semaine .pt-ch{ display:block; font-size:10px; line-height:1.1; color:var(--ink3); font-weight:600; letter-spacing:.2px }
.grille-semaine td.pt-pk{ background:var(--accent-soft) }
.grille-semaine tfoot td{ font-weight:700; color:var(--marine); background:var(--accent-soft); border-top:2px solid var(--trait) }