:root{
  /* les 5 jetons du contrat client.js — valeurs par défaut (page sans JS) */
  --paper:#f6f5f0; --ink:#20241f; --muted:#8b9088; --accent:#2f6b5e; --line:#e3ded2;
  /* alias internes utilisés dans toute la feuille de style */
  --fond:var(--paper); --texte:var(--ink); --faible:var(--muted); --ligne:var(--line);
  --marque:var(--accent); --sur-marque:#fdfbf6; --sur-accent:#fdfbf6;
  --accent-vif:#3d8874;
  --accent-faible:rgba(47,107,94,.09); --accent-ligne:rgba(47,107,94,.38);
  --surface:#ffffff; --doux:#4d5750;
  --ok:#2f6b5e; --ok-fond:#e8f1ec; --ok-ligne:#c4ddd2;
  --attente:#9c6b1f; --attente-fond:#f8eeda; --attente-ligne:#ecd6a6;
  --alerte:#ab4330; --alerte-fond:#fbe9e4; --alerte-ligne:#efc3b6;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* signature : jauge d'heures façon perfusion */
.jauge{position:relative;height:7px;border-radius:4px;background:var(--fond);border:1px solid var(--ligne);overflow:hidden}
.jauge i{position:absolute;inset:0;width:var(--p,0%);background:var(--marque);border-radius:4px;transition:width .5s var(--ease)}
.jauge.depasse i{background:var(--alerte)}

/* grille planning */
.planning-scroll{overflow-x:auto;border:1px solid var(--ligne);border-radius:6px;background:var(--surface)}
.grille-planning{border-collapse:collapse;font-size:12.5px;min-width:900px}
.grille-planning th{position:sticky;top:0;background:var(--surface);z-index:2;text-align:center;padding:8px 4px;font-size:10.5px;border-bottom:1px solid var(--ligne);border-right:1px solid var(--ligne)}
.grille-planning th.we{background:var(--fond)}
.grille-planning td.nom-col{position:sticky;left:0;background:var(--surface);z-index:1;text-align:left;padding:8px 10px;border-right:1px solid var(--ligne);font-weight:600;font-size:12px;white-space:nowrap;min-width:140px}
.grille-planning td{border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);padding:3px;text-align:center;width:30px}
.grille-planning tr:last-child td{border-bottom:0}
.case-garde{width:100%;height:30px;border-radius:4px;border:1px solid transparent;font-family:"Plex Sans",sans-serif;font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;transition:transform .12s,box-shadow .12s}
.case-garde:active{cursor:grabbing}
.case-garde[draggable=true]:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.case-garde.M{background:#eaf1ec;color:#2f6b5e}
.case-garde.S{background:#fdeee0;color:#a25b18}
.case-garde.N{background:#e7e9f2;color:#3c4693}
.case-garde.R{background:transparent;color:var(--faible);border-style:dashed;border-color:var(--ligne)}
.case-garde.CP{background:#fbe9e4;color:#ab4330}
.case-garde.survol{outline:2px dashed var(--marque);outline-offset:1px}
.legende-gardes{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--doux);margin-top:10px}
.legende-gardes span{display:flex;align-items:center;gap:6px}
.legende-gardes i{width:10px;height:10px;border-radius:3px;display:block}

.popover-garde{position:fixed;z-index:90;background:var(--fond);border:1px solid var(--ligne);border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:8px;display:none;gap:4px}
.popover-garde.ouvert{display:flex}
.popover-garde button{border:1px solid var(--ligne);background:var(--surface);border-radius:5px;width:38px;height:34px;font-family:"Plex Sans",sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:11.5px;cursor:pointer}
.popover-garde button:hover{border-color:var(--accent-ligne);background:var(--accent-faible)}

.ligne-echange{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ligne)}
.ligne-echange:last-child{border-bottom:0}
.av-mini{width:32px;height:32px;border-radius:6px;background:var(--accent-faible);color:var(--marque);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.ligne-echange .detail{flex:1;min-width:0}
.ligne-echange .detail strong{font-size:13px;display:block}
.ligne-echange .detail span{font-size:11.5px;color:var(--faible)}
.ligne-echange .actions{display:flex;gap:6px;flex:none}

/* aperçu vivant — écran de connexion */
.av-planning{display:flex;flex-direction:column;gap:7px}
.av-ligne{display:flex;gap:7px}
.av-ligne .case-garde{height:30px;width:auto;flex:1;cursor:default}
/* entrée unique déclenchée au chargement (.av-hero-actif), jamais en boucle */
.av-hero-actif .av-glisse{animation:avGlisserGarde 1.1s .5s cubic-bezier(.22,1,.36,1) both}
@keyframes avGlisserGarde{
  0%{transform:translateX(0)}
  55%{transform:translateX(calc(200% + 14px));box-shadow:0 6px 14px rgba(0,0,0,.14)}
  100%{transform:translateX(calc(200% + 14px));box-shadow:0 6px 14px rgba(0,0,0,.14)}
}
.av-legende{margin-top:14px;font-size:12px;color:var(--faible);text-align:center}
@media(prefers-reduced-motion:reduce){.av-hero-actif .av-glisse{animation:none}}