/* agenda-apercu.css — bulle ancrée (ordinateur), panneau latéral droit, feuille basse (téléphone) de l'agenda. Préfixe ag-a-. Couleurs : jetons de css/tokens.css et
   --f-* de css/fil.css seulement (aucune couleur en dur). Spec 2026-10-15-planning-agenda-refonte-design § 3 et § 10 (contrat C2). Piste « aperçu » (B6).
   Mouvement : js/agenda/mouvement.js (WAAPI, transform / opacity) ; aucune transition ici sauf la feuille tirée au doigt, qui suit le pointeur sans transition. */
.ag-a { position: fixed; inset: 0; z-index: 190; pointer-events: none; color: var(--f-encre); font: 400 16px/1.5 Inter, system-ui, sans-serif;
  /* Ombres NEUTRES (jamais de lueur) : l'encre d'ombre de tokens.css (--ombre-tirage, sombre dans les deux thèmes) ; Le Fil met --ombre à transparent (« filets plutôt qu'ombres »). */
  --ag-a-ombre-pres: color-mix(in srgb, var(--ombre-tirage) 50%, transparent); --ag-a-ombre-loin: color-mix(in srgb, var(--ombre-tirage) 34%, transparent); }
.ag-a *, .ag-a *::before, .ag-a *::after { box-sizing: border-box; }
.ag-a [hidden] { display: none !important; }
.ag-a :focus-visible { outline: 2px solid var(--f-encre); outline-offset: 3px; }
.ag-a-voile { position: absolute; inset: 0; pointer-events: auto; background: color-mix(in srgb, var(--f-encre) 16%, transparent); }
.ag-a-boite { position: fixed; display: flex; flex-direction: column; min-height: 0; overflow: hidden; pointer-events: auto; background: var(--f-surface); color: var(--f-encre); border: 1px solid var(--f-filet); outline: none; overscroll-behavior: contain; }
:root:root .ag-a-boite:focus-visible { outline: none; }   /* la boîte reçoit le focus par programme : pas d'anneau (css/couleur.css pose un anneau sur tout [tabindex]) */

/* Tête : le titre et la croix ; le titre peut passer sur plusieurs lignes, jamais coupé par une césure */
.ag-a-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex: none; padding: 14px 8px 4px 20px; }
.ag-a-titre { margin: 4px 0 0; min-width: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; hyphens: none; }
.ag-a-fermer { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--f-encre-2); cursor: pointer; }
.ag-a-fermer:hover { background: var(--f-surface-2); color: var(--f-encre); }
.ag-a-fermer--flottant { position: absolute; top: 4px; right: 6px; z-index: 1; }

/* Corps (défile) et pied (les actions, toujours visibles) */
.ag-a-corps { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 16px; }
.ag-a-boite--sans-tete .ag-a-corps { padding-top: 14px; }
.ag-a-pied { flex: none; padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--f-filet); background: var(--f-surface); }
.ag-a-pied:has(> .ag-a-actions:empty) { display: none; }
.ag-a-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ag-a-actions > .ag-a-ecart { margin-right: auto; }
.ag-a-contenu { display: grid; gap: 14px; min-width: 0; }
.ag-a-contenu > * { min-width: 0; }

/* Poignée : seulement la feuille basse */
.ag-a-poignee { display: none; flex: none; align-items: flex-start; justify-content: center; width: 100%; height: 18px; padding: 6px 0 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.ag-a-poignee-barre { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--f-encre-3); }
.ag-a-boite[data-forme="feuille"] .ag-a-poignee { display: flex; }
.ag-a-boite[data-forme="feuille"] .ag-a-tete { touch-action: none; padding-top: 2px; }

/* Bulle : à côté du bloc, 360 px ; la position vient du JS (placerBulle) */
.ag-a-boite[data-forme="bulle"] { top: 0; left: 0; width: 360px; max-height: calc(100dvh - 16px); border-radius: 18px; box-shadow: 0 1px 3px var(--ag-a-ombre-pres), 0 12px 32px -8px var(--ag-a-ombre-loin); }
.ag-a-boite[data-forme="bulle"] .ag-a-tete { padding-top: 12px; }
.ag-a-boite[data-forme="bulle"] .ag-a-pied { padding-inline: 14px; }

/* Panneau : volet droit de 380 px (ordinateur), plein écran au téléphone */
.ag-a-boite[data-forme="panneau"] { top: 0; right: 0; bottom: 0; width: min(100%, 380px); border-width: 0 0 0 1px; border-radius: 0; box-shadow: -10px 0 30px -12px var(--ag-a-ombre-loin); }
@media (max-width: 899px) {
  .ag-a-boite[data-forme="panneau"] { left: 0; width: 100%; border-width: 0; box-shadow: none; }
  .ag-a-boite[data-forme="panneau"] .ag-a-corps { padding-bottom: 24px; }
}

/* Feuille basse : un tiers de l'écran à l'ouverture, plein écran une fois tirée vers le haut */
.ag-a-boite[data-forme="feuille"] { left: 0; right: 0; bottom: 0; margin-inline: auto; width: min(100%, 560px); max-height: 33.3dvh; border-width: 1px 1px 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 30px -14px var(--ag-a-ombre-loin); }
.ag-a-boite[data-forme="feuille"][data-taille="plein"] { height: calc(100dvh - 12px); max-height: none; }
.ag-a-boite[data-forme="feuille"] .ag-a-corps { padding: 4px 16px 8px; }
.ag-a-boite[data-forme="feuille"] .ag-a-pied { padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
.ag-a-boite[data-forme="feuille"] .ag-a-boite--sans-tete .ag-a-corps, .ag-a-boite--sans-tete[data-forme="feuille"] .ag-a-corps { padding-top: 4px; }
.ag-a-boite--sans-tete[data-forme="feuille"] .ag-a-fermer--flottant { top: 0; right: 2px; }

/* Actions de la barre du haut (✎, ⋯) : boutons ronds de 48 px, à gauche de la croix */
.ag-a-tete-actions { display: flex; align-items: center; gap: 0; flex: none; margin-left: auto; }
.ag-a-tete-bt { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--f-encre-2); cursor: pointer; }
.ag-a-tete-bt:hover, .ag-a-tete-bt[aria-expanded="true"] { background: var(--f-surface-2); color: var(--f-encre); }
.ag-a-tete-actions + .ag-a-fermer { margin-left: 0; }
/* Menu ⋯ : sous son bouton, au-dessus du contenu */
.ag-a-menu {
  position: absolute; z-index: 3; display: flex; flex-direction: column; min-width: 200px; max-width: calc(100% - 16px); padding: 6px 0; border: 1px solid var(--f-filet); border-radius: 12px;
  background: var(--f-surface); color: var(--f-encre); box-shadow: 0 1px 2px var(--ag-a-ombre-pres), 0 8px 24px -6px var(--ag-a-ombre-loin);
}
.ag-a-menu-item { display: flex; align-items: center; min-height: 48px; padding: 0 20px; border: 0; background: transparent; color: inherit; font: 400 16px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.ag-a-menu-item:hover, .ag-a-menu-item:focus-visible { background: var(--f-surface-2); outline: none; }
.ag-a-menu-item--danger { color: var(--critique); }

/* Plein écran (la fiche d'un créneau au téléphone, spec § 11.1) : toute la surface, barre de 56 px — ✕ à gauche, le titre, les actions à droite —, le contenu défile.
   Entrée glissée depuis le bas, sortie vers le bas (js/agenda/mouvement.js : ouvrirFeuille / fermerFeuille, translate seulement, fondu en mouvement réduit). */
.ag-a-boite[data-forme="plein"] { inset: 0; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
.ag-a-boite[data-forme="plein"] .ag-a-tete {
  align-items: center; gap: 4px; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 4px 0; border-bottom: 1px solid transparent;
}
.ag-a-boite[data-forme="plein"] .ag-a-fermer { order: -1; width: 48px; height: 48px; color: var(--f-encre); }
.ag-a-boite[data-forme="plein"] .ag-a-titre {
  flex: 1 1 auto; margin: 0 0 0 4px; font: 500 18px/22px Inter, system-ui, sans-serif; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.ag-a-boite[data-forme="plein"] .ag-a-corps { padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
.ag-a-boite[data-forme="plein"] .ag-a-pied { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.ag-a[data-forme="plein"] .ag-a-voile { background: color-mix(in srgb, var(--f-encre) 10%, transparent); }

/* Un aperçu ouvert : le message du système (toast, « Annuler » : css/fil-message.css) passe en haut de l'écran, comme au-dessus d'une feuille, et ne couvre jamais ses actions. */
body[data-apercu] .fmsg-pile { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
body[data-apercu] .fmsg { transform: translateY(-12px); }
body[data-apercu] .fmsg-in { transform: none; }
body[data-apercu] .fmsg-out { transform: translateY(-8px); }

/* Idem pour le message « Annuler » de js/agenda/mouvement.js (.ag-m-toasts, en bas au centre) : il passerait sur les boutons d'une feuille basse ouverte juste après un geste. */
body[data-apercu] .ag-m-toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }

/* Fiche plein écran (téléphone) : comme Google Agenda, le message reste en bas, au-dessus des actions du pied (--ag-a-bas, posée par js/agenda/apercu.js) ; en haut il
   couvrirait la barre (✕, ✎, ⋯). */
body[data-apercu="plein"] .ag-m-toasts { top: auto; --ag-toast-bas: calc(var(--ag-a-bas, 0px) + 16px); }
body[data-apercu="plein"] .fmsg-pile { top: auto; bottom: calc(var(--ag-a-bas, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
body[data-apercu="plein"] .fmsg { transform: translateY(12px); }
body[data-apercu="plein"] .fmsg-in { transform: none; }
body[data-apercu="plein"] .fmsg-out { transform: translateY(8px); }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------
   Fiche d'un créneau (js/planning/fiche.js, .ag-a-fiche sur la boîte, .ag-a-f sur le contenu) : quasi-copie de la fiche d'événement de Google Agenda.
   Tête : carré à la couleur du bloc aligné sur le titre (22 px), date dessous ; lignes à icône de tête dans une colonne de 24 px (personnes : initiales). Téléphone =
   plein écran (✕ à gauche, ✎ ⋯ à droite, titre dans la fiche) ; bureau = bulle de 448 px, rangée d'icônes en haut à droite. Toile de l'agenda, ombre neutre (--ag-a-ombre-*).
   ------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.ag-a-boite.ag-a-fiche { background: var(--ag-toile); color: var(--texte); }   /* la toile du planning plein écran (agenda-barre.css la pose sur .ag-a) */
.ag-a-boite.ag-a-fiche .ag-a-fermer, .ag-a-boite.ag-a-fiche .ag-a-tete-bt { color: var(--texte-2); }
.ag-a-boite.ag-a-fiche .ag-a-fermer:hover, .ag-a-boite.ag-a-fiche .ag-a-tete-bt:hover, .ag-a-boite.ag-a-fiche .ag-a-tete-bt[aria-expanded="true"] { background: var(--s2); color: var(--texte); }
.ag-a-boite.ag-a-fiche[data-forme="plein"] .ag-a-fermer { color: var(--texte); }
.ag-a-boite.ag-a-fiche .ag-a-menu { background: var(--ag-toile); color: var(--texte); border-color: var(--ligne); }
.ag-a-boite.ag-a-fiche .ag-a-menu-item:hover, .ag-a-boite.ag-a-fiche .ag-a-menu-item:focus-visible { background: var(--s2); }
.ag-a-boite.ag-a-fiche .ag-a-pied { background: var(--ag-toile); border-top-color: var(--ligne); }
/* Bulle (bureau) : 448 px (largeur posée par apercu.js), sans filet, élévation neutre ; la rangée d'icônes en haut à droite, boutons de 40 px comme Google */
.ag-a-boite.ag-a-fiche[data-forme="bulle"] { border-color: transparent; box-shadow: 0 1px 3px var(--ag-a-ombre-pres), 0 6px 12px 2px var(--ag-a-ombre-loin), 0 18px 40px -6px var(--ag-a-ombre-loin); }
.ag-a-boite.ag-a-fiche[data-forme="bulle"] .ag-a-tete { justify-content: flex-end; gap: 0; padding: 8px 8px 0; }
.ag-a-boite.ag-a-fiche[data-forme="bulle"] :is(.ag-a-tete-bt, .ag-a-fermer) { width: 40px; height: 40px; }
.ag-a-boite.ag-a-fiche[data-forme="bulle"] .ag-a-corps { padding: 0 24px 20px; }
.ag-a-boite.ag-a-fiche[data-forme="bulle"] .ag-a-pied { padding: 10px 16px 12px; }
:root[data-theme="sombre"] .ag-a-boite.ag-a-fiche[data-forme="bulle"] { background: var(--s3); }   /* en sombre, la bulle se détache par sa clarté, comme Google */
:root[data-theme="sombre"] .ag-a-boite.ag-a-fiche[data-forme="bulle"] .ag-a-menu { background: var(--s3); }
/* Plein écran (téléphone) : la barre ne porte que ✕ (à gauche) et ✎ ⋯ ; la fiche commence juste dessous */
.ag-a-boite.ag-a-fiche[data-forme="plein"] .ag-a-corps { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }

.ag-a-f { --ag-a-f-col: 24px; --ag-a-f-ecart: 32px; display: flex; flex-direction: column; min-width: 0; color: var(--texte); font: 400 16px/24px Inter, system-ui, sans-serif; }
.ag-a-boite[data-forme="bulle"] .ag-a-f { --ag-a-f-ecart: 16px; font-size: 14px; line-height: 20px; }
.ag-a-f > * { min-width: 0; }
/* Tête : carré de couleur · titre · date · état */
.ag-a-f-tete { display: grid; grid-template-columns: var(--ag-a-f-col) minmax(0, 1fr); column-gap: var(--ag-a-f-ecart); align-items: start; padding: 4px 0 10px; }
.ag-a-f-carre { justify-self: center; width: 18px; height: 18px; margin-top: 5px; border-radius: var(--r-md); background: var(--texte-2); }
.ag-a-boite[data-forme="bulle"] .ag-a-f-carre { width: 16px; height: 16px; margin-top: 6px; }
.ag-a-f-entete { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-a-f-titre { margin: 0; color: var(--texte); font: 400 22px/28px Inter, system-ui, sans-serif; letter-spacing: -.005em; overflow-wrap: anywhere; hyphens: none; }
.ag-a-f-quand { margin: 0; color: var(--texte-2); font: 400 14px/20px Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ag-a-f-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--texte-2); font: 400 13px/18px Inter, system-ui, sans-serif; }
.ag-a-f-etat:empty { display: none; }
.ag-a-f-type { display: inline-flex; align-items: center; gap: 6px; }
/* Lignes à icône de tête */
.ag-a-f-ligne { display: grid; grid-template-columns: var(--ag-a-f-col) minmax(0, 1fr) auto; column-gap: var(--ag-a-f-ecart); align-items: center; min-height: 44px; padding: 4px 0; }
.ag-a-boite[data-forme="bulle"] .ag-a-f-ligne { min-height: 36px; padding: 4px 0; }
.ag-a-f-ico { display: inline-flex; justify-content: center; align-items: center; align-self: start; min-height: 24px; color: var(--texte-2); }
.ag-a-boite[data-forme="bulle"] .ag-a-f-ico { min-height: 20px; }
.ag-a-f-ligne:not(.ag-a-f-ligne--notes) .ag-a-f-ico { align-self: center; }
.ag-a-f-texte { min-width: 0; overflow-wrap: anywhere; }
.ag-a-f-sous { display: block; color: var(--texte-2); font-size: 13px; line-height: 18px; }
.ag-a-boite[data-forme="bulle"] .ag-a-f-sous { font-size: 12px; line-height: 16px; }
.ag-a-f-ligne--note { color: var(--texte-2); font-size: 14px; line-height: 20px; }
.ag-a-f-ligne--notes { align-items: start; padding-top: 10px; }
.ag-a-f-ligne--notes .ag-a-f-texte { white-space: pre-line; }
.ag-a-f-ligne--alerte, .ag-a-f-ligne--alerte .ag-a-f-ico { color: var(--alerte); }
/* Groupes : pastille de la teinte du groupe + nom */
.ag-a-f-groupes { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ag-a-f-groupe { display: inline-flex; align-items: center; gap: 8px; }
.ag-a-f-pastille { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--texte-2); }
.ag-a-f :is(.ag-a-f-carre, .ag-a-f-pastille)[data-famille="vie"] { background: var(--fam-vie-plein); }
.ag-a-f :is(.ag-a-f-carre, .ag-a-f-pastille)[data-famille="libres"] { background: var(--fam-libres-plein); }
.ag-a-f :is(.ag-a-f-carre, .ag-a-f-pastille)[data-famille="anim"] { background: var(--fam-anim-plein); }
.ag-a-f :is(.ag-a-f-carre, .ag-a-f-pastille)[data-famille="dehors"] { background: var(--fam-dehors-plein); }
.ag-a-f :is(.ag-a-f-carre, .ag-a-f-pastille)[data-famille="orga"] { background: var(--fam-orga-plein); }
/* Lien vers la fiche d'activité */
.ag-a-f-lien { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent-filet); text-decoration-thickness: 1px; text-underline-offset: 4px; border-radius: var(--r-sm); }
.ag-a-f-lien:hover { text-decoration-color: currentColor; }
.ag-a-f-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Personnes (les invités de Google) : la tête « N animateurs », puis une ligne par personne, initiales dans la colonne d'icônes */
.ag-a-f-personnes { display: flex; flex-direction: column; }
.ag-a-f-personne { min-height: 48px; padding: 4px 0; }
.ag-a-boite[data-forme="bulle"] .ag-a-f-personne { min-height: 40px; padding: 2px 0; }
.ag-a-f-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-inline: -4px; border-radius: 50%;
  background: color-mix(in srgb, var(--texte) 9%, transparent); color: var(--texte); font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;   /* un voile de l'encre : lisible sur la toile comme sur la bulle sombre */
}
.ag-a-boite[data-forme="bulle"] .ag-a-f-avatar { width: 28px; height: 28px; margin-inline: -2px; font-size: 12px; }
.ag-a-f-avatar[data-conge] { background: var(--alerte-fond); color: var(--alerte); }
.ag-a-f-personne--conge .ag-a-f-nom { color: var(--texte-2); }
.ag-a-f-personne--conge .ag-a-f-sous { color: var(--alerte); }
/* « Remplacer » : un bouton discret en bout de ligne (icône ⇄), avec son mot pour une personne en congé */
.ag-a-f-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: 44px; height: 44px; margin: -2px -10px -2px 0; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--texte-2); font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.ag-a-boite[data-forme="bulle"] .ag-a-f-action { width: 36px; height: 36px; margin-right: -8px; }
.ag-a-f-action:hover { background: var(--s2); color: var(--texte); }
.ag-a-f-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ag-a-f-action--mot { width: auto; height: 40px; margin-right: 0; padding: 0 14px 0 10px; border: 1px solid var(--alerte-filet); border-radius: 20px; color: var(--alerte); }
.ag-a-boite[data-forme="bulle"] .ag-a-f-action--mot { width: auto; height: 36px; margin-right: 0; border-radius: 18px; }
.ag-a-f-action--mot:hover { background: var(--alerte-fond); color: var(--alerte); }
/* Jeunes : une ligne qui se déplie (chevron), la liste des prénoms dessous, alignée sur le texte */
.ag-a-f-jeunes { margin: 0; }
.ag-a-f-repli { cursor: pointer; list-style: none; border-radius: var(--r-lg); }
.ag-a-f-repli::-webkit-details-marker { display: none; }
.ag-a-f-repli:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-a-f-chevron { display: inline-flex; color: var(--texte-2); transition: transform var(--m-d-fast) var(--m-out); }
.ag-a-f-jeunes[open] .ag-a-f-chevron { transform: rotate(90deg); }
.ag-a-f-jeunes-liste { padding: 2px 0 10px calc(var(--ag-a-f-col) + var(--ag-a-f-ecart)); }
/* Décision de la direction (motif du refus) et notes : alignées sur le texte des lignes */
.ag-a .ag-a-f > .fb-saisie { box-sizing: border-box; width: calc(100% - var(--ag-a-f-col) - var(--ag-a-f-ecart)); max-width: none; margin: 8px 0 0 calc(var(--ag-a-f-col) + var(--ag-a-f-ecart)); }