/* CIMA Gestion — design (cahier, section 11). Police : Poppins. Couleur de base : vert. Fond beige, cartes blanches.
   Échelle de tailles : 11-12 (détails) · 13 (texte, tableaux) · 14,5 (titres de blocs) · 22-26 (chiffres clés, titre de page). */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
  --marque: #14683F; --marque-fonce: #0F4F30; --marque-clair: #E7F3EC; --marque-bord: #BFDCCB; --entete-bloc: #EAF3ED;
  --sarcelle: var(--marque); --sarcelle-fonce: var(--marque-fonce); --sarcelle-clair: var(--marque-clair);
  --orange: #E08A3C; --orange-clair: #FFF1DE;
  --fond: #F8F1E7; --carte: #FFFFFF; --texte: #14201A; --texte2: #5E6B64; --bordure: #E3DED3; --bordure-fonce: #CFC9BB;
  --vert: #047857; --vert-clair: #E3F4EA; --ambre: #B45309; --ambre-clair: #FEF1DC; --rouge: #C0262B; --rouge-clair: #FCE9E8;
  --bleu: #1D4ED8; --bleu-clair: #E8EEFC;
  --police: "Poppins", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 13px; }
body { margin: 0; font-family: var(--police); background: var(--fond); color: var(--texte); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--marque); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 2px; line-height: 1.25; }
h2 { font-size: 14.5px; font-weight: 700; margin: 22px 0 10px; }
h3 { font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; } h4 { font-size: 12.5px; font-weight: 600; margin: 12px 0 6px; color: var(--texte2); }
p { margin: 6px 0; } hr { border: 0; border-top: 1px solid var(--bordure); margin: 14px 0; }
.texte2 { color: var(--texte2); } .mini { font-size: 11.5px; } .droite-texte { text-align: right; }
strong, b { font-weight: 600; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.entete-page p { margin: 0; color: var(--texte2); font-size: 12.5px; }
.entete-page .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
svg.ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Mise en page : menu latéral, barre du haut ---------- */
.appli { display: flex; min-height: 100vh; }
.menu { width: 240px; background: #fff; border-right: 1px solid #ECE7DC; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30; }
.menu .logo { padding: 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #F1ECE2; }
.menu .logo .marque { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--marque), #2E9A62); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.menu .logo b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .08em; line-height: 1.1; }
.menu .logo small { display: block; font-size: 9px; font-weight: 500; letter-spacing: .12em; color: var(--texte2); text-transform: uppercase; }
.menu nav { padding: 8px 0; overflow-y: auto; flex: 1; }
.menu .ent, .menu .sous a { display: flex; align-items: center; gap: 12px; margin: 2px 8px; padding: 9px 14px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #44524A; text-decoration: none; width: calc(100% - 16px); background: none; border: 0; cursor: pointer; font-family: var(--police); text-align: left; }
.menu .ent:hover, .menu .sous a:hover { background: #F4F1EA; color: var(--texte); text-decoration: none; }
.menu .ent.actif { background: var(--marque); color: #fff; font-weight: 600; }
.menu .ent.groupe-ouvert { color: var(--texte); font-weight: 600; }
.menu .ent svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu .ent .fleche { margin-left: auto; display: flex; transition: transform .15s; opacity: .7; } .menu .ent .fleche svg { width: 14px; height: 14px; }
.menu .ent .fleche.ouvert { transform: rotate(180deg); }
.menu .sous { padding-bottom: 4px; }
.menu .sous a { padding: 7px 14px 7px 40px; font-size: 12.5px; color: #66736B; gap: 9px; }
.menu .sous a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; flex-shrink: 0; }
.menu .sous a.actif { background: var(--marque); color: #fff; font-weight: 600; } .menu .sous a.actif::before { opacity: 1; }
.menu .pied { padding: 12px; border-top: 1px solid #F1ECE2; }
.menu .pied form { margin: 0; }
.menu .pied button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid #F6CFCB; background: #fff; color: var(--rouge); font: 600 12.5px var(--police); cursor: pointer; }
.menu .pied button:hover { background: var(--rouge-clair); }
.menu .pied svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.haut { background: #fff; border-bottom: 1px solid #ECE7DC; display: flex; align-items: center; gap: 12px; padding: 8px 20px; position: sticky; top: 0; z-index: 25; min-height: 58px; }
.haut .titre-haut { line-height: 1.2; } .haut .titre-haut b { display: block; font-size: 15px; font-weight: 700; } .haut .titre-haut span { font-size: 11.5px; color: var(--texte2); }
.haut .recherche { flex: 1; max-width: 440px; margin: 0 0 0 12px; }
.haut .recherche input { background: #F6F2EA; border: 1px solid transparent; border-radius: 9px; height: 38px; font-size: 13px; }
.haut .recherche input:focus { background: #fff; border-color: var(--marque); outline: 0; box-shadow: 0 0 0 3px rgba(20,104,63,.15); }
.haut .droite { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.haut form { margin: 0; }
.cloche { position: relative; width: 40px; height: 40px; border: 1px solid var(--bordure); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--texte); font-size: 18px; }
.cloche:hover { background: #F6F2EA; text-decoration: none; }
.cloche .nb { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.profil { display: flex; align-items: center; gap: 9px; color: var(--texte); } .profil:hover { text-decoration: none; }
.profil .rond { width: 38px; height: 38px; border-radius: 50%; background: var(--marque); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.profil .qui { line-height: 1.2; } .profil .qui b { display: block; font-size: 12.5px; } .profil .qui span { font-size: 11px; color: var(--texte2); }
.burger { display: none; background: #F1ECE2; border: 0; border-radius: 9px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; color: var(--marque); }
.contenu { padding: 22px 26px 48px; max-width: 1360px; width: 100%; }

/* ---------- Cartes, blocs, chiffres clés ---------- */
.carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.carte h2:first-child, .carte h3:first-child { margin-top: 0; }
.carte.vide, .vide { text-align: center; color: var(--texte2); }
.carte.vide { padding: 28px 16px; }
td.vide { padding: 28px 12px; }
.cartes-chiffres, .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.chiffre, .kpi { position: relative; overflow: hidden; background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; padding: 14px 16px; display: block; color: var(--texte); transition: transform .15s, box-shadow .15s; }
.chiffre span:first-child, .kpi .lib { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--texte); line-height: 1.3; }
.chiffre b, .kpi .val { display: block; font-size: 22px; font-weight: 700; margin-top: 8px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.chiffre .mini, .kpi .det { display: block; font-size: 11.5px; color: var(--texte2); margin-top: 3px; }
.kpi .ico { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--marque); color: #fff; font-size: 15px; flex-shrink: 0; }
.kpi .ico.vert { background: var(--vert); } .kpi .ico.rouge { background: var(--rouge); } .kpi .ico.ambre { background: #D98A12; } .kpi .ico.bleu { background: var(--bleu); } .kpi .ico.orange { background: var(--orange); color: #1F2937; }
a.chiffre:hover, a.kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(60,50,30,.1); }
.kpi.barre { border-left: 4px solid var(--bordure-fonce); }
.kpi.cle, .chiffre.cle { background: var(--orange-clair); border-color: #F0D3A8; }
.kpi.vert, .chiffre.vert { border-left: 4px solid var(--vert); } .kpi.rouge, .chiffre.rouge { border-left: 4px solid var(--rouge); }
.kpi.ambre, .chiffre.ambre { border-left: 4px solid #D98A12; } .kpi.bleu { border-left: 4px solid var(--bleu); } .kpi.marque { border-left: 4px solid var(--marque); }
.kpi .val.vert, .kpi .val.rouge, .kpi .val.ambre { /* couleur du chiffre seulement si demandé */ }
.kpi .val.vert { color: var(--vert); } .kpi .val.rouge { color: var(--rouge); } .kpi .val.ambre { color: var(--ambre); }
.kpi .filigrane { position: absolute; right: 10px; bottom: 6px; font-size: 46px; opacity: .07; color: var(--marque); pointer-events: none; }
.kpi .mini-barre { margin-top: 10px; height: 6px; border-radius: 999px; background: #F1EEE8; overflow: hidden; } .kpi .mini-barre > span { display: block; height: 100%; border-radius: 999px; background: var(--marque); }
.kpi .mini-barre.rouge > span { background: var(--rouge); } .kpi .mini-barre.ambre > span { background: #D98A12; }

.hero { background: linear-gradient(120deg, #0F4F30 0%, #14683F 55%, #1E8A55 100%); color: #fff; border-radius: 10px; padding: 18px 22px; margin: 14px 0; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; align-items: center; box-shadow: 0 4px 14px rgba(20,104,63,.25); }
.hero .lib { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hero .val { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; } .hero .val.moyen { font-size: 22px; }
.hero .det { font-size: 11.5px; opacity: .8; margin-top: 2px; }
.hero .col + .col { border-left: 1px solid rgba(255,255,255,.18); padding-left: 20px; }
.hero .entree { color: #A8F0C6; } .hero .sortie { color: #FFC4C4; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 14px 0; }
.grille.deux-un { grid-template-columns: 2fr 1fr; } .grille.trois { grid-template-columns: repeat(3, 1fr); }
.grille .bloc { margin: 0; }
.bloc { background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; padding: 0; overflow: hidden; margin: 14px 0; }
.bloc > h2, .bloc > .bloc-titre { margin: 0; padding: 11px 16px; font-size: 14.5px; font-weight: 700; color: var(--texte);
  background: var(--entete-bloc); border-bottom: 1px solid var(--bordure); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloc > h2 a, .bloc > .bloc-titre a { font-size: 12px; font-weight: 600; }
.bloc .corps { padding: 8px 16px 12px; }
.bloc .graphique { position: relative; height: 230px; padding: 12px 16px 14px; } .bloc .graphique.petit { height: 200px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--bordure); font-size: 13px; align-items: baseline; }
.kv:last-child { border-bottom: 0; } .kv .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv.total { border-top: 1px solid var(--bordure-fonce); border-bottom: 0; margin-top: 4px; padding-top: 9px; font-size: 13.5px; font-weight: 600; } .kv.total .v { font-size: 15px; }
.v.vert { color: var(--vert); } .v.rouge { color: var(--rouge); } .v.ambre { color: var(--ambre); }
.seg { display: inline-flex; gap: 2px; background: #fff; padding: 4px; border-radius: 999px; box-shadow: 0 1px 4px rgba(60,50,30,.12); }
.seg a, .seg button { padding: 6px 14px; border-radius: 999px; font: 500 12px var(--police); color: var(--texte2); border: 0; background: none; cursor: pointer; text-decoration: none; }
.seg a:hover { text-decoration: none; background: #F4F1EA; } .seg a.actif, .seg button.actif { background: var(--marque); color: #fff; font-weight: 600; }
.legende { display: flex; gap: 14px; font-size: 11.5px; color: var(--texte2); padding: 0 16px 10px; } .legende i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; background: var(--marque); color: #fff; border: 1px solid var(--marque);
  border-radius: 6px; font: 600 13px var(--police); cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: background .12s, box-shadow .12s; }
.btn:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.btn.secondaire { background: #fff; color: var(--marque); border-color: var(--bordure-fonce); box-shadow: none; }
.btn.secondaire:hover { background: var(--marque-clair); border-color: var(--marque); box-shadow: none; }
.btn.danger { background: var(--rouge); border-color: var(--rouge); } .btn.danger:hover { background: #991b1b; }
.btn.mise-en-avant { background: var(--orange); border-color: var(--orange); color: #1F2937; } .btn.mise-en-avant:hover { background: #cf7a2d; border-color: #cf7a2d; }
.btn.petit, .btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn:focus-visible, .act:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lien { background: none; border: 0; color: var(--marque); cursor: pointer; font: inherit; padding: 0; } .lien:hover { text-decoration: underline; }
/* Actions dans les tableaux : Modifier, Encaisser, Archiver… de vrais boutons, petits et lisibles */
.act { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin: 1px 2px 1px 0; font: 600 11.5px var(--police); border-radius: 6px;
  border: 1px solid var(--marque-bord); background: #fff; color: var(--marque); cursor: pointer; text-decoration: none; white-space: nowrap; }
.act:hover { background: var(--marque-clair); border-color: var(--marque); text-decoration: none; }
.act-ok { background: var(--vert-clair); border-color: #B7DFC3; color: #137333; } .act-ok:hover { background: #D2EBDA; border-color: #137333; }
.act-danger { border-color: #F2C0BC; color: var(--rouge); } .act-danger:hover { background: var(--rouge-clair); border-color: var(--rouge); }
.act-info { border-color: #BFD3F7; color: var(--bleu); } .act-info:hover { background: var(--bleu-clair); border-color: var(--bleu); }
.act-neutre { border-color: var(--bordure-fonce); color: var(--texte2); } .act-neutre:hover { background: #F4F1EA; border-color: var(--texte2); }

/* ---------- Formulaires ---------- */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], input[type=date], input[type=datetime-local], select, textarea {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid #D1D5DB; border-radius: 6px; font: 13px var(--police); background: #fff; color: var(--texte); }
textarea { height: auto; padding: 8px 12px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--marque); box-shadow: 0 0 0 3px rgba(20,104,63,.14); }
input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--marque); }
.champ { margin: 12px 0; } .champ label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.champ .aide { color: var(--texte2); font-size: 11.5px; margin-top: 3px; } .erreur { color: var(--rouge); font-size: 12.5px; }
.obligatoire::after { content: " *"; color: var(--rouge); }
.champ ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.champ ul label { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.filtres input, .filtres select { width: auto; min-width: 150px; flex: 1 1 150px; max-width: 260px; }

/* ---------- Tableaux ---------- */
.barre-outils { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.barre-outils form { display: flex; gap: 8px; flex: 1; min-width: 220px; max-width: 520px; margin: 0; }
.tableau-wrap { overflow-x: auto; background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; margin: 12px 0; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th { background: #F6F2EA; color: var(--texte2); text-align: left; padding: 9px 12px; white-space: nowrap; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--bordure); position: sticky; top: 0; }
th a { color: inherit; text-decoration: none; } th a:hover { color: var(--marque); }
td { padding: 8px 12px; border-top: 1px solid #F0ECE3; font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap; }
tbody tr:first-child td { border-top: 0; }
tbody tr:hover td { background: #FBF9F4; }
td.num, th.num { text-align: right; }
td.large, th.large { white-space: normal; min-width: 260px; max-width: 420px; line-height: 1.4; }
td.moyen, th.moyen { white-space: normal; min-width: 170px; max-width: 280px; }
td.code, th.code { width: 72px; min-width: 72px; font-weight: 600; }
td.actions { white-space: nowrap; text-align: right; }
td.alerte { background: var(--rouge-clair); color: var(--rouge); font-weight: 600; }
tr.total td { font-weight: 600; background: #F6F2EA; }
.pagination { display: flex; gap: 14px; align-items: center; margin-top: 10px; font-size: 12.5px; }

/* ---------- Pastilles, barres, onglets ---------- */
.pastille { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.7; }
.pastille.vert { background: var(--vert-clair); color: #137333; } .pastille.ambre { background: var(--ambre-clair); color: var(--ambre); }
.pastille.rouge { background: var(--rouge-clair); color: var(--rouge); } .pastille.bleu { background: var(--bleu-clair); color: var(--bleu); }
.barre-avancement { background: #EFEBE3; border-radius: 999px; height: 6px; min-width: 70px; overflow: hidden; display: inline-block; vertical-align: middle; }
.barre-avancement > span { display: block; height: 100%; background: var(--marque); border-radius: 999px; }
.prog { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .prog .barre-avancement { width: 88px; } .prog b { font-size: 12px; font-weight: 600; min-width: 36px; }
.onglets { display: flex; gap: 2px; flex-wrap: wrap; margin: 10px 0 14px; border-bottom: 1px solid var(--bordure); }
.onglets a { padding: 9px 14px; color: var(--texte2); font-size: 13px; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; border-radius: 6px 6px 0 0; }
.onglets a:hover { background: #F1ECE2; color: var(--marque); }
.onglets a.actif { color: var(--marque); font-weight: 600; border-bottom-color: var(--marque); }
.messages { list-style: none; margin: 0 0 14px; padding: 0; }
.messages li { padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; background: var(--bleu-clair); color: var(--bleu); font-size: 12.5px; }
.messages li.success { background: var(--vert-clair); color: #137333; } .messages li.error { background: var(--rouge-clair); color: var(--rouge); }

/* ---------- Tuiles de navigation (Paramètres, accès rapides) ---------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 14px 0; }
.tuile-nav { display: flex; gap: 12px; align-items: flex-start; background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; padding: 16px; color: var(--texte); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.tuile-nav:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(60,50,30,.1); text-decoration: none; }
.tuile-nav .icone { width: 40px; height: 40px; border-radius: 10px; background: var(--marque); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.tuile-nav b { display: block; font-size: 13.5px; font-weight: 600; } .tuile-nav span.d { display: block; font-size: 12px; color: var(--texte2); margin-top: 2px; line-height: 1.4; }

/* ---------- Connexion ---------- */
.page-centre { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.boite { background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px; padding: 28px; width: 100%; max-width: 400px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.boite .logo { color: var(--marque); font-size: 26px; font-weight: 700; letter-spacing: .08em; } .boite.large { max-width: 560px; }

/* ---------- Objectifs ---------- */
.objectif { background: var(--carte); border: 1px solid var(--bordure); border-radius: 8px; margin: 10px 0; overflow: hidden; }
.objectif > summary { list-style: none; cursor: pointer; padding: 11px 16px; display: flex; gap: 12px; align-items: center; background: var(--entete-bloc); }
.objectif > summary::-webkit-details-marker { display: none; }
.objectif > summary::before { content: "▸"; color: var(--texte2); transition: transform .12s; } .objectif[open] > summary::before { transform: rotate(90deg); }
.objectif[open] > summary { border-bottom: 1px solid var(--bordure); }
.objectif .num { width: 26px; height: 26px; border-radius: 50%; background: var(--marque); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.objectif .titre { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.4; }
.objectif .corps { padding: 4px 16px 12px; }
.objectif .actions-obj { padding: 8px 16px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.sous-titre { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte2); margin: 12px 0 4px; }
.echeance-chip { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 10px; background: #F1ECE2; color: var(--texte); white-space: nowrap; }
.echeance-chip.retard { background: var(--rouge-clair); color: var(--rouge); font-weight: 600; }
.chip-pers { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.chip-pers i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--marque); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.valeur-cle { font-size: 11.5px; color: var(--texte2); } .valeur-cle b { color: var(--texte); font-size: 12.5px; }

/* ---------- Tâches ---------- */
[x-cloak] { display: none !important; }
.kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 14px; -webkit-overflow-scrolling: touch; }
.liste { background: #EFE8DB; border-radius: 8px; padding: 8px; width: 268px; flex: 0 0 268px; }
.liste-nouvelle { background: transparent; border: 2px dashed #CFC6B3; }
.liste-entete { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 2px 4px 8px; cursor: grab; font-size: 12.5px; }
.liste-entete strong { font-weight: 600; font-size: 12.5px; }
.cartes { min-height: 28px; display: flex; flex-direction: column; gap: 6px; }
.tuile { background: #fff; border: 1px solid var(--bordure); border-radius: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.tuile.terminee { opacity: .7; }
.tuile-lien { display: block; padding: 8px 10px; color: var(--texte); text-decoration: none; }
.tuile-lien:hover { text-decoration: none; }
.tuile:hover { border-color: var(--marque); }
.tuile-titre { font-weight: 400; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.tuile-pied { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; font-size: 11.5px; }
.fantome { opacity: .4; }
.pastilles-etiquettes { display: flex; gap: 3px; margin-bottom: 5px; } .pastilles-etiquettes span { height: 6px; width: 30px; border-radius: 3px; display: block; }
.etiquette { color: #fff; border-radius: 4px; padding: 0 7px; font-size: 11px; display: inline-block; line-height: 1.6; }
.echeance { font-size: 11px; padding: 0 6px; border-radius: 4px; background: #EEE9DE; color: var(--texte); line-height: 1.7; font-weight: 600; }
.echeance.rouge { background: var(--rouge); color: #fff; } .echeance.vert { background: var(--vert); color: #fff; } .echeance.orange { background: var(--orange); color: #1F2937; }
.avatar { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--marque); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.ajout { padding: 6px 4px 0; } .ajout form { display: flex; flex-direction: column; gap: 6px; }
.calendrier td { vertical-align: top; height: 88px; min-width: 104px; padding: 4px; white-space: normal; }
.calendrier td.hors { background: #F6F2EA; } .calendrier td.aujourdhui { outline: 2px solid var(--orange); outline-offset: -2px; }
.cal-carte { display: block; font-size: 11px; margin: 2px 0; padding: 1px 6px; border-radius: 4px; background: #EEE9DE; color: var(--texte); text-decoration: none; }
.cal-carte.rouge { background: var(--rouge); color: #fff; } .cal-carte.vert { background: var(--vert); color: #fff; } .cal-carte.orange { background: var(--orange); }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 28px 14px; }
.modal[hidden] { display: none; } .modal-fond { position: fixed; inset: 0; background: rgba(0,0,0,.45); }
.modal-boite { position: relative; background: var(--fond); border-radius: 12px; padding: 18px 22px; width: 100%; max-width: 760px; z-index: 1; }
.modal-fermer { position: absolute; right: 12px; top: 6px; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--texte2); }
.commentaire { background: #fff; border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 12px; margin: 6px 0; font-size: 12.5px; }
.carte-detail h3 { margin: 18px 0 6px; font-size: 13.5px; } details > summary { cursor: pointer; margin: 8px 0; }
.carte-detail ul[id$=_membres], .carte-detail ul[id$=_etiquettes] { list-style: none; padding: 0; margin: 0; }

/* ---------- Présence ---------- */
.case { width: 42px; height: 42px; border-radius: 8px; border: 2px solid #D1D5DB; background: #fff; font-size: 18px; cursor: pointer; color: #9CA3AF; }
.case.oui { background: var(--vert); border-color: var(--vert); color: #fff; } .case:disabled { cursor: default; opacity: .6; }
table.presence td, table.presence th { padding: 5px 8px; }

/* ---------- Téléphone ---------- */
@media (max-width: 1000px) { .grille.deux-un, .grille.trois { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; gap: 12px; } .hero .col + .col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 12px; } }
@media (max-width: 800px) {
  .burger { display: block; }
  .menu { position: fixed; left: -260px; top: 0; z-index: 40; transition: left .2s; width: 250px; }
  .menu.ouvert { left: 0; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .haut { padding: 6px 12px; } .haut .recherche, .profil .qui { display: none; } .contenu { padding: 14px 12px 40px; }
  .liste { width: 82vw; flex-basis: 82vw; } .modal { padding: 0; } .modal-boite { border-radius: 0; min-height: 100vh; }
  td.large, th.large { min-width: 200px; }
}
@media print {
  .menu, .haut, .barre-outils, .onglets, .btn, .act, .noprint { display: none !important; }
  body { background: #fff; } .contenu { padding: 0; max-width: none; }
  .carte, .tableau-wrap, .bloc, .objectif { border: 1px solid #999; break-inside: avoid; }
  th { background: #ddd !important; color: #000 !important; } .objectif > summary::before { content: ""; }
  details:not([open]) > *:not(summary) { display: block; }
}

/* ---------- Listes déroulantes avec recherche (static/js/recherche-select.js) ---------- */
.rs { position: relative; }
.rs-saisie { padding-right: 32px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E6B64' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>") no-repeat right 10px center; }
.rs-effacer { position: absolute; right: 30px; top: 7px; width: 24px; height: 24px; border: 0; background: none; color: var(--texte2); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; }
.rs-effacer:hover { background: #F1ECE2; color: var(--rouge); } .rs-effacer[hidden] { display: none; }
.rs-liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--bordure-fonce); border-radius: 8px; box-shadow: 0 8px 24px rgba(60,50,30,.18); }
.rs-liste[hidden] { display: none; }
.rs-option { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; line-height: 1.35; }
.rs-option:hover, .rs-actif { background: var(--marque-clair); }
.rs-choisi { font-weight: 600; color: var(--marque); } .rs-neutre { color: var(--texte2); }
.rs-option mark { background: #FFE9B8; color: inherit; border-radius: 2px; padding: 0 1px; }
.rs-vide { padding: 10px; color: var(--texte2); font-size: 12px; text-align: center; }

/* ---------- Photos de profil et initiales ---------- */
.avatar.av { margin-left: 0; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bordure); vertical-align: middle; line-height: 1; }
.avatars { margin-left: auto; display: inline-flex; align-items: center; }
.avatars .av + .av { margin-left: -7px; }
.personnes-carte { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin: 10px 0; font-size: 12.5px; }
.personnes-carte > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.personnes-carte .membre { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.profil .av { border: 0; box-shadow: none; }
.commentaire .av { margin-right: 4px; }
.chip-pers .av { border-width: 1px; }

/* ---------- Tableau de tâches : la page ne défile pas, chaque liste défile toute seule (comme Trello) ---------- */
.page-kanban .contenu { padding-bottom: 12px; }
.kanban { overflow-y: hidden; align-items: flex-start; height: var(--hauteur-tableau, 70vh); padding-bottom: 8px; }
.kanban .liste { display: flex; flex-direction: column; max-height: 100%; }
.kanban .liste-entete { flex: 0 0 auto; }
.kanban .liste .cartes { flex: 1 1 auto; min-height: 30px; overflow-y: auto; overflow-x: hidden; padding: 2px 3px 2px 0; scrollbar-width: thin; scrollbar-color: #C9BFA8 transparent; overscroll-behavior: contain; }
.kanban .liste .cartes::-webkit-scrollbar { width: 6px; } .kanban .liste .cartes::-webkit-scrollbar-thumb { background: #C9BFA8; border-radius: 3px; }
.kanban .liste .ajout { flex: 0 0 auto; padding-top: 8px; }
.kanban .liste-nouvelle { align-self: flex-start; max-height: none; }
.tuile.nouvelle { animation: eclair 1.6s ease-out; }
@keyframes eclair { 0% { box-shadow: 0 0 0 3px var(--orange); } 100% { box-shadow: 0 1px 1px rgba(0,0,0,.05); } }

/* ---------- Barre mince du tableau : plus de place pour les cartes (les cartes gardent leur taille) ---------- */
.barre-tableau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; position: relative; z-index: 12; }
.barre-tableau h1 { margin: 0; font-size: 18px; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-tableau .seg { margin: 0; padding: 3px; }
.barre-tableau .seg a { padding: 4px 12px; }
.barre-actions { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.menu-deroulant { position: relative; }
.menu-deroulant > summary { list-style: none; cursor: pointer; margin: 0; }
.menu-deroulant > summary::-webkit-details-marker { display: none; }
.menu-deroulant .panneau { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(560px, 92vw); background: #fff; border: 1px solid var(--bordure-fonce); border-radius: 10px; padding: 12px; box-shadow: 0 10px 28px rgba(60,50,30,.2); }
.page-kanban .haut { min-height: 50px; padding-top: 4px; padding-bottom: 4px; }
.page-kanban .contenu { padding-top: 10px; }
.page-kanban .seg { box-shadow: none; border: 1px solid var(--bordure); }
.page-kanban .haut { min-height: 44px; padding-top: 2px; padding-bottom: 2px; }
.page-kanban .contenu { padding-top: 6px; padding-bottom: 6px; }
.page-kanban .barre-tableau { margin-bottom: 5px; }
.kanban .liste { padding: 6px; }
.kanban .liste-entete { padding: 0 4px 5px; }
.kanban .liste .ajout { padding-top: 4px; }