:root{
  /* — Palette de marque (BTP / chantier PERRIN) — */
  --bleu:#37BEEC; --orange:#E5540F; --encre:#13130F; --marine:#1F3864;
  --vert:#2F8F6B;
  --absence:#9180BE; --absence-txt:#5E4F8A;
  --papier:#F5F6F8; --carte:#FFFFFF; --carte-2:#FAFBFC;
  --trait:#E2E7EE; --trait-fort:#CBD3DE;
  --ardoise:#5E6878; --ardoise-clair:#8C95A3;

  /* — Couche sémantique (thémable : tout dérive d'ici) — */
  --pos:var(--marine);          /* avance              */
  --neg:var(--orange);          /* retard / alerte     */
  --eq:var(--vert);             /* équilibre           */
  --paye:#B0730F;               /* heures payées : or/ocre, distinct du vermillon */
  --absence-c:var(--absence-txt);
  --btn:#1F3864; --btn-hover:#16294A;          /* action primaire (navy) */
  --ink-surface:#13130F; --ink-on:#FFFFFF;     /* surfaces inversées (topbar, segment actif, tooltip) */
  --field-bg:#FFFFFF;
  --skel:#E6EAF1; --skel-hi:#F3F6FA;           /* squelettes de chargement */
  --scrim:rgba(19,19,15,.5);

  --r:14px; --r-s:9px;
  --ombre:0 1px 2px rgba(19,19,15,.04), 0 6px 20px rgba(31,56,100,.06);
  --ombre-fort:0 10px 40px rgba(19,19,15,.14);
}

/* — Thème sombre — ancré dans le marine de la marque (fond bleu-encre profond),
   pas un noir neutre + accent acide. Les tokens de base sont éclaircis ; la couche
   sémantique (--pos/--neg/--eq définis via var()) suit automatiquement. — */
[data-theme="dark"]{
  --bleu:#46C2EE; --marine:#7BA7E9; --vert:#48C394; --orange:#FF7A47;
  --absence:#B0A2DE; --absence-txt:#C6B9EE;
  --encre:#E9EEF4;
  --papier:#0E1622; --carte:#16202E; --carte-2:#1C2839;
  --trait:#2A384B; --trait-fort:#3C4E66;
  --ardoise:#A2AFC1; --ardoise-clair:#727F92;
  --paye:#E3AE48;
  --btn:#3461B0; --btn-hover:#3E70C6;
  --ink-surface:#1E2B3C; --ink-on:#FFFFFF;
  --field-bg:#101B27;
  --skel:#1F2B3B; --skel-hi:#2A3A4E;
  --scrim:rgba(2,6,12,.64);
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.42);
  --ombre-fort:0 16px 48px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--encre);
  background:var(--papier); line-height:1.5; font-size:15px;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
.num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1}
h1,h2,h3,.disp{font-family:'Archivo',sans-serif; letter-spacing:-.01em}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}

/* ---------- topbar ---------- */
.top{background:var(--ink-surface); color:#fff; border-bottom:3px solid var(--bleu)}
.top__in{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 22px; max-width:1180px; margin:0 auto}
.brand{display:flex; align-items:center; gap:13px}
.brand__mark{width:34px; height:34px; border-radius:7px; background:linear-gradient(135deg,var(--bleu),var(--marine)); position:relative; flex:none}
.brand__mark::after{content:""; position:absolute; inset:0; border-radius:7px; background:
  linear-gradient(transparent 46%, rgba(255,255,255,.55) 46%, rgba(255,255,255,.55) 54%, transparent 54%)}
.brand__txt{display:flex; flex-direction:column; line-height:1.12}
.brand__txt b{font-family:'Archivo'; font-weight:800; font-size:15px; letter-spacing:.02em}
.brand__txt span{font-size:11px; color:#9fb4cf; letter-spacing:.16em; text-transform:uppercase}
.top__right{display:flex; align-items:center; gap:16px}
.top__period{font-size:12.5px; color:#aeb9c7; text-align:right; line-height:1.35}
.top__period b{color:#fff; font-family:'Archivo'; font-weight:700; font-size:14px; display:block}
.top__actions{display:flex; align-items:center; gap:8px}
.top__btn{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#cdd6e2;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 13px; transition:background .14s, color .14s}
.top__btn:hover{background:rgba(255,255,255,.16); color:#fff}
.top__btn:focus-visible{outline:2px solid var(--bleu); outline-offset:2px}
.top__btn svg{width:14px; height:14px}
.top__btn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.live-dot{width:8px; height:8px; border-radius:50%; background:#8C95A3; flex:none}
.live-dot.ok{background:#3FBF8F; box-shadow:0 0 0 3px rgba(63,191,143,.2)}
.live-dot.err{background:var(--orange); box-shadow:0 0 0 3px rgba(229,84,15,.2)}

/* ---------- hero / kpi ---------- */
.hero{padding:30px 0 8px}
.hero__title{font-size:30px; font-weight:800; line-height:1.05}
.hero__sub{color:var(--ardoise); margin-top:7px; max-width:60ch; font-size:14px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px}
.kpi{background:var(--carte); border:1px solid var(--trait); border-radius:var(--r); padding:16px 18px; box-shadow:var(--ombre)}
.kpi__k{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:600}
.kpi__v{font-family:'Archivo'; font-weight:800; font-size:27px; margin-top:7px; line-height:1}
.kpi__u{font-size:13px; color:var(--ardoise); font-weight:600}
.kpi--alerte .kpi__v{color:var(--neg)}
.absbloc{margin-top:18px}
.absbloc__h{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:700; margin-bottom:10px}
.absbloc__h span{color:var(--absence-txt); text-transform:none; letter-spacing:0; font-weight:700}
.abskpis{display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:10px}
.abskpi{background:var(--carte); border:1px solid var(--trait); border-left:3px solid var(--absence); border-radius:var(--r-s); padding:11px 13px; box-shadow:var(--ombre)}
.abskpi__k{font-size:12px; color:var(--ardoise); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.abskpi__v{font-family:'Archivo'; font-weight:800; font-size:19px; margin-top:5px; line-height:1}
.abskpi__u{font-size:11px; color:var(--ardoise-clair); font-weight:700}
.abskpi__share{font-size:11px; color:var(--ardoise-clair); font-weight:600; margin-top:4px}
.abskpi--empty{border-left-color:var(--trait); color:var(--ardoise); font-size:13px; grid-column:1/-1; font-family:'Inter'; font-weight:500}

/* ---------- controls ---------- */
.controls{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0 16px}
.seg{display:inline-flex; background:var(--carte); border:1px solid var(--trait); border-radius:999px; padding:3px; box-shadow:var(--ombre)}
.seg button{padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ardoise); white-space:nowrap; transition:background .14s, color .14s}
.seg button[aria-pressed="true"]{background:var(--ink-surface); color:var(--ink-on)}
.seg button:focus-visible{outline:2px solid var(--bleu); outline-offset:2px}
.spacer{flex:1 1 auto}
.field{position:relative}
.field input{border:1px solid var(--trait); background:var(--field-bg); border-radius:999px; padding:8px 14px 8px 34px; font-size:13.5px; width:190px; box-shadow:var(--ombre); color:var(--encre)}
.field input:focus{outline:2px solid var(--bleu); outline-offset:0}
.field svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ardoise-clair)}
.yearpick{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ardoise); font-weight:600}
.yearpick label{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:700}
.select{border:1px solid var(--trait); background:var(--field-bg); border-radius:999px; padding:8px 30px 8px 14px; font-size:13.5px; box-shadow:var(--ombre); color:var(--encre);
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238C95A3' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center}
.select:focus{outline:2px solid var(--bleu); outline-offset:0}
.select.year{font-family:'Archivo'; font-weight:700}
.seuil{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ardoise); font-weight:600; background:var(--carte); border:1px solid var(--trait); border-radius:999px; padding:6px 14px; box-shadow:var(--ombre)}
.seuil input{accent-color:var(--neg); width:96px}

/* ---------- grille compagnons ---------- */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding-bottom:14px}
.card{background:var(--carte); border:1px solid var(--trait); border-radius:var(--r); padding:16px 17px; box-shadow:var(--ombre); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  animation:cardIn .42s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(min(var(--i,0),14)*28ms)}
/* L'entrée anime `translate`/`opacity` ; le survol anime `transform` : pas de
   conflit (sinon le remplissage d'animation écraserait le lift au survol). */
@keyframes cardIn{from{opacity:0; translate:0 10px}to{opacity:1; translate:0 0}}
.card:hover{transform:translateY(-2px); box-shadow:var(--ombre-fort); border-color:var(--trait-fort)}
.card:focus-visible{outline:2px solid var(--bleu); outline-offset:2px}
.card.is-alert{border-left:4px solid var(--neg)}
.card__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.who{min-width:0}
.who__nom{font-family:'Archivo'; font-weight:700; font-size:16px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Retour à la ligne autorisé : la ligne porte l'établissement, le matricule ET le
   contrat hebdo — sur carte étroite (mobile), elle doit se replier sans déborder. */
.who__meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; margin-top:5px}
/* Chip établissement : teinte stable générée depuis le nom (--chip-h = teinte),
   lisible en clair comme en sombre (cf. F). */
.chip{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:5px;
  background:hsl(var(--chip-h,222) 38% 92%); color:hsl(var(--chip-h,222) 44% 33%)}
[data-theme="dark"] .chip{background:hsl(var(--chip-h,222) 30% 24%); color:hsl(var(--chip-h,222) 62% 78%)}
.mat{font-size:11.5px; color:var(--ardoise-clair); font-weight:600}
/* Pastille « contrat hebdo » (lu dans l'observation Optim de la fiche salarié) :
   discrète au contrat par défaut, marine quand le contrat est spécifique (39 h,
   28 h...), en pointillé quand Optim ne dit rien et qu'on retombe sur le défaut. */
.ctr{font-size:11px; font-weight:700; color:var(--ardoise); background:var(--carte-2);
  border:1px solid var(--trait); border-radius:5px; padding:2px 6px; white-space:nowrap; cursor:help}
.ctr.is-spec{background:color-mix(in srgb, var(--marine) 16%, var(--carte)); border-color:transparent; color:var(--marine)}
.ctr.is-def{border-style:dashed; color:var(--ardoise-clair)}
.ctr.is-abs{background:color-mix(in srgb, var(--absence) 20%, var(--carte)); border-color:transparent; color:var(--absence-txt)}
.solde{text-align:right; flex:none}
.solde__v{font-family:'Archivo'; font-weight:800; font-size:25px; line-height:1; letter-spacing:-.02em}
.solde__u{font-size:12px; font-weight:700; color:var(--ardoise-clair)}
.solde__lbl{font-size:11px; font-weight:600; margin-top:3px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .eq{color:var(--eq)}
.paye{color:var(--paye)}

/* niveau à bulle — clin d'œil au niveau à bulle de chantier (la rigole = le vial). */
.niveau{margin:15px 0 6px}
.niveau__track{position:relative; height:20px; border-radius:999px; border:1px solid var(--trait);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--neg) 22%, var(--carte)),
    var(--carte-2) 50%,
    color-mix(in srgb, var(--bleu) 22%, var(--carte)));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07)}
.niveau__zero{position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:var(--ardoise); opacity:.55; border-radius:2px; transform:translateX(-1px)}
.niveau__seuil{position:absolute; top:2px; bottom:2px; width:0; border-left:1px dashed var(--ardoise-clair); opacity:.7}
.niveau__bub{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid var(--carte); box-shadow:0 1px 4px rgba(19,19,15,.32);
  animation:bubIn .45s cubic-bezier(.2,.8,.2,1) both}
.niveau__bub::after{content:""; position:absolute; left:23%; top:17%; width:34%; height:34%; border-radius:50%; background:rgba(255,255,255,.6)}
@keyframes bubIn{from{opacity:0; transform:translate(-50%,-50%) scale(.4)}to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
.niveau__scale{display:flex; justify-content:space-between; font-size:10px; color:var(--ardoise-clair); margin-top:4px; font-weight:600}

/* mini barres semaines */
.bars{display:flex; align-items:flex-end; gap:2px; height:42px; margin-top:12px; position:relative}
.bars__base{position:absolute; left:0; right:0; border-top:1px dashed var(--trait-fort); z-index:1}
.bar{flex:1; min-height:2px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:2px 2px 0 0; overflow:hidden; cursor:default}
.bar i{display:block; width:100%}
.bar .wrk{background:var(--bleu); opacity:.9}
.bar .wrk.lo{background:var(--neg); opacity:.9}
.bar .abs{background:var(--absence)}
.bar:hover i{filter:brightness(1.08)}
.bars__cap{display:flex; justify-content:space-between; font-size:10px; color:var(--ardoise-clair); margin-top:6px; font-weight:600}
.foot{display:flex; justify-content:space-between; gap:10px; margin-top:11px; padding-top:11px; border-top:1px solid var(--trait); font-size:12px; color:var(--ardoise)}
.foot b{color:var(--encre); font-weight:700}
.tipword{cursor:help; border-bottom:1px dotted var(--trait-fort)}

.empty{grid-column:1/-1; text-align:center; color:var(--ardoise); padding:50px 20px; font-size:14px}
.barleg{display:flex; flex-wrap:wrap; align-items:center; gap:15px; font-size:12px; color:var(--ardoise); margin:-2px 0 14px}
.barleg .sw{display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:5px}
.sw-w{background:var(--bleu)} .sw-lo{background:var(--neg)} .sw-a{background:var(--absence)}
.sw-pris{background:var(--paye)}
.sw-prev{background:color-mix(in srgb,var(--paye) 30%,var(--carte)); border:1px dashed color-mix(in srgb,var(--paye) 55%,var(--trait))}
.sw-pace{background:var(--ardoise)}
.barleg__note{color:var(--ardoise-clair); font-size:11.5px}
.tbl td.abs-c{color:var(--absence-txt); font-weight:600}
.tbl td.pay{color:var(--paye); font-weight:600}

/* ---------- page forfait jour : suivi de la prise des RTT ---------- */
/* Barre : 0 -> quota acquis ; pris (plein) + prevus (hachure) ; repere = attendu. */
.rttbar{position:relative; height:16px; border-radius:999px; background:var(--carte-2); border:1px solid var(--trait); overflow:hidden; margin:16px 0 5px}
.rttbar__pris{position:absolute; left:0; top:0; bottom:0; background:var(--paye); border-radius:999px 0 0 999px; min-width:2px;
  transition:width .4s cubic-bezier(.2,.7,.2,1)}
.rttbar__prev{position:absolute; top:0; bottom:0;
  background-color:color-mix(in srgb,var(--paye) 20%,var(--carte));
  background-image:repeating-linear-gradient(45deg, color-mix(in srgb,var(--paye) 50%,var(--carte)) 0 4px, transparent 4px 8px)}
.rttbar__pace{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--ardoise); transform:translateX(-1px); z-index:2}
.rttbar__cap{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ardoise-clair); font-weight:600}
.prevtxt{font-style:normal; color:var(--paye); font-weight:700}
/* Badge avance / retard de prise. */
.rtag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700}
.rtag--late{background:color-mix(in srgb,var(--neg) 16%,var(--carte)); color:var(--neg)}
.rtag--early{background:color-mix(in srgb,var(--eq) 16%,var(--carte)); color:var(--eq)}
.rtag--ok{background:var(--carte-2); border:1px solid var(--trait); color:var(--ardoise)}
.rtag--none{background:transparent; border:1px dashed var(--trait-fort); color:var(--ardoise-clair)}
/* Bandeau de statistiques de la fiche. */
.fjstats{display:grid; grid-template-columns:repeat(auto-fit, minmax(118px,1fr)); gap:10px; margin-bottom:16px}
.fjstat{background:var(--carte-2); border:1px solid var(--trait); border-radius:var(--r-s); padding:11px 13px; display:flex; flex-direction:column; gap:3px}
.fjstat__k{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:700}
.fjstat b{font-family:'Archivo'; font-weight:800; font-size:20px; line-height:1}
.fjstat__u{font-size:11px; color:var(--ardoise); font-weight:600}
.fjstat--badge{justify-content:center; gap:7px}
/* Liste des dates de RTT posees (pris vs prevus). */
.rttdates-h{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:700; margin:18px 0 8px}
.rttdates{display:flex; flex-wrap:wrap; gap:7px}
.rttdate{font-size:12px; font-weight:600; padding:4px 9px; border-radius:7px; background:color-mix(in srgb,var(--paye) 14%,var(--carte)); color:var(--paye); border:1px solid transparent}
.rttdate.is-prev{background:transparent; border:1px dashed color-mix(in srgb,var(--paye) 55%,var(--trait)); color:var(--ardoise)}

/* infobulle flottante (mini-barres des cartes) */
.tip{position:fixed; z-index:120; pointer-events:none; background:var(--ink-surface); color:var(--ink-on);
  font-size:11.5px; font-weight:600; padding:6px 10px; border-radius:7px; box-shadow:var(--ombre-fort);
  max-width:260px; line-height:1.4; white-space:nowrap}
.tip[hidden]{display:none}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:var(--scrim); display:none; align-items:flex-start; justify-content:center; padding:36px 18px; z-index:50; overflow:auto}
.modal.open{display:flex}
.sheet{background:var(--carte); border:1px solid var(--trait); border-radius:18px; max-width:760px; width:100%; box-shadow:var(--ombre-fort); overflow:hidden}
.sheet__top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px 24px; border-bottom:1px solid var(--trait); background:linear-gradient(180deg,var(--carte),var(--carte-2))}
.sheet__nom{font-family:'Archivo'; font-weight:800; font-size:21px}
.sheet__meta{display:flex; gap:8px; align-items:center; margin-top:7px}
.sheet__solde{text-align:right}
.sheet__solde b{font-family:'Archivo'; font-weight:800; font-size:26px; display:block; line-height:1}
.x{width:34px; height:34px; border-radius:9px; background:var(--carte-2); border:1px solid var(--trait); color:var(--ardoise); font-size:18px; display:grid; place-items:center; flex:none}
.x:hover{background:var(--trait)}
.x:focus-visible{outline:2px solid var(--bleu); outline-offset:2px}
.sheet__body{padding:20px 24px 24px}

/* graphe cumul + infobulle interactive (A) */
.chartwrap{position:relative; margin:6px 0 18px}
.chart{width:100%; height:170px; display:block}
.chartguide{position:absolute; top:8px; height:130px; width:1px; background:var(--ardoise); opacity:.5; pointer-events:none; display:none; transform:translateX(-.5px)}
.chartdot{position:absolute; width:10px; height:10px; border-radius:50%; background:var(--pos); border:2px solid var(--carte); box-shadow:0 1px 3px rgba(0,0,0,.35); pointer-events:none; display:none; transform:translate(-50%,-50%)}
.chartdot.is-paye{background:var(--paye)}
.charttip{position:absolute; z-index:6; pointer-events:none; display:none; background:var(--ink-surface); color:var(--ink-on); font-size:11.5px; padding:7px 10px; border-radius:8px; box-shadow:var(--ombre-fort); white-space:nowrap; line-height:1.5; transform:translate(-50%,calc(-100% - 14px))}
.charttip b{font-family:'Archivo'; font-weight:700}
.charttip .ct-s{color:#cdd6e2; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase}
.charttip .ct-paye{color:#FFCB7A}
/* variantes vives lisibles sur le fond sombre de l'infobulle */
.charttip .up{color:#7FB2F2} .charttip .dn{color:#FF9166} .charttip .fl{color:#6FD3A8}
.legend{display:flex; gap:16px; font-size:12px; color:var(--ardoise); margin-bottom:16px; flex-wrap:wrap}
.legend i{display:inline-block; width:12px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th{text-align:right; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:700; padding:8px 10px; border-bottom:1.5px solid var(--trait)}
.tbl th:first-child{text-align:left}
.tbl th[data-tip]{cursor:help; text-decoration:underline dotted; text-underline-offset:3px; text-decoration-color:var(--trait-fort)}
.tbl td{padding:7px 10px; border-bottom:1px solid var(--trait); text-align:right}
.tbl td:first-child{text-align:left; font-weight:600}
.tbl tr:hover td{background:var(--carte-2)}
.tag{display:inline-block; padding:2px 7px; border-radius:5px; font-size:11.5px; font-weight:700}
.tag.p{background:color-mix(in srgb, var(--pos) 15%, var(--carte)); color:var(--pos)}
.tag.n{background:color-mix(in srgb, var(--neg) 15%, var(--carte)); color:var(--neg)}
.tag.z{color:var(--ardoise-clair)}
.methodo{font-size:12px; color:var(--ardoise); background:var(--carte-2); border:1px solid var(--trait); border-radius:var(--r-s); padding:13px 15px; margin-top:18px; line-height:1.55}
.methodo b{color:var(--encre)}

/* ---------- editeurs admin dans la fiche (report d'ouverture + HS payees) ----------
   Les primitives .hsx__title / .hsx__hint / .hsx__f / .hsx__add-btn / .hsx__status
   sont partagees par les deux editeurs. */
.rox{margin-top:18px; border:1px solid var(--trait); border-left:3px solid var(--marine); border-radius:var(--r-s); padding:15px 16px; background:var(--carte)}
.rox__row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:9px}
/* Champ, bouton et badge sur une même hauteur de contrôle et alignés en bas. */
.rox__row input[type=number], .rox__row .hsx__add-btn, .rox__row .rox__reset, .rox__row .rox__badge{height:36px; box-sizing:border-box}
.rox__row .hsx__add-btn, .rox__row .rox__reset, .rox__row .rox__badge{display:inline-flex; align-items:center; justify-content:center; align-self:flex-end; padding-top:0; padding-bottom:0}
.rox__row input[type=number]{width:122px; text-align:right; border:1px solid var(--trait); border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; color:var(--encre); background:var(--field-bg)}
.rox__row input[type=number]:focus{outline:2px solid var(--bleu); outline-offset:0}
.rox__reset{font-size:12.5px; font-weight:600; background:var(--carte); color:var(--ardoise); border:1px solid var(--trait); border-radius:999px; padding:9px 15px}
.rox__reset:hover{border-color:var(--trait-fort)}
.rox__reset[hidden]{display:none}
.rox__badge{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--carte-2); border:1px solid var(--trait); color:var(--ardoise); align-self:center}
.rox__badge.is-forced{background:color-mix(in srgb, var(--marine) 16%, var(--carte)); border-color:transparent; color:var(--marine)}

.hsx{margin-top:18px; border:1px solid var(--trait); border-left:3px solid var(--paye); border-radius:var(--r-s); padding:15px 16px; background:var(--carte)}
.hsx__title{font-family:'Archivo'; font-weight:800; font-size:14px}
.hsx__hint{font-size:12px; color:var(--ardoise); margin:5px 0 13px; line-height:1.5}
.hsx__hint b{color:var(--encre)}
.hsx__list{display:flex; flex-direction:column; gap:6px; margin-bottom:13px}
.hsx__empty,.hsx__loading{font-size:12.5px; color:var(--ardoise-clair); padding:4px 2px}
.hsx__row{display:flex; align-items:center; gap:11px; padding:7px 11px; border:1px solid var(--trait); border-radius:8px; background:var(--carte-2)}
.hsx__date{font-size:12.5px; font-weight:600; min-width:96px; flex:none}
.hsx__hrs{font-family:'Archivo'; font-weight:800; font-size:13px; min-width:60px; text-align:right; color:var(--paye); flex:none}
.hsx__hrs.is-credit{color:var(--eq)}
.hsx__motif{font-size:12.5px; color:var(--ardoise); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hsx__del{width:26px; height:26px; border-radius:7px; background:color-mix(in srgb, var(--neg) 14%, var(--carte)); color:var(--neg); font-size:15px; line-height:1; flex:none}
.hsx__del:hover{background:color-mix(in srgb, var(--neg) 26%, var(--carte))}
.hsx__add{display:flex; flex-wrap:wrap; align-items:flex-end; gap:9px}
.hsx__f{display:flex; flex-direction:column; gap:4px}
.hsx__f--grow{flex:1 1 150px; min-width:120px}
.hsx__f label{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ardoise-clair); font-weight:700}
.hsx__add input{border:1px solid var(--trait); border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; color:var(--encre); background:var(--field-bg)}
.hsx__add input:focus{outline:2px solid var(--bleu); outline-offset:0}
.hsx__add input[type=date]{width:148px}
.hsx__add #hsxH{width:88px; text-align:right}
.hsx__f--grow input{width:100%}
.hsx__add-btn{font-family:'Archivo'; font-weight:700; font-size:12.5px; background:var(--btn); color:#fff; border-radius:999px; padding:9px 17px; white-space:nowrap; transition:background .14s}
.hsx__add-btn:hover{background:var(--btn-hover)}
.hsx__status{font-size:12.5px; font-weight:600; margin-top:10px; min-height:16px}
.hsx__status.ok{color:var(--eq)} .hsx__status.err{color:var(--neg)}

/* ---------- chargement (barre + squelettes) / erreur ---------- */
.loadbar{position:fixed; left:0; right:0; top:0; height:3px; z-index:90; overflow:hidden; pointer-events:none}
.loadbar.on::after{content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, var(--bleu), transparent); animation:loadbar 1.1s ease-in-out infinite}
@keyframes loadbar{to{left:100%}}
.skel{position:relative; overflow:hidden; background:var(--skel); border-radius:6px}
.skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--skel-hi), transparent); animation:shimmer 1.3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skcard{background:var(--carte); border:1px solid var(--trait); border-radius:var(--r); padding:16px 17px; box-shadow:var(--ombre)}
.skcard__head{display:flex; justify-content:space-between; gap:12px}
.skline{height:12px; margin:6px 0}
#errbar{background:color-mix(in srgb, var(--neg) 12%, var(--carte)); border:1px solid color-mix(in srgb, var(--neg) 35%, var(--carte)); color:var(--neg); border-radius:var(--r-s); padding:13px 16px; margin:18px 0 0; font-size:13px; font-weight:600; line-height:1.5; display:none}
#errbar.show{display:block}

/* ---------- footer ---------- */
.pied{padding:28px 0 40px; color:var(--ardoise-clair); font-size:12px; line-height:1.6}
.pied b{color:var(--ardoise)}

@media (max-width:780px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .hero__title{font-size:25px}
  .controls{gap:9px}
  .field input{width:100%}
  .field{flex:1 1 100%; order:5}
  /* Sur mobile, le sélecteur d'établissements doit se replier : sinon ses
     boutons (nowrap) gardent leur largeur cumulée et débordent la fenêtre
     (débordement horizontal, pilule coupée à droite). On le passe pleine
     largeur, à coins doux, et on neutralise le spacer qui décalerait le
     reste des contrôles vers la droite. */
  .seg{flex-wrap:wrap; max-width:100%; width:100%; justify-content:flex-start; border-radius:var(--r)}
  .spacer{display:none}
  .seuil{flex:1 1 auto}
  .top__period{display:none}
  /* En-tete : autoriser le retour a la ligne pour eviter le debordement
     horizontal (sinon la barre sombre ne couvre pas toute la largeur de
     l'ecran et les boutons depassent sur le fond blanc). */
  .top__in{flex-wrap:wrap; row-gap:10px; padding:14px 16px}
  .top__right{flex:1 1 100%; min-width:0; justify-content:flex-end}
  .top__actions{flex-wrap:wrap; justify-content:flex-end; gap:6px}
  #who{min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ============================================================================
 *  PAGE DE CONNEXION (SSO Microsoft)
 * ========================================================================== */
body.login-page{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--bleu) 16%, transparent), transparent 55%),
    radial-gradient(circle at 88% 85%, color-mix(in srgb, var(--orange) 12%, transparent), transparent 55%),
    var(--papier);
}
.login-card{
  background:var(--carte); border:1px solid var(--trait); border-radius:16px; box-shadow:var(--ombre);
  padding:34px 36px; width:100%; max-width:400px; animation:loginRise .35s ease-out both;
}
@keyframes loginRise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}
.login-brand{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.login-brand .brand__mark{width:42px; height:42px; border-radius:9px}
.login-brand .brand-name{font-family:'Archivo'; font-weight:900; font-size:16px; letter-spacing:.02em; color:var(--encre)}
.login-brand .brand-sub{font-size:11px; color:var(--ardoise); font-weight:600}
.login-title{font-family:'Archivo'; font-weight:800; font-size:24px; color:var(--encre); margin:0 0 4px}
.login-subtitle{color:var(--ardoise); font-size:13px; font-weight:500; margin:0 0 20px; line-height:1.5}
.login-divider{display:flex; align-items:center; gap:10px; margin:0 0 16px; color:var(--ardoise-clair); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.login-divider::before,.login-divider::after{content:''; flex:1; height:1px; background:var(--trait)}
.ms-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 20px; border-radius:9px;
  border:1px solid var(--trait-fort); background:var(--carte); color:var(--encre); font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s, box-shadow .15s}
.ms-btn:hover{background:var(--carte-2); box-shadow:0 2px 8px rgba(0,0,0,0.10)}
.ms-btn svg{flex-shrink:0}
.sso-error{margin-top:14px; padding:10px 14px; border-radius:9px; background:rgba(220,38,38,0.08); border:1px solid rgba(220,38,38,0.25); color:#dc2626; font-size:13px; line-height:1.45}
.login-footer{text-align:center; font-size:11px; color:var(--ardoise-clair); font-weight:600; letter-spacing:.04em}