/* ============================================================
   AGENDA INTERNE (28/09/2026) — modale « Agenda » (⌘A), bandeau
   « Prochain rendez-vous », encart du tableau de bord, reprise.
   Conception agenda §8 et §10. Classes préfixées ag-.
   Mobile d'abord pour les cibles : 44 px au doigt (< 768 px),
   rien ne déborde à 320 / 375 px.
   ============================================================ */

/* Tout élément caché de l'agenda le reste, quelle que soit la règle `display` de sa
   classe (piège : `.x { display:flex }` annule l'attribut `hidden`). */
.ag-dlg [hidden], .ag-prochain [hidden] { display: none !important; }

/* ---------- La boîte ---------- */
.ag-dlg {
  width: min(1280px, calc(100vw - 32px));
  height: min(900px, calc(100vh - 32px));
  height: min(900px, calc(100dvh - 32px));
  max-width: none; max-height: none;
  margin: auto; padding: 0;
  color: var(--fg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border-lit); border-radius: 14px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .78), 0 0 0 1px rgba(53, 208, 242, .14);
  overflow: hidden;
  outline: none;
}
.ag-dlg[open] { display: flex; flex-direction: column; }
.ag-dlg::backdrop { background: rgba(4, 7, 13, .74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.agenda-ouverte, html.agenda-ouverte body { overflow: hidden; }

/* ---------- En-tête : Agenda · ‹ période › Aujourd'hui · + Rendez-vous · × ---------- */
.ag-tete {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.ag-titre { margin: 0; font-family: var(--font-brand); font-size: 13px; text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; }
.ag-titre::before { content: ''; display: inline-block; width: 3px; height: 13px; border-radius: 2px; margin-right: 9px; vertical-align: -2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px rgba(53, 208, 242, .55); }
.ag-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ag-periode { margin: 0; min-width: 12.5em; text-align: center; font: 600 13px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-bt {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border-lit); color: var(--fg);
  font: 500 12px var(--font); line-height: 1;
}
.ag-bt:hover { border-color: var(--accent); color: var(--accent); }
.ag-bt:focus-visible, .ag-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#agPrec, #agSuiv { font-size: 17px; padding: 0 9px; }
.ag-court { display: none; }
.ag-outils { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ag-vues { display: none; }
.ag-vues .ag-bt[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: rgba(53, 208, 242, .45); }
.ag-nouveau { white-space: nowrap; }
.ag-nouveau span[aria-hidden] + .ag-nouveau-txt { margin-left: 4px; }
.ag-fermer {
  width: 30px; height: 30px; flex: none; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border-lit); color: var(--muted);
  font-size: 19px; line-height: 1;
}
.ag-fermer:hover { border-color: var(--accent); color: var(--accent); }

.ag-alerte {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 8px 14px 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(251, 95, 122, .1); border: 1px solid rgba(251, 95, 122, .4); color: var(--fg); font-size: 13px;
}
.ag-fuseau { flex: none; margin: 6px 14px 0; font-size: 12px; color: var(--warn); }
.ag-confirme {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40;
  margin: 0; padding: 8px 14px; border-radius: 8px; max-width: calc(100% - 32px);
  background: var(--card-2); border: 1px solid rgba(53, 208, 242, .45); color: var(--fg);
  font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); pointer-events: none;
}

/* ---------- Corps : en-têtes des jours, journées entières, grille défilante ---------- */
.ag-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; --ag-n: 7; }
.ag-tetes, .ag-journee {
  flex: none; display: grid; grid-template-columns: 52px repeat(var(--ag-n), minmax(0, 1fr));
  /* Même gouttière de barre de défilement que la grille : les colonnes restent alignées. */
  overflow-y: hidden; scrollbar-gutter: stable;
}
.ag-tetes { border-bottom: 1px solid var(--border); }
.ag-tete-jour { padding: 7px 4px 6px; text-align: center; font-size: 12px; color: var(--muted); border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.ag-tete-j { text-transform: capitalize; margin-right: 5px; }
.ag-tete-n { font: 700 13px var(--font-num); color: var(--fg); }
.ag-tete-jour.aujourdhui .ag-tete-j { color: var(--accent); }
.ag-tete-jour.aujourdhui .ag-tete-n { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #06121a; }
.ag-tete-jour.passe { opacity: .55; }

.ag-journee { grid-auto-rows: 24px; row-gap: 2px; padding: 3px 0; border-bottom: 1px solid var(--border); max-height: 40%; overflow-y: auto; }
.ag-journee-g { grid-column: 1; align-self: start; padding: 5px 6px 0 0; text-align: right; font: 500 10px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ag-jr {
  display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 2px; padding: 0 7px;
  border: 0; border-left: 3px solid var(--accent-2); border-radius: 5px; cursor: pointer;
  background: rgba(124, 108, 246, .2); color: var(--fg); font: 500 11.5px var(--font); text-align: left;
}
.ag-jr:hover, .ag-jr:focus-visible { background: rgba(124, 108, 246, .32); outline: none; box-shadow: 0 0 0 1px var(--accent-2); }
.ag-jr.passe { opacity: .55; }
.ag-jr-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-jr-c { flex: none; font-size: 10px; color: var(--muted); }
.ag-jr-plus {
  margin: 0 2px; border: 1px dashed var(--border-lit); border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 11px var(--font);
}
.ag-jr-plus:hover { color: var(--accent); border-color: var(--accent); }

.ag-defil {
  --ag-h: 48px;
  flex: 1; min-height: 0; position: relative;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable;
  outline: none;
}
.ag-grille { display: grid; grid-template-columns: 52px minmax(0, 1fr); height: calc(24 * var(--ag-h)); position: relative; }
.ag-heures { position: relative; }
.ag-heure { position: absolute; right: 7px; transform: translateY(-50%); font: 500 10.5px var(--font-num); color: var(--muted); pointer-events: none; }
.ag-maintenant-h {
  position: absolute; right: 3px; transform: translateY(-50%); z-index: 2; padding: 0 4px; border-radius: 4px;
  background: var(--danger); color: #1a0a10; font: 700 10px var(--font-num);
}
.ag-cols {
  display: grid; grid-template-columns: repeat(var(--ag-n), minmax(0, 1fr));
  /* Traits des heures (pleins) et des demi-heures (discrets). */
  background-image: repeating-linear-gradient(to bottom,
    var(--border) 0, var(--border) 1px, transparent 1px, transparent calc(var(--ag-h) / 2),
    rgba(255, 255, 255, .035) calc(var(--ag-h) / 2), rgba(255, 255, 255, .035) calc(var(--ag-h) / 2 + 1px),
    transparent calc(var(--ag-h) / 2 + 1px), transparent var(--ag-h));
  user-select: none; -webkit-user-select: none;
}
.ag-col {
  position: relative; min-width: 0; border-left: 1px solid var(--border); cursor: cell;
  /* Le défilement vertical au doigt reste natif ; un glisser horizontal ne sert à rien. */
  touch-action: pan-y;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ag-col.aujourdhui { background: rgba(53, 208, 242, .035); }
.ag-col.passe { background: rgba(0, 0, 0, .12); }

/* Rendez-vous horodaté : bloc placé en absolu (haut = minute, hauteur = durée). */
.ag-ev {
  position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  padding: 2px 6px 2px 5px; margin: 0; text-align: left; cursor: pointer;
  border: 0; border-left: 3px solid var(--accent); border-radius: 5px;
  background: rgba(22, 60, 78, .92); color: var(--fg); font: 500 11.5px/1.25 var(--font);
  box-shadow: 0 0 0 1px rgba(8, 11, 19, .6);
}
.ag-ev:hover, .ag-ev:focus-visible { z-index: 3; background: rgba(28, 82, 104, .98); outline: none; box-shadow: 0 0 0 1px var(--accent); }
.ag-ev.passe { opacity: .55; }
.ag-ev-h { font: 700 10.5px var(--font-num); color: var(--accent); }
.ag-ev-t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ag-ev-c { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev-ics { position: absolute; top: 3px; right: 4px; display: flex; gap: 3px; color: var(--muted); }
.ag-ic { width: 11px; height: 11px; }
/* Bloc bas (moins de 38 px) : heure et titre sur une ligne. */
.ag-ev.court { flex-direction: row; align-items: baseline; gap: 5px; }
.ag-ev.court .ag-ev-t { display: block; white-space: nowrap; text-overflow: ellipsis; }
.ag-ev.court .ag-ev-c, .ag-ev.court .ag-ev-ics { display: none; }

.ag-fantome {
  position: absolute; left: 2px; right: 2px; z-index: 5; box-sizing: border-box;
  padding: 2px 6px; border-radius: 5px; pointer-events: none;
  background: rgba(124, 108, 246, .3); border: 1px dashed var(--accent-2);
  color: var(--fg); font: 600 11px var(--font-num);
}
.ag-maintenant { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; z-index: 4; background: var(--danger); pointer-events: none; }
.ag-maintenant::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

/* Pastilles ▲ N / ▼ N : collantes en tête et en pied de la zone visible de la colonne. */
.ag-pastille {
  position: sticky; z-index: 6; flex: none; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 38px; margin: 3px 0; padding: 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent-2); color: #fff; font: 600 11px var(--font);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.ag-pastille.haut { top: 3px; }
.ag-pastille.bas { bottom: 3px; margin-top: auto; }

/* Bande des jours et liste : téléphone seulement. */
.ag-bandeau-jours { flex: none; display: none; }
.ag-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 28px; }
.ag-attente { position: absolute; inset: 0; align-items: flex-start; }

/* ---------- Formulaire : panneau à droite (ordinateur), feuille (téléphone) ---------- */
.ag-form {
  position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); z-index: 20;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border-left: 1px solid var(--border-lit); box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
}
.ag-form-tete { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.ag-form-titre { flex: 1; min-width: 0; margin: 0; font: 600 14px var(--font-brand); }
.ag-quitter {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 14px; background: rgba(251, 191, 36, .1); border-bottom: 1px solid rgba(251, 191, 36, .4); font-size: 13px;
}
.ag-quitter span { flex: 1 1 100%; }
.ag-form-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 22px; }
.ag-form-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--fg); font-size: 12.5px; }
.ag-champ { margin: 0 0 12px; min-width: 0; }
.ag-champ > label, .ag-fin-serie legend { font-size: 12px; }
.ag-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ag-ligne#agJours { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ag-ligne .ag-champ { margin-bottom: 8px; }
.ag-form input[type=time] {
  width: 100%; background: var(--bg-2); color: var(--fg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 8px; font: 400 13.5px var(--font); line-height: 1.45; outline: none;
}
.ag-form input[type=time]:focus { border-color: var(--accent); box-shadow: var(--glow); }
.ag-form input[type=date] { padding-left: 8px; padding-right: 6px; }
.ag-form [aria-invalid="true"] { border-color: var(--danger); }
.ag-case, .ag-radio { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--fg); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; }
.ag-case input, .ag-radio > input[type=radio] { flex: none; margin: 0; }
.ag-radio input[type=date], .ag-radio input[type=number] { width: auto; min-width: 0; flex: 1 1 auto; padding: 7px 9px; }
.ag-radio input[type=number] { max-width: 6.5em; }
.ag-fin-serie { margin: -4px 0 12px; padding: 8px 10px 2px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.ag-fin-serie legend { padding: 0 4px; color: var(--muted); }
.ag-aide { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.ag-err { margin: 5px 0 0; font-size: 12px; color: var(--danger); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-err-generale { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: rgba(251, 95, 122, .1); border: 1px solid rgba(251, 95, 122, .35); color: var(--fg); }
.ag-serie-note { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.ag-lien { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ag-visible { margin: -4px 0 12px; }
.ag-visible .ag-case { margin-bottom: 2px; }
.ag-visio { display: flex; gap: 8px; align-items: stretch; }
.ag-visio input { flex: 1; min-width: 0; }
.ag-visio .btn { flex: none; }
.ag-form select:disabled, .ag-form input:disabled { opacity: .5; cursor: not-allowed; }
.ag-invites { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ag-invite {
  display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px;
  border: 1px solid var(--border-lit); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 12.5px;
}
.ag-invite.retire { opacity: .6; text-decoration: line-through; text-decoration-color: rgba(127, 139, 166, .7); }
.ag-invite.echec { border-color: rgba(251, 95, 122, .5); }
.ag-invite-txt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 1px; align-items: baseline; overflow-wrap: anywhere; }
.ag-invite-mail { color: var(--muted); font-size: 11.5px; }
.ag-invite-statut { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.ag-invite.echec .ag-invite-statut { color: var(--danger); }
.ag-invite-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 17px; cursor: pointer; }
.ag-invite-x:hover { color: var(--danger); background: rgba(251, 95, 122, .1); }
.ag-invite-ajout { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
/* Suggestions d'invités (01/10/2026) : sous le champ, nom + adresse + provenance. */
.ag-sugg { top: calc(100% + 2px); max-height: 280px; z-index: 40; }
.ag-sugg .ag-sugg-item { display: grid; gap: 1px; white-space: normal; padding: 7px 10px; }
.ag-sugg-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sugg-mail { font-family: var(--font-num); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sugg-src { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sugg-item.on .ag-sugg-src, .ag-sugg-item:hover .ag-sugg-src { color: inherit; opacity: .8; }
.ag-invite-ajout input { flex: 1 1 180px; min-width: 0; }
.ag-form-pied {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--card);
}
.ag-supprimer { margin-left: auto; padding: 6px 4px; border: 0; background: none; color: var(--danger); font: 500 12.5px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ag-source { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--muted); }

/* ---------- Portée : cette occurrence / toute la série ---------- */
.ag-choix { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 7, 13, .62); }
.ag-choix-boite { width: min(430px, 100%); padding: 16px 16px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border-lit); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.ag-choix-titre { margin: 0 0 10px; font: 600 14px var(--font-brand); }
.ag-choix-portee { margin: 0 0 6px; padding: 0; border: 0; }
.ag-choix-portee .ag-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ag-choix-texte { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.ag-choix-boutons { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tablette : heure de 44 px ---------- */
@media (max-width: 1023px) and (min-width: 768px), (min-width: 768px) and (pointer: coarse) {
  .ag-defil { --ag-h: 44px; }
  .ag-periode { min-width: 10.5em; }
}

/* ---------- Téléphone (< 768 px) : plein écran, vue Jour ou Liste, cibles de 44 px ---------- */
@media (max-width: 767px) {
  .ag-dlg { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  /* Trois rangées : Agenda + × ; ‹ période › Auj. ; Jour | Liste + « + ». */
  .ag-tete {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titre fermer" "nav nav" "outils outils";
    row-gap: 4px; column-gap: 8px; padding: 4px 10px 6px;
  }
  .ag-titre { grid-area: titre; }
  .ag-fermer { grid-area: fermer; width: 44px; height: 44px; font-size: 22px; }
  .ag-nav { grid-area: nav; gap: 6px; }
  .ag-periode { flex: 1; min-width: 0; white-space: normal; font-size: 12.5px; line-height: 1.2; }
  .ag-outils { grid-area: outils; margin-left: 0; justify-content: space-between; }
  .ag-bt { height: 44px; min-width: 44px; font-size: 13px; }
  .ag-long { display: none; }
  .ag-court { display: inline; }
  .ag-vues { display: flex; gap: 6px; }
  .ag-vues .ag-bt { padding: 0 14px; }
  .ag-tete .btn.ag-nouveau { min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; padding: 0 14px; }
  .ag-nouveau-txt { display: none; }

  .ag-bandeau-jours { display: flex; gap: 0; padding: 4px 6px; border-bottom: 1px solid var(--border); }
  .ag-jour-bt {
    flex: 1; min-width: 44px; min-height: 44px; padding: 2px 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
    font: 500 11px var(--font);
  }
  .ag-jour-bt b { font: 700 14px var(--font-num); color: var(--fg); }
  .ag-jour-bt.passe { opacity: .6; }
  .ag-jour-bt.aujourdhui b { color: var(--accent); }
  .ag-jour-bt[aria-pressed="true"] { border-color: rgba(53, 208, 242, .5); background: var(--accent-soft); color: var(--accent); }

  .ag-tetes { display: none; }
  .ag-defil { --ag-h: 88px; }
  .ag-grille { grid-template-columns: 46px minmax(0, 1fr); }
  .ag-journee { grid-template-columns: 46px repeat(var(--ag-n), minmax(0, 1fr)); grid-auto-rows: 44px; }
  .ag-jr, .ag-jr-plus { min-height: 44px; font-size: 13px; }
  .ag-ev { font-size: 13px; padding: 4px 8px 4px 7px; }
  .ag-ev-h { font-size: 12px; }
  .ag-ev-c { font-size: 11.5px; }
  .ag-pastille { height: 44px; min-width: 60px; font-size: 13px; }

  .ag-liste-jour { padding: 8px 0 4px; border-bottom: 1px solid var(--border); }
  .ag-liste-titre { margin: 4px 0 6px; font: 600 13px var(--font); color: var(--fg); }
  .ag-liste-jour.aujourdhui .ag-liste-titre { color: var(--accent); }
  .ag-liste-jour.passe { opacity: .6; }
  .ag-liste-vide { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; color: var(--muted); font-size: 13px; }
  .ag-liste-plus { width: 44px; height: 44px; flex: none; border: 1px dashed var(--border-lit); border-radius: 10px; background: transparent; color: var(--accent); font-size: 22px; cursor: pointer; }
  .ag-rang {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0 0 4px; padding: 6px 10px;
    border: 0; border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(22, 60, 78, .75);
    color: var(--fg); text-align: left; font: 500 13px var(--font); cursor: pointer;
  }
  .ag-rang.journee { border-left-color: var(--accent-2); background: rgba(124, 108, 246, .2); }
  .ag-rang.passe { opacity: .55; }
  .ag-rang-h { flex: none; width: 4.2em; font: 700 12px var(--font-num); color: var(--accent); }
  .ag-rang-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ag-rang-t { overflow-wrap: anywhere; }
  .ag-rang-c { font-size: 11.5px; color: var(--muted); }

  /* Formulaire : feuille plein écran, pied collant ; 16 px pour qu'iOS ne zoome pas. */
  .ag-form { width: 100%; border-left: 0; box-shadow: none; }
  .ag-form input[type=text], .ag-form input[type=email], .ag-form input[type=url], .ag-form input[type=number],
  .ag-form input[type=date], .ag-form input[type=time], .ag-form select, .ag-form textarea { font-size: 16px; min-height: 44px; }
  .ag-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag-ligne .ag-champ-date { grid-column: 1 / -1; }
  .ag-ligne#agJours .ag-champ-date { grid-column: auto; }
  .ag-case, .ag-radio { min-height: 44px; margin-bottom: 4px; }
  .ag-case input[type=checkbox], .ag-radio > input[type=radio] { width: 20px; height: 20px; }
  .ag-form .btn, .ag-quitter .btn, .ag-choix .btn, .ag-err .btn, .ag-alerte .btn { min-height: 44px; }
  .ag-supprimer, .ag-lien { min-height: 44px; }
  .ag-invite-x { width: 44px; height: 44px; }
  .ag-invite { min-height: 44px; }
  .ag-form-titre { font-size: 15px; }
}

/* ============================================================
   BANDEAU « PROCHAIN RENDEZ-VOUS » (tableau de bord, hors de la grille « Disposer »)
   ============================================================ */
.ag-prochain {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(53, 208, 242, .1), rgba(124, 108, 246, .06));
  border: 1px solid rgba(53, 208, 242, .32);
}
.ag-prochain.imminent { border-color: var(--warn); background: linear-gradient(90deg, rgba(251, 191, 36, .14), rgba(124, 108, 246, .05)); }
.ag-prochain.en-cours { border-color: var(--success); background: linear-gradient(90deg, rgba(52, 211, 153, .14), rgba(124, 108, 246, .05)); }
.ag-prochain.vide { background: rgba(255, 255, 255, .02); border-color: var(--border); }
.ag-prochain-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ag-prochain-libelle { flex: none; font: 600 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ag-prochain.imminent .ag-prochain-libelle { color: var(--warn); }
.ag-prochain.en-cours .ag-prochain-libelle { color: var(--success); }
.ag-prochain.vide .ag-prochain-libelle { color: var(--muted); }
.ag-prochain-texte { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ag-prochain-titre { font-size: 15px; overflow-wrap: anywhere; }
.ag-prochain-client { font-size: 12px; color: var(--muted); }
.ag-prochain-quand { font: 500 13px var(--font); font-variant-numeric: tabular-nums; }
.ag-prochain-dans { font: 600 12px var(--font-num); color: var(--accent); }
.ag-prochain.imminent .ag-prochain-dans { color: var(--warn); }
.ag-prochain.en-cours .ag-prochain-dans { color: var(--success); }
.ag-prochain-vide { color: var(--muted); font-size: 13px; }
.ag-prochain-actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ag-prochain-journees { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.ag-prochain-journee { color: var(--fg); }
/* Chrono depuis le rendez-vous (05/10/2026) : seulement EN COURS. agenda.js pose `.en-cours`
   à l'heure du début sans recharger : le bouton est rendu d'avance et montré par la classe
   (jamais par l'attribut hidden, qu'un display annulerait). */
.ag-prochain-chrono { display: none; }
.ag-prochain.en-cours .ag-prochain-chrono { display: inline-flex; }
form.ag-prochain-chrono { margin: 0; }
.ag-prochain-chrono-actif {
  align-items: center; gap: 6px; padding: 0 10px; min-height: 30px; border-radius: 999px;
  font: 600 12px var(--font); color: var(--success);
  border: 1px solid rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .08);
}
.ag-prochain-chrono-actif::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 8px var(--success);
}
@media (max-width: 767px) {
  .ag-prochain-actions { margin-left: 0; width: 100%; }
  .ag-prochain-actions .btn { min-height: 44px; flex: 1 1 auto; }
  .ag-prochain.en-cours form.ag-prochain-chrono { flex: 1 1 auto; }
  form.ag-prochain-chrono .btn { width: 100%; }
  .ag-prochain-chrono-actif { min-height: 44px; justify-content: center; flex: 1 1 auto; }
}

/* ---------- Écran de reprise ---------- */
.ag-reprise-resume { margin: 0 0 12px; }
.ag-reprise-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; margin: 0; }
.ag-reprise-chiffres div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.ag-reprise-chiffres dt { color: var(--muted); font-size: 13px; }
.ag-reprise-chiffres dd { margin: 0; font: 700 13px var(--font-num); }

/* ---------- Catégories (demande de Franck du 28/09/2026) ----------
   Klorel (pro) en bleu, Perso en vert, Anniversaires en rouge pastel avec un gâteau.
   Chaque classe cat-* porte sa couleur (--cat) et ses fonds ; les blocs de la grille, les
   barres « journée », la liste (téléphone), l'encart du tableau de bord et le bandeau
   « prochain rendez-vous » s'en servent. En fin de feuille : l'emporte sur les teintes
   par défaut (.ag-rang.journee, .wk-ev.allday…). */
.cat-klorel { --cat: #5b9bff; --cat-fond: rgba(62, 120, 230, .30); --cat-fond-h: rgba(62, 120, 230, .45); }
.cat-perso { --cat: #45d49a; --cat-fond: rgba(40, 170, 112, .26); --cat-fond-h: rgba(40, 170, 112, .40); }
.cat-anniv { --cat: #f6a6ab; --cat-fond: rgba(246, 166, 171, .22); --cat-fond-h: rgba(246, 166, 171, .34); }
.ag-ev[class*="cat-"], .ag-jr[class*="cat-"], .ag-rang[class*="cat-"], a.wk-ev.wk-ev[class*="cat-"] {
  border-left-color: var(--cat); background: var(--cat-fond);
}
.ag-ev[class*="cat-"]:hover, .ag-ev[class*="cat-"]:focus-visible,
.ag-jr[class*="cat-"]:hover, .ag-jr[class*="cat-"]:focus-visible,
.ag-rang[class*="cat-"]:hover, .ag-rang[class*="cat-"]:focus-visible,
a.wk-ev.wk-ev[class*="cat-"]:hover, a.wk-ev.wk-ev[class*="cat-"]:focus-visible {
  background: var(--cat-fond-h); box-shadow: 0 0 0 1px var(--cat); outline: none;
}
.ag-ev[class*="cat-"] .ag-ev-h, .ag-rang[class*="cat-"] .ag-rang-h { color: var(--cat); }
.ag-gateau { width: 12px; height: 12px; flex: none; margin-right: 3px; vertical-align: -2px; color: var(--cat, #f6a6ab); }
.ag-prochain-titre.cat-anniv { color: var(--cat); }
.ag-prochain-titre .ag-gateau { width: 15px; height: 15px; }

/* Choix de la catégorie dans le formulaire : trois pastilles. */
.ag-cats { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-cats legend { padding: 0; margin: 0 0 5px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ag-cat {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px;
  border: 1px solid var(--border-lit); border-radius: 999px; cursor: pointer;
  font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--fg);
}
.ag-cat > span { display: inline-flex; align-items: center; gap: 4px; }
.ag-cat > span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); flex: none; }
.ag-cat.cat-anniv > span::before { display: none; }
.ag-cat input { margin: 0; accent-color: var(--cat); }
.ag-cat:has(input:checked) { border-color: var(--cat); background: var(--cat-fond); }
.ag-cat:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--cat); }
@media (max-width: 767px) { .ag-cat { min-height: 44px; padding: 5px 14px; } }

/* ---------- Glisser un rendez-vous (demande de Franck du 28/09/2026) ----------
   Le bloc pris reste en place, estompé (.ag-source) ; un fantôme (.ag-depl) montre la
   nouvelle place, heures comprises. Poignée du bas : heure de fin. En fin de feuille :
   l'emporte sur les teintes des catégories. */
.ag-journee { user-select: none; -webkit-user-select: none; }
.ag-ev, .ag-jr { -webkit-touch-callout: none; }
.ag-ev-poignee { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.ag-ev-poignee::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 18px; height: 3px; margin-left: -9px;
  border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .12s;
}
.ag-ev:hover .ag-ev-poignee::after, .ag-ev:focus-visible .ag-ev-poignee::after { opacity: .45; }
.ag-ev.ag-source, .ag-jr.ag-source { opacity: .35; }
.ag-ev.ag-pris { z-index: 4; box-shadow: 0 0 0 2px var(--cat, var(--accent)), 0 8px 22px rgba(0, 0, 0, .5); }
.ag-depl { pointer-events: none; z-index: 8; box-shadow: 0 0 0 1px var(--cat, var(--accent)), 0 10px 26px rgba(0, 0, 0, .55); }
.ag-ev.ag-depl[class*="cat-"], .ag-jr.ag-depl[class*="cat-"] { background: var(--cat-fond-h); }
.ag-ev.ag-depl .ag-ev-h { color: var(--fg); }
.ag-jr.ag-depl { position: relative; }
.ag-dlg.ag-glisse, .ag-dlg.ag-glisse * { cursor: grabbing !important; }
.ag-dlg.ag-redim, .ag-dlg.ag-redim * { cursor: ns-resize !important; }
@media (max-width: 767px), (pointer: coarse) {
  .ag-ev-poignee { height: 14px; }
  .ag-ev-poignee::after { opacity: .35; }
}

/* TABLETTE AU DOIGT (iPad, 31/10/2026) : ✕, ‹ › et Aujourd'hui de 44 px. */
@media (pointer: coarse) {
  .ag-bt { height: 44px; min-width: 44px; }
  .ag-fermer { width: 44px; height: 44px; }
}