/* ══════════════════════════════════════════════════════════════════════
   [b2276→b2277] AGENDA — nouvelle grille (handoff-agenda de Margot), SCOPEE.
   ══════════════════════════════════════════════════════════════════════
   104 classes dont .card .btn .on .off .b .d .k .m .t .task .today : on ne
   RENOMME pas (son moteur concatene ses classes -> regex interdite, b1741),
   on SCOPE tout sous `.agn`. :root/body/* reportes sur `.agn`.
   JETE : uniquement le chrome que DonnaChrome fournit deja (barre du haut,
   rangee de filtres, recherche, switch de vue, toggle theme, legende).
   [b2277] GARDES en revanche : .wrap / .stage / .mini* — le mini-calendrier
   et « A venir » font partie de la composition, pas du decor de demo.
   Parseur a blocs (b1822), commentaires strippes avant test (b1823).
   ══════════════════════════════════════════════════════════════════════ */
.agn{ box-sizing:border-box; display:block; width:100%; }
.agn, .agn[data-theme="light"]{--bg:#f7f8fa;--surface:#fff;--s2:#f1f3f7;--s3:#e7ebf2;--border:#e4e7ee;--border-hi:#d3d8e3;--text:#14161f;--text-dim:#4a5169;--muted:#8a93ab;--accent:#6b5cf5;--accent-dim:rgba(107,92,245,.1);--chaud:#d64560;--tiede:#c08a2e;--froid:#3d7fc2;--green:#22a06b;--radius:4px;--radius-lg:8px;--radius-xl:14px;--shadow-sm:0 1px 2px rgba(20,22,31,.05);--shadow:0 4px 14px rgba(20,22,31,.07);--shadow-lg:0 12px 34px -8px rgba(20,22,31,.2);--now:#e0348c}
.agn[data-theme="noir"]{--bg:#000;--surface:#0a0a0c;--s2:#121216;--s3:#1a1a20;--border:#1f1f27;--border-hi:#2a2a35;--text:#f2f3f7;--text-dim:#a8adbd;--muted:#5f6578;--accent:#8b7bff;--accent-dim:rgba(139,123,255,.14);--chaud:#ff6680;--tiede:#f0c050;--froid:#5ca8ff;--green:#4fd49a;--radius:3px;--radius-lg:6px;--radius-xl:12px;--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow:0 4px 14px rgba(0,0,0,.5);--shadow-lg:0 16px 40px -10px rgba(0,0,0,.7);--now:#ff5bb0}
.agn, .agn *{margin:0;box-sizing:border-box}
.agn{font-family:'Inter',-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.45}
.agn svg{display:block}
.agn .mn{font-variant-numeric:tabular-nums}
.agn .btn{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:600;border-radius:var(--radius);padding:8px 13px;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.agn .btn svg{width:15px;height:15px}
.agn .btn.pri{background:var(--text);color:var(--bg)}
.agn .btn.pri:hover{background:var(--text-dim)}
.agn .btn.sec{background:var(--s2);border-color:var(--border);color:var(--text)}
.agn .btn.sec:hover{background:var(--s3)}
.agn .gcal{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--green)}
.agn .gcal .gd{width:7px;height:7px;border-radius:50%;background:var(--green)}
.agn .wrap{display:flex;min-height:calc(100vh - 96px)}
.agn .mini{width:250px;flex-shrink:0;border-left:1px solid var(--border);padding:16px;background:var(--surface)}
@media(max-width:1000px){
  .agn .mini{display:none}
}
.agn .mini-m{margin-bottom:20px}
.agn .mini-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.agn .mini-t{font-size:12.5px;font-weight:700}
.agn .mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.agn .mini-grid .dn{font-size:9px;color:var(--muted);text-align:center;font-weight:600;padding:3px 0}
.agn .mini-grid .dd{font-size:11px;text-align:center;padding:5px 0;border-radius:6px;cursor:pointer;position:relative;color:var(--text-dim)}
.agn .mini-grid .dd:hover{background:var(--s2)}
.agn .mini-grid .dd.oth{color:var(--muted);opacity:.5}
.agn .mini-grid .dd.today{background:var(--text);color:var(--bg);font-weight:700}
.agn .mini-grid .dd.has::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--accent)}
.agn .mini-up{display:flex;flex-direction:column;gap:8px}
.agn .mini-ev{display:flex;gap:9px;align-items:flex-start}
.agn .mini-ev .b{width:3px;border-radius:2px;align-self:stretch;flex-shrink:0}
.agn .mini-ev .t{font-size:12px;font-weight:600;line-height:1.3}
.agn .mini-ev .m{font-size:11px;color:var(--muted)}
.agn .stage{flex:1;min-width:0;padding:0}
.agn .stage>.card{border:0;border-radius:0;box-shadow:none;background:var(--surface)}
.agn .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}
.agn .tg{display:grid;overflow:hidden}
.agn .tg-corner{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.agn .tg-dh{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:8px 10px;text-align:center}
.agn .tg-dh:last-child{border-right:0}
.agn .tg-dn{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.agn .tg-dd{font-size:17px;font-weight:700;margin-top:2px}
.agn .tg-dh.today .tg-dd{width:27px;height:27px;line-height:27px;margin:2px auto 0;background:var(--text);color:var(--bg);border-radius:8px;font-size:14px}
.agn .tg-allday{display:grid;border-bottom:1px solid var(--border);min-height:26px}
.agn .tg-ad-lab{border-right:1px solid var(--border);font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 6px 0;text-align:right}
.agn .tg-ad-lane{position:relative;border-right:1px solid var(--border)}
.agn .adband{position:absolute;height:20px;border-radius:5px;padding:0 8px;font-size:11px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow-sm)}
.agn .tg-body{position:relative;display:grid;overflow-y:auto;max-height:none;flex:1}
.agn .tg-times{border-right:1px solid var(--border)}
.agn .tg-hr{font-size:10px;color:var(--muted);text-align:right;padding:0 7px;transform:translateY(-6px)}
.agn .tg-col{position:relative;border-right:1px solid var(--border)}
.agn .tg-col:last-child{border-right:0}
.agn .tg-hline{position:absolute;left:0;right:0;border-top:1px solid var(--border)}
.agn .tg-hhalf{position:absolute;left:0;right:0;border-top:1px dashed var(--border);opacity:.5}
.agn .nowline{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--now);z-index:6;pointer-events:none}
.agn .nowline::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--now)}
.agn .nowlab{position:absolute;left:2px;top:-16px;font-size:9px;font-weight:700;color:var(--now)}
.agn .ev{position:absolute;border-radius:6px;padding:3px 7px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);border-left:3px solid;z-index:2}
.agn .ev .et{font-size:11.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agn .ev .eh{font-size:10px;opacity:.85;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agn .ev .rez{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.agn .ev .rez::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:22px;height:2px;border-radius:2px;background:currentColor;opacity:0}
.agn .ev:hover .rez::after{opacity:.5}
.agn .ev.mini15{padding:1px 6px}
.agn .ev.mini15 .et{font-size:10.5px}
.agn .ev.task{border-left-style:dashed;box-shadow:none;background:repeating-linear-gradient(135deg,var(--s2),var(--s2) 5px,transparent 5px,transparent 10px)!important;border:1px dashed var(--border-hi);color:var(--text-dim)!important}
.agn .ev.task .et{font-weight:600}
.agn .ev.task .tk{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.agn .ev.gcal{border-left-style:dotted}
.agn .ev.declined{opacity:.5;box-shadow:none}
.agn .ev.declined .et{text-decoration:line-through;text-decoration-thickness:1px}
.agn .ev.todo{box-shadow:0 0 0 2px var(--now)}
.agn .ev .badge-todo{position:absolute;top:3px;right:5px;font-size:8.5px;font-weight:700;color:#fff;background:var(--now);border-radius:4px;padding:1px 5px}
.agn .ev .own{position:absolute;top:4px;right:5px;width:14px;height:14px;border-radius:4px;font-size:8px;font-weight:700;display:grid;place-items:center;background:rgba(0,0,0,.16)}
.agn .mo{display:grid;grid-template-columns:repeat(7,1fr)}
.agn .mo-dn{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;padding:9px 0;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.agn .mo-dn:last-child{border-right:0}
.agn .mo-c{min-height:104px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px;display:flex;flex-direction:column;gap:3px}
.agn .mo-c:nth-child(7n){border-right:0}
.agn .mo-c.oth{background:var(--s2)}
.agn .mo-dnum{font-size:12px;font-weight:600;color:var(--text-dim);align-self:flex-start;width:22px;height:22px;display:grid;place-items:center;border-radius:6px}
.agn .mo-c.oth .mo-dnum{color:var(--muted)}
.agn .mo-c.today .mo-dnum{background:var(--text);color:var(--bg);font-weight:700}
.agn .mo-c.newmonth .mo-dnum::after{content:" "attr(data-mo);font-size:9px;color:var(--muted)}
.agn .mo-ev{font-size:10.5px;font-weight:600;border-radius:4px;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2.5px solid;cursor:pointer}
.agn .mo-ev.allday{color:#fff}
.agn .mo-ev.task{background:transparent;border:1px dashed var(--border-hi);color:var(--text-dim);font-weight:500}
.agn .mo-more{font-size:10px;font-weight:600;color:var(--muted);cursor:pointer;padding:1px 6px}
.agn .mo-more:hover{color:var(--accent)}
.agn .lst{max-width:720px}
.agn .lst-day{margin-bottom:20px}
.agn .lst-dh{position:sticky;top:0;font-size:12px;font-weight:700;color:var(--text);padding:8px 0;background:var(--bg);letter-spacing:-.01em}
.agn .lst-dh .wd{color:var(--muted);font-weight:600}
.agn .lst-e{display:flex;gap:14px;align-items:stretch;padding:11px 0;border-top:1px solid var(--border)}
.agn .lst-time{width:74px;flex-shrink:0;font-size:12.5px;font-weight:700;padding-left:11px;border-left:3px solid}
.agn .lst-time .d{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px}
.agn .lst-body{flex:1;min-width:0}
.agn .lst-t{font-size:14px;font-weight:600}
.agn .lst-m{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;gap:12px;flex-wrap:wrap}
.agn .lst-m span{display:inline-flex;align-items:center;gap:5px}
.agn .lst-m svg{width:13px;height:13px}
.agn .lst-tag{align-self:flex-start;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:3px 7px}
.agn .lst-e.task .lst-time{border-left-style:dashed;color:var(--muted)}
.agn .lst-e.declined{opacity:.5}
.agn .lst-e.declined .lst-t{text-decoration:line-through}
.agn .empty{text-align:center;padding:60px 20px;color:var(--muted)}
.agn .empty svg{width:40px;height:40px;margin:0 auto 14px;color:var(--border-hi)}
.agn .empty .et{font-size:15px;font-weight:600;color:var(--text-dim)}
.agn .empty .em{font-size:13px;margin-top:5px}
.agn .empty .btn{margin-top:16px}
.agn .prev{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--border-hi);border-radius:10px;box-shadow:var(--shadow-lg);padding:11px 13px;max-width:240px;pointer-events:none;opacity:0;transition:opacity .12s;font-size:12px}
.agn .prev.on{opacity:1}
.agn .prev .pt{font-weight:700;font-size:13px;margin-bottom:3px}
.agn .prev .pm{color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:3px}
.agn .prev .pm svg{width:12px;height:12px;flex-shrink:0}
.agn .prev .pn{margin-top:7px;padding-top:7px;border-top:1px solid var(--border);color:var(--text-dim);line-height:1.4}

/* ══════════════════════════════════════════════════════════════════════
   [b2278] HAUTEUR DE PAGE — la grille s'arretait a ~21h en laissant une
   grande bande grise dessous (capture Anthony). Sa maquette vit dans une
   page a elle (min-height:100vh-96px) ; ici elle vit dans #page-agenda, qui
   est une CHAINE FLEX depuis b2260. On rebranche la chaine maillon par
   maillon : chaque niveau doit avoir flex:1 ET min-height:0, sinon un enfant
   scrollable ne peut pas se contraindre et deborde.
   ══════════════════════════════════════════════════════════════════════ */
body.agn-on #page-agenda{ display:flex; flex-direction:column; min-height:0; }
body.agn-on #page-agenda > .agn{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.agn .wrap{ flex:1 1 auto; min-height:0; }
.agn .stage{ display:flex; flex-direction:column; min-height:0; }
.agn .card{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.agn .tg-body{ flex:1 1 auto; min-height:0; }
.agn .mini{ overflow-y:auto; }

/* [b2278] TEXTE COUPE : sous ~34px, le titre + la ligne horaire ne tiennent
   pas dans le bloc et `overflow:hidden` tranchait en plein milieu d'une
   ligne. En dessous de ce seuil on masque la ligne horaire — c'est deja le
   principe de son `mini15`, on l'etend a toute hauteur insuffisante plutot
   que de laisser un demi-caractere a l'ecran. */
.agn .ev{ display:flex; flex-direction:column; justify-content:flex-start; }
.agn .ev .et{ flex:0 0 auto; }
.agn .ev .eh{ flex:0 0 auto; }

/* [b2279] TITRES PAS ASSEZ GRAS. Sa regle est bien font-weight:700, mais elle
   vit en `.agn .ev .et` (0,3,0) : n'importe quelle regle `#page-agenda .x`
   d'agenda.css (1,1,0) passe devant. On repasse au-dessus avec l'id, sans
   !important — meme valeur que la maquette, juste rendue atteignable. */
body.agn-on #page-agenda .agn .ev .et{ font-weight:700; }
body.agn-on #page-agenda .agn .ev .eh{ font-weight:500; }
body.agn-on #page-agenda .agn .adband{ font-weight:700; }

/* [b2281] PADDING BAS — releve a l'inspecteur : #page-agenda porte
   `padding: 0 24px 40px` et .shellv2-main un `padding-bottom:40px`. Les deux
   s'additionnent sous la grille et laissent une bande morte. En mode apercu
   on les annule ; la grille remplit alors vraiment jusqu'au bas de l'ecran.
   Regles scopees body.agn-on -> le reste du CRM n'est pas touche. */
body.agn-on #page-agenda{ padding-bottom:0 !important; }
body.agn-on .shellv2-main{ padding-bottom:0 !important; }
body.agn-on #page-agenda > .agn{ margin-bottom:0; }

/* [b2282] « A venir » : le liseré doit etre une BARRE FINE, pas un carre.
   Sa regle `.mini-ev .b{width:3px}` (0,2,0) se faisait battre — `.b` est une
   classe d'une lettre, plusieurs feuilles du CRM la touchent. On repasse
   au-dessus par l'id, comme pour les titres d'evenements. */
body.agn-on #page-agenda .agn .mini-ev .b{
  width:3px; min-width:3px; max-width:3px; height:auto;
  border-radius:2px; align-self:stretch; flex-shrink:0;
}

/* [b2282] BANDE BLANCHE EN BAS, 2e passe. Le padding seul ne suffisait pas :
   arpentiq-page.css force `#page-agenda{ height: calc(100vh - var(--aqp-chrome)) }`
   — une hauteur CALCULEE qui ne tombe pas juste dans .shellv2-main (lui-meme
   height:100vh avec padding 25/24/40 et gap:16). Plutot que de rejouer le
   calcul, on laisse le flex faire le travail : la page devient un item qui
   PREND ce qui reste. C'est la seule facon d'etre exact quelle que soit la
   hauteur du chrome. */
body.agn-on .shellv2-main{ padding-bottom:0 !important; }
body.agn-on #page-agenda{
  height:auto !important; max-height:none !important;
  flex:1 1 auto !important; min-height:0 !important;
  padding-bottom:0 !important; margin-bottom:0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [b2283] TROIS CORRECTIFS, TOUS LA MEME FAMILLE : ses classes courtes se
   font battre par des regles GLOBALES du CRM.
   ══════════════════════════════════════════════════════════════════════ */

/* S2 — « A venir » : le carre, enfin explique. tc.css definit un bouton
   global `.b{ padding:6px 11px; display:inline-flex }`. Son lisere porte la
   MEME classe : il heritait de 22px de padding horizontal, et un width:3px
   ne peut rien contre un padding qui le depasse. On remet le padding a zero,
   c'etait ca et pas la largeur. */
body.agn-on #page-agenda .agn .mini-ev .b{
  padding:0 !important; border:0 !important; gap:0 !important;
  display:block !important;
  width:3px !important; min-width:3px; max-width:3px;
  border-radius:2px; align-self:stretch; flex-shrink:0;
}

/* S1 — vue Mois : colonnes trop larges, jours pousses hors ecran.
   `repeat(7,1fr)` vaut `repeat(7,minmax(auto,1fr))` : le minimum AUTO d'une
   colonne est la largeur min-content de son contenu. Ses pastilles sont en
   `white-space:nowrap` — avec ses libelles de demo courts ca ne se voyait
   pas, avec « 12:30 Visite - 15 Rue Debelleyme - Theresa Abrassart » la
   colonne gonfle a la taille du titre. minmax(0,1fr) autorise la troncature. */
body.agn-on #page-agenda .agn .mo{ grid-template-columns:repeat(7,minmax(0,1fr)) !important; }
body.agn-on #page-agenda .agn .mo-c{ min-width:0; overflow:hidden; }
body.agn-on #page-agenda .agn .mo-ev{ min-width:0; max-width:100%; }

/* Titres d'evenement : encore plus gras (Anthony). */
body.agn-on #page-agenda .agn .ev .et{ font-weight:800; }
body.agn-on #page-agenda .agn .mo-ev{ font-weight:700; }
body.agn-on #page-agenda .agn .adband{ font-weight:800; }

/* S4 — repere de l'heure : barre ROUGE, sans la pastille. */
body.agn-on #page-agenda .agn .nowline{ border-top-color:#e0245e !important; z-index:7; }
body.agn-on #page-agenda .agn .nowline::before{ display:none !important; }
body.agn-on #page-agenda .agn .nowlab{ color:#e0245e !important; }

/* S3 — bandeau de synchronisation Google, au-dessus du mini-calendrier. */
body.agn-on #page-agenda .agn .mini > .gcal{
  display:flex; align-items:center; gap:7px; margin:0 0 14px;
  font-size:11.5px; font-weight:700; color:var(--green, #1D9E75);
}
body.agn-on #page-agenda .agn .mini > .gcal .gd{
  width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════════════════
   [b2284] ON ARRETE DE SE BATTRE A LA SPECIFICITE.
   ══════════════════════════════════════════════════════════════════════
   `.b` et `.mo` sont des noms qu'utilisent aussi les feuilles du CRM (tc.css
   definit un BOUTON `.b`). Deux passes de contre-selecteurs n'ont pas suffi.
   Le markup que je genere porte desormais des noms qui n'existent nulle part
   ailleurs — plus aucune regle etrangere ne peut les atteindre.
   ══════════════════════════════════════════════════════════════════════ */

/* S2 — le lisere de « A venir » : une BARRE, pas un carre. */
.agn .mini-ev .agn-bar{
  width:3px; min-width:3px; max-width:3px;
  align-self:stretch; flex-shrink:0; border-radius:2px;
  padding:0; border:0; display:block;
}

/* S3 — vue Mois : 7 colonnes EGALES. `1fr` vaut `minmax(auto,1fr)` et le
   minimum auto est la largeur min-content : avec des titres longs en
   white-space:nowrap, la colonne gonfle a la taille du texte et pousse les
   jours suivants hors ecran. minmax(0,1fr) autorise la troncature. */
.agn .agn-mo{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  width:100%; min-width:0;
}
.agn .agn-mo > .mo-c, .agn .agn-mo > .mo-dn{ min-width:0; overflow:hidden; }
.agn .agn-mo .mo-ev{ min-width:0; max-width:100%; }

/* S1 — bordure noire autour des evenements a couleur perso : `border-left:3px
   solid` sans couleur vaut currentColor, et sur un fond plein le texte passe
   en encre foncee (ink) -> le lisere devenait noir. Sur un fond plein il n'a
   aucune raison d'exister. */
.agn .ev{ border:0; border-left:3px solid transparent; outline:0; }
.agn .ev[data-perso="1"]{ border-left:0; }

/* S2b — bandeau de synchronisation : un vrai badge, sur UNE ligne. */
.agn .mini > .gcal{
  display:inline-flex; align-items:center; gap:6px;
  max-width:100%; margin:0 0 14px; padding:4px 9px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  border-radius:99px; white-space:nowrap; overflow:hidden;
  color:var(--green,#1D9E75);
  background:color-mix(in srgb, var(--green,#1D9E75) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--green,#1D9E75) 26%, transparent);
}
.agn .mini > .gcal .gd{ width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.agn .mini > .gcal .gm{ overflow:hidden; text-overflow:ellipsis; font-weight:600; opacity:.8; }

/* S4 — l'infobulle ne doit prendre AUCUNE place dans le flux. */
.agn .prev{ position:fixed !important; }
/* et la grille colle le bas : plus rien apres elle. */
body.agn-on #page-agenda > .agn > .wrap{ margin-bottom:0; padding-bottom:0; }
body.agn-on #page-agenda > .agn > .wrap > .stage > .card{ margin-bottom:0; }

/* ══════════════════════════════════════════════════════════════════════
   [b2285] TITRES ENCORE PLUS GRAS, SUR TOUTES LES VUES.
   ══════════════════════════════════════════════════════════════════════
   Prealable : Inter n'etait charge qu'en 300..800 — demander 900 retombait
   sur 800 sans rien changer a l'ecran. La graisse 900 est ajoutee a l'URL
   Google Fonts dans index.html, sinon cette regle serait cosmetique.
   Applique aux quatre surfaces qui portent un titre d'evenement : bloc
   horaire, bandeau journee entiere, pastille du mois, ligne de la liste.
   ══════════════════════════════════════════════════════════════════════ */
.agn .ev .et{ font-weight:900; letter-spacing:-.005em; }
.agn .adband{ font-weight:900; }
.agn .agn-mo .mo-ev{ font-weight:800; }
/* [b2289] Les 3 regles de liste posees en b2285 (900/800/800) sont RETIREES :
   b2288 les contredisait plus bas, le fichier disait deux choses. La liste
   est reglee en un seul endroit, plus bas. */
.agn .mini-ev .t{ font-weight:800; }

/* ══════════════════════════════════════════════════════════════════════
   [b2286] LE PADDING BAS — ENFIN LA BONNE RAISON.
   ══════════════════════════════════════════════════════════════════════
   Mes trois tentatives perdaient a la CASCADE, pas a la logique :

     layout-tokens.css : body.shell-v2-on .shellv2-main{ padding: ... !important }
                         -> specificite (0,2,0) AVEC !important
     ma regle b2278    : body.agn-on  .shellv2-main{ padding-bottom:0 !important }
                         -> specificite (0,2,0) AVEC !important, EGALE

   A specificite egale, c'est l'ORDRE DE CHARGEMENT qui tranche — et
   layout-tokens.css est charge EN DERNIER, exactement par conception (son
   en-tete le dit : « si un futur Max essaie de toucher a ces paddings, il
   devra venir ici »). C'est la lecon b2063, que j'ai reproduite a l'identique.

   Meme histoire pour la hauteur : arpentiq-page.css impose
   `body.shell-v2-on #page-agenda:not([style*="none"]){ height:calc(...) !important }`
   -> (1,2,0), pendant que ma regle etait en (1,1,0). Elle perdait aussi.

   On passe donc DEVANT, franchement : deux classes sur body + l'id + le
   meme :not(), soit (1,3,0). Uniquement sous l'apercu agenda.
   ══════════════════════════════════════════════════════════════════════ */
body.agn-on.shell-v2-on #shellv2-main,
body.agn-on.shell-v2-on .shellv2-main{
  padding-bottom:0 !important;
}
body.agn-on.shell-v2-on #page-agenda,
body.agn-on.shell-v2-on #page-agenda:not([style*="none"]){
  height:auto !important; max-height:none !important;
  flex:1 1 auto !important; min-height:0 !important;
  padding-bottom:0 !important; margin-bottom:0 !important;
  overflow:hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════
   [b2287] THEME — ce qui restait accroche a des valeurs de theme CLAIR.
   ══════════════════════════════════════════════════════════════════════
   Ses deux jeux de tokens (.agn[data-theme="light"] / ["noir"]) font le gros
   du travail des que l'attribut est pose. Restent quelques endroits ou une
   couleur etait ecrite en dur, cote maquette comme cote CRM. */

/* Le cadre de l'apercu suit le theme (il vivait en var(--accent-dim) fixe). */
.agn .prev{ background:var(--surface); color:var(--text); border:1px solid var(--border); }

/* Le repere de l'heure : meme rouge sur les deux themes, mais son libelle
   doit rester lisible sur fond sombre. */
.agn[data-theme="noir"] .nowlab{ color:#ff5c85 !important; }
.agn[data-theme="noir"] .nowline{ border-top-color:#ff5c85 !important; }

/* Taches : le hachure de Margot est calcule pour un fond clair. */
.agn[data-theme="noir"] .ev.task{
  background:repeating-linear-gradient(45deg, var(--s2) 0 6px, var(--s3) 6px 12px) !important;
  color:var(--text-dim);
}

/* Badge de synchronisation : le vert du CRM est trop sombre sur fond noir. */
.agn[data-theme="noir"] .mini > .gcal{ color:#3ddc97; }

/* Le conteneur de page ne doit pas imposer le blanc du CRM sous l'apercu :
   la maquette peint son propre fond via ses tokens. */
body.agn-on.shell-v2-on #shellv2-main,
body.agn-on.shell-v2-on .shellv2-main{ background:transparent !important; }
body.agn-on #page-agenda{ background:var(--bg); }

/* ══════════════════════════════════════════════════════════════════════
   [b2288] VUE LISTE — retour aux graisses de Margot + respiration.
   ══════════════════════════════════════════════════════════════════════
   Ma passe b2285 avait pousse la liste a 900/800 alors que sa maquette est
   a 600/700 : a 900, Inter change de face et ne ressemble plus au reste du
   produit — c'est le « pas la bonne typo ». On revient a ses valeurs.
   La grille garde ses titres epaissis, c'est la liste qui redescend.
   Et la colonne (max-width:720px) etait collee au bord gauche, sans aucun
   padding : on l'aere des deux cotes, symetriquement.
   ══════════════════════════════════════════════════════════════════════ */
/* [b2289] SOURCE UNIQUE du reglage de la liste, sur des classes qui
   n'existent nulle part ailleurs — plus aucune regle du CRM ne peut les
   atteindre, et l'ordre de chargement des feuilles n'a plus d'importance. */
/* [b2291] Liste : PLEINE LARGEUR, et le retrait descend d'un cran.
   Le padding etait porte par le CONTENEUR : il rentrait donc aussi les
   bandeaux de jour, qui doivent au contraire filer bord a bord. On le
   retire du conteneur et on le pose sur les LIGNES d'evenement. Le bandeau
   garde le meme retrait a l'interieur, pour que son libelle reste aligne
   sur la colonne des heures — bande pleine largeur, texte aligne. */
.agn .agn-lst{ padding:0 0 24px; max-width:none; width:100%; box-sizing:border-box; }
.agn .agn-lst .lst-day{ margin-bottom:20px; }
.agn .agn-lst .lst-dh{
  margin:0; padding:9px 24px; width:100%; box-sizing:border-box;
  background:var(--s2); border-radius:0;
}
.agn .agn-lst .lst-e{ padding:11px 24px; }
.agn .agn-lst-t{ font-weight:700 !important; font-size:14px; }   /* [b2291] un cran plus gras */
.agn .agn-lst-dh{ font-weight:700 !important; }   /* [b2291] padding-left:0 retire : le retrait du bandeau est regle plus bas, une seule fois */
.agn .agn-lst-time{ font-weight:700 !important; }

/* ══════════════════════════════════════════════════════════════════════
   [b2288] VUE MOIS — la bande sous la grille.
   ══════════════════════════════════════════════════════════════════════
   Sa grille dimensionne ses lignes sur le CONTENU (min-height:104px par
   cellule) : sur un mois peu charge elle s'arrete avant le bas et laisse le
   reste vide. Un calendrier mensuel doit occuper sa hauteur — les semaines
   se partagent la place. La 1re ligne (en-tetes de jour) reste en `auto`,
   les lignes de semaine passent en 1fr avec un plancher.
   ══════════════════════════════════════════════════════════════════════ */
.agn .agn-mo{
  height:100%; min-height:0;
  grid-template-rows:auto;
  grid-auto-rows:minmax(96px, 1fr);
  align-content:stretch;
}
.agn .stage > .card{ display:flex; flex-direction:column; min-height:0; }
.agn .stage > .card > .agn-mo{ flex:1 1 auto; }

/* [b2289] VUE MOIS — la hauteur, sans dependre d'une chaine flex fragile.
   La grille se dimensionnait sur le contenu (min-height:104px/cellule) et
   s'arretait avant le bas. Plutot que de compter sur `flex:1` a chaque
   maillon (.stage > .card > .agn-mo), on borne la carte a la hauteur
   disponible et on laisse la grille l'occuper : moins de maillons, moins
   d'endroits ou ca peut casser. */
.agn .stage{ display:flex; flex-direction:column; min-height:0; height:100%; }
.agn .stage > .card{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.agn .stage > .card > .agn-mo{ flex:1 1 auto; min-height:0; }
.agn .agn-mo{ grid-auto-rows:minmax(88px, 1fr); align-content:stretch; }
.agn .agn-mo .mo-c{ min-height:0; }

/* [b2290] La liste occupe la carte, sans max-width heritee de la maquette. */
.agn .stage > .card > .agn-lst{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.agn .agn-lst .lst-dh{ top:0; z-index:3; }

/* ══════════════════════════════════════════════════════════════════════
   [b2294] LE NOIR DE MARGOT EST TROP NOIR — on prend celui d'Arpentiq.
   ══════════════════════════════════════════════════════════════════════
   Sa maquette est sur du NOIR PUR : --bg #000, --surface #0a0a0c,
   --s2 #121216. C'est exactement la palette qu'Arpentiq a ABANDONNEE en
   v1150, sur cette demande : « tu as adouci le theme noir uniquement dans
   compte, faut aussi que ce soit dans toutes les autres pages ». Le noir du
   produit est un gris-bleute facon Linear (#0f1115 / #16181d / #1c1e24 /
   #23262d) avec des bordures semi-transparentes.
   On reprend donc les tokens du produit, pas ceux de la maquette : c'est la
   meme grille, sur le meme noir que le reste du CRM. Les rayons et les
   ombres de Margot sont conserves — c'est son dessin, pas la palette.
   ══════════════════════════════════════════════════════════════════════ */
.agn[data-theme="noir"]{
  --bg:        #0f1115;
  --surface:   #16181d;
  --s2:        #1c1e24;
  --s3:        #23262d;
  --border:    rgba(255,255,255,.07);
  --border-hi: rgba(255,255,255,.12);
  --text:      #e7e9ee;
  --text-dim:  #a8adbd;
  --muted:     #6a7080;
  --accent:    #8b7bff;
  --accent-hi: #a89dff;
  --accent-dim:rgba(139,123,255,.13);
  --chaud:     #ff6680;
  --tiede:     #f0c050;
  --froid:     #5ca8ff;
  --green:     #4fd49a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.7);
}
/* Les lignes de la grille etaient calculees pour du noir pur : sur le gris
   bleute elles disparaissent. On les remonte d'un cran. */
.agn[data-theme="noir"]{ --cal-grid-line: rgba(255,255,255,.06); }
.agn[data-theme="noir"] .tg-hline{ border-top-color:rgba(255,255,255,.07); }
.agn[data-theme="noir"] .tg-hhalf{ border-top-color:rgba(255,255,255,.04); }
.agn[data-theme="noir"] .tg-col{ border-right-color:rgba(255,255,255,.06); }

/* [b2328] « À venir » : titres trop gras (Anthony). C'est une liste de
   coup d'oeil dans un rail lateral, pas un titre de section — a 600 elle
   pesait autant que le contenu principal a cote. 500 suffit a la
   distinguer de sa meta, qui est deja en couleur attenuee.
   Selecteur par l'id : `.mini-ev .t` fait (0,2,0) et se fait battre par
   les regles de page d'agenda.css (1,1,0) — meme piege qu'en b2279. */
body.agn-on #page-agenda .agn .mini-ev .t{ font-weight:500; }