@charset "UTF-8";
/* ================= Suivi des lives ================= */
/* Reprend les jetons de couleur de 2-up Studio (style.css) et ajoute ce
   qu'il faut pour un tableau de bord : cartes, tableaux, formulaires. */

:root {
  /* Les tons complementaires, tires de la meme carte de marque : l'ambre
     de la marque sert d'alerte, les bleus intermediaires de reperes. */
  --warn: #F09A5B;
  --info: #5AA0DC;
  --violet: #2FBF9E;
  --rose: #F2736B;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --barre: 250px;
  /* une ombre a peine posee : elle detache les cartes du fond sans les
     faire flotter. En thème sombre elle disparait, le contraste suffit. */
  --ombre-carte: 0 1px 2px rgba(14, 36, 64, .04),
                 0 4px 14px rgba(14, 36, 64, .05);
}
/* Sur fond noir une ombre ne se voit pas : le contraste suffit a detacher. */
[data-theme="dark"] { --ombre-carte: none; }
[data-theme="light"] {
  --warn: #E0682F;
  --info: #2570B8;
  --violet: #17A67F;
  --rose: #D64545;
}

body.suivi { margin: 0; }

/* ---------------------------------------------------- connexion ------- */
body.connexion { display: grid; place-items: center; min-height: 100vh; }
.s-connexion { width: 100%; padding: 24px; display: grid; place-items: center; }
.s-connexion-carte {
  width: 100%; max-width: 390px; display: flex; flex-direction: column;
  gap: 15px; padding: 28px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--ombre-carte);
}
.s-connexion-marque { display: flex; align-items: center; gap: 12px; }
.s-connexion-marque strong { display: block; font-size: 15px;
  letter-spacing: -.2px; }
.s-connexion-marque span { font-size: 11.5px; color: var(--muted); }
.s-connexion-carte h1 { font-size: 19px; letter-spacing: -.3px; margin: 6px 0 0; }
.s-connexion-aide { font-size: 12.5px; color: var(--muted); line-height: 1.55;
  margin: 0; }
.s-connexion-carte .s-champ span { font-size: 12px; font-weight: 600;
  color: var(--muted); }
.s-connexion-erreur {
  margin: 0; font-size: 12.5px; padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
}

/* ---------------------------------------------------- structure ------- */
.s-app {
  display: grid;
  grid-template-columns: var(--barre) minmax(0, 1fr);
  min-height: 100vh;
}

.s-barre {
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(10px);
  padding: 18px 14px 24px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
}
.s-logo {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 8px 18px; text-decoration: none; color: var(--text);
}
/* Le sceau de la marque sur sa pastille navy : le blanc du logo demande un
   fond profond, jamais un fond clair (regle de la charte). */
.s-logo-mark {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; padding: 7px;
  background: linear-gradient(155deg, var(--wl-blue-600) 0%,
              var(--wl-blue-700) 45%, var(--wl-blue-900) 100%);
  box-shadow: 0 8px 20px rgba(23, 73, 126, .38);
}
.s-logo-mark img { width: 100%; height: auto; display: block; }
.s-logo strong { display: block; font-size: 15px; letter-spacing: -.2px; }
.s-logo span { font-size: 11.5px; color: var(--muted); }

.s-nav { display: flex; flex-direction: column; gap: 3px; }
.s-nav-titre {
  font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); padding: 16px 10px 6px; font-weight: 700;
}
.s-lien {
  display: flex; align-items: center; gap: 11px; position: relative;
  padding: 9px 11px; border-radius: var(--r-sm);
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  font-weight: 550; border: 1px solid transparent; cursor: pointer;
  background: none; width: 100%; text-align: left; font-family: inherit;
  transition: background .14s, color .14s;
}
.s-lien:hover { background: var(--surface-2); color: var(--text); }
/* L'ecran courant est marque par un filet a gauche, pas par un cadre :
   sept cadres empiles font une liste de boutons, pas une navigation. */
.s-lien.actif {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--text); font-weight: 650;
}
.s-lien.actif::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 3px; height: 17px; border-radius: 999px;
  background: var(--accent);
}
.s-lien.actif .s-lien-ico { color: var(--accent); }
.s-lien-ico { width: 20px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; }
.s-lien-num {
  margin-left: auto; font-size: 11px; font-weight: 700; min-width: 21px;
  padding: 2px 6px; border-radius: 999px; text-align: center;
  background: var(--surface-2); color: var(--muted);
}
.s-lien.actif .s-lien-num,
.s-lien-num.alerte { background: var(--danger); color: #fff; }

.s-barre-pied { margin-top: auto; padding-top: 18px; }
.s-retour {
  display: block; padding: 9px 11px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  border: 1px dashed var(--line); text-align: center;
}
.s-retour:hover { color: var(--text); border-style: solid; }

.s-main { min-width: 0; display: flex; flex-direction: column; }

/* ---------------------------------------------------- en-tete --------- */
.s-haut {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 28px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
}
.s-haut h1 { font-size: 19px; letter-spacing: -.35px; font-weight: 700; }
.s-haut p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.s-haut-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.s-qui {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  cursor: pointer; font: inherit; color: var(--text);
}
.s-qui:hover { border-color: var(--accent); }
.s-qui small { display: block; font-size: 10px; color: var(--muted); }
.s-qui b { font-size: 12.5px; font-weight: 600; }
.s-pastille {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
}
.s-pastille.mini { width: 22px; height: 22px; font-size: 9.5px; }
.s-pastille.grand { width: 46px; height: 46px; font-size: 16px; }

.s-contenu { padding: 24px 28px 70px; display: flex; flex-direction: column; gap: 20px; }

/* ---------------------------------------------------- boutons --------- */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.b:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--surface-2); }
.b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.b:disabled { opacity: .45; cursor: not-allowed; }
.b:disabled:hover { border-color: var(--line); background: var(--surface); }

/* Un aplat de la couleur de marque, sans degrade : la charte demande le
   bleu 700 pour les boutons, et un degrade le ferait virer au vert. */
.b.primaire {
  border-color: transparent; color: #fff; background: var(--accent);
  box-shadow: 0 1px 2px rgba(14, 36, 64, .28);
}
.b.primaire:hover { background: var(--accent-fonce); border-color: transparent;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.b.danger { color: var(--danger); }
.b.danger:hover { border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent); }
.b.plein-danger { background: var(--danger); border-color: transparent; color: #fff; }
.b.plein-danger:hover { background: var(--danger); filter: brightness(1.07); }
.b.petit { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.b.ico { padding: 8px; line-height: 1; }
.b.ico.petit { padding: 6px; }
.b.large { width: 100%; }

.b-groupe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------- cartes ---------- */
.s-carte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px;
  box-shadow: var(--ombre-carte);
}
.s-carte-tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.s-carte-tete h2 { font-size: 15px; font-weight: 700; letter-spacing: -.15px; }
.s-carte-tete p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.s-carte-tete .b-groupe { margin-left: auto; }

.s-grille { display: grid; gap: 16px; }
/* sans min-width:0 un element de grille ne descend jamais sous la largeur
   de son contenu : la page finit par deborder sur petit ecran. */
.s-grille > *, .s-colonnes > *, .s-kanban > * { min-width: 0; }
.s-grille.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-grille.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grille.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1280px) { .s-grille.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .s-grille.k3, .s-grille.k2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- indicateurs ----- */
/* L'icone est posee dans une pastille teintee de la couleur du chiffre :
   un trait seul, perdu dans le blanc, se lit comme un oubli. */
.s-kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px; cursor: default;
  box-shadow: var(--ombre-carte);
}
.s-kpi.clic { cursor: pointer;
  transition: border-color .14s, box-shadow .16s, transform .12s; }
.s-kpi.clic:hover {
  border-color: color-mix(in srgb, var(--ton) 45%, var(--line));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ton) 16%, transparent);
  transform: translateY(-2px);
}
.s-kpi.clic:focus-visible { outline: 2px solid var(--ton); outline-offset: 2px; }
.s-kpi-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.s-kpi-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  color: var(--ton);
  background: color-mix(in srgb, var(--ton) 13%, transparent);
}
.s-kpi-nom { font-size: 12px; color: var(--muted); font-weight: 600;
  line-height: 1.3; }
.s-kpi-val { font-size: 29px; font-weight: 750; letter-spacing: -1px;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.s-kpi-sous { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------- badges ---------- */
.s-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 650;
  border: 1px solid transparent; white-space: nowrap; line-height: 1.5;
  letter-spacing: .1px;
}
/* variante cliquable : meme pastille, mais elle ouvre quelque chose */
button.s-badge.clic { font-family: inherit; cursor: pointer;
  transition: background .14s, border-color .14s; }
button.s-badge.clic:hover { border-color: currentColor; }
button.s-badge.clic:focus-visible { outline: 2px solid currentColor;
  outline-offset: 1px; }
.t-ok     { color: var(--ok);     background: color-mix(in srgb, var(--ok) 15%, transparent);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.t-warn   { color: var(--warn);   background: color-mix(in srgb, var(--warn) 16%, transparent);   border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.t-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.t-info   { color: var(--info);   background: color-mix(in srgb, var(--info) 15%, transparent);   border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.t-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.t-muted  { color: var(--muted);  background: var(--surface-2); border-color: var(--line); }

/* ---------------------------------------------------- champs ---------- */
.s-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-champ > label {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.s-champ .opt { font-weight: 500; font-size: 11px; opacity: .8; }
.s-champ .oblig { color: var(--danger); }
.s-champ input, .s-champ select, .s-champ textarea, .s-saisie {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 13.5px;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .14s, box-shadow .14s;
}
.s-champ textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.s-champ input:focus, .s-champ select:focus, .s-champ textarea:focus,
.s-saisie:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.s-champ .aide { font-size: 11.5px; color: var(--muted); }
.s-champ select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px; }

.s-lignes { display: grid; gap: 14px; }
.s-lignes.d2 { grid-template-columns: 1fr 1fr; }
.s-lignes.d3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .s-lignes.d2, .s-lignes.d3 { grid-template-columns: 1fr; } }

/* choix visuel de l'etat de la seance */
.s-choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .s-choix { grid-template-columns: 1fr; } }
.s-choix-item {
  border: 2px solid var(--line); border-radius: var(--r-md);
  padding: 14px 12px; text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text); font: inherit;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .14s, background .14s, transform .1s;
}
.s-choix-item:hover { transform: translateY(-2px); }
.s-choix-item .gros { display: inline-flex; line-height: 1; color: var(--c); }
.s-choix-item b { font-size: 13.5px; }
.s-choix-item small { font-size: 11.5px; color: var(--muted); }
.s-choix-item.pris { border-color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent); }

/* petits boutons radio en ligne (urgence, priorite) */
.s-pilules { display: flex; gap: 8px; flex-wrap: wrap; }
.s-pilule {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.s-pilule:hover { color: var(--text); }
.s-pilule.pris { color: #fff; border-color: transparent;
  background: var(--c, var(--accent)); }

/* zone de depot de fichiers */
.s-depot {
  border: 2px dashed var(--line); border-radius: var(--r-md);
  padding: 18px; text-align: center; cursor: pointer; background: var(--surface-2);
  transition: border-color .14s, background .14s;
}
.s-depot:hover, .s-depot.survol { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.s-depot .ico { font-size: 22px; }
.s-depot b { display: block; font-size: 13px; margin-top: 4px; }
.s-depot small { color: var(--muted); font-size: 11.5px; }

.s-fichiers { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.s-fichier {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 13px;
}
.s-fichier .nom { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.s-fichier .poids { font-size: 11.5px; color: var(--muted); }
.s-fichier a { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------- tableaux -------- */
.s-tableau-boite { overflow-x: auto; border-radius: var(--r-md);
  border: 1px solid var(--line); }
table.s-tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.s-tableau th {
  text-align: left; padding: 11px 14px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.s-tableau td { padding: 12px 14px; border-bottom: 1px solid var(--line);
  vertical-align: middle; }
.s-tableau tr:last-child td { border-bottom: none; }
.s-tableau tbody tr { transition: background .12s; }
.s-tableau tbody tr:hover { background: var(--surface-2); }
.s-tableau .actions { text-align: right; white-space: nowrap; }
.s-tableau .actions .b-groupe { flex-wrap: nowrap; justify-content: flex-end; }
/* Des icones discretes plutot que des boutons a moitie effaces : a 35 %
   d'opacite elles passaient pour un affichage rate. */
.s-tableau .actions .b.ico {
  border-color: transparent; background: none; color: var(--muted);
}
.s-tableau .actions .b.ico:hover {
  color: var(--accent); background: var(--surface-2);
  border-color: var(--line);
}
.s-tableau .actions .b.ico.danger:hover { color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.s-tableau .principal { font-weight: 620; }
.s-tableau .discret { color: var(--muted); font-size: 12.5px; }
.s-tableau .clicable { cursor: pointer; }

.s-filtres { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.s-filtres .s-champ { min-width: 150px; }
.s-filtres .large { flex: 1; min-width: 220px; }

/* ---------------------------------------------------- listes ---------- */
.s-liste { display: flex; flex-direction: column; gap: 10px; }
/* Une seule ligne : le titre s'accommode, les pastilles restent a droite.
   En autorisant le retour a la ligne, un titre un peu long renvoyait les
   pastilles en dessous et chaque ligne prenait une hauteur differente. */
.s-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: border-color .14s;
}
.s-item:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.s-item .corps { flex: 1 1 auto; min-width: 0; }
.s-item .corps b { display: block; font-size: 13.5px; line-height: 1.35;
  letter-spacing: -.1px; }
.s-item .corps small { color: var(--muted); font-size: 12px; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-item .droite { display: flex; align-items: center; gap: 7px; flex: none; }
.s-item.alerte { border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.s-heure {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  font-weight: 700; padding: 6px 9px; border-radius: 8px;
  background: var(--surface-2); color: var(--text); flex: none;
}

.s-vide {
  text-align: center; padding: 40px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
/* le dessin dans un disque teinte : un trait nu au milieu du vide se lit
   comme une image qui n'a pas charge */
.s-vide .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; margin-bottom: 8px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.s-vide b { display: block; color: var(--text); font-size: 15px; margin-bottom: 5px; }
.s-vide p { font-size: 13px; max-width: 420px; margin: 0 auto 14px; line-height: 1.6; }

/* ---------------------------------------------------- planning -------- */
.s-colonnes { display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.s-colonne {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); display: flex; flex-direction: column;
  min-height: 150px; transition: border-color .14s, background .14s;
}
.s-colonne-tete {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
/* le nom ne passe pas a la ligne : sinon chaque colonne commence a une
   hauteur differente et la rangee de cartes se desaligne */
.s-colonne-tete > div { min-width: 0; }
.s-colonne-tete b { font-size: 13px; line-height: 1.35; letter-spacing: -.1px;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-colonne-tete small { display: block; font-size: 11.5px; color: var(--muted); }
.s-colonne-corps { padding: 11px; display: flex; flex-direction: column;
  gap: 9px; flex: 1; }
.s-colonne.survol { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.s-colonne-vide { font-size: 12.5px; color: var(--muted); text-align: center;
  padding: 20px 6px; border: 1px dashed var(--line); border-radius: var(--r-sm); }

.s-jeton {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
  background: var(--surface); cursor: grab; position: relative;
  transition: border-color .14s, box-shadow .16s;
}
.s-jeton:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--ombre-carte); }
.s-jeton:active { cursor: grabbing; }
.s-jeton.porte { opacity: .4; }
.s-jeton b { font-size: 13px; display: block; line-height: 1.35;
  letter-spacing: -.1px; }
.s-jeton small { font-size: 11.5px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-jeton .bandeau { display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px; padding-right: 30px; }
/* le badge d'etat prend la place qui reste, l'heure garde la sienne */
.s-jeton .bandeau .s-badge { margin-left: auto; }
.s-jeton .pied { display: flex; align-items: center; gap: 8px;
  margin-top: 7px; }
.s-jeton .pied > .s-badge, .s-jeton .pied > button { margin-left: auto; }

/* Les outils n'apparaissent qu'au survol, sur un fond qui les detache du
   texte qu'ils recouvrent. */
.s-jeton .outils {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 3px;
  opacity: 0; transition: opacity .14s; border-radius: 9px;
  background: var(--surface); box-shadow: 0 0 0 4px var(--surface);
}
.s-jeton:hover .outils, .s-jeton:focus-within .outils { opacity: 1; }

/* ---------------------------------------------------- kanban ---------- */
.s-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; align-items: start; }
@media (max-width: 1080px) { .s-kanban { grid-template-columns: 1fr; } }
.s-ticket {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px;
  background: var(--surface-2); cursor: pointer; display: flex;
  flex-direction: column; gap: 6px; transition: border-color .14s, transform .1s;
}
.s-ticket:hover { border-color: var(--accent); transform: translateY(-2px); }
.s-ticket b { font-size: 13.5px; line-height: 1.35; }
.s-ticket .meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); }

.s-fil { display: flex; flex-direction: column; gap: 12px; }
.s-message { display: flex; gap: 11px; }
.s-message .bulle {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px; padding: 11px 14px; font-size: 13.5px;
  line-height: 1.6; max-width: 78%; white-space: pre-wrap; overflow-wrap: anywhere;
}
.s-message .qui { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.s-message.moi { flex-direction: row-reverse; }
.s-message.moi .bulle { border-radius: 14px 4px 14px 14px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.s-message.moi .qui { text-align: right; }

/* ---------------------------------------------------- archive --------- */
.s-arbre { font-size: 13.5px; }
.s-noeud { border-left: 1px dashed var(--line); margin-left: 11px;
  padding-left: 14px; }
.s-noeud:first-child { border-left: none; margin-left: 0; padding-left: 0; }
.s-branche {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: var(--r-sm); cursor: pointer; user-select: none;
  border: 1px solid transparent;
}
.s-branche:hover { background: var(--surface-2); }
.s-branche .fleche { width: 13px; color: var(--muted); flex: none;
  display: inline-flex; align-items: center; transition: transform .15s; }
.s-branche.ouvert .fleche { transform: rotate(90deg); }
.s-branche .nom { font-weight: 600; }
.s-branche .compte { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.s-branche.vide .nom { color: var(--muted); font-weight: 500; }
.s-chemin {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  color: var(--muted); background: var(--surface-2); padding: 9px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  overflow-x: auto; white-space: nowrap;
}

/* ---------------------------------------------------- graphes --------- */
.s-graphe { width: 100%; height: auto; display: block; overflow: visible; }
.s-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px;
  color: var(--muted); margin-top: 10px; }
.s-legende span { display: inline-flex; align-items: center; gap: 6px; }
.s-legende i { width: 10px; height: 10px; border-radius: 3px; display: block; }

.s-barre-progres { height: 7px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; }
.s-barre-progres > i { display: block; height: 100%; border-radius: 999px;
  background: var(--accent); }

/* ------------------------------------------------ blocs de formulaire - */
.s-blocs { display: flex; flex-direction: column; gap: 14px; }
.s-bloc {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); overflow: hidden;
}
.s-bloc-tete {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.s-bloc-tete b { font-size: 13px; letter-spacing: -.1px; }
.s-bloc-tete small { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.s-bloc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.s-bloc-corps { padding: 14px; display: flex; flex-direction: column; gap: 13px; }
.s-bloc-corps > .s-info:first-child { margin-top: 0; }

/* ---------------------------------------------------- mouvement ------ */
/* Des mouvements courts et discrets : ils disent d'où vient un élément,
   ils ne font pas attendre. Rien au-delà de 260 ms, et tout se coupe pour
   qui a demandé moins d'animations à son système. */
@keyframes s-monte { from { opacity: 0; transform: translateY(8px); } }
@keyframes s-fondu { from { opacity: 0; } }
@keyframes s-glisse { from { opacity: 0; transform: translateX(-6px); } }

.s-carte, .s-kpi, .s-perf, .s-colonne, .s-laureat {
  animation: s-monte .26s cubic-bezier(.22, .61, .36, 1) both;
}
/* les tuiles arrivent l'une après l'autre : l'œil suit la rangée */
.s-grille > *:nth-child(1) { animation-delay: 0ms; }
.s-grille > *:nth-child(2) { animation-delay: 35ms; }
.s-grille > *:nth-child(3) { animation-delay: 70ms; }
.s-grille > *:nth-child(4) { animation-delay: 105ms; }
.s-grille > *:nth-child(5) { animation-delay: 140ms; }
.s-grille > *:nth-child(6) { animation-delay: 175ms; }
.s-grille > *:nth-child(7) { animation-delay: 210ms; }
.s-grille > *:nth-child(8) { animation-delay: 245ms; }
.s-perf-liste > *:nth-child(2) { animation-delay: 45ms; }
.s-perf-liste > *:nth-child(3) { animation-delay: 90ms; }
.s-perf-liste > *:nth-child(4) { animation-delay: 135ms; }
.s-perf-liste > *:nth-child(5) { animation-delay: 180ms; }

.s-item, .s-jeton, .s-tache { animation: s-fondu .22s ease both; }
.s-lien.actif::before { animation: s-glisse .2s ease both; }

/* la barre se remplit au lieu d'apparaître remplie */
.s-barre-progres > i { transition: width .5s cubic-bezier(.22, .61, .36, 1); }
.s-kpi-val { transition: color .2s ease; }

/* le contenu d'un écran se pose, il ne clignote pas */
.s-contenu { animation: s-fondu .2s ease both; }

.b, .s-badge, .s-tache, .s-jeton, .s-item, .s-kpi, .s-import-qui {
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}
.b:active:not(:disabled) { transform: translateY(1px); }
.s-tache .case { transition: transform .14s cubic-bezier(.3, 1.4, .5, 1),
  border-color .14s, background .14s; }
.s-tache .case:active { transform: scale(.88); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------ performance -------- */
.s-perf-liste { display: flex; flex-direction: column; gap: 14px; }

.s-perf {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--ombre-carte);
}
.s-perf.hors { opacity: .72; }
.s-perf.laureat { border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
  background: color-mix(in srgb, var(--ok) 5%, var(--surface)); }

.s-perf-tete { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.s-perf-tete .qui { flex: 1; min-width: 0; }
.s-perf-tete .qui b { font-size: 15px; }
.s-perf-tete .qui small { display: block; font-size: 12px; color: var(--muted);
  margin-top: 2px; }
.s-perf-rang {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 750;
  background: var(--surface-2); color: var(--muted);
}
.s-perf-rang.podium { background: var(--accent); color: #fff; }
.s-perf-rang.hors { font-weight: 600; }
.s-perf-score { text-align: right; flex: none; }
.s-perf-score b { display: block; font-size: 26px; font-weight: 750;
  letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.s-perf-score small { font-size: 11px; color: var(--muted); }

/* les quatre composantes, chacune avec son calcul en clair dessous */
.s-perf-parts { display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .s-perf-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .s-perf-parts { grid-template-columns: 1fr; } }
.s-perf-part .haut { display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px; }
.s-perf-part .nom { font-size: 12px; font-weight: 600; color: var(--muted);
  flex: 1; min-width: 0; }
.s-perf-part .val { font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.s-perf-part small { display: block; font-size: 11px; color: var(--muted);
  margin-top: 6px; line-height: 1.4; }
.s-perf-part small.poids { opacity: .7; }

.s-perf-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); padding-top: 12px;
  border-top: 1px solid var(--line); }

/* le lauréat, en tête d'écran */
.s-laureat {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--ok) 42%, var(--line));
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
.s-laureat.vide { border-color: var(--line); background: var(--surface-2); }
.s-laureat .medaille {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent);
}
.s-laureat.vide .medaille { color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent); }
.s-laureat .corps { flex: 1; min-width: 0; }
.s-laureat .corps small { display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.s-laureat .corps b { display: block; font-size: 17px; margin: 3px 0; }
.s-laureat .corps p { margin: 4px 0 6px; font-size: 13px; line-height: 1.5; }
.s-laureat .corps small:last-child { text-transform: none; letter-spacing: 0;
  font-weight: 500; }

/* l'annonce en tête du tableau de bord : discrète pour l'équipe,
   franchement visible pour l'intéressé */
.s-annonce {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--ombre-carte);
}
.s-annonce .medaille {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--muted);
  background: color-mix(in srgb, var(--muted) 13%, transparent);
}
.s-annonce .corps { flex: 1; min-width: 0; }
.s-annonce .corps small { display: block; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.s-annonce .corps b { display: block; font-size: 15px; margin-top: 3px; }
.s-annonce .corps p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted);
  line-height: 1.5; }

.s-annonce.moi {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
.s-annonce.moi .medaille { color: var(--ok);
  background: color-mix(in srgb, var(--ok) 16%, transparent); }
.s-annonce.moi .corps b { color: var(--ok); font-size: 16px; }

/* la méthode, repliée : on la déplie quand on conteste un chiffre */
.s-perf-methode { border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); padding: 12px 16px; }
.s-perf-methode summary { cursor: pointer; font-size: 13px; font-weight: 650;
  display: flex; align-items: center; gap: 8px; }
.s-perf-methode .corps { padding-top: 12px; }
.s-perf-poids { display: grid; gap: 12px; margin-bottom: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .s-perf-poids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-perf-poids > div { padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); }
.s-perf-poids b { display: block; font-size: 18px; color: var(--accent);
  letter-spacing: -.5px; }
.s-perf-poids span { display: block; font-size: 12.5px; font-weight: 600;
  margin: 2px 0 4px; }
.s-perf-poids small { font-size: 11px; color: var(--muted); line-height: 1.4; }

/* ---------------------------------------------------- ce soir -------- */
.s-soir-liste { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.s-soir-carte {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 10px;
}
/* la séance en cours passe devant : c'est celle qu'on surveille */
.s-soir-carte.encours {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.s-soir-carte.bientot {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.s-soir-carte.finie { opacity: .82; }

.s-soir-tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.s-soir-tete .droite { margin-left: auto; }
.s-soir-quand { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; color: var(--muted); }
.s-soir-quand.encours { color: var(--accent); }
.s-soir-quand.bientot { color: var(--warn); }
.s-soir-quand.finie { color: var(--ok); }
.s-soir-titre { font-size: 14px; line-height: 1.35; letter-spacing: -.1px; }
.s-soir-qui { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--muted); font-size: 12px; }

/* l'action du moment, plus lisible que tout le reste de la carte */
.s-soir-action {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.s-soir-action .marque {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.s-soir-action .quoi { flex: 1; min-width: 0; }
.s-soir-action .quoi small { display: block; font-size: 10.5px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
  font-weight: 700; }
.s-soir-action .quoi b { display: block; font-size: 13.5px; margin-top: 2px; }
.s-soir-fini { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--ok); font-weight: 600; padding: 4px 0; }
.s-soir-outils { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.s-horloge { display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  font-weight: 700; padding: 6px 10px; border-radius: 8px;
  background: var(--surface-2); }

/* une case à cocher qui se lit : le libellé fait partie de la cible */
.s-coche { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 11px 13px; border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--line); }
.s-coche:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.s-coche input { width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  accent-color: var(--accent); cursor: pointer; }
.s-coche b { display: block; font-size: 13px; }
.s-coche small { display: block; font-size: 11.5px; color: var(--muted);
  margin-top: 2px; }

/* ------------------------------------------------ professeurs -------- */
/* Le numéro se compose d'un doigt : sur un téléphone, c'est le geste que
   le technicien fait le plus souvent. */
.s-appel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; font-weight: 650; white-space: nowrap;
  color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  transition: background .14s, border-color .14s;
}
.s-appel:hover { background: color-mix(in srgb, var(--ok) 20%, transparent);
  border-color: var(--ok); }

.s-tache-appel { display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; margin-top: 7px; }
.s-tache-appel b { font-size: 12.5px; }
.s-tache-appel .manque { font-size: 11.5px; color: var(--warn);
  font-style: italic; }

/* ---------------------------------------------------- import --------- */
.s-import-zone {
  width: 100%; resize: vertical; font: inherit; font-size: 12.5px;
  font-family: ui-monospace, Consolas, monospace; line-height: 1.55;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); box-sizing: border-box;
}
.s-import-zone:focus { outline: none; border-color: var(--accent);
  background: var(--surface); }
.s-import-equipe { display: flex; flex-wrap: wrap; gap: 7px; }
.s-import-qui {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: border-color .14s, color .14s, background .14s;
}
.s-import-qui .case {
  width: 17px; height: 17px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  color: transparent;
}
.s-import-qui.pris { color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.s-import-qui.pris .case { background: var(--accent); border-color: var(--accent);
  color: #fff; }
.s-import-resume { display: flex; flex-wrap: wrap; gap: 7px; }
.s-import-part { display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px; color: var(--muted); }
.s-import-ecartees { margin-top: 10px; font-size: 12.5px; }
.s-import-ecartees summary { cursor: pointer; color: var(--warn);
  font-weight: 600; }
.s-import-ecartees p { margin: 6px 0 0; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  overflow-wrap: anywhere; }

/* ---------------------------------------------------- icones ---------- */
/* Traits en currentColor : une icone prend la couleur de son entourage. */
.ic { flex: none; display: inline-block; vertical-align: -.18em; }
/* un compteur precede de son dessin : trombone 3, bulle 2... */
.piece { display: inline-flex; align-items: center; gap: 4px; }
/* dans le releve d'equipe : un chiffre lisible sous son dessin */
.s-chiffre {
  padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 650;
  color: var(--muted); background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
/* le dessin qui annonce un type de fichier ou de dossier */
.genre { display: inline-flex; align-items: center; color: var(--muted); }
.s-toast .marque { display: inline-flex; align-items: center; }

/* ---------------------------------------------------- etapes ---------- */
.s-taches { display: flex; flex-direction: column; gap: 12px; }
.s-taches-tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 13px; }
.s-taches-tete span { color: var(--muted); font-size: 12px; }
.s-taches-groupe { display: flex; flex-direction: column; gap: 7px; }
.s-taches-groupe .s-nav-titre { padding: 0; margin: 4px 0 0;
  display: flex; align-items: center; gap: 7px; }
.s-tache-bloc { display: flex; flex-direction: column; }

.s-tache {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  transition: border-color .14s, background .14s;
}
.s-tache:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
/* la case seule est cliquable : le reste de la ligne porte des boutons */
.s-tache .case {
  flex: none; width: 22px; height: 22px; border-radius: 7px; padding: 0;
  border: 1.5px solid var(--line); display: grid; place-items: center;
  background: var(--surface); color: transparent; cursor: pointer;
  font: inherit; transition: border-color .14s, background .14s;
}
.s-tache .case:hover { border-color: var(--accent); }
.s-tache .case.liee { cursor: default; border-style: dashed; }
.s-tache .case.liee:hover { border-color: var(--line); }
/* chaque etape porte son dessin dans une pastille : la liste se parcourt
   par l'image avant de se lire */
.s-tache > .ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  color: var(--accent); background: var(--surface-2);
  transition: color .14s, background .14s;
}
.s-tache .corps { flex: 1; min-width: 0; }
.s-tache .corps b { display: block; font-size: 13.5px; }
.s-tache .corps small { color: var(--muted); font-size: 11.5px; }
.s-tache .outils { display: flex; align-items: center; gap: 6px; flex: none; }

.s-tache.faite { border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.s-tache.faite .case { background: var(--ok); border-color: var(--ok); color: #fff; }
.s-tache.faite > .ico { color: var(--ok);
  background: color-mix(in srgb, var(--ok) 15%, transparent); }
.s-tache.faite .corps b { text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }

/* Une case touchée mais pas encore validée : un liseré pointillé et un
   repère à gauche. Sans ce signal, le bouton « Valider » aurait l'air de
   réclamer quelque chose qu'on a déjà fait. */
.s-tache.change {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.s-tache.change::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 999px; background: var(--accent);
}
.s-tache { position: relative; }
.s-tache.change .corps small { color: var(--accent); font-weight: 600; }
.s-tache.change.faite { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.s-tache.change.faite::before { background: var(--ok); }
.s-tache.change.faite .corps small { color: var(--ok); }

/* pied de la fenêtre des étapes : le compte en attente à gauche */
.s-taches-pied { display: flex; align-items: center; gap: 12px; width: 100%; }
.s-taches-pied .droite { margin-left: auto; display: flex; gap: 8px; }
.s-taches-attente {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}

/* le bouton de commentaire porte son compte en pastille */
.s-tache .outils .b.parle { color: var(--accent); position: relative; }
.s-tache .outils .b.parle i {
  position: absolute; top: -5px; right: -5px; font-style: normal;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}

/* ------------------------------------------------- commentaires ------- */
.s-notes {
  display: flex; flex-direction: column; gap: 8px;
  margin: -1px 0 0; padding: 12px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.s-note { border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 2px 0 2px 10px; }
.s-note .haut { display: flex; align-items: center; gap: 8px; }
.s-note .haut b { font-size: 12.5px; }
.s-note .haut span { font-size: 11px; color: var(--muted); flex: 1; }
.s-note p { margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.s-notes-vide { margin: 0; font-size: 12px; color: var(--muted); font-style: italic; }
.s-note-saisie { display: flex; gap: 8px; align-items: flex-end; }
.s-note-saisie textarea {
  flex: 1; min-width: 0; resize: vertical; font: inherit; font-size: 13px;
  padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.s-note-saisie textarea:focus { outline: none; border-color: var(--accent); }
.s-note-saisie .b { flex: none; }

/* ---------------------------------------------------- modale ---------- */
.s-voile {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 22px; background: rgba(6, 9, 16, .6); backdrop-filter: blur(4px);
  animation: apparait .16s ease;
}
@keyframes apparait { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.s-modale {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  width: min(780px, 100%); max-height: calc(100vh - 44px);
  display: flex; flex-direction: column; animation: monte .2s ease;
}
.s-modale.etroite { width: min(480px, 100%); }
.s-modale.large { width: min(980px, 100%); }
.s-modale-tete {
  display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
}
.s-modale-tete h3 { font-size: 17px; }
.s-modale-tete p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.s-modale-tete .fermer { margin-left: auto; }
.s-modale-corps { padding: 20px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; }
.s-modale-pied {
  display: flex; align-items: center; gap: 9px; padding: 14px 22px;
  border-top: 1px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.s-modale-pied .droite { margin-left: auto; display: flex; gap: 9px; }

.s-bloc {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px;
  background: var(--surface-2); display: flex; flex-direction: column; gap: 13px;
}
.s-bloc > .titre { font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }

.s-erreur {
  padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.s-info {
  padding: 11px 14px; border-radius: var(--r-sm); font-size: 12.5px;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--line); line-height: 1.55;
}

/* ---------------------------------------------------- messages -------- */
.s-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px; }
.s-toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13.5px; max-width: 380px; animation: monte .18s ease;
}
.s-toast.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.s-toast.err { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }

/* ---------------------------------------------------- divers ---------- */
.s-titre-jour { font-size: 13px; color: var(--muted); font-weight: 600; }
.s-sep { height: 1px; background: var(--line); }
.s-nowrap { white-space: nowrap; }

/* --- ecrire en arabe partout ------------------------------------------
   `plaintext` deduit le sens de lecture du premier caractere fort de chaque
   element : un titre arabe se met a droite, une etiquette francaise reste a
   gauche, et personne n'a de reglage a cocher. La regle est volontairement
   large — les libelles de l'application sont en francais, donc seuls les
   textes saisis par l'utilisateur basculent.
   (unicode-bidi ne s'herite pas : il faut viser les descendants.) */
.s-contenu *, .s-modale *, .s-toast, .s-menu-profil * {
  unicode-bidi: plaintext;
}
/* les nombres seuls (heures, compteurs) n'ont pas de sens fort : on les
   garde alignes comme le reste de l'interface. */
.s-heure, .s-kpi-val, .s-lien-num, .s-badge { unicode-bidi: normal; }

.s-chargement { padding: 60px; text-align: center; color: var(--muted); }
.s-tourne { display: inline-block; width: 22px; height: 22px;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: rotation .7s linear infinite; }
@keyframes rotation { to { transform: rotate(360deg); } }

/* ---------------------------------------------------- responsive ------ */
@media (max-width: 900px) {
  .s-app { grid-template-columns: 1fr; }
  /* min-width:0 : sans lui, l'element de grille refuse de se retrecir
     sous la largeur de ses liens et la page deborde a droite. */
  .s-barre { position: static; height: auto; flex-direction: row;
    align-items: center; overflow-x: auto; padding: 10px 14px;
    min-width: 0; border-right: none; border-bottom: 1px solid var(--line); }
  .s-logo { padding: 0 10px 0 0; }
  .s-logo div { display: none; }
  .s-nav { flex-direction: row; gap: 4px; }
  .s-nav-titre, .s-barre-pied { display: none; }
  .s-lien { padding: 8px 11px; white-space: nowrap; }
  .s-lien span.txt { display: none; }
  .s-lien.actif span.txt { display: inline; }
  .s-haut, .s-contenu { padding-left: 16px; padding-right: 16px; }
}