/* L'agenda fait maison (blocs/_agenda.js, T771 puis T779) : le bouton, le calendrier, la liste et les roues de l'heure
   sont les nôtres. POUR UN AUTRE CLIENT : régler --ag-encre, --ag-carte, --ag-bord, --ag-teinte, --ag-accent, --ag-arrondi,
   --ag-ombre (sur :root, par exemple) ; sans elles, l'agenda lit le socle de la fabrique (--encre, --carte, --bord…).
   Les classes commencent toutes par agm- : un site qui a déjà une classe agm… se signale (taxi-tahiti avait son .agenda).
   ⚠️ Les --ag-* ne se DÉFINISSENT pas ici : posées sur .agm, elles écraseraient celles du site. On les LIT, par repli.
   La disposition (le Don, 14/10 01h42) : à l'ordinateur, une fenêtre ANCRÉE sous le bouton (le calendrier, ou la liste des
   heures) ; au téléphone, le calendrier en CARTE au milieu, l'heure dans un panneau qui monte du BAS avec la roue et OK.
   La fenêtre est un <dialog> de la couche supérieure : elle hérite ses couleurs de .agm (l'arbre de la page). */
.agm{--_agm-encre:var(--ag-encre,var(--encre,#1c1c1c));--_agm-carte:var(--ag-carte,var(--carte,#fff));
  --_agm-bord:var(--ag-bord,var(--bord,#cfcfcf));--_agm-teinte:var(--ag-teinte,var(--teinte,#1c1c1c));
  --_agm-accent:var(--ag-accent,var(--accent,var(--_agm-teinte)));--_agm-arrondi:var(--ag-arrondi,var(--arrondi,10px));
  --_agm-ombre:var(--ag-ombre,var(--ombre-levee,0 10px 30px rgba(0,0,0,.14)))}
.agm-ligne{position:relative}
input.agm-natif{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.agm-bouton{font:inherit;font-size:1rem;color:var(--_agm-encre);width:100%;min-height:3.1rem;padding:.75rem 2.9rem .75rem .9rem;
  border-radius:var(--_agm-arrondi);border:1.5px solid var(--_agm-bord);background:var(--_agm-carte);display:flex;align-items:center;
  text-align:left;cursor:pointer;user-select:none;touch-action:manipulation;position:relative}
.agm--vide .agm-bouton{color:color-mix(in srgb,var(--_agm-encre) 62%,var(--_agm-carte))}
.agm-bouton::after{content:"";position:absolute;right:1.2rem;top:50%;width:.55rem;height:.55rem;
  border-right:2px solid var(--_agm-teinte);border-bottom:2px solid var(--_agm-teinte);transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.agm.agm--ouvert .agm-bouton::after{transform:translateY(-20%) rotate(-135deg)}
.agm-bouton:focus-visible,.agm.agm--ouvert .agm-bouton{outline:3px solid color-mix(in srgb,var(--_agm-teinte) 30%,transparent);
  outline-offset:0;border-color:var(--_agm-teinte)}
/* « Je veux que tu cliques sur un petit agenda » (le Don, 14/10) : l'icône d'agenda sur le bouton de la date. */
.agm--date .agm-bouton{padding-left:2.7rem}
.agm--date .agm-bouton::before{content:"";position:absolute;left:.9rem;top:50%;width:1.2rem;height:1.2rem;transform:translateY(-50%);
  background:var(--_agm-teinte);-webkit-mask:var(--_agm-icone) center/contain no-repeat;mask:var(--_agm-icone) center/contain no-repeat;
  --_agm-icone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
/* La fenêtre : un <dialog> ouvert par showModal(), que la fenêtre du formulaire ne rogne pas. */
dialog.agm-pop{margin:0;padding:0;color:var(--_agm-encre);background:var(--_agm-carte);border:1px solid var(--_agm-bord);
  border-radius:var(--_agm-arrondi);box-shadow:var(--_agm-ombre);max-width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem);overflow:auto}
.agm-pop-corps{padding:.75rem}
dialog.agm-pop--ancre{position:fixed;inset:auto}
.agm--date dialog.agm-pop--ancre{width:20rem}
.agm--heure dialog.agm-pop--ancre .agm-pop-corps{padding:.35rem}
dialog.agm-pop--ancre::backdrop{background:transparent}
dialog.agm-pop--carte{margin:auto;width:min(22rem,calc(100% - 2rem))}
dialog.agm-pop--bas{margin:auto 0 0;width:100%;max-width:100%;max-height:75dvh;border-bottom:0;
  border-radius:var(--_agm-arrondi) var(--_agm-arrondi) 0 0;padding-bottom:env(safe-area-inset-bottom)}
dialog.agm-pop--carte::backdrop,dialog.agm-pop--bas::backdrop{background:rgba(0,0,0,.45)}
@media (prefers-reduced-motion:no-preference){
  dialog.agm-pop--ancre[open],dialog.agm-pop--carte[open]{animation:agenda-ouvre .16s ease both}
  dialog.agm-pop--bas[open]{animation:agenda-monte .22s ease-out both}}
@keyframes agenda-ouvre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes agenda-monte{from{transform:translateY(100%)}to{transform:none}}
/* La date : le mois en grille. */
.agm-haut{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .35rem}
.agm-titre{margin:0;font-weight:650;text-transform:capitalize}
.agm-mois{font:inherit;font-size:1.5rem;line-height:1;width:2.75rem;height:2.75rem;flex:none;border:0;
  border-radius:calc(var(--_agm-arrondi) * .7);background:transparent;color:var(--_agm-encre);cursor:pointer;touch-action:manipulation}
.agm-mois:hover,.agm-mois:focus-visible{background:color-mix(in srgb,var(--_agm-teinte) 12%,var(--_agm-carte))}
.agm-mois:disabled{opacity:.3;cursor:default;background:transparent}
.agm-grille{width:100%;border-collapse:collapse;table-layout:fixed}
.agm-grille th{padding:.25rem 0;font-size:.78rem;font-weight:600;text-transform:capitalize;
  color:color-mix(in srgb,var(--_agm-encre) 65%,var(--_agm-carte))}
.agm-grille td{padding:2px;text-align:center}
.agm-jour{font:inherit;width:100%;min-height:2.75rem;border:0;border-radius:calc(var(--_agm-arrondi) * .7);background:transparent;
  color:var(--_agm-encre);cursor:pointer;font-variant-numeric:tabular-nums;touch-action:manipulation}
.agm-jour:hover{background:color-mix(in srgb,var(--_agm-teinte) 12%,var(--_agm-carte))}
.agm-jour:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--_agm-teinte)}
.agm-jour.agm-choisi{background:var(--_agm-teinte);color:var(--_agm-carte);font-weight:650}
.agm-jour:disabled{opacity:.3;cursor:default;background:transparent}
/* L'heure à l'ordinateur : la liste faite maison, comme les menus. */
.agm-liste{margin:0;padding:0;list-style:none;max-height:16rem;overflow:auto;overscroll-behavior:contain;outline:none;
  border-radius:calc(var(--_agm-arrondi) * .7)}
.agm-liste:focus-visible{box-shadow:inset 0 0 0 2px var(--_agm-teinte)}
.agm-liste li{padding:.6rem .85rem;border-radius:calc(var(--_agm-arrondi) * .7);cursor:pointer;font-variant-numeric:tabular-nums}
.agm-liste li.agm-actif{background:color-mix(in srgb,var(--_agm-teinte) 14%,var(--_agm-carte))}
.agm-liste li[aria-selected="true"]{font-weight:650;color:var(--_agm-teinte)}
/* L'heure au téléphone : deux roues, comme mbad-rappel.js (44 px la ligne, la même valeur que LIGNE dans _agenda.js). */
.agm-roues{display:flex;gap:.6rem;justify-content:center}
.agm-roue-cadre{position:relative;flex:1;max-width:7rem}
.agm-roue-cadre::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px;
  border-radius:calc(var(--_agm-arrondi) * .7);background:color-mix(in srgb,var(--_agm-teinte) 12%,var(--_agm-carte));
  border:1px solid var(--_agm-accent);pointer-events:none}
.agm-roue-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--_agm-carte),transparent 38%,transparent 62%,var(--_agm-carte))}
.agm-roue{position:relative;height:220px;padding:88px 0;margin:0;list-style:none;box-sizing:border-box;overflow-y:auto;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.agm-roue::-webkit-scrollbar{display:none}
.agm-roue:focus-visible{box-shadow:inset 0 0 0 2px var(--_agm-teinte);border-radius:calc(var(--_agm-arrondi) * .7)}
.agm-roue li{height:44px;line-height:44px;text-align:center;scroll-snap-align:center;font-size:1.1rem;cursor:pointer;
  color:color-mix(in srgb,var(--_agm-encre) 55%,var(--_agm-carte));font-variant-numeric:tabular-nums}
.agm-roue li.agm-choisi{color:var(--_agm-encre);font-weight:650;font-size:1.3rem}
.agm-valider{font:inherit;display:block;width:100%;min-height:3rem;margin-top:.7rem;border:0;border-radius:var(--_agm-arrondi);
  background:var(--_agm-teinte);color:var(--_agm-carte);font-weight:650;cursor:pointer;touch-action:manipulation}
.agm-valider:hover{background:color-mix(in srgb,var(--_agm-teinte) 86%,var(--_agm-carte))}
.agm-valider:focus-visible{outline:3px solid color-mix(in srgb,var(--_agm-teinte) 30%,transparent);outline-offset:2px}