/* =========================================================================
   css/agenda.css — Suivi › Calendrier (F3b, MISSION2 2.2/3.4bis + MISSION3 2.1/2.2)
   Grille mois verre 7 colonnes + détail du jour + liste « À venir »
   + formulaire d'événement (création/édition) + popover détail (note,
   Modifier/Supprimer). Tout en variables (--txt/--muted/--accent/--warn…) —
   thème nuit unique (le thème jour n'existe plus : aucune règle de thème
   clair ici).
   MISSION5 10.1 : étiquettes d'évènement compactes flottantes (--rdv/--task)
   à la place des pastilles, « +n » de repli, liste « À venir » bordée par type.
   MISSION5 10.2 : case d'un jour non vu = halo « lumière » (--lum du cœur,
   repli #fff7e6) + flottement, extinction douce via .agd-seen-out.
   ========================================================================= */

.agenda{display:flex;flex-direction:column;gap:18px}

/* ---- En-tête du mois (lentille hover discrète — point 10) ---------------- */
.agd-head{border-radius:18px}
.agd-head .agd-head-in{display:flex;align-items:center;gap:12px;padding:12px 16px}
.agd-month{flex:1;margin:0;text-align:center;font-size:19px;font-weight:700;
  letter-spacing:.01em;color:var(--txt)}
.agd-month::first-letter{text-transform:uppercase}
.agd-nav{width:38px;height:38px;flex:none}
.agd-today-btn{flex:none}
.agd-add{flex:none;display:inline-flex;align-items:center;gap:7px}
.agd-add .ic{width:15px;height:15px}

/* ---- Grille du mois ------------------------------------------------------ */
.agd-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  padding:16px;border-radius:20px}
.agd-dow{text-align:center;font-size:11px;font-weight:600;color:var(--dim);
  text-transform:uppercase;letter-spacing:.08em;padding:2px 0 6px}
.agd-cell{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:5px;min-height:96px;padding:9px 5px 7px;
  border-radius:12px;background:transparent;border:1px solid transparent;
  color:var(--txt);font:inherit;cursor:pointer;overflow:hidden;
  transition:background .18s ease,border-color .18s ease,box-shadow .8s ease}
.agd-cell:hover{background:rgba(255,255,255,.08)}
.agd-cell:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.agd-out{cursor:default;pointer-events:none}
.agd-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:13.5px;font-variant-numeric:tabular-nums}
.agd-busy .agd-num{font-weight:650}
/* aujourd'hui : cerclé accent */
.agd-today .agd-num{border:1.5px solid var(--accent);color:var(--accent-ink);font-weight:700}
/* jour sélectionné */
.agd-sel{border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent)}
.agd-sel:hover{background:color-mix(in srgb, var(--accent) 16%, transparent)}

/* Étiquettes d'évènement (MISSION5 10.1) — remplacent les pastilles : palette
   sémantique FIXE (jamais l'accent), --rdv = rendez-vous, --task = tâche due.
   Titre tronqué + heure ; flottement léger désynchronisé (délai posé en JS). */
.agd-evs{display:flex;flex-direction:column;gap:3px;width:100%;min-height:6px;
  align-items:stretch}
.agd-ev{display:flex;align-items:center;gap:4px;min-width:0;padding:2px 5px;
  border-radius:6px;font-size:10.5px;line-height:1.35;text-align:left;
  animation:agd-ev-float 5.4s ease-in-out infinite}
.agd-ev-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:650}
.agd-ev-h{flex:none;font-size:9.5px;font-weight:700;opacity:.9}
.agd-ev-rdv{background:color-mix(in srgb, var(--rdv) 26%, transparent);
  color:color-mix(in srgb, var(--rdv) 62%, var(--txt));
  border:1px solid color-mix(in srgb, var(--rdv) 45%, transparent);
  box-shadow:0 0 9px color-mix(in srgb, var(--rdv) 20%, transparent)}
.agd-ev-task{background:color-mix(in srgb, var(--task) 24%, transparent);
  color:color-mix(in srgb, var(--task) 64%, var(--txt));
  border:1px solid color-mix(in srgb, var(--task) 45%, transparent);
  box-shadow:0 0 9px color-mix(in srgb, var(--task) 18%, transparent)}
/* Audit M5 — MODE JOUR : les étiquettes tombaient à ~3,2:1 (sous le seuil AA
   de 4,5:1 pour du 10,5 px). On assombrit le texte (plus de --txt dans le
   mélange) et on opacifie légèrement le fond. La nuit reste inchangée. */
/* Jour chargé : « +n » — ouvre le détail du jour (toute la case est le bouton) */
.agd-ev-more{align-self:flex-start;padding:1px 6px;border-radius:999px;
  font-size:9.5px;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.10);border:1px solid var(--line)}
.agd-cell:hover .agd-ev-more{color:var(--txt)}
@keyframes agd-ev-float{
  0%,100%{transform:translateY(-1.6px)}
  50%{transform:translateY(1.6px)}
}

/* Jour porteur d'une nouveauté non vue (MISSION5 10.2) — langage « lumière »
   de l'itération 1 : halo blanc chaud, PAS de rouge.
   Le halo lui-même vient de la classe PARTAGÉE du cœur `.lum-glow.lum-strong`
   (app.css, var(--glow-strong)) posée par agenda.js : --lum est le blanc
   chaud du thème nuit. Ici, seulement le propre à la grille (liseré,
   teinte, chiffre appuyé, extinction). Pas de .lum-float sur la case : les
   étiquettes flottent déjà à l'intérieur. */
.agd-cell.agd-unseen{
  border-color:color-mix(in srgb, var(--lum,#fff7e6) 55%, transparent);
  background:color-mix(in srgb, var(--lum,#fff7e6) 9%, transparent)}
.agd-cell.agd-unseen .agd-num{font-weight:750}
/* Extinction douce au « vu » (classe posée ~1,6 s après le POST seen) — la
   spécificité (0,3,0) passe devant .lum-glow.lum-strong, le fondu vient de la
   transition box-shadow .8s de .agd-cell. */
.agd-cell.agd-unseen.agd-seen-out{border-color:transparent;background:transparent;
  box-shadow:none}

/* ---- Détail du jour cliqué ----------------------------------------------- */
.agd-day-detail{border-radius:18px;padding:6px 0 4px;
  animation:agd-in .18s ease both}
.agd-detail-title{margin:10px 18px 6px;font-size:14.5px;font-weight:700;color:var(--txt)}
.agd-detail-title::first-letter{text-transform:uppercase}
.agd-none{margin:4px 18px 12px;font-size:13.5px}

/* ---- Lignes d'item (détail du jour + « À venir ») ------------------------
   Boutons pleine largeur : clic → popover détail (MISSION3 2.1). */
.agd-item{display:flex;align-items:center;gap:12px;padding:12px 18px;width:100%;
  background:transparent;border:none;font:inherit;text-align:left;cursor:pointer;
  color:var(--txt);text-decoration:none;transition:background .18s ease}
.agd-item + .agd-item{border-top:1px solid var(--line)}
.agd-item:hover{background:rgba(255,255,255,.07)}
.agd-item:hover .agd-item-title{color:var(--accent-ink)}
.agd-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:10px}
.agd-item-note-ic{flex:none;width:13px;height:13px;color:var(--dim)}
.agd-badge{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em}
/* Badges RDV/Tâche — tokens sémantiques (MISSION4 2-3) + glow léger.
   Texte mixé vers --txt : lisible sur tous les fonds (tous sombres). */
.agd-badge.rdv{background:color-mix(in srgb, var(--rdv) 16%, transparent);
  color:color-mix(in srgb, var(--rdv) 70%, var(--txt));
  border:1px solid color-mix(in srgb, var(--rdv) 45%, transparent);
  box-shadow:0 0 12px color-mix(in srgb, var(--rdv) 18%, transparent)}
.agd-badge.tache{background:color-mix(in srgb, var(--task) 15%, transparent);
  color:color-mix(in srgb, var(--task) 72%, var(--txt));
  border:1px solid color-mix(in srgb, var(--task) 45%, transparent);
  box-shadow:0 0 12px color-mix(in srgb, var(--task) 16%, transparent)}
.agd-badge .ic{width:13px;height:13px}
.agd-item-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.agd-item-title{font-size:14px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:color .18s ease}
.agd-item-soc{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agd-item-when{flex:none;font-size:12.5px;font-weight:700;color:var(--txt)}
/* MISSION5 10.1 : bord coloré par type — même langage que les étiquettes de
   la grille, la liste « À venir » se lit d'un coup d'œil. */
.agd-item-rdv{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--rdv) 75%, transparent)}
.agd-item-task{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--task) 75%, transparent)}
.agd-item-rdv .agd-item-when{color:color-mix(in srgb, var(--rdv) 55%, var(--txt))}
.agd-item-task .agd-item-when{color:color-mix(in srgb, var(--task) 58%, var(--txt))}

/* ---- « En retard » (tâche 5) ---------------------------------------------
   Bloc en TÊTE de la liste : la fenêtre « À venir » part d'aujourd'hui et ne
   pouvait donc jamais montrer un retard. Voyant --task (app.css, jamais
   redéfini ici) soutenu tant que la relance n'est pas cochée. */
.agd-sub-late{display:flex;align-items:center;gap:8px;color:var(--task)}
.agd-sub-late .ic{width:16px;height:16px;color:var(--task)}
.agd-late-list{border-color:color-mix(in srgb, var(--task) 52%, var(--line));
  background:color-mix(in srgb, var(--task) 7%, transparent);
  box-shadow:0 0 26px color-mix(in srgb, var(--task) 18%, transparent)}
.agd-item-late{box-shadow:inset 4px 0 0 var(--task)}
.agd-item-late .agd-item-when{color:var(--task);font-weight:800}
.agd-late-count{color:var(--muted)}

/* Indicateur « retards antérieurs au mois affiché » : la grille ne montre
   qu'un mois — sans lui, un retard d'un mois précédent reste invisible. */
.agd-late-flag{display:flex;align-items:center;gap:8px;width:100%;
  margin:0 0 10px;padding:9px 14px;border-radius:14px;text-align:left;
  font:inherit;font-size:13px;cursor:pointer;color:var(--task);
  background:color-mix(in srgb, var(--task) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--task) 46%, transparent);
  transition:background .16s,border-color .16s}
.agd-late-flag:hover{background:color-mix(in srgb, var(--task) 20%, transparent)}
.agd-late-flag:focus-visible{outline:2px solid var(--task);outline-offset:2px}
.agd-late-flag .ic{width:15px;height:15px;flex:none;color:var(--task)}
.agd-late-flag .num{font-weight:800}
.agd-late-flag-go{margin-left:auto}

/* Retard DANS la grille : étiquette et case marquées. Le mode jour a ses
   propres règles .agd-ev-task (contraste AA) — on les redouble ici, sinon
   elles reprendraient la main (spécificité plus forte). */
.agd-ev.agd-ev-late{background:color-mix(in srgb, var(--task) 42%, transparent);
  border-color:color-mix(in srgb, var(--task) 78%, transparent);font-weight:750}
.agd-cell.agd-cell-late{border-color:color-mix(in srgb, var(--task) 50%, transparent)}

/* Pulse du voyant de retard — sfaPulse vit dans anim.css (non modifié) et ses
   keyframes ne sont définies QUE hors mouvement réduit : on s'aligne. */
@media (prefers-reduced-motion: no-preference){
  .agd-late-flag{animation:sfaPulse 2.4s ease-in-out infinite}
}

/* ---- « À venir » --------------------------------------------------------- */
.agd-sub{margin:6px 2px 0;font-size:15.5px;font-weight:700;color:var(--txt)}
.agd-upcoming-host{display:flex;flex-direction:column;gap:12px}
/* Carte « À venir » teintée --rdv (MISSION4 2-3) : liseré + glow léger —
   la lumière signale les prochains rendez-vous, rien de décoratif. */
.agd-upcoming{border-radius:18px;padding:4px 0;
  border-color:color-mix(in srgb, var(--rdv) 32%, var(--line));
  box-shadow:0 0 22px color-mix(in srgb, var(--rdv) 10%, transparent)}
.agd-empty{border-radius:18px}

@keyframes agd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Formulaire d'événement (création / édition — MISSION3 2.1/2.2) ------ */
.agd-form-host:empty{display:none}
.agd-form-card{border-radius:18px;padding:16px 18px;animation:agd-in .18s ease both}
.agd-form-title{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--txt)}
.agd-form{display:flex;flex-direction:column;gap:10px;max-width:560px}
.agd-fld label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.agd-input,.agd-select,.agd-note-in{width:100%;padding:9px 12px;border-radius:11px;
  background:var(--glass);border:1px solid var(--line);color:var(--txt);
  font:inherit;font-size:13px;outline:none;transition:border-color .16s}
.agd-input:focus,.agd-select:focus,.agd-note-in:focus{
  border-color:color-mix(in srgb, var(--accent) 55%, transparent)}
.agd-note-in{min-height:64px;resize:vertical;line-height:1.5}
.agd-select{cursor:pointer}
.agd-select option{color:#1b1f27;background:#fff}
.agd-form-row{display:flex;gap:10px;flex-wrap:wrap}
.agd-form-row .agd-fld{flex:1;min-width:0}
/* datetime-local français (« 25/07/2026 10:00 ») : ~175 px sinon minutes rognées */
.agd-form-row .agd-fld-dt{flex:1.7;min-width:175px}
.agd-form-hint{margin:0;font-size:11.5px;color:var(--dim);line-height:1.45}
.agd-form-actions{display:flex;justify-content:flex-end;gap:10px}

/* Recherche de société (facultative) — résultats en fond solide (pas de
   backdrop-filter imbriqué dans un panneau verre). */
.agd-soc{position:relative}
.agd-soc-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  display:flex;flex-direction:column;gap:2px;padding:6px;max-height:224px;overflow:auto;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.3)}
.agd-soc-results.hidden{display:none}
.agd-soc-hit{display:flex;gap:8px;align-items:center;width:100%;padding:7px 9px;
  border-radius:9px;background:transparent;border:none;color:var(--txt);
  font:inherit;font-size:13px;text-align:left;cursor:pointer;
  transition:background .15s ease}
.agd-soc-hit:hover,.agd-soc-hit:focus-visible{
  background:color-mix(in srgb, var(--accent) 12%, transparent);outline:none}
.agd-soc-hit .ic{flex:none;width:14px;height:14px;color:var(--accent-ink)}
.agd-soc-den{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agd-soc-no{flex:none;font-size:11px;color:var(--dim)}
.agd-soc-none{padding:8px 10px;font-size:12.5px}
.agd-soc-chip{display:flex;gap:8px;align-items:center;padding:8px 11px;border-radius:11px;
  font-size:13px;color:var(--txt);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent)}
.agd-soc-chip .ic{flex:none;width:14px;height:14px;color:var(--accent-ink)}
.agd-soc-chip b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600}
.agd-soc-x{flex:none;display:grid;place-items:center;padding:2px;border:none;
  background:transparent;color:var(--muted);cursor:pointer;border-radius:6px;
  transition:color .15s ease}
.agd-soc-x:hover{color:var(--txt)}
.agd-soc-x .ic{width:13px;height:13px}

/* ---- Popover détail d'un événement (MISSION3 2.1) ------------------------
   Fond solide dans document.body (même raison que le popover RDV de la
   fiche : un backdrop-filter imbriqué casse le rendu). */
.agd-pop{position:fixed;z-index:70;width:340px;max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;gap:10px;padding:14px;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.35);animation:agd-in .15s ease both}
.agd-pop-head{display:flex;gap:10px;align-items:center}
.agd-pop-title{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agd-pop-when{display:flex;gap:7px;align-items:center;font-size:12.5px;color:var(--muted)}
.agd-pop-when .ic{flex:none;width:14px;height:14px}
.agd-pop-when::first-letter{text-transform:uppercase}
a.agd-pop-soc{display:flex;gap:7px;align-items:center;font-size:13px;font-weight:600;
  color:var(--accent-ink);text-decoration:none;min-width:0}
a.agd-pop-soc:hover{text-decoration:underline}
a.agd-pop-soc .ic{flex:none;width:14px;height:14px}
.agd-pop-soc-free{display:flex;gap:7px;align-items:center;font-size:12.5px}
.agd-pop-soc-free .ic{flex:none;width:14px;height:14px}
.agd-pop-note{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;
  border-radius:11px;background:var(--glass);border:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--txt)}
.agd-pop-note span{white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.agd-pop-note .ic{flex:none;width:14px;height:14px;margin-top:1px;color:var(--accent-ink)}
.agd-pop-note.empty{font-style:italic}
.agd-pop-meta{font-size:11.5px;color:var(--dim)}
.agd-pop-actions{display:flex;justify-content:flex-end;gap:8px}
.agd-pop-del:hover{border-color:color-mix(in srgb, var(--danger) 55%, transparent);
  color:var(--danger)}
.agd-pop-task-hint{margin:0;font-size:12px;color:var(--muted);line-height:1.5}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 720px){
  .agd-cell{min-height:74px;padding:6px 3px 5px}
  .agd-head .agd-head-in{flex-wrap:wrap}
  .agd-item-when{font-size:11.5px}
  .agd-ev{font-size:9.5px;padding:1px 4px}
  .agd-ev-h{display:none}
}
/* Audit M5 — sous ~520 px, une étiquette ne tenait plus qu'un ou deux
   caractères (« R… », « hh ») : MOINS d'information qu'une pastille. On bascule
   sur une synthèse comptée par type, aux mêmes couleurs sémantiques ; le tap
   sur la case ouvre le détail du jour (titres et heures y sont en entier). */
.agd-evs-sum{display:none}
@media (max-width: 520px){
  .agd-evs{display:none}
  /* Empilées (une par ligne) : une pastille ne dépasse JAMAIS de sa case,
     quelle que soit la largeur d'écran. */
  .agd-evs-sum{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    width:100%;min-width:0;margin-top:3px}
  .agd-sum{max-width:100%;padding:1px 2px;border-radius:6px;font-size:8.8px;
    font-weight:750;line-height:1.35;text-align:center;letter-spacing:-.01em;
    /* le texte passe à la ligne plutôt que d'être coupé : « 1 tâche » reste
       lisible même dans une case de 39 px (écran 390 px). */
    white-space:normal;overflow-wrap:normal}
  .agd-sum-rdv{background:color-mix(in srgb, var(--rdv) 26%, transparent);
    color:color-mix(in srgb, var(--rdv) 58%, var(--txt));
    border:1px solid color-mix(in srgb, var(--rdv) 45%, transparent)}
  .agd-sum-task{background:color-mix(in srgb, var(--task) 24%, transparent);
    color:color-mix(in srgb, var(--task) 58%, var(--txt));
    border:1px solid color-mix(in srgb, var(--task) 45%, transparent)}
}

/* ---- Mouvement réduit ----------------------------------------------------
   Étiquettes et cases illuminées : statiques (la lumière reste, le flottement
   disparaît) — exigence reduced-motion du BRIEF. */
@media (prefers-reduced-motion: reduce){
  .agd-day-detail,.agd-form-card,.agd-pop{animation:none}
  .agd-ev,.agd-cell.agd-unseen{animation:none;transform:none}
  .agd-cell,.agd-item,.agd-item-title,.agd-input,.agd-select,.agd-note-in,
  .agd-soc-hit,.agd-soc-x,.agd-pop-del{transition:none}
}