/* Jarvis en ligne : le QG EAZIA. Charte EAZIA (design-systems/eazia/colors_and_type.css), version sombre.
   Bleu = primaire, vert = validation, or = accent rare, dégradé vert→bleu = signature (logo, phrase du jour).
   Neutres slate froid, jamais de noir pur, jamais de gris chaud. Pas de néon.
   Règle de la scène : la couleur saturée est réservée aux données (états, pions, échéances) ; l'identité d'une pièce
   passe par son étiquette et un liseré atténué. Échelle de texte : 12 / 13 / 14 / 15 / 17 / 22 px. Espacements : pas de 4 px. */

@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url('fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family: Figtree; font-weight: 300 900; font-display: swap; src: url('fonts/figtree.woff2') format('woff2'); }

:root {
  --vert: #13BE76; --turquoise: #0BB6BE; --bleu: #1668E3; --bleu-600: #1257C4; --bleu-700: #0F49A6; --or: #F5C518;
  --degrade: linear-gradient(100deg, #10C46E 0%, #0BB6C2 48%, #1E72E6 100%);
  --nuit: #0B1124; --nuit-2: #0E1730; --surface: #131B33; --surface-2: #18223F; --surface-3: #222C4B; --bord: #26314F; --bord-fort: #33406A;
  --texte: #F4F7FC; --texte-2: #AEB9CF; --texte-3: #8A96B3;
  /* états, version fond sombre (les jetons de la charte sont faits pour fond clair) */
  --bleu-texte: #8FB8FF; --turquoise-texte: #7FE3E8;
  --rouge: #F0524F; --rouge-texte: #FF8B89; --orange: #F59E0B; --orange-texte: #FBC266; --vert-texte: #5FE0A6; --gris: #64748B;
  --titre: Poppins, system-ui, sans-serif; --corps: Figtree, system-ui, sans-serif;
  --rayon: 16px; --rayon-s: 12px;
  --ombre: 0 16px 40px -16px rgba(3, 7, 20, .75), 0 2px 8px rgba(3, 7, 20, .35);
  color-scheme: dark;
}

.pc-studio { --piece: #1668E3; } .pc-academy { --piece: #F5C518; } .pc-automation { --piece: #13BE76; }
.pc-b2b { --piece: #0BB6BE; } .pc-hall { --piece: #8FA3C7; } .pc-teetrendy { --piece: #64748B; } .pc-perso { --piece: #CBD5E1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font: 400 15px/1.5 var(--corps); color: var(--texte);
  background: radial-gradient(120% 80% at 70% 0%, #16224A 0%, var(--nuit) 55%) fixed, var(--nuit);
}
h1, h2, h3 { font-family: var(--titre); font-weight: 700; margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: 17px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-2); }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.vide { color: var(--texte-3); margin: 4px 0; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Bandeau de la maquette */
.bandeau-essai {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: center;
  padding: 8px 16px; font-size: 13px; color: var(--texte-2); background: #171C30; border-bottom: 1px solid #3A3418;
}
.bandeau-essai strong { color: var(--or); font-family: var(--titre); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.scenarios a { margin-left: 12px; color: var(--texte-2); }
.scenarios a[aria-current] { color: var(--texte); font-weight: 600; text-decoration-color: var(--or); }

/* ---- Barre du haut */
.hud {
  display: grid; grid-template-columns: auto minmax(260px, 1.4fr) minmax(150px, .6fr) minmax(200px, 1fr) auto;
  gap: 12px; align-items: stretch; padding: 16px 20px;
}
.hud > * { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 16px; text-decoration: none; min-width: 0; }
a.hud-ca:hover, a.hud-stat:hover { border-color: var(--bord-fort); background: var(--surface-2); }
.hud-marque { display: flex; align-items: center; gap: 12px; background: transparent; border-color: transparent; padding-left: 0; }
.marque-graphe { width: 40px; height: 40px; flex: none; }
.hud-marque h1 { font: 800 22px/1 var(--titre); background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud-marque span { display: block; font-size: 13px; color: var(--texte-2); margin-top: 4px; white-space: nowrap; }
.hud-libelle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texte-2); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.hud-libelle .fraicheur { font-size: 0; gap: 0; }
.hud-stat strong, .hud-valeur strong { display: block; font: 700 22px/1.2 var(--titre); margin-top: 4px; }
.hud-prochain strong { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-valeur { display: block; margin-top: 4px; }
.hud-valeur strong { display: inline; }
.hud-valeur .sur { color: var(--texte-3); font-size: 14px; }
.hud-sous { display: block; font-size: 13px; color: var(--texte-3); margin-top: 4px; }
.hud-sous .f-ancien { color: var(--orange-texte); } .hud-sous .f-panne { color: var(--rouge-texte); }
.hud-vide { display: block; color: var(--texte-3); margin-top: 8px; }
.jauge { display: block; width: 100%; height: 12px; margin: 8px 0 4px; overflow: visible; }
.jauge-fond { fill: var(--surface-3); }
.jauge-encaisse { fill: var(--vert); }
.j-sous .jauge-encaisse { fill: #2F7BF0; }
.jauge-attendu { fill: rgba(47, 123, 240, .38); }
.repere { fill: var(--texte-2); }
.r-cible { fill: var(--or); }
.hud-rafraichir { display: flex; flex-direction: column; justify-content: center; gap: 4px; background: transparent; border-color: transparent; padding-right: 0; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--bleu); color: #fff; font: 600 14px var(--corps); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bouton:hover { background: var(--bleu-600); }
.bouton:active { background: var(--bleu-700); transform: scale(.98); }
/* action ponctuelle : bouton secondaire, pour que l'œil aille d'abord au CA et aux quêtes */
.bouton-second { background: var(--surface-2); border: 1px solid var(--bord-fort); color: var(--texte); }
.bouton-second:hover { background: var(--surface-3); }
.bouton-second:active { background: var(--surface-3); }
.bouton[disabled] { background: var(--surface); border-color: var(--bord); color: var(--texte-3); cursor: not-allowed; transform: none; }
.bouton[aria-busy="true"] { cursor: progress; }

/* ---- Fraîcheur d'un bloc */
.fraicheur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-3); }
.fraicheur .point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); flex: none; }
.f-ancien { color: var(--orange-texte); } .f-ancien .point { background: var(--orange); }
.f-panne { color: var(--rouge-texte); } .f-panne .point { background: var(--rouge); }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.compte { display: inline-block; min-width: 24px; padding: 0 8px; margin-left: 4px; border-radius: 99px; background: var(--surface-2); color: var(--texte-2); font-size: 13px; text-align: center; }

/* ---- Le QG */
main { padding: 0 20px 20px; }
.qg { position: relative; height: clamp(560px, calc(100vh - 150px), 860px); border-radius: 24px; overflow: hidden; border: 1px solid var(--bord);
  background: radial-gradient(90% 90% at 60% 35%, #1B2752 0%, #111A36 50%, #0B1124 100%); }
.qg-scene { position: absolute; inset: 0; }
.qg-scene canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.qg-scene[data-etat="pret"] canvas { animation: apparition .5s ease-out both; }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
.qg-repli { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 24px 24px 24px 508px; color: var(--texte-2); text-align: center; }
.qg-scene[data-etat="echec"] .qg-repli { display: flex; }
.qg-etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.etiquette-piece {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  padding: 4px 12px 8px; border-radius: 12px; background: rgba(11, 17, 36, .8); border: 1px solid rgba(255, 255, 255, .06);
  border-top: 3px solid var(--piece); font: 700 13px/1.2 var(--titre); color: var(--texte); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .8);
}
.etiquette-piece .nom-court { display: none; }
.etiquette-piece small { display: block; font: 500 12px/1.3 var(--corps); color: var(--texte-2); margin-top: 2px; }
.etiquette-piece small b { font-weight: 700; }
.etiquette-piece .n-rouge { color: var(--rouge-texte); } .etiquette-piece .n-orange { color: var(--orange-texte); }
.etiquette-piece.eteinte { opacity: .7; }
.qg-bulle {
  position: absolute; left: 0; top: 0; z-index: 3; max-width: 280px; pointer-events: none;
  padding: 8px 12px; border-radius: 12px; background: rgba(8, 13, 30, .95); border: 1px solid var(--bord-fort); font-size: 13px; box-shadow: var(--ombre);
}
.qg-bulle strong { display: block; font-family: var(--titre); font-size: 14px; }
.qg-bulle span { color: var(--texte-2); }
.qg-bulle .b-rouge { color: var(--rouge-texte); } .qg-bulle .b-orange { color: var(--orange-texte); } .qg-bulle .b-vert { color: var(--vert-texte); } .qg-bulle .b-gris { color: var(--texte-3); }

/* Panneaux posés sur la scène : quêtes à gauche ; le détail prend leur place (il ne cache jamais une pièce) */
.quetes, .panneau {
  position: absolute; top: 16px; left: 16px; z-index: 2; width: 460px; max-height: calc(100% - 32px); overflow: auto;
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre);
  scrollbar-width: thin; scrollbar-color: var(--bord-fort) transparent;
  /* ombres de défilement : on voit qu'il reste du contenu au-dessus ou au-dessous */
  background:
    linear-gradient(var(--surface) 30%, rgb(19 27 51 / 0)) top / 100% 40px no-repeat local,
    linear-gradient(rgb(19 27 51 / 0), var(--surface) 70%) bottom / 100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgb(3 7 20 / .7), transparent) top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgb(3 7 20 / .7), transparent) bottom / 100% 14px no-repeat scroll,
    var(--surface);
}
.panneau[hidden] { display: none; }
.qg:has(.panneau:not([hidden])) .quetes { visibility: hidden; }
.phrase { margin: 4px 0 8px; font-size: 15px; line-height: 1.45; color: var(--texte); padding-left: 12px; border-left: 3px solid; border-image: var(--degrade) 1; }
.avertissement { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--rayon-s); background: rgba(245, 158, 11, .12); color: var(--orange-texte); font-size: 13px; }
.q-groupe + .q-groupe { margin-top: 8px; }
.q-groupe h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.q-groupe h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); }
.g-presse h3::before { background: var(--rouge); } .g-rapporte h3::before { background: var(--vert); } .g-glisse h3::before { background: var(--orange); }
.q-groupe ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.quete {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 6px 12px; text-align: left; text-decoration: none;
  border-radius: 12px; border: 1px solid var(--bord); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.quete:hover { border-color: var(--bord-fort); background: var(--surface-3); }
.q-titre { grid-column: 1 / -1; font-weight: 600; font-size: 14px; line-height: 1.35; }
.q-pourquoi { grid-column: 1; font-size: 14px; color: var(--texte-2); line-height: 1.4; }
.q-source { grid-column: 2; grid-row: 2; align-self: end; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--texte-2); white-space: nowrap; }
.s-mail { color: #9CC2FF; } .s-crm { color: #7FE3E8; } .s-projet { color: #C9D3E8; }

.panneau-fermer { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--texte-2); font-size: 22px; cursor: pointer; }
.panneau-fermer:hover { background: var(--surface-2); color: var(--texte); }
.panneau h2 { font-size: 17px; padding-right: 40px; }
.panneau .surtitre { display: block; font: 600 12px var(--corps); text-transform: uppercase; letter-spacing: .07em; color: var(--texte-2); margin-bottom: 4px; }
.panneau .surtitre::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; background: var(--piece, var(--texte-3)); vertical-align: 1px; }
.panneau .etat { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 4px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.panneau .etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.panneau h3 { margin: 16px 0 8px; }
.panneau ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.panneau li { font-size: 14px; line-height: 1.4; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.panneau li .d { display: block; font-size: 13px; color: var(--texte-3); }
.panneau li.retard .d { color: var(--rouge-texte); }
.panneau .meta { margin-top: 16px; font-size: 13px; color: var(--texte-3); }
.panneau .meta code { font-size: 12px; color: var(--texte-2); }
.panneau li button { all: unset; display: block; cursor: pointer; width: 100%; }
.panneau li:has(button:hover) { background: var(--surface-3); }
.panneau a.bouton { margin-top: 16px; }
.point-etat { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 1px; }

.qg-legende {
  position: absolute; left: 492px; right: 16px; bottom: 16px; z-index: 1; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
  font-size: 13px; color: var(--texte-2); pointer-events: none;
}
.qg-legende > span { display: inline-flex; align-items: center; gap: 8px; }
.qg-legende > span[class^="l-"]::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--c); }
.l-rouge { --c: var(--rouge); } .l-orange { --c: var(--orange); } .l-vert { --c: var(--vert); } .l-gris { --c: var(--gris); }
.l-client { --c: #0BB6BE; } .l-prospect { --c: #F5C518; }
.qg-legende > span.l-client::before, .qg-legende > span.l-prospect::before { border-radius: 50%; transform: none; width: 10px; height: 10px; }

/* ---- Frise des 7 jours */
.frise { margin-top: 20px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
.jours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.jour { min-width: 0; padding: 12px; border-radius: 12px; background: var(--nuit-2); border: 1px solid transparent; }
.jour.aujourdhui { border-color: rgba(19, 190, 118, .45); }
.jour.weekend { background: rgba(14, 23, 48, .55); }
.jour h3 { color: var(--texte); text-transform: none; letter-spacing: 0; font-size: 14px; margin-bottom: 8px; }
.jour h3 span { color: var(--texte-3); font: 400 13px var(--corps); }
.jour ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ev, .ech button { display: grid; gap: 2px; padding: 8px; border-radius: 8px; background: var(--surface-2); border: 0; border-left: 3px solid var(--c, var(--bleu)); font-size: 14px; }
.ech button { width: 100%; text-align: left; --c: var(--orange); cursor: pointer; }
.ech button:hover { background: var(--surface-3); }
.a-accompagnement-et-missions { --c: var(--turquoise); } .a-rdv-pro-hors-missions { --c: #2F7BF0; } .a-perso { --c: #CBD5E1; } .a-travail-planifie { --c: #7A8BB4; }
.ev-heure { font: 600 13px/1.2 var(--corps); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.ev-titre { line-height: 1.3; overflow-wrap: anywhere; }
.ev-projet { font-size: 13px; color: var(--texte-3); }

/* ---- Cartes */
.cartes { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "taches taches" "mails relances" "mails ca" "projets projets"; gap: 20px; }
#taches { grid-area: taches; } #mails { grid-area: mails; } #relances { grid-area: relances; } #ca { grid-area: ca; } #projets { grid-area: projets; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; min-width: 0; }
.carte h3 { margin: 16px 0 8px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ligne > a, .ligne > button, .ligne-simple { display: grid; gap: 2px; width: 100%; padding: 8px 12px; text-align: left; text-decoration: none; border-radius: 12px; border: 1px solid transparent; background: var(--nuit-2); cursor: pointer; }
.ligne-simple { cursor: default; }
.ligne > a:hover, .ligne > button:hover { border-color: var(--bord-fort); }
.l-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.l-date { font-size: 13px; color: var(--texte-3); white-space: nowrap; }
.l-titre { font-size: 14px; color: var(--texte-2); overflow-wrap: anywhere; }
.l-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--texte-3); margin-top: 2px; }
.pastille { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--texte-2); white-space: nowrap; }
.u-haute .pastille { background: rgba(240, 82, 79, .16); color: var(--rouge-texte); }
.p-prospect { background: rgba(245, 197, 24, .14); color: var(--or); } .p-client { background: rgba(11, 182, 190, .14); color: #7FE3E8; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.chiffres div { padding: 12px; border-radius: 12px; background: var(--nuit-2); }
.chiffres dt { font-size: 12px; color: var(--texte-3); }
.chiffres dd { margin: 4px 0 0; font: 700 17px var(--titre); }
.chiffres .manque { color: var(--orange-texte); } .chiffres .ok { color: var(--vert-texte); }
/* colonnes qui s'emboîtent : la longue pièce Automation se répartit, les autres ne sont pas repoussées en bas */
.pieces { columns: 270px; column-gap: 20px; }
.piece-liste { margin-bottom: 16px; }
.piece-liste:not([data-piece="automation"]) { break-inside: avoid; } /* seule la longue pièce se répartit sur deux colonnes */
.piece-liste li { break-inside: avoid; }
.piece-liste h3 { margin: 0 0 8px; break-after: avoid; }
.piece-liste h3 button { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.piece-liste.eteinte { opacity: .7; }
.pastille-piece { width: 10px; height: 10px; border-radius: 3px; background: var(--piece); }
.piece-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.poste { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; width: 100%; padding: 8px; text-align: left; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.poste:hover { background: var(--nuit-2); }
.poste .point { grid-row: span 2; margin-top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.e-rouge { --c: var(--rouge); } .e-orange { --c: var(--orange); } .e-vert { --c: var(--vert); } .e-gris { --c: var(--gris); }
.p-titre { font-size: 14px; font-weight: 600; }
.p-raison { font-size: 13px; color: var(--texte-3); line-height: 1.35; }
.e-vert .p-raison { display: none; }
/* boutons remis à zéro : leur anneau de focus doit être redonné explicitement */
.piece-liste h3 button:focus-visible, .panneau li button:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }

/* ---- Briefing (session 3) : Ma journée, le point CA, ce que disent les agents, état du briefing */
.g-journee h3::before { background: var(--bleu); } .g-ca h3::before { background: var(--or); } .g-agents h3::before { background: var(--turquoise); }
.journee { gap: 4px; }
.journee .ev { grid-template-columns: 48px minmax(0, 1fr); gap: 0 8px; align-items: baseline; padding: 6px 8px; }
.journee .ev-titre { font-weight: 600; font-size: 14px; }
.j-conseil { grid-column: 2; font-size: 13px; color: var(--texte-2); line-height: 1.35; }
/* « Ce qui glisse » se replie : le panneau reste court sur le QG (relecture design du 23/10) */
details.q-groupe > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 32px; border-radius: 8px; }
details.q-groupe > summary::-webkit-details-marker { display: none; }
details.q-groupe > summary h3 { margin: 0; }
details.q-groupe > summary h3::after { content: "▸"; margin-left: 4px; color: var(--texte-3); }
details.q-groupe[open] > summary h3::after { content: "▾"; }
details.q-groupe > summary:hover h3 { color: var(--texte); }
details.q-groupe[open] > ol { margin-top: 4px; }
.point-ca { display: block; max-width: 75ch; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--bord); font-size: 14px; line-height: 1.45; text-decoration: none; }
.point-ca:hover { border-color: var(--bord-fort); }
.s-agent { color: #7FE3E8; } .s-ca { color: #F7D560; } .s-agenda { color: #9CC2FF; }
.g-agents .quete { grid-template-columns: 1fr auto; }
.g-agents .q-titre { grid-column: 1; font-weight: 500; }
.g-agents .q-source { grid-column: 2; grid-row: 1; align-self: start; }
.info-briefing { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--rayon-s); background: rgba(22, 104, 227, .14); color: var(--bleu-texte); font-size: 13px; }

/* ---- Mes tâches urgentes */
.liste-urgentes { gap: 4px; }
.urgente { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 4px 12px 4px 4px; border-radius: 12px; background: var(--nuit-2); }
.urgente:has(.cocher[hidden]) { padding-left: 12px; grid-template-columns: minmax(0, 1fr) auto; }
.cocher { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 12px; }
.cocher::before { content: ""; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--texte-3); transition: border-color .15s, background .15s; }
.cocher:hover::before { border-color: var(--vert); }
.cocher[disabled] { cursor: not-allowed; } .cocher[disabled]::before { border-style: dashed; opacity: .5; }
.urgente.en-attente .cocher::before {
  border-color: var(--vert);
  background: var(--vert) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.6 2.5L10 3.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.urgente.en-attente .u-libelle { text-decoration: line-through; color: var(--texte-3); }
.u-attente { grid-column: -2 / -1; justify-self: end; font-size: 13px; color: var(--turquoise-texte); }
.urgente.refusee .u-attente { color: var(--rouge-texte); grid-column: 1 / -1; justify-self: start; padding: 0 0 6px 56px; }
.u-retard { box-shadow: inset 3px 0 0 var(--rouge); }
.u-note { font-size: 12px; color: var(--texte-3); }
@media (min-width: 1100px) {
  .liste-urgentes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
.u-texte { display: grid; gap: 2px; min-width: 0; padding: 6px 0; }
.u-libelle { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.u-projet { font-size: 13px; color: var(--texte-3); text-decoration: none; justify-self: start; }
.u-projet:hover { color: var(--texte); text-decoration: underline; }
.u-quand { font-size: 13px; color: var(--texte-2); white-space: nowrap; }
.u-retard .u-quand { color: var(--rouge-texte); }
.taches-retour { margin: 8px 0 0; font-size: 13px; color: var(--turquoise-texte); }
.taches-retour:empty { display: none; }
#taches .meta { margin: 8px 0 0; font-size: 13px; color: var(--texte-3); }

.pied { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: center; text-align: center; padding: 8px 20px 28px; font-size: 13px; color: var(--texte-3); }

/* ---- Mode réel : bandeau d'alerte, déconnexion, page de connexion */
.bandeau-reel strong { color: var(--vert-texte); }
.bandeau-alerte { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; padding: 12px 16px; background: rgba(240, 82, 79, .14); border-bottom: 1px solid rgba(240, 82, 79, .4); color: var(--texte); font-size: 14px; }
.bandeau-alerte strong { color: var(--rouge-texte); }
.bandeau-alerte .bouton { min-height: 36px; }
.lien { background: none; border: 0; padding: 0; color: var(--texte-2); text-decoration: underline; cursor: pointer; font: inherit; }
.lien:hover { color: var(--texte); }
.page-connexion { display: grid; place-items: center; }
.connexion { width: min(420px, calc(100% - 32px)); margin: 48px auto; padding: 32px 24px; text-align: center; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.connexion .marque-graphe { width: 56px; height: 56px; }
.connexion h1 { margin-top: 12px; font: 800 28px/1 var(--titre); background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.connexion .sous-titre { margin: 4px 0 20px; color: var(--texte-2); }
.connexion .avertissement { text-align: left; }
.connexion .note { margin: 16px 0 0; font-size: 13px; color: var(--texte-3); }

/* ---- Page d'erreur */
.page-erreur { display: grid; place-items: center; }
.erreur { max-width: 460px; padding: 40px 24px; text-align: center; }
.erreur .code { font: 800 56px var(--titre); margin: 0; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.erreur h1 { font-size: 22px; margin: 8px 0 12px; }
.erreur p { color: var(--texte-2); }

/* ---- Écrans moyens : les quêtes passent sous la scène, la légende colle à la scène.
   Seuil : 1180 px de contenu, plus les 232 px de la barre latérale. */
@media (max-width: 1411px) {
  .hud { grid-template-columns: auto minmax(220px, 1fr) minmax(140px, .5fr) auto; }
  .hud-prochain { grid-column: 2 / 4; grid-row: 2; }
  .hud-marque span { white-space: normal; }
  .qg { height: auto; overflow: visible; display: flex; flex-direction: column; border: 0; background: none; border-radius: 0; }
  .qg-scene { position: relative; inset: auto; height: clamp(420px, 62vh, 640px); border-radius: 24px; overflow: hidden; border: 1px solid var(--bord);
    background: radial-gradient(90% 90% at 60% 35%, #1B2752 0%, #111A36 50%, #0B1124 100%); flex: none; order: 0; }
  .qg-legende { position: static; margin: 12px 4px 0; pointer-events: auto; order: 1; }
  .quetes { position: static; width: auto; max-height: none; margin-top: 16px; order: 2; background: var(--surface); }
  .qg:has(.panneau:not([hidden])) .quetes { visibility: visible; }
  .qg-repli { padding: 24px; }
  .panneau { position: fixed; top: auto; left: auto; bottom: 16px; right: 16px; max-height: min(70vh, 640px); z-index: 10; }
}

/* ---- Téléphone */
@media (max-width: 760px) {
  .hud { grid-template-columns: 1fr 1fr; grid-template-areas: "marque marque" "ca ca" "prochain prochain" "mails rafraichir"; padding: 12px; gap: 8px; }
  .hud-marque { grid-area: marque; } .hud-ca { grid-area: ca; } .hud-prochain { grid-area: prochain; }
  .hud-stat:not(.hud-prochain) { grid-area: mails; } .hud-rafraichir { grid-area: rafraichir; align-items: stretch; }
  .hud-rafraichir .bouton { white-space: normal; text-align: center; line-height: 1.2; }
  main { padding: 0 12px 16px; }
  /* le QG est plus large que haut : sa boîte prend sa forme, sans vide au-dessus ni au-dessous */
  .qg-scene { height: auto; min-height: 0; aspect-ratio: 1.55 / 1; border-radius: 16px; }
  .etiquette-piece { font-size: 12px; padding: 2px 8px 4px; border-top-width: 2px; border-radius: 8px; }
  .etiquette-piece .nom-long, .etiquette-piece small { display: none; }
  .etiquette-piece .nom-court { display: inline; }
  .panneau { left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; max-height: 72vh; padding-bottom: 28px; }
  .jours { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .jour { scroll-snap-align: start; }
  .cartes { grid-template-columns: 1fr; grid-template-areas: "taches" "mails" "relances" "ca" "projets"; gap: 16px; }
  .urgente { grid-template-columns: 44px minmax(0, 1fr); }
  .u-quand, .u-attente { grid-column: 2; justify-self: start; }
  .urgente.refusee .u-attente { grid-column: 2; padding-left: 0; }
  details.q-groupe > summary { min-height: 44px; }
  /* le lien du projet devient une vraie cible au doigt, sans bouger la ligne */
  .u-projet { padding: 10px 0; margin: -8px 0; }
  /* le bouton « Parler à Jarvis » ne recouvre plus le pied de page */
  .pied { padding-bottom: 88px; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffres div:last-child { grid-column: 1 / -1; }
  /* cibles tactiles d'au moins 44 px */
  .poste, .piece-liste h3 button { min-height: 44px; }
  .poste { padding: 12px; }
  /* le titre de la pièce colle à son premier projet */
  .piece-liste h3 { margin-bottom: 0; }
  .piece-liste h3 button { align-items: flex-end; padding-bottom: 4px; }
  /* l'étiquette de source passe sous le texte : plus de mots seuls en fin de ligne */
  .q-pourquoi { grid-column: 1 / -1; }
  .q-source { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 4px; }
}

/* ---- Navigation entre les pages (v2) : barre latérale à partir de 1024 px, barre du bas en dessous */
.saut { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 16px; border-radius: 12px; background: var(--bleu); color: #fff; text-decoration: none; }
.saut:focus { top: 12px; }
.contenu:focus { outline: none; }
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav ul, .barre-bas ul { list-style: none; margin: 0; padding: 0; }

.nav { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 232px; display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; background: var(--nuit-2); border-right: 1px solid var(--bord); overflow-y: auto; }
.nav-marque { display: flex; align-items: center; gap: 12px; padding: 4px 8px 8px; text-decoration: none; }
.nav-marque .marque-graphe { width: 32px; height: 32px; }
.nav-marque span { font: 800 20px/1 var(--titre); background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav ul { display: grid; gap: 2px; }
.nav a:not(.nav-marque) { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 12px; color: var(--texte-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:not(.nav-marque):hover { background: var(--surface); color: var(--texte); }
.nav a[aria-current="page"] { background: var(--surface-2); color: var(--texte); font-weight: 600; }
.nav a[aria-current="page"] .icone, .barre-bas a[aria-current="page"] .icone, .plus-actif > summary .icone { stroke: var(--turquoise); }
.nav-pied { margin-top: auto; padding: 8px 12px; font-size: 13px; }
.avec-nav .contenu { margin-left: 232px; min-width: 0; }

.barre-bas { display: none; }
@media (max-width: 1023px) {
  .nav { display: none; }
  .avec-nav .contenu { margin-left: 0; }
  .avec-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .barre-bas { display: block; position: fixed; inset: auto 0 0 0; z-index: 20; padding: 4px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
    background: rgb(14 23 48 / .96); border-top: 1px solid var(--bord); backdrop-filter: blur(12px); }
  .barre-bas > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .barre-bas > ul > li > a, .plus > summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px; border-radius: 12px; color: var(--texte-3); text-decoration: none; font-size: 12px; font-weight: 500; cursor: pointer; }
  .barre-bas .icone { width: 22px; height: 22px; }
  .barre-bas > ul > li > a[aria-current="page"], .plus-actif > summary { color: var(--texte); }
  .plus > summary { list-style: none; }
  .plus > summary::-webkit-details-marker { display: none; }
  .plus[open] > summary { color: var(--texte); background: var(--surface); }
  .plus > ul { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(100% + 8px); width: min(260px, calc(100vw - 16px)); display: grid; gap: 2px; padding: 8px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord-fort); box-shadow: var(--ombre); }
  .plus > ul a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: var(--texte-2); text-decoration: none; font-size: 15px; }
  .plus > ul a:hover, .plus > ul a[aria-current="page"] { background: var(--surface-2); color: var(--texte); }
  .plus-pied { padding: 8px 12px 4px; border-top: 1px solid var(--bord); margin-top: 4px; font-size: 14px; }
  .plus-pied .lien { min-height: 44px; }
  /* le détail d'un poste s'ouvre au-dessus de la barre du bas */
  .panneau { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- État du PC (synchronisation) : ligne de la barre latérale, bandeau quand quelque chose attend */
.etat-pc { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; font-size: 13px; line-height: 1.4; color: var(--texte-3); }
.etat-pc strong { color: var(--texte-2); font-weight: 600; }
.etat-pc .point { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; flex: none; background: var(--gris); }
.pc-ok .point { background: var(--vert); }
.bandeau-pc { padding: 8px 16px; background: rgba(245, 158, 11, .12); border-bottom: 1px solid rgba(245, 158, 11, .35); color: var(--orange-texte); font-size: 14px; text-align: center; }
.bandeau-pc p { margin: 2px 0; }

/* ---- Discussion avec l'agent de la page */
.discussion-ouvrir { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 16px; z-index: 25; box-shadow: var(--ombre); }
.discussion-panneau { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 72px; z-index: 26; width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px);
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bord-fort); border-radius: var(--rayon); box-shadow: var(--ombre); }
.discussion-panneau[hidden] { display: none; }
.discussion-tete { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--bord); }
.discussion-tete h2 { font-size: 15px; }
.discussion-fermer { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--texte-2); font-size: 22px; cursor: pointer; }
.discussion-fermer:hover { background: var(--surface-2); color: var(--texte); }
.discussion-fil { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 8px; overflow-y: auto; flex: 1; min-height: 80px; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-moi { justify-self: end; background: var(--bleu); color: #fff; }
.msg-agent { justify-self: start; background: var(--surface-2); }
.msg-attente { color: var(--texte-3); }
.msg-systeme { justify-self: stretch; max-width: none; background: rgba(245, 158, 11, .12); color: var(--orange-texte); }
.msg-travail { justify-self: stretch; max-width: none; display: grid; gap: 8px; background: var(--nuit-2); border: 1px solid var(--bord); }
.msg-travail p { margin: 0; color: var(--texte-2); }
.msg-travail .bouton { justify-self: start; white-space: normal; }
.discussion-saisie { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px 4px; border-top: 1px solid var(--bord); }
.discussion-saisie textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; resize: vertical; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bord-fort);
  background: var(--nuit-2); color: var(--texte); font: 400 15px/1.4 var(--corps); }
.discussion-saisie textarea:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 0; }
.discussion-note { margin: 0; padding: 4px 16px 12px; font-size: 12px; color: var(--texte-3); }
@media (max-width: 1411px) { .avec-nav .panneau { bottom: 72px; } } /* le détail du QG s'ouvre au-dessus du bouton de discussion */
@media (max-width: 1023px) {
  .discussion-ouvrir { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .discussion-panneau { left: 0; right: 0; width: auto; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: 75vh; border-radius: 20px 20px 0 0; }
  .avec-nav .panneau { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Page dont le contenu n'est pas encore construit */
main.page { max-width: 880px; padding: 32px 20px 40px; display: grid; gap: 20px; }
.page-tete { display: grid; gap: 4px; }
.page-tete .surtitre { font: 600 12px var(--corps); text-transform: uppercase; letter-spacing: .07em; color: var(--texte-2); }
.page-tete h1 { font-size: 28px; text-wrap: balance; }
.a-construire { display: grid; gap: 12px; }
.a-construire p { margin: 0; max-width: 65ch; color: var(--texte-2); }
.a-construire .meta { font-size: 14px; color: var(--texte-3); }
.a-construire code { font-size: 14px; color: var(--texte); }
@media (max-width: 760px) {
  main.page { padding: 20px 12px 24px; }
  .page-tete h1 { font-size: 24px; }
}

/* ---- Page Projets et missions (spec Projets § 4) : liste groupée, esprit Linear, dense et calme */
main.page-large { max-width: 1320px; }
.page-sous { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--texte-2); font-size: 14px; }
.bouton-petit { min-height: 40px; padding: 0 12px; font-size: 13px; gap: 4px; }
.icone-petite { width: 16px; height: 16px; }
.bouton-lien { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--texte-2); font: 600 13px var(--corps); cursor: pointer; border-radius: 10px; }
.bouton-lien:hover { color: var(--texte); background: var(--surface-2); }
.vide-cellule { color: var(--texte-3); }
.relatif { color: var(--texte-3); font-size: 13px; }
.en-retard { color: var(--rouge-texte); font-weight: 600; }

.filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); }
.filtres label, .form-tache label, .statut-form .champ { display: grid; gap: 4px; min-width: 0; }
.filtres label > span, .form-tache label > span, .statut-form .champ > span { font-size: 12px; color: var(--texte-3); font-weight: 600; letter-spacing: .02em; }
.filtres select, .filtres input, .form-tache input, .statut-form input[type="text"] {
  min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--bord-fort); background: var(--nuit-2); color: var(--texte); font: 400 14px var(--corps); min-width: 0; }
.filtres select { min-width: 150px; }
.filtre-recherche { flex: 1 1 200px; }
.filtres select:focus-visible, .filtres input:focus-visible, .form-tache input:focus-visible, .statut-form input:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 0; }
.filtres-resultat { margin: 0; min-height: 1em; font-size: 14px; color: var(--texte-2); }
.filtres-resultat:empty { display: none; }
.note-bas { margin: 0; font-size: 13px; color: var(--texte-3); }

.groupes { display: grid; gap: 12px; }
.groupe { border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); }
.groupe > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none; border-radius: var(--rayon); }
.groupe > summary::-webkit-details-marker { display: none; }
.groupe > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--texte-3); border-bottom: 2px solid var(--texte-3); transform: rotate(-45deg); transition: transform .15s ease; margin-right: 2px; }
.groupe[open] > summary::before { transform: rotate(45deg); }
.groupe > summary h2 { font-size: 15px; }
.groupe > summary:hover { background: var(--surface-2); }
.compte { display: inline-flex; min-width: 24px; justify-content: center; padding: 1px 8px; border-radius: 99px; background: var(--surface-3); color: var(--texte-2); font: 600 12px var(--corps); font-variant-numeric: tabular-nums; }
.g-a_classer > summary h2 { color: var(--orange-texte); }
.groupe > .vide { padding: 0 16px 16px; }

/* pas de défilement : le menu « Statut » d'une ligne doit pouvoir déborder du tableau sans être coupé */
.table-defile { padding: 0 8px 8px; }
.table-projets { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-projets th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--texte-3); letter-spacing: .02em; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.table-projets .tri { all: unset; cursor: pointer; padding: 4px 0; border-radius: 6px; }
.table-projets .tri:hover { color: var(--texte); }
.table-projets .tri:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.table-projets th[aria-sort="ascending"] .tri::after { content: " ↑"; }
.table-projets th[aria-sort="descending"] .tri::after { content: " ↓"; }
.table-projets td { padding: 4px 8px; height: 44px; border-bottom: 1px solid rgb(38 49 79 / .6); vertical-align: middle; }
.table-projets tbody tr:last-child td { border-bottom: 0; }
.table-projets tbody tr { cursor: pointer; }
.table-projets tbody tr:hover td { background: var(--surface-2); }
.table-projets tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.table-projets tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }
.col-etat { width: 28px; }
.col-nom { min-width: 260px; }
.col-nom a { font-weight: 600; text-decoration: none; color: var(--texte); }
.col-nom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.col-nom .raison { display: block; margin-top: 2px; font-size: 13px; color: var(--texte-3); overflow-wrap: anywhere; }
.c-rouge .raison { color: var(--rouge-texte); } .c-orange .raison { color: var(--orange-texte); }
.col-activite { white-space: nowrap; color: var(--texte-2); }
.col-activite .pastille-piece, .projet-infos .pastille-piece { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.col-client { color: var(--texte-2); }
.col-echeance { white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-taches { text-align: right; width: 72px; }
.col-statut { width: 56px; text-align: right; }
.compte-taches { font-variant-numeric: tabular-nums; color: var(--texte-2); }
/* en attente du PC : la mention se lit, seuls la pastille et le bouton s'estompent (relecture design, I4) */
tr.en-attente .col-etat, tr.en-attente .menu-statut { opacity: .55; }
.attente-pc { font: 400 12px var(--corps); color: var(--turquoise-texte); }
.c-vert .raison, .c-gris .raison { display: none; }
.point-etat { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gris); vertical-align: 1px; }
.point-etat.e-rouge { background: var(--rouge); } .point-etat.e-orange { background: var(--orange); } .point-etat.e-vert { background: var(--vert); }
.badge-piste, .badge-classer { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.badge-piste { color: var(--bleu-texte); border: 1px dashed rgb(111 164 255 / .7); }
.badge-classer { color: var(--orange-texte); background: rgba(245, 158, 11, .14); }

/* ---- Le bouton « Statut » et son menu (spec § 7, P10) */
.menu-statut { position: relative; display: inline-block; }
.menu-statut > summary { list-style: none; }
.menu-statut > summary::-webkit-details-marker { display: none; }
.menu-statut[open] > summary { background: var(--surface-3); }
.menu-compact > summary { width: 40px; padding: 0; }
.statut-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(320px, calc(100vw - 32px)); display: grid; gap: 12px; padding: 14px;
  text-align: left; background: var(--surface-2); border: 1px solid var(--bord-fort); border-radius: var(--rayon); box-shadow: var(--ombre); cursor: default; }
.statut-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.statut-form legend { padding: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--texte-3); letter-spacing: .02em; }
.choix { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 10px; cursor: pointer; }
.choix:hover { background: var(--surface-3); }
.choix input { width: 18px; height: 18px; margin: 0; accent-color: var(--turquoise); }
.choix .actuel { margin-left: auto; font-size: 12px; color: var(--texte-3); }
.statut-confirmation { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(245, 158, 11, .12); color: var(--orange-texte); font-size: 14px; }
.statut-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.statut-retour { margin: 0; font-size: 13px; color: var(--texte-2); }
.statut-retour:empty { display: none; }
.mot { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; font: 600 13px var(--corps); background: var(--surface-3); color: var(--texte-2); white-space: nowrap; }
.m-en-cours { background: rgba(19, 190, 118, .15); color: var(--vert-texte); }
.m-a-venir { background: rgba(22, 104, 227, .2); color: var(--bleu-texte); }
.m-piste { background: transparent; color: var(--bleu-texte); border: 1px dashed rgb(111 164 255 / .7); }
/* standby, archivé, annulé : neutres, comme leur pastille grise (spec § 4) ; l'orange et le rouge restent aux urgences */
.m-en-standby, .m-archive, .m-annule { background: var(--surface-3); color: var(--texte-2); }
.m-annule { text-decoration: line-through; text-decoration-color: var(--texte-3); }
.m-aucun { background: rgba(245, 158, 11, .13); color: var(--orange-texte); }
.bandeau-attente { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(11, 182, 190, .12); color: var(--turquoise-texte); font-size: 14px; }

/* ---- La sous-page projet (spec § 5) */
.projet-tete { display: grid; gap: 12px; }
.retour { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; color: var(--texte-2); text-decoration: none; font-size: 14px; }
.retour:hover { color: var(--texte); }
.projet-titre { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.projet-titre h1 { font-size: 28px; text-wrap: balance; }
.projet-statut { display: flex; align-items: center; gap: 10px; }
.projet-statut.en-attente .mot { opacity: .55; }
.projet-phrase { margin: 0; max-width: 75ch; color: var(--texte-2); }
.projet-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0; }
.projet-infos > div { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bord); min-width: 0; }
.projet-infos dt { font-size: 12px; color: var(--texte-3); font-weight: 600; }
.projet-infos dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.projet-infos .info-large { grid-column: 1 / -1; }
/* les tâches prennent toute la largeur ; la colonne de côté ne s'ouvre qu'à partir de 1840 px de fenêtre (barre de 232 px comprise) */
main.page-projet { max-width: 1600px; }
.projet-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1840px) { .projet-grille { grid-template-columns: minmax(0, 1fr) 340px; } }
.projet-principal, .projet-cote { display: grid; gap: 20px; min-width: 0; }
.bloc-tete { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bloc-tete h2 { display: flex; align-items: center; gap: 8px; }

.vue-bascule { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--nuit-2); border: 1px solid var(--bord); }
.vue-bascule button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--texte-2); font: 600 13px var(--corps); cursor: pointer; }
.vue-bascule button[aria-pressed="true"] { background: var(--surface-3); color: var(--texte); }
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.colonne { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 12px; background: var(--nuit-2); min-width: 0; }
.colonne.survol { outline: 2px dashed var(--turquoise); outline-offset: -2px; }
.colonne h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.col-fait h3 { color: var(--vert-texte); }
.cartes-taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 8px; }
.tache { position: relative; display: grid; gap: 6px; padding: 10px 40px 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bord); }
.tache[draggable="true"] { cursor: grab; }
.tache.glisse { opacity: .4; }
.tache.en-attente .t-meta, .ligne-tache.en-attente .lt-date { opacity: .55; }
.tache.en-attente::after, .ligne-tache.en-attente::after { content: "en attente du PC"; font-size: 12px; color: var(--turquoise-texte); }
.t-libelle { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: break-word; hyphens: auto; }
.t-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.t-qui, .t-date, .t-details { padding: 0 8px; border-radius: 99px; background: var(--surface-3); color: var(--texte-2); white-space: nowrap; }
.t-qui { background: rgba(11, 182, 190, .14); color: var(--turquoise-texte); }
.t-date.en-retard { background: rgba(240, 82, 79, .16); color: var(--rouge-texte); }
.t-note { margin: 0; font-size: 12px; color: var(--texte-3); }
.tache-faite { padding-right: 12px; background: transparent; border-style: dashed; }
.tache-faite .t-libelle { color: var(--texte-2); }
.col-note { margin: 0; font-size: 12px; color: var(--texte-3); }
.t-menu { position: absolute; top: 4px; right: 4px; }
.t-menu > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--texte-2); cursor: pointer; font-weight: 700; letter-spacing: .05em; }
.t-menu > summary::-webkit-details-marker { display: none; }
.t-menu > summary:hover, .t-menu[open] > summary { background: var(--surface-3); color: var(--texte); }
.t-actions { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; min-width: 230px; padding: 6px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--bord-fort); box-shadow: var(--ombre); }
.t-actions button { min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 14px; cursor: pointer; }
.t-actions button:hover:not([disabled]) { background: var(--surface-2); }
.t-actions button[disabled] { color: var(--texte-3); cursor: not-allowed; }
.t-confirmer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px solid var(--bord); }
.t-confirmer p { margin: 0; flex-basis: 100%; font-size: 13px; color: var(--orange-texte); }
.form-tache { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--bord-fort); }
.form-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.taches-retour { margin: 12px 0 0; font-size: 14px; color: var(--texte-2); }
.taches-retour:empty { display: none; }
.liste-taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ligne-tache { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 8px; border-bottom: 1px solid rgb(38 49 79 / .6); font-size: 14px; }
.lt-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-texte { overflow-wrap: anywhere; }
.lt-colonne { font-size: 12px; color: var(--texte-3); white-space: nowrap; }

.frise30 { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; }
.frise30 li { position: relative; height: 34px; border-radius: 4px; background: var(--nuit-2); }
.frise30 li.we { background: transparent; }
.frise30 li.auj { box-shadow: inset 0 0 0 1px var(--turquoise); }
.frise30 li span { display: none; position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--texte-3); }
.frise30 li.lun span, .frise30 li.auj span { display: block; }
.frise30 li.a-tache::after, .frise30 li.a-date::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--bleu-texte); }
.frise30 li.a-date::after { background: var(--or); }
.echeances-retard { margin: 0 0 10px; font-size: 14px; color: var(--rouge-texte); }
.echeances-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.echeances-liste li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 2px 10px; font-size: 14px; }
.ech-date { color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ech-texte { overflow-wrap: anywhere; }
.ech-genre { grid-column: 2; font-size: 12px; color: var(--texte-3); }
.g-date .ech-genre { color: var(--or); }
.note-bloc { margin: 12px 0 0; font-size: 12px; color: var(--texte-3); }
.crm-nom { margin: 0 0 8px; font-weight: 600; }
.missions { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.missions li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; }
.m-dates { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.dernier-echange { margin: 0; font-size: 14px; color: var(--texte-2); }
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.journal li { font-size: 14px; color: var(--texte-2); overflow-wrap: anywhere; padding-left: 12px; border-left: 2px solid var(--bord-fort); }
.plus-journal { margin-top: 10px; }
.plus-journal > summary, .bloc-replie > summary { cursor: pointer; color: var(--texte-2); font-size: 14px; min-height: 40px; display: flex; align-items: center; gap: 8px; }
.plus-journal[open] > summary { margin-bottom: 8px; }
.bloc-replie > summary { list-style: none; color: var(--texte); }
.bloc-replie > summary::-webkit-details-marker { display: none; }
.bloc-replie > summary h2 { font-size: 17px; }
.bloc-replie[open] > summary { margin-bottom: 8px; }
.puces { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--texte-2); }
.puces li { overflow-wrap: anywhere; }

.filtres-repli > summary { display: none; list-style: none; }
.filtres-repli > summary::-webkit-details-marker { display: none; }
.ligne-tache { position: relative; padding-right: 44px; }
/* pas de transform (il créait un contexte d'empilement : le menu passait sous la ligne suivante) ; la ligne au menu ouvert passe devant */
.ligne-tache .t-menu { top: 6px; }
.ligne-tache:has(.t-menu[open]), .tache:has(.t-menu[open]) { z-index: 5; }
.liste-taches + .ajouter-tache, .vue-liste > .ajouter-tache { margin-top: 8px; }
.t-separateur { margin: 4px 6px; border: 0; border-top: 1px solid var(--bord-fort); }
.j-date { color: var(--texte-3); font-variant-numeric: tabular-nums; }
.j-fait { padding: 0 8px; border-radius: 99px; background: rgba(19, 190, 118, .15); color: var(--vert-texte); font-size: 12px; font-weight: 600; }
@media (max-width: 1023px) { main.page { padding-bottom: 80px; } } /* le bouton de discussion ne couvre plus la fin de page */
@media (max-width: 1100px) {
  .table-projets .col-taches { display: none; }
  .col-nom { min-width: 200px; }
}
@media (max-width: 760px) {
  .projet-titre h1 { font-size: 24px; }
  .kanban { grid-template-columns: minmax(0, 1fr); }
  /* téléphone (spec § 4) : la liste réduite au nom, à la pastille et à l'échéance ; le statut se change sur la sous-page */
  .table-projets .col-activite, .table-projets .col-client, .table-projets .col-taches, .table-projets .col-statut { display: none; }
  .col-nom { min-width: 0; }
  .table-defile { padding: 0 4px 4px; }
  .table-projets td { padding: 10px 8px; }
  .filtres { gap: 8px; }
  .filtres label { flex: 1 1 calc(50% - 8px); }
  .filtres select { min-width: 0; width: 100%; }
  .filtres .bouton { flex: 1 1 100%; }
  .ligne-tache { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lt-colonne { order: 3; }
  /* le menu Statut de la sous-page prend toute la largeur sous le titre (relecture design, B2) */
  .projet-titre { position: relative; }
  .projet-statut .menu-statut { position: static; }
  .projet-statut .statut-form { left: 0; right: 0; width: auto; }
  .col-nom .raison { display: none; }
  .filtres-repli > summary { display: inline-flex; }
  .filtres-repli[open] > summary { margin-bottom: 8px; }
  /* cibles tactiles et saisie sans zoom sur téléphone (F1, F2) */
  .bouton-petit, .bouton-lien, .choix, .vue-bascule button, .t-actions button { min-height: 44px; }
  .t-menu > summary { width: 44px; height: 44px; }
  .tache { padding-right: 52px; }
  .filtres select, .filtres input, .form-tache input, .statut-form input[type="text"] { min-height: 44px; font-size: 16px; }
  .projet-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-infos > div:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}