/* Portail de suivi — fidèle à « Project Inc. » (Dribbble 24955154, Muhammad Farhanudin), en bleu de confiance.
   Structure reprise : bandeau haut en dégradé + bouton foncé, barre latérale (recherche ⌘K, arborescence reliée,
   compteurs, rubriques repliables), titre + pastille « Privé » + avatars, barre d'outils, colonnes à trait,
   cartes à bandeau de couleur et cadre intérieur en pointillés, compteurs en pied de carte. */
:root {
  --fond: #FFFFFF; --plateau: #F4F6F9; --survol: #F1F4F8;
  --bord: #E4E8EE; --bord-doux: #EEF1F5; --bord-champ: #7C8799; --pointilles: #D3D9E2;
  --texte: #101828; --texte-2: #475467; --texte-3: #5F6B7D;
  --marine: #0B1F3A; --bleu: #1D4ED8; --bleu-fonce: #1E3A8A; --bleu-doux: #EAF0FF; --bleu-texte: #1E40AF; --trait: #2563EB;
  --vert: #067647; --vert-fond: #ECFDF3; --orange: #B54708; --orange-fond: #FFF4EB;
  --rouge: #B42318; --rouge-fond: #FEF3F2; --gris-fond: #F2F4F7;
  /* bandeaux de cartes (texte blanc ≥ 4,5:1) */
  --b-rouge: #C9302C; --b-orange: #C2570C; --b-vert: #1F8A4C; --b-bleu: #1F6FD1; --b-gris: #5F6B7D;
  --ombre: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ombre-carte: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--texte); font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--bleu-texte); }
a:hover { color: var(--bleu-fonce); }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--trait); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { display: inline-flex; flex-shrink: 0; }

/* ============ Coque : barre latérale + zone ============ */
.coque { min-height: 100vh; display: flex; align-items: stretch; }
.menu { width: 260px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--bord); display: flex; flex-direction: column; }
.menu-marque { height: 72px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bord-doux); }
.logo { width: 34px; height: 34px; border-radius: 9px; background: radial-gradient(circle at 30% 25%, #2B4C86, var(--marine) 70%); color: #fff; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(11,31,58,.25); }
.menu-marque strong { font-size: 16px; font-weight: 600; flex-grow: 1; }
.pastille-role { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid #B9CBF5; color: var(--bleu-texte); background: var(--bleu-doux); white-space: nowrap; }
.menu-corps { padding: 16px 14px; display: flex; flex-direction: column; gap: 2px; flex-grow: 1; overflow-y: auto; }
.recherche { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 10px; background: var(--plateau); border-radius: 9px; color: var(--texte-3); margin-bottom: 18px; }
.recherche input { border: 0; background: transparent; font-size: 13px; flex-grow: 1; min-width: 0; outline: none; }
.recherche:focus-within { box-shadow: 0 0 0 3px #CFDCFB; }
kbd { font: 600 11px/1 Inter, system-ui, sans-serif; padding: 3px 5px; border: 1px solid var(--bord); border-radius: 5px; background: #fff; color: var(--texte-2); }
.menu-section { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte); }
.mini { width: 24px; height: 24px; border: 1px solid var(--bord); border-radius: 6px; background: #fff; display: inline-grid; place-items: center; color: var(--texte-2); cursor: pointer; padding: 0; box-shadow: var(--ombre); }
.mini:hover { background: var(--survol); }
.menu-section .outils { display: flex; gap: 4px; }
.lien-menu { min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px; border: 0; background: none; color: var(--texte-2); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
.lien-menu:hover { background: var(--survol); color: var(--texte); }
.lien-menu .ico { color: #98A2B3; }
.lien-menu .nom { flex-grow: 1; }
.lien-menu[aria-current="page"] { background: var(--survol); color: var(--texte); font-weight: 600; }
.lien-menu[aria-current="page"] .ico { color: var(--texte); }
.compte { font-size: 12px; font-weight: 600; min-width: 26px; text-align: center; padding: 1px 6px; border-radius: 6px; background: #fff; border: 1px solid var(--bord); color: var(--texte-2); }
.point-etat { width: 7px; height: 7px; border-radius: 999px; background: #22A05B; flex-shrink: 0; }
.point-etat.bleu { background: #3B82F6; }
.point-etat.orange { background: #F59E0B; }
/* arborescence reliée */
.arbre { margin: 2px 0 6px 20px; padding-left: 12px; border-left: 1px solid #C9D6EE; display: flex; flex-direction: column; gap: 2px; }
.arbre .lien-menu { position: relative; }
.arbre .lien-menu::before { content: ""; position: absolute; left: -12px; top: 50%; width: 9px; border-top: 1px solid #C9D6EE; }
.repliable { border-top: 1px solid var(--bord-doux); margin-top: 6px; padding-top: 6px; }
.repliable summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.repliable summary::-webkit-details-marker { display: none; }
.repliable[open] summary .mini { transform: rotate(180deg); }
.repliable .contenu { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 8px; font-size: 12px; color: var(--texte-2); }
.menu-pied { border-top: 1px solid var(--bord-doux); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 13px; }

.zone { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.bandeau { height: 72px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--bord-doux);
  background: linear-gradient(110deg, #fff 0%, #fff 52%, #EEF3FF 64%, #DCE6FF 76%, #EDF2FF 84%, #D4E1FF 100%); }
.ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--texte-3); min-width: 0; }
.ariane span { display: inline-flex; align-items: center; gap: 6px; }
.ariane .ico { color: #98A2B3; }
.ariane b { color: var(--texte); font-weight: 500; }
.btn-fonce { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; background: #111827; color: #fff; border: 1px solid #000; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); white-space: nowrap; }
.btn-fonce:hover { background: #000; color: #fff; }
.btn.menu-mobile { display: none; }

.tete-page { padding: 18px 24px 0; display: flex; flex-direction: column; gap: 14px; }
.ligne-titre-page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ligne-titre-page h1 { font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.titre-pastille { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pastille-prive { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; background: var(--bleu-doux); color: var(--bleu-texte); }
.sous-titre { font-size: 14px; color: var(--texte-3); margin-top: 2px; }
.groupe-droite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.autres { font-size: 13px; color: var(--texte-3); margin-right: 2px; }
.pile { display: inline-flex; }
.pile .av { margin-left: -9px; border: 2px solid #fff; }
.pile .av:first-child { margin-left: 0; }
.av { width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.av.petit { width: 26px; height: 26px; font-size: 10px; }
.av.c0 { background: #DCE7FE; color: #1E3A8A; } .av.c1 { background: #FDE7D4; color: #8A3B07; } .av.c2 { background: #D9F2E3; color: #0F5132; }
.av.c3 { background: #EDE3FB; color: #4C1D95; } .av.c4 { background: #FCE1E4; color: #8B1E2D; } .av.c5 { background: #0B1F3A; color: #fff; }

.barre-outils { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--bord-doux); }
.barre-outils .groupe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.corps-page { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 20px; }

/* ============ Boutons ============ */
.btn { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; border: 1px solid var(--bord); background: #fff; color: var(--texte); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; box-shadow: var(--ombre); white-space: nowrap; }
.btn:hover { background: var(--survol); color: var(--texte); }
.btn .ico { color: var(--texte-2); }
.btn[aria-pressed="true"] { background: var(--survol); font-weight: 600; }
.btn.principal { background: var(--bleu); border-color: var(--bleu-fonce); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(29,78,216,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.principal .ico { color: #fff; }
.btn.principal:hover { background: var(--bleu-fonce); color: #fff; }
.btn.fonce { background: #111827; border-color: #000; color: #fff; }
.btn.fonce .ico { color: #fff; }
.btn.petit { min-height: 32px; padding: 0 10px; font-size: 12px; }
.btn.carre { width: 38px; padding: 0; }
.btn.discret { border-color: transparent; box-shadow: none; background: transparent; color: var(--texte-2); }
.btn.danger { color: var(--rouge); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
details.deroulant { position: relative; }
details.deroulant > summary { list-style: none; }
details.deroulant > summary::-webkit-details-marker { display: none; }
.liste-deroulante { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,24,40,.12); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.liste-deroulante.droite { left: auto; right: 0; }
.liste-deroulante button, .liste-deroulante a { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; background: none; border-radius: 7px; font-size: 13px; color: var(--texte); text-align: left; cursor: pointer; text-decoration: none; }
.liste-deroulante button:hover, .liste-deroulante a:hover { background: var(--survol); }
.liste-deroulante [aria-checked="true"] { font-weight: 600; color: var(--bleu-texte); }

/* ============ Colonnes et cartes (pipeline) ============ */
.defile { overflow-x: auto; }
.colonnes { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 20px; min-width: 1100px; align-items: start; }
.colonne { display: flex; flex-direction: column; gap: 14px; }
.colonne-tete { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.colonne-tete .ligne { display: flex; align-items: center; gap: 10px; }
.colonne-tete .ligne::before { content: ""; width: 3px; height: 18px; border-radius: 2px; background: var(--trait); }
.colonne-tete h2 { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; flex-grow: 1; }
.colonne-tete .icones { display: flex; gap: 2px; }
.icone-btn { width: 30px; height: 30px; border: 0; background: none; border-radius: 7px; display: grid; place-items: center; color: var(--texte-2); cursor: pointer; }
.icone-btn:hover { background: var(--survol); }
.colonne-tete .meta { padding-left: 13px; font-size: 13px; color: var(--texte-3); }
.plateau { background: var(--plateau); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.plateau.survol { outline: 2px dashed var(--trait); outline-offset: -3px; }
.ajouter { min-height: 40px; border: 0; background: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--texte); cursor: pointer; }
.ajouter:hover { background: #E9EDF3; }

.carte-t { --c: var(--b-gris); --p: #F1F3F6; border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-carte); cursor: pointer; text-align: left; width: 100%; padding: 0; font: inherit; color: inherit;
  background: linear-gradient(180deg, var(--c) 0, var(--c) 24px, var(--p) 46px, #fff 70%); }
.carte-t:hover { box-shadow: 0 6px 18px rgba(16,24,40,.10); }
.carte-t.rouge { --c: var(--b-rouge); --p: #FCE8E7; }
.carte-t.orange { --c: var(--b-orange); --p: #FDEBDD; }
.carte-t.vert { --c: var(--b-vert); --p: #E2F4EA; }
.carte-t.bleu { --c: var(--b-bleu); --p: #E3EEFC; }
.carte-t .bande { height: 24px; display: grid; place-items: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.carte-t .boite { margin: 0 8px; background: #fff; border: 1px dashed var(--pointilles); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.carte-t h3 { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--texte); }
.carte-t p { margin: 0; font-size: 13px; color: var(--texte-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-t .ligne-av { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.carte-t .pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; font-size: 13px; color: var(--texte-2); }
.carte-t .pied .compteurs { display: flex; gap: 14px; }
.carte-t .pied .compteurs span { display: inline-flex; align-items: center; gap: 4px; }
.carte-t .pied .retard { color: var(--rouge); font-weight: 600; }
.carte-t.glisse { opacity: .5; }

/* ============ Pastilles ============ */
.pastille { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 7px; background: var(--gris-fond); color: var(--texte-2); }
.pastille.vert { background: var(--vert-fond); color: var(--vert); }
.pastille.orange { background: var(--orange-fond); color: var(--orange); }
.pastille.rouge { background: var(--rouge-fond); color: var(--rouge); }
.pastille.bleu { background: var(--bleu-doux); color: var(--bleu-texte); }
.puce { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 6px; background: var(--gris-fond); color: var(--texte-2); }
.puce.bleu { background: var(--bleu-doux); color: var(--bleu-texte); }
.puce.rouge { background: var(--rouge-fond); color: var(--rouge); }
.puce.vert { background: var(--vert-fond); color: var(--vert); }

/* ============ Cartes de contenu ============ */
.deux { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.deux > .principal { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.deux > .cote { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 18px 20px; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; gap: 12px; }
.carte.accent { border-color: #B9CBF5; }
.carte.plate { background: var(--plateau); box-shadow: none; border-color: transparent; }
.titre-trait { display: flex; align-items: center; gap: 10px; }
.titre-trait::before { content: ""; width: 3px; height: 18px; border-radius: 2px; background: var(--trait); flex-shrink: 0; }
.titre-trait h2 { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
.ligne-titre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.meta { font-size: 13px; color: var(--texte-3); }
.vide { color: var(--texte-3); font-size: 13px; padding: 8px 0; margin: 0; }

/* ============ Champs ============ */
label.champ { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; }
.champ input:not([type=checkbox]):not([type=radio]), .champ select, .champ textarea, input.champ-seul {
  min-height: 40px; padding: 8px 10px; border: 1px solid var(--bord-champ); border-radius: 9px; background: #fff; font-size: 14px; font-weight: 400; width: 100%; }
.champ textarea { resize: vertical; min-height: 84px; }
@media (max-width: 640px) { .champ input, .champ select, .champ textarea, input.champ-seul { font-size: 16px; } }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.coche { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.coche input { width: 16px; height: 16px; accent-color: var(--bleu); margin: 0; }
.choix { display: flex; flex-direction: column; gap: 8px; }
.choix label { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 9px; font-size: 14px; cursor: pointer; }
.choix label:has(input:checked) { border: 1.5px solid var(--bleu); background: #F6F9FF; font-weight: 500; }
.choix input { width: 18px; height: 18px; accent-color: var(--bleu); margin: 0; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; background: var(--plateau); border-radius: 9px; }
.segment label { min-height: 34px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--texte-2); cursor: pointer; }
.segment label:has(input:checked) { background: #fff; color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.depot { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--bord-champ); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--bleu-texte); cursor: pointer; padding: 8px; text-align: center; }
.depot input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ============ Tableaux, jalons, fils, fichiers ============ */
table.liste { width: 100%; border-collapse: collapse; font-size: 13px; }
table.liste th { text-align: left; font-size: 12px; font-weight: 500; color: var(--texte-3); padding: 8px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
table.liste td { padding: 11px 8px; border-bottom: 1px solid var(--bord-doux); vertical-align: top; }
table.liste th:first-child, table.liste td:first-child { padding-left: 0; }
table.liste tr.cliquable { cursor: pointer; }
table.liste tr.cliquable:hover td { background: var(--survol); }
.jalons { list-style: none; margin: 0; padding: 4px 0 0; display: flex; min-width: 560px; }
.jalons li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.jalons .rail { display: flex; align-items: center; width: 100%; }
.jalons .rail i { flex: 1 1 0; height: 2px; background: var(--bord); }
.jalons .rail i.plein { background: var(--trait); }
.jalons .rail i.rien { background: transparent; }
.jalons .point { width: 10px; height: 10px; border-radius: 999px; background: #fff; border: 2px solid #98A2B3; flex-shrink: 0; }
.jalons .done .point { width: 12px; height: 12px; background: var(--trait); border: 0; }
.jalons .current .point { background: var(--trait); border: 4px solid #D6E2FF; }
.jalons .nom { font-size: 12px; font-weight: 500; color: var(--texte-2); }
.jalons .done .nom, .jalons .current .nom { color: var(--texte); }
.jalons .current .nom { font-weight: 600; }
.jalons .date { font-size: 12px; color: var(--texte-3); }
.infos-ligne { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--bord-doux); font-size: 13px; color: var(--texte-2); }
.infos-ligne span { display: inline-flex; align-items: center; gap: 5px; }
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chiffres div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.chiffres div:nth-child(odd) { border-right: 1px solid var(--bord-doux); padding-left: 2px; }
.chiffres div:nth-child(-n+2) { border-bottom: 1px solid var(--bord-doux); }
.chiffres span { font-size: 12px; color: var(--texte-3); }
.chiffres strong { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fil { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fil li { display: flex; gap: 10px; align-items: flex-start; }
.fil .bulle { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: var(--plateau); border-radius: 4px 12px 12px 12px; min-width: 0; }
.fil .bulle span { font-size: 12px; color: var(--texte-3); }
.fil .bulle p { margin: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.envoi { display: flex; gap: 8px; }
.envoi input { flex-grow: 1; min-width: 0; }
.fichier { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--plateau); border-radius: 10px; font-size: 13px; }
.fichier a { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.fichier small { color: var(--texte-3); white-space: nowrap; }
.progression { height: 6px; border-radius: 999px; background: var(--plateau); overflow: hidden; }
.progression i { display: block; height: 100%; background: var(--trait); border-radius: 999px; }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--bleu-doux); color: var(--bleu-texte); font-size: 11px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.avatar.fonce { background: var(--marine); color: #fff; }
.retard { color: var(--rouge); font-weight: 600; }
.alerte { padding: 12px 14px; border-radius: 10px; font-size: 13px; background: var(--bleu-doux); color: var(--bleu-texte); }

/* Questions : même carte à bandeau que les tâches */
.carte-q { border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-carte); --c: var(--b-gris); --p: #F1F3F6;
  background: linear-gradient(180deg, var(--c) 0, var(--c) 24px, var(--p) 44px, #fff 64px); }
.carte-q.rouge { --c: var(--b-rouge); --p: #FCE8E7; } .carte-q.orange { --c: var(--b-orange); --p: #FDEBDD; }
.carte-q.vert { --c: var(--b-vert); --p: #E2F4EA; } .carte-q.bleu { --c: var(--b-bleu); --p: #E3EEFC; }
.carte-q .bande { height: 24px; display: grid; place-items: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.carte-q .boite { margin: 0 8px 8px; background: #fff; border: 1px dashed var(--pointilles); border-radius: 10px; }
.carte-q button.tete { width: 100%; text-align: left; background: none; border: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.carte-q button.tete strong { font-size: 15px; font-weight: 500; line-height: 1.35; }
.carte-q .ouvert { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; }

/* Fenêtres, notes, messages */
dialog { border: 1px solid var(--bord); border-radius: 16px; padding: 0; width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: 0 24px 60px rgba(16, 24, 40, .20); }
dialog::backdrop { background: rgba(16, 24, 40, .35); }
dialog form, dialog .corps { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
dialog .pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 6px; }
.doc-texte { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.doc-texte h1 { font-size: 20px; margin: 14px 0 6px; font-weight: 600; }
.doc-texte h2 { font-size: 17px; margin: 14px 0 6px; font-weight: 600; }
.doc-texte h3 { font-size: 15px; margin: 12px 0 4px; font-weight: 600; }
.doc-texte p { margin: 0 0 10px; }
.doc-texte ul, .doc-texte ol { margin: 0 0 10px; padding-left: 22px; }
.doc-texte code { background: var(--plateau); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.doc-texte table { border-collapse: collapse; margin: 0 0 10px; font-size: 13px; }
.doc-texte td, .doc-texte th { border: 1px solid var(--bord); padding: 4px 8px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(16,24,40,.25); z-index: 50; max-width: calc(100vw - 32px); }
.toast.erreur { background: var(--rouge); }
.chargement { padding: 60px 24px; text-align: center; color: var(--texte-3); }

/* ============ Téléphone ============ */
@media (max-width: 900px) {
  .menu { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(16,24,40,.2); }
  .menu.ouvert { transform: none; }
  .btn.menu-mobile { display: inline-flex; }
  .bandeau { padding: 0 16px; height: 60px; }
  .bandeau .ariane > span:not(:last-child), .bandeau .ariane > .sep { display: none; }
  .tete-page { padding: 16px 16px 0; }
  .corps-page { padding: 16px 16px 40px; }
  .ligne-titre-page h1 { font-size: 22px; }
  .masque-mobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .menu { transition: none; } }