:root{
  --ink:#0F1F44; --slate:#274A93; --paper:#EDF0F6; --card:#fff; --line:#DEE3EE;
  --text:#182034; --muted:#5D6675; --faint:#97A0B0; --red:#C41E23; --green:#2E7A57;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);background:var(--paper)}
h1,h2{font-family:Georgia,'Times New Roman',serif}
a{color:inherit;text-decoration:none}

/* Connexion */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1100px 560px at 50% -8%, #1d3466 0%, var(--ink) 55%, #0a1730 100%)}
.login-card{width:410px;max-width:94vw;background:#fff;border-radius:18px;padding:38px 36px 26px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.2)}
.login-brand{text-align:center;margin-bottom:8px}
.login-logo{width:148px;max-width:66%;height:auto;display:block;margin:0 auto 12px}
.login-title{font-family:Georgia,serif;font-weight:700;color:var(--ink);font-size:20px;letter-spacing:.01em}
.login-sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.login-rule{height:3px;width:56px;margin:16px auto 18px;border-radius:2px;background:linear-gradient(90deg,#4E79D6 0 33%,#dfe4ee 33% 66%,#E33B3F 66% 100%)}
.login-card label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:14px 0 6px}
.login-card .inp{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 13px;font-size:15px;background:#fff;transition:border-color .15s,box-shadow .15s}
.login-card .inp:focus{border-color:var(--slate);box-shadow:0 0 0 3px rgba(39,74,147,.15);outline:none}
.login-card .btn-primary{width:100%;margin-top:22px;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}
.login-card .btn-primary:hover{background:#16305f}
.login-foot{text-align:center;color:var(--faint);font-size:12px;margin-top:20px}
.flame{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;background:var(--ink);color:#fff;font-size:18px}
.alert{background:#FBEBEC;color:var(--red);border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:6px;border:1px solid #f3d2d4}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 5px}
.inp{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:14px;color:var(--text);background:#fff;outline:none}
.inp:focus{border-color:var(--slate)}
.btn-primary{width:100%;margin-top:18px;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:11px;font-size:14px;font-weight:600;cursor:pointer}

/* Application */
.app{display:flex;min-height:100vh}
/* La barre suivait la hauteur totale de la page : sur un long écran,
   son pied — dont le bouton de signalement — se retrouvait hors de
   vue. On la fixe à la hauteur de la fenêtre, et l'on fait défiler
   la liste des entrées si elle déborde. */
.sidebar{width:250px;background:var(--ink);color:#DDE3EE;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;align-self:flex-start}
.side-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.10)}
.side-logo{height:42px;width:auto;flex-shrink:0}
.side-brand{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.side-brand strong{font-family:Georgia,serif;color:#fff;font-size:15px;font-weight:700}
.side-brand span{color:#9FB0CC;font-size:11px}
.tricolore{display:flex;gap:3px;margin-top:5px}
.tricolore i{width:16px;height:3px;display:block}
.tricolore .tb{background:#4E79D6}.tricolore .tw{background:#F2F4F8}.tricolore .tr{background:#E33B3F}
.sidebar nav{flex:1;padding:14px 12px}
.nav{display:block;padding:10px 12px;border-radius:8px;font-size:14px;color:#C2CBDB;margin-bottom:3px}
.nav:hover{background:rgba(255,255,255,.06)}
.nav.active{background:rgba(255,255,255,.10);color:#fff;font-weight:600}
.side-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.who{flex:1}.who-name{color:#fff;font-size:13px;font-weight:600}.who-role{color:#9FB0CC;font-size:11px}
.logout{background:rgba(255,255,255,.08);color:#C2CBDB;font-size:12px;padding:6px 10px;border-radius:8px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:44px;display:flex;align-items:center;gap:12px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line)}
.topbar h1{font-size:20px;color:var(--ink);margin:0}
.tag-ro{background:#F7EFDE;color:#9E6A12;font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px}
.content{padding:24px;overflow:auto}
.flash{border-radius:8px;padding:12px 16px;font-size:14px;margin-bottom:16px;border-left:4px solid transparent}
.flash-ok{background:#E7F1EB;color:var(--green);border-left-color:var(--green)}
.flash-warn{background:#FCE9CE;color:#8a4b00;border-left-color:#E08A00;font-weight:600;font-size:15px}
.flash-warn::before{content:"\26A0\FE0F  ";}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.card-v{font-size:26px;font-weight:700;color:var(--ink);line-height:1.15}
.card-l{font-size:14px;color:var(--muted);margin-top:2px}
.st-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.st-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 15px}
.st-card .v{font-size:24px;font-weight:700;color:var(--ink);line-height:1.15}
.st-card .l{font-size:13px;color:var(--muted);margin-top:2px}
.mode-carte{flex:1 1 200px;cursor:pointer}
.mode-carte input{position:absolute;opacity:0;pointer-events:none}
.mode-carte-inner{border:1.5px solid var(--line);border-radius:10px;padding:22px 16px 18px;text-align:center;transition:border-color .12s,background .12s}
.mode-carte-inner svg{color:var(--muted);transition:color .12s}
.mode-carte-label{font-size:14px;color:var(--ink);margin:10px 0 14px}
.mode-radio-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);margin:0 auto;position:relative;transition:border-color .12s}
.mode-carte input:checked + .mode-carte-inner{border-color:#6C5CE7;background:#F5F3FF}
.mode-carte input:checked + .mode-carte-inner svg{color:#6C5CE7}
.mode-carte input:checked + .mode-carte-inner .mode-radio-dot{border-color:#6C5CE7}
.mode-carte input:checked + .mode-carte-inner .mode-radio-dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#6C5CE7}

/* Les mêmes cartes que .mode-carte, mais sur les couleurs propres à
   chaque origine d'événement plutôt que le violet des visites — pour
   rester visuellement distinct entre les deux écrans tout en
   reprenant exactement le même principe d'interaction. */
.origine-carte{flex:1 1 160px;cursor:pointer}
.origine-carte input{position:absolute;opacity:0;pointer-events:none}
.origine-carte-inner{border:1.5px solid var(--line);border-radius:10px;padding:16px 14px;text-align:center;transition:border-color .12s,background .12s}
.origine-carte-inner svg{color:var(--muted);transition:color .12s}
.origine-carte-label{font-size:13.5px;color:var(--ink);margin-top:8px}
.origine-carte input:checked + .origine-carte-inner{border-color:#274A93;background:#E7ECF7}
.origine-carte input:checked + .origine-carte-inner svg{color:#274A93}

/* Entrant / Sortant, même principe que les cartes d'origine — mais
   avec les couleurs déjà utilisées sur les étiquettes de la liste
   (sens-tag), pour rester cohérent avec ce qui existe déjà plutôt
   que d'inventer une troisième palette. */
.sens-carte{flex:1 1 160px;cursor:pointer}
.sens-carte input{position:absolute;opacity:0;pointer-events:none}
.sens-carte-inner{border:1.5px solid var(--line);border-radius:10px;padding:16px 14px;text-align:center;transition:border-color .12s,background .12s}
.sens-carte-inner svg{color:var(--muted);transition:color .12s}
.sens-carte-label{font-size:13.5px;color:var(--ink);margin-top:8px}
.sens-carte[data-v="Entrant"] input:checked + .sens-carte-inner{border-color:#274A93;background:#E7ECF7}
.sens-carte[data-v="Entrant"] input:checked + .sens-carte-inner svg{color:#274A93}
.sens-carte[data-v="Sortant"] input:checked + .sens-carte-inner{border-color:#9E6A12;background:#F7EFDE}
.sens-carte[data-v="Sortant"] input:checked + .sens-carte-inner svg{color:#9E6A12}
/* Le petit sélecteur de sens sur une carte de dépôt individuelle —
   discret, mais teinté selon le choix en cours. */
.depot-sens.sens-entrant{border-color:#274A93 !important;background:#E7ECF7;color:#274A93;font-weight:600}
.depot-sens.sens-sortant{border-color:#9E6A12 !important;background:#F7EFDE;color:#9E6A12;font-weight:600}

/* La présence à un événement, en trois pastilles colorées plutôt
   qu'un menu déroulant neutre — chacune prend la couleur du badge de
   statut déjà utilisé ailleurs (vert/orange/gris), pour reconnaître
   le choix en cours d'un coup d'œil, sans avoir à lire le texte. */
.presence-pastille{cursor:pointer}
.presence-pastille input{position:absolute;opacity:0;pointer-events:none}
.presence-pastille-inner{padding:8px 14px;border-radius:20px;font-size:13px;font-weight:600;background:var(--paper);color:var(--muted);border:1.5px solid var(--line);transition:background .12s,border-color .12s,color .12s;display:inline-block}
.presence-pastille[data-s="J'y vais"] input:checked + .presence-pastille-inner{background:#E7F1EB;border-color:#2E7A57;color:#2E7A57}
.presence-pastille[data-s="À décider"] input:checked + .presence-pastille-inner{background:#F7EFDE;border-color:#9E6A12;color:#9E6A12}
.presence-pastille[data-s="Je n'y vais pas"] input:checked + .presence-pastille-inner{background:#EEF0F3;border-color:#5D6675;color:#5D6675}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-bottom:13px}
.panel h2{font-size:16px;color:var(--ink);margin:0 0 9px}
.panel p{color:var(--muted);line-height:1.55;margin:0}
.hint{font-size:12px;color:var(--faint);margin-top:12px}

.form-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.form-row .inp{width:auto;flex:1;min-width:140px}
.inp-sm{padding:5px 8px;font-size:13px}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:7px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 10px;border-bottom:1px solid #EBEEF5;font-size:14px;vertical-align:middle}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-mini{background:var(--slate);color:#fff;border:0;border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer}
.btn-del{background:#fff;color:var(--red);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:12px;cursor:pointer}
.pw summary{cursor:pointer;color:var(--slate);font-size:13px}
.pw{display:inline-block}
.navtoggle{display:none}
.burger{display:none;cursor:pointer;font-size:26px;line-height:1;color:#fff;margin-left:auto;padding:2px 8px;user-select:none}
@media(max-width:820px){
  .app{flex-direction:column;min-height:auto}
  /* Sur mobile, la barre passe en bandeau horizontal : la hauteur d'écran
     et le positionnement collant, ajoutés pour garder son pied visible sur
     grand écran, lui faisaient recouvrir toute la page. */
  .sidebar{width:100%;flex-direction:column;position:static;height:auto;align-self:auto}
  .side-head{padding:12px 16px}
  .tricolore{display:none}
  .burger{display:block}
  .sidebar nav{display:none;flex:none;padding:8px 12px 12px}
  .navtoggle:checked ~ nav{display:block}
  .navtoggle:checked ~ .side-foot{display:flex}
  .side-foot{display:none;justify-content:space-between}
  .nav{padding:12px}
  .topbar{height:auto;min-height:56px;padding:12px 16px}
  .topbar h1{font-size:18px}
  .content{padding:14px}
  .sidebar .nav-feedback{display:none}
  .navtoggle:checked ~ .nav-feedback{display:block}
  .panel{padding:16px}
  .content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
}

/* Module courrier */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{padding:6px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);background:#fff;border:1px solid var(--line)}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Les mêmes teintes que statut_badge(), pour reconnaître un statut
   d'un coup d'œil sur ce bandeau de filtres aussi — pas seulement sur
   chaque ligne de la liste. Actif = la couleur pleine ; inactif = la
   même version pâle que le badge. */
.tab-amber{background:#F7EFDE;color:#9E6A12;border-color:#F0DEB8}
.tab-amber.active{background:#9E6A12;color:#fff;border-color:#9E6A12}
.tab-violet{background:#EAE6F2;color:#5B4B8A;border-color:#D7CFE8}
.tab-violet.active{background:#5B4B8A;color:#fff;border-color:#5B4B8A}
.tab-green{background:#E7F1EB;color:#2E7A57;border-color:#C8E3D3}
.tab-green.active{background:#2E7A57;color:#fff;border-color:#2E7A57}
.tab-grey{background:#EEF0F3;color:#5D6675;border-color:#DDE1E8}
.tab-grey.active{background:#5D6675;color:#fff;border-color:#5D6675}
.search{display:flex;align-items:center;gap:6px;background:var(--paper);border-radius:8px;padding:7px 11px}
.search input{border:0;background:transparent;outline:none;font-size:14px;color:var(--text)}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.b-blue{background:#E7ECF7;color:#274A93}.b-violet{background:#EAE6F2;color:#5B4B8A}.b-amber{background:#F7EFDE;color:#9E6A12}.b-grey{background:#EEF0F3;color:#5D6675}.b-green{background:#E7F1EB;color:#2E7A57}.b-red{background:#FBEBEC;color:#C41E23}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--slate);color:#fff;font-size:10px;font-weight:700}
.late{color:var(--red);font-weight:600}
/* Bouton présenté comme un lien. La classe était employée dans six
   modules sans avoir jamais été définie : les <button> gardaient donc
   l'apparence native du navigateur, avec bordure et fond gris, à côté
   des <a> qui portent la même classe. */
.btn-linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--blue,#2b3a67);cursor:pointer;text-decoration:none;border-radius:3px}
.btn-linklike:hover{text-decoration:underline}
.btn-linklike+.btn-linklike{margin-left:10px}
.linkr{color:var(--slate);font-weight:600}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dl{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:8px;padding:10px 12px;margin-top:8px}
.dropzone{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px dashed var(--line);border-radius:8px;padding:12px;color:var(--slate);font-size:14px;margin-top:8px}
.statut-btns{display:flex;flex-wrap:wrap;gap:8px}
.sb{padding:6px 11px;border-radius:8px;font-size:13px;font-weight:600;background:var(--paper);color:var(--muted);border:0;cursor:pointer}
.sb.on{background:var(--ink);color:#fff}
/* Mêmes couleurs que les onglets de statut sur la liste (tab-amber
   etc.) — sans ça, un bouton de statut sur la fiche d'un courrier
   reste gris quel que soit le statut, alors que la liste, elle, le
   colore. */
.sb.tab-amber{background:#F7EFDE;color:#9E6A12}
.sb.tab-amber.on{background:#9E6A12;color:#fff}
.sb.tab-violet{background:#EAE6F2;color:#5B4B8A}
.sb.tab-violet.on{background:#5B4B8A;color:#fff}
.sb.tab-green{background:#E7F1EB;color:#2E7A57}
.sb.tab-green.on{background:#2E7A57;color:#fff}
.sb.tab-grey{background:#EEF0F3;color:#5D6675}
.sb.tab-grey.on{background:#5D6675;color:#fff}
/* Les boutons « Ma présence » d'un événement (J'y vais / À décider /
   Je n'y vais pas) reprennent les mêmes couleurs que leur badge
   (ev_statut_class, b-green/b-amber/b-red) — jusque-là tous gris,
   seul le bouton actif changeait. Vert/ambre/rouge plutôt que
   vert/ambre/gris : « Je n'y vais pas » est une décision ferme, pas
   un simple statut neutre. */
.sb.b-green{background:#E7F1EB;color:#2E7A57}
.sb.b-green.on{background:#2E7A57;color:#fff}
.sb.b-amber{background:#F7EFDE;color:#9E6A12}
.sb.b-amber.on{background:#9E6A12;color:#fff}
.sb.b-grey{background:#EEF0F3;color:#5D6675}
.sb.b-grey.on{background:#5D6675;color:#fff}
.sb.b-red{background:#FBEBEC;color:#C41E23}
.sb.b-red.on{background:#C41E23;color:#fff}
/* Le menu de statut posé directement sur une ligne de la liste,
   coloré comme le badge qu'il remplace, pour changer le statut sans
   ouvrir la fiche. */
.statut-select{width:auto;font-weight:600;border:1px solid transparent;border-radius:999px;cursor:pointer}
.statut-select.tab-amber{background:#F7EFDE;color:#9E6A12}
.statut-select.tab-violet{background:#EAE6F2;color:#5B4B8A}
.statut-select.tab-green{background:#E7F1EB;color:#2E7A57}
.statut-select.tab-grey{background:#EEF0F3;color:#5D6675}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column}
.fld label{margin:0 0 4px}
.mb{margin-bottom:18px}
.backlink{display:inline-block;margin-bottom:14px;color:var(--slate);font-weight:600}
dl.info{margin:0}dl.info>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #EBEEF5}dl.info dt{color:var(--faint)}dl.info dd{margin:0;font-weight:600}

/* Carte d'informations de la fiche courrier : les mêmes champs qu'une
   dl.info, mais regroupés en carte plutôt qu'étirés en liste
   verticale — la fiche se lit d'un coup d'œil plutôt que de haut en
   bas. */
.info-card{display:flex;flex-wrap:wrap;gap:14px 30px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.info-card .it{min-width:110px}
.info-card dt{margin:0 0 3px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:600}
.info-card dd{margin:0;font-weight:600;font-size:13.5px}

/* Notes et sens */
.sec{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 4px}
textarea.inp{min-height:70px;resize:vertical;font-family:inherit}
.note{background:#F6F8FB;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.note-admin{background:#FBF3E1;border-color:#EAD9AC}
.note-meta{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.note-you{margin-left:auto}
.note-body{font-size:14px}
.sens-badge{color:var(--faint);font-weight:700;margin-right:5px}

/* v2c : date, sens visible, notes en colonne */
.detail-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}}
.detail-side .panel{position:sticky;top:8px}
.note{background:#F1F3F7;border:1px solid var(--line);border-left:3px solid #CBD2DC;border-radius:8px;padding:10px 12px;margin-bottom:8px}
.note-admin{background:#FCEFD2;border:1px solid #E7C983;border-left:3px solid #9E6A12}
.tbl-wrap{overflow-x:auto}
.sens-tag{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:middle}
.sens-in{background:#E7ECF7;color:#274A93}.sens-out{background:#F7EFDE;color:#9E6A12}
th.sortable a{color:inherit}

/* Étape 3 : agenda + tâches */
.subtabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.subtab{padding:9px 16px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab.active{color:var(--ink);border-bottom-color:var(--ink)}
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.day-head{background:var(--paper);font-weight:700;color:var(--ink);font-size:13px;padding:7px 12px;border-radius:6px;margin:14px 0 8px}
.ev-row{display:flex;gap:14px;align-items:flex-start;padding:10px 6px;border-bottom:1px solid #EDF0F5}
.ev-time{width:60px;flex-shrink:0;font-weight:600;color:var(--slate);font-size:14px}
.ev-main{flex:1;min-width:0}
.ev-sub{font-size:12px;color:var(--faint);margin-top:2px}
.ev-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rdv-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 6px;border-bottom:1px solid #EDF0F5}
.chip-btn{background:var(--paper);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer}
.chip-btn.on{background:#E7F1EB;color:var(--green);border-color:#BFE0CC}
.chip{display:inline-flex;align-items:center;background:#EAE6F2;color:#5B4B8A;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
.lbl-x{background:transparent;border:0;color:#5B4B8A;cursor:pointer;font-size:11px;padding:0}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.board{grid-template-columns:1fr}}
.col{background:var(--paper);border-radius:12px;padding:12px}
.col-head{font-weight:700;color:var(--ink);font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.col-n{background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:12px;color:var(--muted)}
.col-empty{color:var(--faint);text-align:center;padding:10px;font-size:13px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px}
.tcard-top{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tcard-title{font-weight:600;color:var(--text)}
.tcard-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.tcard-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;border-top:1px solid #EEF0F5;padding-top:8px}

/* Agenda Google + colonne RDV */
.rdv-card{background:#F6F8FB;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.rdv-card .ev-sub{margin-top:3px}

/* Synthèse travail parlementaire */
.synth{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.synth .s{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px;min-width:110px}
.synth .s .v{font-size:22px;font-weight:700;color:var(--ink)}
.synth .s .l{font-size:12px;color:var(--muted)}

.rdv-meta{font-size:10px;color:#9aa3b4;margin-top:4px;line-height:1.3}

.saisi-ico{display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;background:#e6e9f0;color:#7a869a;font-size:10px;font-style:italic;font-weight:700;cursor:help;vertical-align:middle;margin-left:5px;user-select:none}

.ban-list{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(15,31,68,.14);max-height:230px;overflow:auto;margin-top:2px}
.ban-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f0f2f6}
.ban-item:last-child{border-bottom:0}
.ban-item:hover{background:var(--paper)}
.pdf-result{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px}


/* ---------------- Densité verticale ----------------
   Les pages étaient hautes : il fallait descendre pour voir la suite
   sur presque chaque module. On resserre les espacements plutôt que de
   réduire le texte, qui resterait lisible mais moins confortable.
   Les tailles de police sont donc inchangées. */
.main > .flash{margin-bottom:11px}
.subtabs{margin-bottom:11px}

/* Cartes de tâches : empilées par dizaines, leurs marges internes
   pèsent plus que tout le reste de la page. Les vraies classes sont
   « tcard », que mes premiers sélecteurs manquaient. */
.tcard{padding:10px 12px;margin-bottom:7px}
.tcard-meta{margin-top:5px}
.tcard-act{margin-top:7px;padding-top:6px}
.tcard-top{margin-bottom:4px}
.col{padding:9px}
.col-head{margin-bottom:7px}

/* Zones dépliables : le bandeau « + Nouvelle tâche » occupait autant
   qu'une carte entière. */
details.panel > summary{padding:11px 18px !important}

/* Listes de fiches : l'interligne suffit à séparer, le vide en trop
   n'ajoute rien. */
.panel > p{margin-bottom:0}
.panel > .tbl-wrap{margin-top:8px}


/* « Modifier » et « Notes » occupaient chacun une ligne pleine, avec son
   trait de séparation : deux lignes par carte, multipliées par le nombre
   de tâches. Côte à côte, elles n'en prennent qu'une. */
.tcard-panel{display:inline-block;vertical-align:top;margin-right:16px;border-top:0 !important;padding-top:0 !important}
.tcard-panel > summary{padding:4px 0 !important;font-size:13px}
.tcard-panel[open]{display:block;margin-right:0}
.tcard > .tcard-panel:first-of-type{border-top:1px dashed #EEF0F5 !important;padding-top:6px !important;margin-top:6px}


/* ---------------- Retouches du 24 août ----------------

   1. Les panneaux ajoutés récemment — Règlement, Trombinoscope — ne
      suivaient pas la présentation des autres : titres trop gros, texte
      d'un corps différent. On aligne tout sur le modèle existant.
   2. Le titre de page et sa barre d'onglets étaient trop écartés.
   3. Les dépliants d'une carte de tâche débordaient sur deux lignes
      depuis l'ajout de l'historique.
   ------------------------------------------------------------------ */

/* 1 — Présentation uniforme des panneaux.

   La règle de largeur ne vaut que pour les petites fiches d'état à deux
   colonnes — « Articles enregistrés : 380 ». Appliquée à tous les
   tableaux, elle déformait les listes de comptes et l'historique, dont
   les lignes s'étiraient démesurément. On la restreint donc par une
   classe posée sur ces fiches. */
.panel > h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
            color:var(--faint);font-weight:700;margin:0 0 10px}
.panel > p{font-size:13px;color:var(--muted);margin:0 0 10px}
.tbl-fiche{font-size:13px}
.tbl-fiche th{font-weight:600;color:var(--faint);width:46%}
.tbl-fiche td{color:var(--text)}

/* 2 — Titre de page collé à ses onglets. Les onglets vivent dans
      « content », non directement sous « main » : ma première règle ne
      visait rien. */
.content > .subtabs:first-child{margin-top:-12px;margin-bottom:12px}
.topbar h1{margin:0;line-height:1.2}

/* 3 — Les trois dépliants d'une carte de tâche tiennent sur une ligne.
      Ils sont en inline-block avec une marge de 16 px : à trois, la
      largeur de carte ne suffisait plus. On resserre. */
/* Ils étaient bien sur la même ligne, mais décalés de deux pixels : le
   filet posé sur le premier décalait sa base. On aligne par le haut, et
   le filet passe sur la carte plutôt que sur le dépliant. */
.tcard-panel{margin-right:11px;vertical-align:top;line-height:1.4}
.tcard-panel > summary{white-space:nowrap;font-size:12.5px}
/* La marge haute venait d'une règle qui ne visait que le premier :
   les deux autres la conservaient, d'où huit pixels de décalage. */
.tcard > .tcard-panel{border-top:0 !important;padding-top:0 !important;margin-top:0 !important}
.tcard-act{margin-bottom:7px}

/* Dépliants « Nouveau … » : le bandeau pleine largeur pesait lourd pour
   un simple bouton d'ouverture. Le triangle natif est masqué, le bouton
   change de teinte une fois ouvert. */
.det-neuf > summary::-webkit-details-marker{display:none}
.det-neuf > summary::marker{content:''}
.det-neuf[open] > summary{background:#fff;color:var(--slate);
                          box-shadow:inset 0 0 0 1px var(--line)}
/* Le contenu garde son cadre : ouvert, le formulaire doit rester un
   panneau, non un bloc flottant sur le fond. */
.det-neuf[open]{background:#fff;border:1px solid var(--line);border-radius:10px;
                padding:14px 18px;margin-bottom:12px}
.det-neuf[open] > summary{margin:0 0 12px}

.jauge{display:inline-block;width:120px;height:7px;border-radius:4px;background:var(--paper);
       border:1px solid var(--line);overflow:hidden;vertical-align:middle;margin-left:8px}
.jauge-remplissage{display:block;height:100%;border-radius:3px;transition:width .2s}