/* todo.captainadmin - feuille de style unique (aucun style en ligne, CSP stricte) */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.ab4861869c91.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.49f2dd2d2132.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.f9e147a59a93.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }

:root {
  --fond: #F2F3EF;
  --panneau: #FFFFFF;
  --encre: #17201B;
  --discret: #56605A;
  --trait: #DADDD5;
  --trait-doux: #ECEEE8;
  --champ: #CDD2C8;
  --vert: #1F5B43;
  --vert-fonce: #163F2F;
  --urgent: #C2410C;
  --urgent-texte: #B23A0A;
  --menu: #17201B;
  --menu-texte: #D5DBD6;
  --menu-titre: #8E9A92;
  --rayon: 14px;
  --titre: "Space Grotesk", system-ui, sans-serif;
  --texte: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.5; }
a { color: var(--vert); }
a:hover { color: var(--vert-fonce); }
h1, h2, h3 { font-family: var(--titre); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.cache { display: none; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #4C8C6E; outline-offset: 2px; }

/* Mise en page ----------------------------------------------------------- */

.appli { min-height: 100vh; display: flex; flex-wrap: wrap; }
.menu {
  flex: 1 1 232px; padding: 24px 16px; padding-top: max(24px, env(safe-area-inset-top));
  background: var(--menu); color: var(--menu-texte); display: flex; flex-direction: column; gap: 26px;
}
.contenu {
  flex: 999 1 560px; min-width: 0; padding: 28px 40px 56px;
  padding-bottom: max(56px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 26px;
}
.marque { display: flex; align-items: baseline; gap: 2px; padding: 0 10px; margin: 0; text-decoration: none; }
.marque-nom { font-family: var(--titre); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: #FFFFFF; }
.marque-domaine { font-family: var(--mono); font-size: 12px; color: #9FB3A6; }
.page-seule .marque-nom { color: var(--encre); }
.page-seule .marque-domaine { color: var(--discret); }
.menu-groupe { display: flex; flex-direction: column; gap: 2px; }
.menu-titre { margin: 0; padding: 0 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--menu-titre); }
.menu-lien {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 8px;
  text-decoration: none; color: var(--menu-texte); font-size: 15px;
}
.menu-lien:hover { background: #222D27; color: #FFFFFF; }
.menu-lien.actif { background: #2A3630; color: #FFFFFF; font-weight: 600; }
.pastille { margin-left: auto; font-family: var(--mono); font-size: 12px; background: var(--urgent); color: #FFFFFF; border-radius: 999px; padding: 2px 8px; }
.puce { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.menu-pied { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid #2E3A33; font-size: 13px; color: var(--menu-titre); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.menu-pied form { margin: 0; }
.lien-discret { background: none; border: 0; padding: 0; color: #B5C2B9; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 32px; }
.lien-discret:hover { color: #FFFFFF; }

@media (max-width: 820px) {
  .menu { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 12px; padding-top: max(12px, env(safe-area-inset-top)); }
  .menu-groupe { flex: 1 1 100%; min-width: 0; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .menu { min-width: 0; }
  .menu-titre, .menu-pied { display: none; }
  .menu-lien { white-space: nowrap; min-height: 40px; }
  .contenu { padding: 20px 16px 48px; }
}

/* Couleurs d'espace ---------------------------------------------------------- */

.esp-bleu { color: #1D4F91; background: #E3ECF8; }
.esp-vert { color: #1F6B45; background: #E1F0E6; }
.esp-olive { color: #5A6B12; background: #EEF2D9; }
.esp-terre { color: #9A4A12; background: #F8E9DC; }
.esp-prune { color: #6B2E63; background: #F3E3F0; }
.esp-ardoise { color: #374151; background: #E5E7EB; }
.puce.esp-bleu { background: #6E9BDB; }
.puce.esp-vert { background: #5FB585; }
.puce.esp-olive { background: #B3C45A; }
.puce.esp-terre { background: #E0995F; }
.puce.esp-prune { background: #C27BB8; }
.puce.esp-ardoise { background: #9CA3AF; }

/* Éléments communs ---------------------------------------------------------- */

.entete { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between; }
.entete h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }
.entete-espace { color: var(--discret); font-weight: 500; }
.sous-titre { margin: 6px 0 0; font-size: 15px; color: var(--discret); }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 10px; border: 1px solid transparent; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bouton-principal { background: var(--vert); color: #FFFFFF; }
.bouton-principal:hover { background: var(--vert-fonce); color: #FFFFFF; }
.bouton-contour { background: var(--panneau); color: var(--encre); border-color: var(--champ); }
.bouton-contour:hover { border-color: var(--encre); color: var(--encre); }
.bouton-sombre { background: var(--encre); color: #FFFFFF; }
.bouton-sombre:hover { background: #2A3630; color: #FFFFFF; }
.bouton-petit { min-height: 40px; padding: 0 14px; font-size: 14px; }
.bouton-carre { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--champ); background: var(--panneau); font-size: 20px; cursor: pointer; }
.etiquette { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.etiquette-petite { padding: 3px 9px; font-size: 12px; }
.etiquette-urgent { background: var(--urgent); color: #FFFFFF; }
.etiquette-neutre { background: var(--panneau); color: var(--encre); border: 1px solid var(--champ); font-weight: 500; }
.score { font-family: var(--mono); font-size: 15px; padding: 5px 10px; border-radius: 10px; }
.score-haut { background: var(--urgent); color: #FFFFFF; }
.score-moyen { background: var(--encre); color: #FFFFFF; }
.score-bas { background: var(--panneau); color: var(--encre); border: 1px solid var(--champ); }
.score-petit { font-size: 12px; padding: 2px 7px; border-radius: 6px; }
.score-grand { font-size: 28px; padding: 4px 14px; border-radius: 12px; }
.score-texte { font-family: var(--mono); font-size: 13px; color: var(--discret); }
.urgent { color: var(--urgent-texte); font-weight: 600; }
.recurrente { font-family: var(--mono); color: var(--discret); }
.aide { margin: 0; font-size: 13px; color: var(--discret); }
.vide { margin: 0; padding: 32px; text-align: center; background: var(--panneau); border: 1px dashed var(--champ); border-radius: var(--rayon); color: var(--discret); }
.notices { display: flex; flex-direction: column; gap: 8px; }
.notice { margin: 0; padding: 12px 16px; border-radius: 10px; background: #E1F0E6; color: var(--vert-fonce); }
.notice-error { background: #FBE3D8; color: #8A2A06; }
.notice-info { background: #E3ECF8; color: #1D4F91; }
.pied-note { margin: 0; text-align: center; font-size: 13px; color: var(--discret); line-height: 1.6; }

/* Cartes ------------------------------------------------------------------ */

.carte { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre); }
.carte-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.carte-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--discret); }
.carte-grande { padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 250px; box-shadow: 0 1px 2px rgba(23, 32, 27, 0.06); }
.carte-titre-grand { margin: 0; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.carte-titre-grand a { color: var(--encre); text-decoration: none; }
.carte-titre-grand a:hover { text-decoration: underline; }
.carte-pied { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--trait-doux); }
.echeance { font-size: 15px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.carte-moyenne { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; text-decoration: none; }
.carte-moyenne:hover { border-color: var(--encre); color: var(--encre); }
.carte-titre-moyen { font-family: var(--titre); font-size: 17px; line-height: 1.25; font-weight: 600; }
.carte-bas { margin-top: auto; font-size: 13px; font-weight: 600; }

/* Pyramide ------------------------------------------------------------------- */

.pyramide { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.etage { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.etage-milieu { width: 88%; }
.etage-base { width: 76%; padding-top: 22px; border-top: 1px solid var(--champ); }
.etage-titre { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--discret); }
.etage-titre-espace { justify-content: space-between; flex-wrap: wrap; }
.etage-titre h2 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre); }
.etage-titre .titre-urgent { color: var(--urgent); }
.etage-titre .titre-discret { color: #445048; font-size: 14px; }
.grille-sommet { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.grille-milieu { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.liste { list-style: none; margin: 0; padding: 0; background: var(--panneau); border: 1px solid var(--trait); border-radius: 12px; }
.liste-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 52px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--trait-doux); font-size: 15px; }
.liste-ligne:last-child { border-bottom: 0; }
.liste-ligne form { margin: 0; }
.liste-titre { flex: 1 1 220px; color: var(--encre); text-decoration: none; }
.liste-titre:hover { text-decoration: underline; }
.liste-info { font-size: 13px; color: var(--discret); }
@media (max-width: 820px) {
  .etage-milieu, .etage-base { width: 100%; }
  .liste-ligne { padding: 10px 12px; }
  .liste-titre { flex-basis: calc(100% - 28px); }
  .liste-ligne form { margin-left: auto; }
}

/* Kanban --------------------------------------------------------------------- */

.kanban-defile { overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 14px; min-width: 1106px; align-items: start; }
.colonne { background: #E7E9E3; border-radius: var(--rayon); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.colonne-tri { background: #FBEDE4; border: 1px solid #F0CDB8; }
.colonne-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.colonne-entete h2 { margin: 0; font-size: 16px; font-weight: 600; }
.compteur { font-family: var(--mono); font-size: 13px; color: var(--discret); }
.colonne-aide { margin: 0; padding: 0 4px; font-size: 13px; line-height: 1.45; color: #6B3A1E; }
.colonne-fait .colonne-aide { color: var(--discret); }
.colonne-cartes { display: flex; flex-direction: column; gap: 10px; min-height: 120px; border-radius: 10px; transition: background-color 0.15s; }
.colonne-cartes.survol { background: #D7E8DC; outline: 2px dashed var(--vert); outline-offset: 2px; }
.carte-kanban { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 10px; cursor: grab; touch-action: manipulation; }
.carte-faite { background: #F6F7F3; border-style: dashed; }
.carte-titre-kanban { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--encre); text-decoration: none; }
.carte-titre-kanban:hover { text-decoration: underline; }
.carte-kanban .carte-meta { font-size: 13px; gap: 4px 12px; }
.deplacer summary { font-size: 13px; color: var(--discret); cursor: pointer; min-height: 28px; display: flex; align-items: center; }
.deplacer form { display: flex; gap: 6px; margin-top: 6px; }
.deplacer select { flex: 1; min-height: 40px; border: 1px solid var(--champ); border-radius: 8px; background: var(--panneau); padding: 0 8px; }
.ajouter { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px dashed #B9BFB4; border-radius: 10px; color: var(--discret); text-decoration: none; font-size: 14px; }
.ajouter:hover { color: var(--encre); border-color: var(--encre); }
.fantome { opacity: 0.4; }
.choisie { box-shadow: 0 6px 18px rgba(23, 32, 27, 0.18); }
.en-glisse { cursor: grabbing; }
@media (hover: none) {
  .carte-kanban { cursor: default; }
}

/* Fiche carte ---------------------------------------------------------------- */

.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--discret); }
.fil-ariane a { text-decoration: none; font-weight: 500; }
.entete-carte { align-items: flex-start; }
.entete-carte-texte { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.entete-carte h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; }
.etiquettes { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.score-bloc { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.score-libelle { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--discret); }
.score-reglage { display: flex; align-items: center; gap: 8px; }
.score-reglage form { margin: 0; }
.segments { display: flex; flex-wrap: wrap; background: #E7E9E3; border-radius: 12px; padding: 4px; align-self: flex-start; max-width: 100%; }
.segments form { margin: 0; }
.segment { min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: #445048; font-size: 14px; font-weight: 500; cursor: pointer; }
.segment:hover { color: var(--encre); }
.segment-actif { background: var(--panneau); color: var(--encre); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 32, 27, 0.12); }
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.colonne-principale { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.colonne-laterale { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.titre-section { margin: 0; font-size: 18px; font-weight: 600; }
.bulle { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 20px; margin-right: 56px; }
.bulle p { margin: 0 0 8px; }
.bulle p:last-child { margin-bottom: 0; }
.bulle-envoye { background: #E8F1EB; border-color: #C9DED0; margin: 0 0 0 56px; }
.bulle-note { background: #FFF8E6; border-color: #EEDDAA; margin: 0 28px; }
.bulle-description { margin: 0; }
.bulle-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--discret); }
.bulle-entete strong { color: var(--encre); }
@media (max-width: 820px) {
  .bulle, .bulle-envoye, .bulle-note { margin: 0; }
  .score-bloc { align-items: flex-start; }
}
.panneau { background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.historique { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.historique li { display: flex; gap: 12px; }
.historique .mono { color: var(--discret); flex: none; font-size: 13px; }

/* Formulaires ------------------------------------------------------------------ */

.formulaire { display: flex; flex-direction: column; gap: 14px; }
.formulaire-large { max-width: 720px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.formulaire label { font-size: 14px; font-weight: 500; color: #3B453F; }
.formulaire input:not([type="hidden"]):not([type="checkbox"]), .formulaire select, .formulaire textarea {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--champ); border-radius: 10px; background: var(--panneau); font-size: 15px;
}
.formulaire textarea { line-height: 1.55; resize: vertical; }
.champ-erreur input, .champ-erreur select, .champ-erreur textarea { border-color: var(--urgent); }
.erreur, .erreurs { color: #8A2A06; font-size: 14px; margin: 0; }
.erreurs ul { margin: 0; padding-left: 18px; }

/* Pages seules (connexion, hors ligne) --------------------------------------------- */

.page-seule { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.boite-seule { width: 100%; max-width: 400px; background: var(--panneau); border: 1px solid var(--trait); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.boite-seule h1 { margin: 0; font-size: 28px; }
.boite-seule .marque { padding: 0; }
.installer { font-size: 14px; color: var(--discret); border-top: 1px solid var(--trait-doux); padding-top: 14px; }
.installer summary { cursor: pointer; font-weight: 500; color: var(--encre); min-height: 32px; }
.installer p { margin: 8px 0 0; }

/* Kanban sur téléphone : une colonne à la fois, défilement aimanté. */
@media (max-width: 820px) {
  .kanban-defile { scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; }
  .kanban { grid-template-columns: repeat(5, 82vw); min-width: 0; }
  .colonne { scroll-snap-align: start; }
}