/* Office — feuille de style unique.
   Règle 5 : le CSS vit en classes ordinaires, jamais généré par JavaScript. */

:root{
  --ardoise:#17120E; --ardoise-2:#241D17; --ardoise-3:#33291F;
  --sur-ardoise:#F6F1EA; --sur-ardoise-2:#A79C8E;
  --fond:#EDE8E1; --surface:#FFFDFB; --relief:#F6F2EC; --touche:#FFFEFC;
  --filet:rgba(30,24,19,.13); --filet-fort:rgba(30,24,19,.26);
  --texte:#1E1813; --sourd:#786F65; --faible:#A79E93;
  --s-todo:#9C9488; --s-doing:#1E6BB8; --s-block:#E2564A;
  --s-review:#DE9426; --s-done:#3E9C6D;
  --t-todo:#EDE9E3; --t-doing:#DDEAF6; --t-block:#FBE4E1;
  --t-review:#FAEEDA; --t-done:#DFF0E7;
  --weekend:#E5DFD6; --bar-todo:#CFC8BF; --lien:#8C8073;
  --r:14px; --r-s:9px; --r-xs:6px;
  --ombre:0 1px 2px rgba(30,24,19,.05), 0 3px 10px rgba(30,24,19,.05);
  --ombre-h:0 2px 4px rgba(30,24,19,.07), 0 8px 20px rgba(30,24,19,.09);
  --grot:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"JetBrains Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ardoise:#0B0908; --ardoise-2:#171310; --ardoise-3:#241E19;
    --sur-ardoise:#F2EDE6; --sur-ardoise-2:#918879;
    --fond:#17130F; --surface:#211C17; --relief:#2A241E; --touche:#2C2825;
    --filet:rgba(255,255,255,.10); --filet-fort:rgba(255,255,255,.22);
    --texte:#F2EDE6; --sourd:#9C9285; --faible:#6E6559;
    --s-todo:#8B8377; --s-doing:#5B9BE0; --s-block:#EE6E60;
    --s-review:#E5AC4C; --s-done:#5DB98A;
    --t-todo:#262019; --t-doing:#152A3D; --t-block:#331F1C;
    --t-review:#332711; --t-done:#152C21;
    --weekend:#191410; --bar-todo:#3B342C; --lien:#8A7E6E;
    --ombre:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
    --ombre-h:0 2px 6px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--fond);color:var(--texte);font:15px/1.5 var(--grot);-webkit-font-smoothing:antialiased}
.v,.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lab{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--sourd)}
/* Coquille : la colonne occupe toute la hauteur à gauche, le reste s'empile
   à sa droite. Une seule variable règle sa largeur, repliée ou non. */
.app{height:100vh;min-height:560px;display:grid;
  grid-template-columns:var(--cote) 1fr;grid-template-rows:auto 1fr auto;
  grid-template-areas:"cote vitales" "cote vue" "cote onglets";--cote:232px}
.app.replie{--cote:44px}
.cote{grid-area:cote}.vitales{grid-area:vitales}.vue{grid-area:vue}.onglets{grid-area:onglets}

/* ── ardoise ── */
.vitales{display:flex;align-items:stretch;gap:10px;padding:13px 18px;background:var(--ardoise);color:var(--sur-ardoise);overflow-x:auto}
.bloc{display:flex;flex-direction:column;gap:6px;justify-content:center;padding:11px 18px;background:var(--ardoise-2);border-radius:var(--r-s);white-space:nowrap;flex:none}
.bloc .lab{color:var(--sur-ardoise-2)}
.bloc .v{font-size:26px;line-height:1;letter-spacing:-.025em}
.bloc .v small{font-size:15px;color:var(--sur-ardoise-2);letter-spacing:0}
.bloc.titre{background:none;padding-left:4px}
.bloc.titre .nom{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.bloc.titre .code{font-family:var(--mono);font-size:11px;color:var(--sur-ardoise-2)}
.bloc.alerte{background:var(--s-block);color:#fff}
.bloc.alerte .lab{color:rgba(255,255,255,.78)}
/* ── colonne de navigation ── */
.cote{background:var(--ardoise);color:var(--sur-ardoise);display:flex;flex-direction:column;
  min-height:0;border-right:1px solid rgba(255,255,255,.07)}
.cote-tete{display:flex;align-items:center;gap:8px;padding:13px 8px 13px 18px;flex:none}
.app.replie .cote-tete{padding:13px 0;justify-content:center}
.cote-marque{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-right:auto}
.cote-bascule{width:26px;height:26px;flex:none;display:grid;place-items:center;border:0;border-radius:var(--r-xs);
  background:none;color:var(--sur-ardoise-2);font:inherit;font-size:17px;line-height:1;cursor:pointer}
.cote-bascule:hover{background:var(--ardoise-3);color:var(--sur-ardoise)}
.cote-bascule:focus-visible{outline:2px solid var(--s-doing);outline-offset:1px}

.cote-corps{flex:1;min-height:0;overflow-y:auto;padding:0 10px}
.cote-tous,.cote-projet,.cote-neuf{display:block;width:100%;text-align:left;border:0;background:none;
  font:inherit;color:inherit;cursor:pointer;border-radius:var(--r-s)}
.cote-tous{padding:8px 10px;font-size:13px;color:var(--sur-ardoise-2);margin-bottom:8px}
.cote-tous:hover{background:var(--ardoise-2);color:var(--sur-ardoise)}
.cote-tous.actif{background:var(--ardoise-3);color:var(--sur-ardoise);font-weight:600}
.cote-filtre{width:100%;margin-bottom:8px;padding:7px 11px;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;background:var(--ardoise-2);color:var(--sur-ardoise);font:inherit;font-size:13px}
.cote-filtre::placeholder{color:var(--sur-ardoise-2)}
.cote-filtre:focus{outline:2px solid var(--s-doing);outline-offset:1px;border-color:transparent}
.cote-liste{display:flex;flex-direction:column;gap:2px}

.cote-projet{padding:9px 10px 10px;display:flex;flex-direction:column;gap:5px;position:relative}
.cote-projet.cache{display:none}
.cote-projet:hover{background:var(--ardoise-2)}
.cote-projet.actif{background:var(--ardoise-3)}
/* Le repère de la sélection est un filet, pas une couleur de fond seule :
   il reste lisible pour qui distingue mal les nuances de sombre. */
.cote-projet.actif::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--s-doing)}
.cote-projet.archive{opacity:.5}
.cote-p-haut{display:flex;align-items:center;gap:8px}
.cote-p-nom{font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cote-projet.actif .cote-p-nom{color:var(--sur-ardoise)}
.cote-p-alerte{width:7px;height:7px;border-radius:50%;background:var(--s-block);flex:none;margin-left:auto}
.cote-p-bas{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--sur-ardoise-2)}
.cote-p-bas span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cote-p-n{font-family:var(--mono);font-variant-numeric:tabular-nums;flex:none}
.jauge.mini{height:3px;background:rgba(255,255,255,.10)}
.cote-rien{padding:10px;font-size:12.5px;color:var(--sur-ardoise-2)}
.cote-rien[hidden]{display:none}

.cote-pied{flex:none;padding:10px;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(255,255,255,.07)}
.cote-neuf{padding:9px 10px;font-size:13px;font-weight:600;color:var(--sur-ardoise-2)}
.cote-neuf:hover{background:var(--ardoise-2);color:var(--sur-ardoise)}
.qui{display:flex;align-items:center;gap:10px;padding:0 10px}
.qui span{font-size:12.5px;color:var(--sur-ardoise-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qui button{margin-left:auto;background:var(--ardoise-3);border:0;color:var(--sur-ardoise-2);font:inherit;
  font-size:11.5px;padding:6px 11px;border-radius:999px;cursor:pointer;flex:none}
.qui button:hover{color:var(--sur-ardoise)}

/* Sous cette largeur, la colonne ne peut pas cohabiter avec la vue : le rail
   reste en place, et l'ouvrir la fait passer par-dessus plutôt que de pousser
   le contenu. Sans cela, un écran étroit n'aurait plus aucun moyen de changer
   de projet. */
.cote-voile{display:none}
@media (max-width:860px){
  .app{grid-template-columns:44px 1fr}
  .app.replie .cote-marque{display:none}
  .app.replie .cote-tete{padding:13px 0;justify-content:center}
  .app:not(.replie) .cote{position:fixed;left:0;top:0;bottom:0;width:232px;z-index:80;box-shadow:var(--ombre-h)}
  .app:not(.replie) .cote-voile{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45)}
}

/* ── zone principale ── */
.vue{min-height:0;overflow:auto;padding:18px}
.entete{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.entete h2{font-size:17px;font-weight:700;letter-spacing:-.01em}
.entete .lab{margin-right:auto}

/* ── cartes ── */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.carte{background:var(--surface);border-radius:var(--r);box-shadow:var(--ombre);padding:16px 17px;display:flex;flex-direction:column;gap:10px;text-align:left;border:0;font:inherit;color:inherit;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}
.carte:hover{transform:translateY(-2px);box-shadow:var(--ombre-h)}
.carte:focus-visible{outline:2px solid var(--s-doing);outline-offset:2px}
.carte-t{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.carte-m{display:flex;justify-content:space-between;align-items:center;gap:10px}
.carte-sous{font-size:13px;color:var(--sourd)}
.code-tag{font-family:var(--mono);font-size:11px;color:var(--sourd);background:var(--relief);padding:3px 8px;border-radius:var(--r-xs);display:inline-block}

/* barre d'avancement d'une liste */
.jauge{height:6px;background:var(--t-todo);border-radius:999px;overflow:hidden;display:flex}
.jauge i{display:block;height:100%}
.jauge i.done{background:var(--s-done)}
.jauge i.block{background:var(--s-block)}

/* ── touches de statut ── */
.st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--grot);font-size:13px;font-weight:700;background:var(--t-todo);color:var(--sourd);border:0;border-radius:999px;padding:5px 13px;cursor:pointer;box-shadow:0 1px 0 rgba(30,24,19,.10);transition:transform .07s ease,box-shadow .07s ease,filter .12s ease}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--s-todo);flex:none}
.st.done{background:var(--t-done);color:var(--s-done)} .st.done::before{background:var(--s-done)}
.st.doing,.st.block,.st.review{color:#fff;box-shadow:0 2px 0 rgba(30,24,19,.22)}
.st.doing{background:var(--s-doing)} .st.block{background:var(--s-block)} .st.review{background:var(--s-review)}
.st.doing::before,.st.block::before,.st.review::before{background:rgba(255,255,255,.9)}
.st:hover{filter:brightness(1.04)}
.st:active{transform:translateY(2px);box-shadow:none}
.st:focus-visible{outline:2px solid var(--s-doing);outline-offset:3px}
.st.fixe{cursor:default} .st.fixe:active{transform:none}
.st.mini{font-size:12px;padding:4px 10px}

/* ── table des assets ── */
.filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filtres input,.filtres select{font:inherit;font-size:13.5px;padding:8px 12px;border:1px solid var(--filet);border-radius:999px;background:var(--surface);color:var(--texte)}
.filtres input{min-width:200px}
.filtres input:focus,.filtres select:focus{outline:2px solid var(--s-doing);outline-offset:1px;border-color:transparent}
.compte{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--sourd)}

/* Étiquette d'un filtre venu d'ailleurs : on la retire d'un clic. */
.puce{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--s-doing);background:var(--t-doing);color:var(--s-doing);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.puce .los{width:6px;height:6px;background:currentColor;transform:rotate(45deg);flex:none}
.puce-x{opacity:.6;font-size:12px}
.puce:hover .puce-x{opacity:1}

/* Sélecteur de focale du planning : trois regards, un seul onglet. */
.focales{display:inline-flex;gap:2px;padding:3px;background:var(--relief);border-radius:999px;flex:none}
.focales button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--sourd);
  padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.focales button:hover{color:var(--texte)}
.focales button.on{background:var(--surface);color:var(--texte);box-shadow:var(--ombre)}
.focales button:focus-visible{outline:2px solid var(--s-doing);outline-offset:1px}

/* Bascule en lot : n'apparaît que sur une sélection filtrée. */
.lot{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--r);box-shadow:var(--ombre);padding:11px 14px;margin-bottom:12px;flex-wrap:wrap}
.lot[hidden]{display:none}
.lot-t{font-size:13.5px;font-weight:600}
.lot select{font:inherit;font-size:13.5px;padding:7px 11px;border:1px solid var(--filet);border-radius:999px;background:var(--fond);color:var(--texte)}
.lot .bouton{padding:8px 18px;font-size:13px}

/* overflow-x et non hidden : sur une fenêtre étroite la colonne Statut doit
   rester atteignable en faisant défiler, pas être rognée. */
.tableau{background:var(--surface);border-radius:var(--r);box-shadow:var(--ombre);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:660px}
thead th{position:sticky;top:0;z-index:2;background:var(--surface);text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--sourd);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--filet-fort);white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid var(--filet);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--relief)}
tr.cache{display:none}

/* ── planning : les phases structurent la lecture ── */
tr.groupe td{background:var(--relief);padding:9px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--sourd);font-weight:700;border-bottom:1px solid var(--filet-fort)}
tbody tr.groupe:hover td{background:var(--relief)}
.jalon{display:inline-block;width:7px;height:7px;background:var(--texte);transform:rotate(45deg);margin-right:11px;vertical-align:middle}
.note-tache{display:block;margin-top:3px;font-size:12.5px;color:var(--sourd);font-weight:400;max-width:46ch}
.dep-tache{display:block;margin-top:3px;font-size:12px;color:var(--faible);font-weight:500;max-width:46ch}
.fleche-dep{display:inline-block;width:9px;height:9px;margin-right:6px;border-left:1.5px solid var(--faible);border-bottom:1.5px solid var(--faible);border-bottom-left-radius:3px;vertical-align:1px}
.ref{font-weight:600;white-space:nowrap}
.attr{font-family:var(--mono);font-size:12.5px;color:var(--sourd);white-space:nowrap}
.attr.fort{color:var(--texte)}

/* ── Calendrier ──
   Chaque semaine superpose deux couches : les journées au fond, les barres
   au-dessus. Une tâche de cinq jours est ainsi une seule barre continue, et
   non cinq pastilles identiques. */
.cal{min-width:790px}
.cal-h{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--filet-fort)}
.cal-h>div{padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--sourd);font-weight:700;border-right:1px solid var(--filet)}
.cal-h>div:last-child{border-right:0}
.cal-sem{position:relative}
.cal-fond{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.cal-corps{position:relative;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:20px;row-gap:2px;padding:26px 0 6px;pointer-events:none}
.jour{padding:8px 9px 10px;border-bottom:1px solid var(--filet);border-right:1px solid var(--filet);cursor:default}
.jour-tete{display:flex;align-items:center;justify-content:space-between;gap:6px}
.jour:last-child{border-right:0}
.jour.we{background:var(--weekend)}
.jour.today{box-shadow:inset 0 3px 0 var(--texte)}
.jour.cible{background:var(--t-doing)}
.jour-n{font-family:var(--mono);font-size:11.5px;color:var(--faible);font-variant-numeric:tabular-nums}

/* ── échéances d'assets dans le planning ──
   Une seule marque par date, jamais une par asset. Contour et non aplat :
   elle date une livraison, elle ne concurrence pas les tâches. */
.ech{display:inline-flex;align-items:center;gap:5px;flex:none;padding:1px 7px 2px;border-radius:999px;
  border:1px solid var(--filet-fort);background:var(--surface);color:var(--sourd);
  font:inherit;font-family:var(--mono);font-size:10.5px;font-variant-numeric:tabular-nums;
  line-height:1.5;cursor:pointer;white-space:nowrap}
.ech:hover{border-color:var(--texte);color:var(--texte)}
.ech .los{width:6px;height:6px;background:currentColor;transform:rotate(45deg);flex:none}
.ech.done{border-color:var(--s-done);color:var(--s-done)}
.ech.block{border-color:var(--s-block);color:var(--s-block);background:var(--t-block)}
.jour.today .jour-n{color:var(--texte);font-weight:700}
.ev{pointer-events:auto;margin:0 4px;font-size:12px;font-weight:600;line-height:20px;padding:0 9px;border-radius:999px;background:var(--t-todo);color:var(--sourd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.ev:hover{filter:brightness(.96)}
.ev.coupe-g{margin-left:0;border-top-left-radius:2px;border-bottom-left-radius:2px}
.ev.coupe-d{margin-right:0;border-top-right-radius:2px;border-bottom-right-radius:2px}
.ev .jalon{margin-right:6px;width:6px;height:6px}
.ev.done{background:var(--t-done);color:var(--s-done)}
.ev.doing{background:var(--s-doing);color:#fff}
.ev.review{background:var(--s-review);color:#fff}
.ev.block{background:var(--s-block);color:#fff}
.ev.doing .jalon,.ev.review .jalon,.ev.block .jalon{background:rgba(255,255,255,.9)}

/* ── Gantt ── */
.gantt{min-width:820px;position:relative}

/* Les flèches de dépendance : une couche posée sur la grille, qui défile avec
   elle. Seule la prise — un tracé large et transparent — capte le pointeur, de
   sorte que les barres restent saisissables partout ailleurs. */
.liens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;color:var(--lien)}
.lien{fill:none;stroke:var(--lien);stroke-width:1.5;stroke-linejoin:round}
.lien-prise{fill:none;stroke:transparent;stroke-width:9;pointer-events:stroke;cursor:pointer}
.lien-prise:hover+.lien{stroke-width:2.75}
.g-tete,.g-ligne{display:grid;align-items:center}
.g-tete{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--filet-fort)}
.g-lbl{padding:9px 14px 9px 16px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-ligne{border-bottom:1px solid var(--filet);cursor:pointer}
.g-ligne:hover{background:var(--relief)}
.g-case{min-height:34px;height:100%;border-right:1px solid var(--filet)}
.g-case.we{background:var(--weekend)}
.g-jour{text-align:center;font-family:var(--mono);font-size:11px;color:var(--sourd);font-variant-numeric:tabular-nums;line-height:1.3;padding:9px 0;border-right:1px solid var(--filet)}
.g-jour.we{background:var(--weekend);color:var(--faible)}
.g-jour.ech{position:relative;overflow:visible}
.g-jour.ech .ech{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% - 5px);z-index:3;box-shadow:var(--ombre)}
/* Le filet descend de l'axe jusqu'au bas du plan : l'échéance se lit sur
   toutes les barres à la fois, sans occuper de rang. */
.g-trait{position:absolute;bottom:0;width:0;border-left:1.5px dashed var(--filet-fort);
  pointer-events:none;z-index:1}
.g-trait.done{border-color:var(--s-done)}
.g-trait.block{border-color:var(--s-block)}
.g-jour b{display:block;font-weight:inherit;font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.g-barre{grid-row:1;height:18px;align-self:center;margin:0 3px;background:var(--bar-todo);border-radius:999px;min-width:14px}
.g-barre.doing{background:var(--s-doing)} .g-barre.block{background:var(--s-block)}
.g-barre.review{background:var(--s-review)} .g-barre.done{background:var(--s-done)}
.g-groupe{padding:16px 0 7px 16px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--sourd);font-weight:700;border-bottom:1px solid var(--filet-fort);background:var(--relief)}
.g-jalon{grid-row:1;align-self:center;width:10px;height:10px;background:var(--texte);transform:rotate(45deg);justify-self:center;z-index:1}

/* case à cocher des modales */
.modale input.case{width:auto;margin-top:2px;transform:scale(1.3);transform-origin:left center;accent-color:var(--ardoise)}
tr.cliquable{cursor:pointer}

/* ── barre d'onglets ── */
.onglets{background:var(--surface);border-top:1px solid var(--filet);display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 10px;box-shadow:0 -2px 12px rgba(30,24,19,.05)}
.onglets button{appearance:none;border:0;background:none;cursor:pointer;font:inherit;padding:12px 30px;color:var(--sourd);border-radius:999px;font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;transition:background .14s ease,color .14s ease,transform .07s ease}
.onglets button:hover{color:var(--texte);background:var(--relief)}
.onglets button[aria-selected="true"]{color:var(--sur-ardoise);background:var(--ardoise)}
.onglets button:active{transform:translateY(1px)}
.onglets button:focus-visible{outline:2px solid var(--s-doing);outline-offset:2px}

/* ── formulaires et boutons ── */
.bouton{border:0;border-radius:999px;background:var(--ardoise);color:var(--sur-ardoise);font:inherit;font-weight:700;font-size:13.5px;padding:11px 22px;cursor:pointer}
.bouton:hover{filter:brightness(1.2)} .bouton:active{transform:translateY(1px)}
.bouton.clair{background:var(--surface);color:var(--texte);box-shadow:var(--ombre)}
.bouton:disabled{opacity:.5;cursor:default}

/* margin:auto est ce qui centre un <dialog> ; le reset universel en haut de
   cette feuille l'écrase, il faut donc le rétablir explicitement. */
dialog{border:0;border-radius:var(--r);padding:0;margin:auto;background:var(--surface);color:var(--texte);box-shadow:var(--ombre-h);max-width:440px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(23,18,14,.42)}
.modale{padding:26px 26px 22px;display:flex;flex-direction:column;gap:4px}
.modale h3{font-size:18px;letter-spacing:-.015em;margin-bottom:12px}
.modale label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--sourd);margin:14px 0 5px}
.modale input,.modale select,.modale textarea{width:100%;padding:10px 12px;border:1px solid var(--filet);border-radius:8px;font:inherit;background:var(--fond);color:var(--texte)}
.modale textarea{min-height:70px;resize:vertical}
.modale input:focus,.modale select:focus,.modale textarea:focus{outline:2px solid var(--s-doing);outline-offset:1px;border-color:transparent}
.modale .actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px;flex-wrap:wrap}
.modale .actions-droite{display:flex;gap:10px;margin-left:auto}
/* L'action destructrice est visuellement à part et à l'opposé du bouton
   qu'on presse par réflexe. */
.bouton.danger{background:none;color:var(--s-block);box-shadow:none;padding:11px 0;font-weight:700}
.bouton.danger:hover{filter:none;text-decoration:underline}
.modale .err{color:var(--s-block);font-size:13.5px;font-weight:600;margin-top:12px;min-height:1em}
.aide{font-size:12.5px;color:var(--sourd);margin-top:5px}

/* ── connexion ── */
.centre{min-height:100vh;display:grid;place-items:center;padding:24px}
.boite{background:var(--surface);border-radius:var(--r);box-shadow:var(--ombre-h);padding:34px 32px;width:100%;max-width:400px}
.boite h1{font-size:22px;letter-spacing:-.02em;margin-bottom:5px}
.boite .sous{color:var(--sourd);font-size:14px;margin-bottom:18px}
.boite label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--sourd);margin:16px 0 6px}
.boite input{width:100%;padding:11px 13px;border:1px solid var(--filet);border-radius:8px;font:inherit;background:var(--fond);color:var(--texte)}
.boite input:focus{outline:2px solid var(--s-doing);outline-offset:1px;border-color:transparent}
.boite .bouton{width:100%;margin-top:22px;padding:13px}
.boite .err{color:var(--s-block);font-size:13.5px;font-weight:600;margin-top:14px;min-height:1em}

/* ── vide et messages ── */
.vide{color:var(--sourd);font-size:14px;padding:30px 4px;text-align:center}
.vide strong{display:block;color:var(--texte);font-size:15px;margin-bottom:6px}

/* Le bandeau ne sert qu'aux échecs : en marche normale, l'interface est
   optimiste et ne dit rien. */
.alerte-bandeau{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);background:var(--s-block);color:#fff;padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:var(--ombre-h);z-index:60;max-width:90vw}
.alerte-bandeau[hidden]{display:none}
.alerte-bandeau.info{background:var(--ardoise);color:var(--sur-ardoise)}

@media (max-width:640px){
  .onglets button{padding:12px 0;flex:1;font-size:11px;letter-spacing:.05em}
  .bloc .v{font-size:22px}
  .vue{padding:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── sélection multiple et menu contextuel ── */
tr.sel td{background:var(--t-doing)!important}
tr.sel:hover td{background:var(--t-doing)!important}
.cal,.tableau{user-select:none}

/* La sélection se voit sur la barre elle-même : dans le Gantt et le Calendrier
   il n'y a pas de ligne de tableau à teinter. */
.g-ligne.sel,.g-ligne.sel:hover{background:var(--t-doing)}
.ev.sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--s-doing)}

/* ── glissement des barres ── */
body.glisse{cursor:grabbing}
body.glisse .g-barre,body.glisse .ev{cursor:grabbing}
.bulle{position:fixed;z-index:300;transform:translateX(-50%);pointer-events:none;padding:5px 10px;border-radius:var(--r-xs);background:var(--ardoise);color:#fff;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:var(--ombre-h)}

.menu{position:fixed;z-index:200;min-width:222px;padding:6px;background:var(--surface);border-radius:var(--r);box-shadow:var(--ombre-h);border:1px solid var(--filet)}
.menu-h{padding:8px 12px 7px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--sourd);border-bottom:1px solid var(--filet);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.menu hr{border:0;border-top:1px solid var(--filet);margin:5px 0}
.menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:var(--r-xs);background:none;font:inherit;font-size:14px;font-weight:500;color:var(--texte);cursor:pointer}
.menu button:hover{background:var(--relief)}
.menu button:focus-visible{outline:2px solid var(--s-doing);outline-offset:-2px}
.menu button.danger{color:var(--s-block)}
.menu .point{width:10px;height:10px;border-radius:50%;background:var(--s-todo);flex:none}
.menu .point.doing{background:var(--s-doing)} .menu .point.block{background:var(--s-block)}
.menu .point.review{background:var(--s-review)} .menu .point.done{background:var(--s-done)}