/* Agenda — la grille horaire à colonnes (js/agenda/grille.js, spec docs/specs/2026-10-15-planning-agenda-refonte-design.md § 2 et § 4). Préfixe ag-.
   Générique (aucun métier ANIMA) ; couleurs UNIQUEMENT par les jetons de tokens.css (--fam-<vie|libres|anim|dehors|orga>, -fond, -filet, --texte, --s1…).
   Une seule recette de rendu, « plein » (choix de Michaël, 2026-10-15) : fond saturé de la famille, texte clair, à la Google Agenda. Trois densités (data-densite) : la hauteur
   d'heure arrive par --ag-hh (posée par le JS, 40 / 56 px ou « auto » bornée 36-64) ; 40 (compacte) par défaut. Le statut passe par la FORME, jamais par la couleur :
   pointillés = proposé, cadenas = verrouillé, pastille de coin = conflit. Gestes (js/agenda/gestes.js) : couche de glisser, brouillon, poignées. */

:root { --ag-toile: var(--bg-0); }   /* le fond des surfaces du planning : la page dans la coque, la toile de Google en plein écran (css/agenda-barre.css) */
.ag {
  --ag-gout: 44px;
  --ag-sur-plein: var(--sur-accent);      /* texte posé sur le fond saturé de la recette « plein » : clair en thème clair, foncé en thème sombre (fond pâle) */
  position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%; min-height: 280px; min-width: 0;
  color: var(--texte); background: var(--ag-toile); font: 400 14px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
[data-theme="sombre"] .ag { --ag-sur-plein: var(--ag-toile); }
.ag *, .ag *::before, .ag *::after { box-sizing: border-box; }
.ag [hidden] { display: none !important; }

/* ---------- Zone défilante : verticale ET horizontale, colonnes dimensionnées dans la largeur (cqw), gouttière et en-têtes collants ---------- */
.ag-defil {
  --ag-colw: calc((100cqw - var(--ag-gout)) / var(--ag-nb, 7));
  flex: 1 1 auto; min-height: 0; container-type: inline-size; isolation: isolate; overflow: auto; overscroll-behavior-x: contain; scroll-padding-inline-start: var(--ag-gout);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;   /* deux doigts sur la grille : c'est le pincer des heures (js/agenda/zoom.js), jamais le zoom de la page */
}
/* Pendant un pincer, la forme des blocs (lignes de titre) est celle d'avant : un bloc qui rapetisse rogne son texte au lieu de déborder sur le suivant. */
.ag[data-pince] .ag-bloc { overflow: clip; }
.ag[data-pince] .ag-bloc .ag-poignee { display: none; }
@media (max-width: 899px), (pointer: coarse) { .ag-defil { scroll-snap-type: x mandatory; } }
.ag-pli { width: max-content; min-width: 100%; }
.ag-tete, .ag-corps { display: grid; grid-template-columns: var(--ag-gout) repeat(var(--ag-n, 7), var(--ag-colw)); }
.ag-corps { position: relative; }

/* ---------- En-têtes de jours (collants en haut) et bande « journée entière » ---------- */
.ag-tete { position: sticky; top: 0; z-index: 30; background: var(--ag-toile); border-bottom: 1px solid var(--ligne); }
.ag-coin { position: sticky; left: 0; z-index: 31; background: var(--ag-toile); }
.ag-jour { container-type: inline-size; min-width: 0; border-left: 1px solid var(--ligne); scroll-snap-align: start; text-align: center; color: var(--texte-2); }
/* En-tête d'un jour, à la Google Agenda : le jour abrégé, petit et atténué (« lun. »), au-dessus de son numéro, grand ; aujourd'hui = pastille pleine de la couleur
   d'accent ; les jours passés, un ton plus bas. UNE mise en page pour toutes les colonnes et toutes les largeurs ; la météo du jour (matin · après-midi · soirée) suit le
   jour abrégé sur sa ligne, la température est dans l'infobulle. Compact (44 px : 2 + 13 + 28 + 1) pour que la première étiquette d'heure tombe sous 140 px en plein
   écran à 1440 × 900 (barre de 64 px, bande « journée » de 24 px). Le socle du Fil pose 44 px de haut à tout bouton : ici la hauteur est celle du contenu. */
.ag-jour-bt {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; width: 100%; min-width: 0; padding: 2px 2px 1px;
  border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: center;
}
:root[data-interface] [data-app] .ag .ag-jour-bt { min-height: 0; }
.ag-jour-ligne { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; min-width: 0; height: 13px; }
button.ag-jour-bt { cursor: pointer; }
.ag-jour:not([data-aujourdhui]) button.ag-jour-bt:hover .ag-jour-num { background: var(--s2); }   /* aujourd'hui garde sa pastille */
button.ag-jour-bt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ag-jour-nom { font: 500 11px/13px Inter, system-ui, sans-serif; text-transform: lowercase; letter-spacing: .04em; color: var(--texte-2); white-space: nowrap; }
.ag-jour[data-type="ressource"] .ag-jour-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--texte); font-weight: 600; font-size: 13px; line-height: 20px; }
.ag-jour[data-type="ressource"] .ag-jour-ligne { height: 20px; }
.ag-jour-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 2px; border-radius: 14px; color: var(--texte);
  font: 400 22px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em; transition: background-color var(--m-d-fast, 120ms) var(--m-out, ease-out);
}
.ag-jour[data-aujourdhui] .ag-jour-nom { color: var(--accent); font-weight: 600; }
.ag-jour[data-aujourdhui] .ag-jour-num { background: var(--accent); color: var(--sur-accent); font-weight: 500; }
.ag-jour[data-passe] .ag-jour-num { color: var(--texte-2); }
.ag-jour[data-hors] .ag-jour-nom, .ag-jour[data-hors] .ag-jour-num { color: var(--texte-3); }
.ag-meteo { display: none; align-items: center; justify-content: center; gap: 3px; height: 13px; color: var(--texte-2); }   /* emplacement météo : réservé dès qu'une colonne porte une météo */
.ag[data-meteo] .ag-meteo { display: inline-flex; }
.ag-meteo svg { width: 13px; height: 13px; }
.ag-meteo .fme-mini { display: inline-flex; align-items: center; gap: 2px; }
.ag-meteo .fme-mini svg { width: 13px; height: 13px; }
.ag-meteo .fme-mini-t { display: none; }
.ag-bande { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px 3px; border-left: 1px solid var(--ligne); }
.ag-coin--bande { border-top: 0; }
/* la bande « journée entière » : UNE même puce pour un congé, un repos et le résumé « 4 au repos ▸ » (boîte en pointillés, 20 px) */
.ag-bande-resume, .ag-puce {
  display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; min-height: 20px; padding: 0 6px; border: 1px dashed var(--ligne-2); border-radius: 6px; background: transparent; color: var(--texte-2);
  font: 500 12px/18px Inter, system-ui, sans-serif; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ag-puce { --ag-c: var(--texte-2); --ag-fond: var(--s2); }
.ag-puce .ag-titre { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ag-puce, .ag-puce * { hyphens: none; }

/* ---------- Gouttière des heures (collante à gauche) ---------- */
.ag-gout { position: sticky; left: 0; z-index: 20; height: calc(24 * var(--ag-hh)); background: var(--ag-toile); }
.ag-heure { position: absolute; right: 6px; transform: translateY(-50%); color: var(--texte-3); font: 400 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; }

/* ---------- Colonnes : lignes d'heures, colonne du jour marquée, passé atténué, jours hors séjour grisés ---------- */
.ag-col {
  position: relative; min-width: 0; border-left: 1px solid var(--ligne); scroll-snap-align: start;
  height: calc(24 * var(--ag-hh));   /* le pincer la réécrit en px à chaque image ; tout ce qu'elle porte est placé en % de sa hauteur (js/agenda/grille.js) */
  background-image: linear-gradient(to bottom, var(--ligne) 0, var(--ligne) 1px, transparent 1px); background-size: 100% calc(100% / 24); background-repeat: repeat-y;
}
.ag-col[data-dort] { content-visibility: hidden; }   /* hors de l'écran pendant un pincer : ni style ni mise en page, réveillée au relâcher (une colonne par image) */
.ag-col[data-aujourdhui] { background-color: var(--accent-fond); }
.ag-col[data-hors]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, var(--s2) 0 6px, transparent 6px 12px); opacity: .7; }
.ag-voile-passe { position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--ag-toile) 45%, transparent); }
.ag-maintenant { position: absolute; left: 0; right: 0; z-index: 25; height: 0; border-top: 2px solid var(--critique); pointer-events: none; }
.ag-maintenant::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 5px; background: var(--critique); }

/* ---------- Blocs : une famille (jetons), recette « plein » ---------- */
/* Le socle du Fil pose `min-height: 44px` à tout [role="button"] de l'application (css/fil.css, `:root[data-interface="fil"] [data-app] :is(button, [role="button"]…)`) : sans ce garde-fou un bloc de 20 min
   mesurait 44 px et une pastille « +N » aussi (un « Retour au calme » de 20 min couvrait une heure). La hauteur d'un bloc est sa durée ; la cible du doigt est la colonne, pas le bloc. */
:root[data-interface] [data-app] .ag :is(.ag-bloc, .ag-plus) { min-height: 0; }
:root[data-interface] [data-app] .ag :is(.ag-puce, .ag-bande-resume) { min-height: 20px; }
.ag-bloc, .ag-puce { --ag-c: var(--texte-2); --ag-plein: var(--texte-2); --ag-fond: var(--s2); --ag-filet: var(--ligne-2); }   /* --ag-c : encre (liseré, pointillés, pictogramme) ; --ag-plein : aplat vif du bloc (tokens.css › --fam-*-plein) */
[data-famille="vie"] { --ag-c: var(--fam-vie); --ag-plein: var(--fam-vie-plein); --ag-fond: var(--fam-vie-fond); --ag-filet: var(--fam-vie-filet); }
[data-famille="libres"] { --ag-c: var(--fam-libres); --ag-plein: var(--fam-libres-plein); --ag-fond: var(--fam-libres-fond); --ag-filet: var(--fam-libres-filet); }
[data-famille="anim"] { --ag-c: var(--fam-anim); --ag-plein: var(--fam-anim-plein); --ag-fond: var(--fam-anim-fond); --ag-filet: var(--fam-anim-filet); }
[data-famille="dehors"] { --ag-c: var(--fam-dehors); --ag-plein: var(--fam-dehors-plein); --ag-fond: var(--fam-dehors-fond); --ag-filet: var(--fam-dehors-filet); }
[data-famille="orga"] { --ag-c: var(--fam-orga); --ag-plein: var(--fam-orga-plein); --ag-fond: var(--fam-orga-fond); --ag-filet: var(--fam-orga-filet); }
[data-famille="repos"] { --ag-c: var(--texte-3); --ag-plein: var(--texte-3); --ag-fond: var(--s2); --ag-filet: var(--ligne-2); }

.ag-bloc {
  position: absolute; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 2px 4px 2px 5px; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--ag-plein); background: var(--ag-plein); color: var(--ag-sur-plein); font: 500 12px/1.2 Inter, system-ui, sans-serif; container-type: inline-size;
  touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: 1px solid var(--ag-toile);   /* séparation des blocs voisins sans retirer de largeur */
}
.ag-bloc:focus-visible, .ag-puce:focus-visible, .ag-plus:focus-visible, .ag-bande-resume:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 40 !important; }
.ag-haut { display: flex; align-items: flex-start; gap: 4px; min-width: 0; overflow: hidden; }
.ag-picto { display: inline-flex; flex: none; align-items: center; justify-content: center; margin-top: 1px; color: inherit; line-height: 0; }
.ag-picto svg { display: block; width: 12px; height: 12px; }
.ag-titre { flex: 1 1 0; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ag-lignes, 3); line-clamp: var(--ag-lignes, 3); overflow-wrap: normal; word-break: normal; }
.ag-bloc, .ag-bloc *, .ag-puce, .ag-puce * { hyphens: none; -webkit-hyphens: none; }
.ag-horaire, .ag-groupe { flex: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; font: 400 12px/1.15 Inter, system-ui, sans-serif; }
.ag-verrou, .ag-signe { display: inline-flex; flex: none; margin-top: 2px; color: inherit; line-height: 0; opacity: .7; }   /* le cadenas et le signe de météo ne concurrencent pas le titre */
.ag-verrou svg { width: 10px; height: 10px; }
.ag-signe svg { width: 11px; height: 11px; }
.ag-bloc[data-taille="mini"] { padding-block: 0; }
.ag-bloc[data-taille="mini"] .ag-haut { align-items: center; }
.ag-bloc[data-taille="mini"] .ag-picto { margin-top: 0; }
/* mot plus long que la colonne : jamais coupé net — d'abord un corps plus petit, sinon une seule ligne qui se termine par « … » (js/agenda/grille.js, ajusterMots) */
.ag-bloc[data-mot="reduit"] .ag-titre { font-size: 10.5px; }
.ag-bloc[data-mot="ellipse"] .ag-titre { display: block; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset; }
@container (max-width: 76px) {
  .ag-picto, .ag-verrou, .ag-signe, .ag-horaire { display: none; }   /* l'horaire se lit dans la grille ; un « 09:3… » coupé n'apprend rien */
  .ag-bloc { padding-inline: 2px 1px; letter-spacing: -.01em; }
  .ag-bloc[data-conflit]:not([data-taille="mini"]) .ag-haut { padding-right: 0; }   /* bloc étroit : l'anneau de conflit passe en bas à droite, le titre garde toute la largeur */
  .ag-bloc[data-conflit]:not([data-taille="mini"]) .ag-conflit { top: auto; bottom: 3px; }
}   /* bloc étroit (cascade, colonne de 115 px) : le titre d'abord, le pictogramme s'efface */

/* vie quotidienne, repas, neutre, repos : ton calme (lavis, liseré), texte encre */
.ag-bloc[data-famille="vie"], .ag-bloc[data-famille="neutre"], .ag-bloc[data-famille="repos"] {
  background: var(--ag-fond); border-color: transparent; border-left: 4px solid var(--ag-c); color: var(--texte);
}
.ag-bloc[data-famille="vie"] .ag-picto { color: var(--ag-c); }
.ag-bloc[data-famille="vie"] .ag-horaire, .ag-bloc[data-famille="vie"] .ag-groupe, .ag-bloc[data-famille="neutre"] .ag-horaire, .ag-bloc[data-famille="neutre"] .ag-groupe { color: var(--texte-2); }

/* statut par la forme : pointillés = proposé ; cadenas = verrouillé (ci-dessus) ; pastille de coin = conflit */
.ag-bloc[data-statut="propose"] { background: var(--ag-toile); color: var(--texte); border: 2px dashed var(--ag-c); }
.ag-bloc[data-statut="propose"] .ag-picto { color: var(--ag-c); }
.ag-bloc[data-statut="propose"] .ag-horaire, .ag-bloc[data-statut="propose"] .ag-groupe, .ag-bloc[data-statut="propose"] .ag-verrou { color: var(--texte-2); }
.ag-conflit {   /* pastille de coin : un petit anneau d'alerte, dans l'angle ; le titre garde sa marge droite et n'est jamais recouvert */
  position: absolute; top: 3px; right: 3px; z-index: 2; width: 10px; height: 10px; border: 2px solid var(--ag-sur-plein); border-radius: 5px; background: transparent; font-size: 0; line-height: 0;
}
.ag-bloc[data-statut="propose"] .ag-conflit, .ag-bloc[data-famille="vie"] .ag-conflit, .ag-bloc[data-famille="neutre"] .ag-conflit, .ag-bloc[data-famille="repos"] .ag-conflit { border-color: var(--alerte); }
.ag-bloc[data-conflit] .ag-haut { padding-right: 14px; }
.ag-bloc[data-conflit][data-taille="mini"] .ag-conflit { top: 50%; transform: translateY(-50%); }
/* « modifié depuis ta dernière visite » : un point dans l'angle haut gauche (le mot est dans le nom accessible et l'infobulle) */
.ag-modifie { position: absolute; left: -3px; top: -3px; z-index: 2; width: 9px; height: 9px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 0 2px var(--ag-toile); }

/* suppression proposée : le titre est barré (la forme, jamais la couleur seule) */
.ag-bloc[data-barre] .ag-titre { text-decoration: line-through; }

/* plage bloquée : fond hachuré de toute la colonne, sous les créneaux ; seul son titre est cliquable */
.ag-bloc[data-fond] {
  background: repeating-linear-gradient(135deg, var(--s2) 0 6px, transparent 6px 12px); border: 1px solid var(--ligne-2); border-left-width: 1px; color: var(--texte-2); outline: 0;
  pointer-events: none; z-index: 0 !important;
}
.ag-bloc[data-fond] .ag-haut { align-self: flex-start; max-width: 100%; pointer-events: auto; background: var(--ag-toile); border-radius: 4px; padding: 0 3px; }
.ag-bloc[data-fond] .ag-picto { color: var(--texte-2); }

/* continuation d'un créneau qui passe minuit : petit chevron au bord coupé */
.ag-bloc[data-suite="apres"], .ag-bloc[data-suite="les-deux"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ag-bloc[data-suite="avant"], .ag-bloc[data-suite="les-deux"] { border-top-left-radius: 0; border-top-right-radius: 0; }
.ag-bloc[data-suite="apres"]::after, .ag-bloc[data-suite="les-deux"]::after { content: ""; position: absolute; right: 5px; bottom: 2px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; opacity: .75; }
.ag-bloc[data-suite="avant"]::before, .ag-bloc[data-suite="les-deux"]::before { content: ""; position: absolute; right: 5px; top: 2px; border: 4px solid transparent; border-bottom-color: currentColor; border-top-width: 0; opacity: .75; }

/* la suite d'un créneau qui passe minuit : son titre reste collé sous l'en-tête tant que le bloc est à l'écran (le haut du bloc, où il est écrit, est souvent défilé) */
.ag-bloc[data-suite="avant"] .ag-haut, .ag-bloc[data-suite="les-deux"] .ag-haut { position: sticky; top: var(--ag-tete, 0px); z-index: 1; }

/* passé atténué */
.ag-bloc[data-passe], .ag-puce[data-passe] { opacity: .66; }

/* « +N » : pastille discrète portée par le bloc de la 2e colonne (ouvre la liste des créneaux que la disposition ne dessine pas) */
.ag-plus {
  position: absolute; right: 3px; bottom: 2px; z-index: 3; min-width: 20px; height: 14px; padding: 0 4px; border-radius: 7px; background: var(--ag-toile); color: var(--texte-2);
  font: 600 12px/14px Inter, system-ui, sans-serif; text-align: center; cursor: pointer; opacity: .9;
}
.ag-haut > .ag-plus { position: static; flex: none; align-self: center; margin-left: auto; }   /* dans la ligne du titre : le titre cède la place, la pastille ne le couvre jamais */
.ag-bloc[data-plus="bas"] { padding-bottom: 16px; }

/* ---------- Gestes (js/agenda/gestes.js) : couche de glisser, fantôme, brouillon, poignées ---------- */
.ag-corps, .ag-col { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ag-couche { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: visible; contain: layout style; }
.ag-brouillon, .ag-bulle-heure { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; will-change: translate; overflow: visible; }   /* placés par `translate` (colonne, minute) */
.ag-bloc { transition: scale var(--m-d-fast, 140ms) var(--m-out, ease-out); }   /* la levée : échelle seule (composée par le navigateur) */
.ag-bloc[data-glisse] { z-index: 36 !important; box-shadow: var(--shadow-elevated); cursor: grabbing; scale: 1.02; }
@media (prefers-reduced-motion: reduce) { .ag-bloc { transition: none; } }
.ag-bloc[data-glisse] .ag-poignee::after { opacity: 1; }
.ag-bulle-heure {   /* l'horaire tenu par le geste : au-dessus du bloc, ou au-dessous quand il touche le haut de la grille */
  z-index: 4; padding: 2px 7px; border-radius: 10px; background: var(--texte); color: var(--ag-toile);
  font: 600 12px/16px Inter, system-ui, sans-serif; white-space: nowrap;
}
.ag-brouillon {
  display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; padding: 3px 6px; border-radius: 6px; border: 2px solid var(--accent); background: var(--accent); color: var(--sur-accent);
  font: 500 12px/1.2 Inter, system-ui, sans-serif; pointer-events: auto; touch-action: pan-x pan-y; cursor: grab; box-shadow: var(--shadow-elevated); z-index: 3;
}
.ag-brouillon-titre { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ag-brouillon-horaire { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .92; font-weight: 400; }
.ag-brouillon[data-court] .ag-brouillon-horaire { display: none; }
.ag-brouillon { transition: scale var(--m-d-fast, 140ms) var(--m-out, ease-out); }
.ag-brouillon[data-arme] { cursor: grabbing; scale: 1.02; }
/* poignées : une barre mince au bord (souris), un rond à l'angle (doigt) ; la zone qui répond est plus grande que ce qu'on voit */
.ag-poignee { position: absolute; left: 0; right: 0; height: 12px; z-index: 4; touch-action: none; cursor: ns-resize; background: transparent; }
.ag-poignee--haut { top: -4px; }
.ag-poignee--bas { bottom: -4px; }
.ag-poignee::after {
  content: ""; position: absolute; right: 14px; width: 10px; height: 10px; border-radius: 5px; background: var(--ag-toile); border: 2px solid var(--accent); opacity: 0; transition: opacity var(--m-d-fast, 120ms) var(--m-out, ease-out);
}
.ag-poignee--haut::after { top: 1px; }
.ag-poignee--bas::after { bottom: 1px; }
.ag-bloc:hover .ag-poignee::after, .ag-bloc:focus-visible .ag-poignee::after, .ag-bloc[data-arme] .ag-poignee::after, .ag-brouillon .ag-poignee::after { opacity: 1; }
.ag-bloc[data-gele] .ag-poignee { cursor: not-allowed; }
.ag-bloc[data-gele] .ag-poignee::after { display: none; }
.ag-brouillon .ag-poignee::after { border-color: var(--sur-accent); background: var(--accent); }
.ag-bloc[data-arme] { z-index: 36 !important; box-shadow: var(--shadow-elevated); }
@media (pointer: coarse) {
  .ag-poignee { height: 28px; }
  .ag-poignee--haut { top: -14px; }
  .ag-poignee--bas { bottom: -14px; }
  .ag-poignee::after { width: 14px; height: 14px; border-radius: 7px; right: 10px; }
  .ag-poignee--haut::after { top: 7px; }
  .ag-poignee--bas::after { bottom: 7px; }
  .ag-bloc:not([data-arme]):hover .ag-poignee { pointer-events: none; }   /* au doigt, les poignées n'existent que sur le bloc « pris » */
  .ag-bloc:not([data-arme]) .ag-poignee { pointer-events: none; }
}
@keyframes ag-tremble { 0%, 100% { translate: 0 0; } 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.ag-tremble { animation: ag-tremble var(--m-d-slow, 280ms) var(--m-out, ease-out); }
@media (prefers-reduced-motion: reduce) {
  .ag-tremble { animation: none; outline: 2px solid var(--alerte); outline-offset: 1px; }
}

@media (max-width: 899px) {
  .ag { --ag-gout: 36px; }
}

/* « +N » : la liste des créneaux que la cascade ne dessine pas (js/planning/grille-agenda.js) */
.ag-plus-liste {
  position: fixed; z-index: 150;   /* au-dessus de la couche plein écran du planning (z-index 100), sous l'aperçu (190) */ display: flex; flex-direction: column; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; padding: 4px;
  border: 1px solid var(--ligne-2); border-radius: 10px; background: var(--ag-toile); color: var(--texte); box-shadow: var(--shadow-elevated); font: 500 14px/1.3 Inter, system-ui, sans-serif;
}
.ag-plus-item { display: flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ag-plus-item:hover, .ag-plus-item:focus-visible { background: var(--s2); outline: none; }
.ag-plus-heure { flex: none; color: var(--texte-2); font-variant-numeric: tabular-nums; font-size: 12px; }

/* Plein écran (html[data-agenda-plein], spec § 11.1) : la source de la météo (« Météo à … · MET Norway », attribution due) ne prend plus de place sous la grille,
   qui descend jusqu'au bord bas ; elle flotte, discrète, en bas à gauche, au-dessus de la zone sûre (le bouton « + » est à droite). */
html[data-agenda-plein] .ag-b-principal .fme-source--pied {
  position: absolute; left: 8px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 32; max-width: calc(100% - 96px); margin: 0; padding: 1px 6px;
  border-radius: 6px; background: color-mix(in srgb, var(--ag-toile) 88%, transparent); color: var(--texte-2); font-size: 11px; line-height: 16px; text-align: left; pointer-events: auto;
}