/* agenda-outils.css — mini-calendrier (.ag-mc) et recherche (.ag-r) du planning en plein écran (spec 2026-10-15 § 11), copies de Google Agenda. Préfixes ag-mc-, ag-r-.
   Couleurs : jetons de css/tokens.css seulement (teintes dérivées par color-mix d'un jeton, jamais une couleur littérale). Mouvement : js (WAAPI, translate / opacity, ≤ 220 ms). */

/* =====================================================================================================================
   Mini-calendrier — forme 'panneau' (ordinateur, cellules de 32 px) et 'tiroir' (téléphone, pleine largeur, cibles ≥ 40 px)
   ===================================================================================================================== */
.ag-mc {
  --ag-mc-case: 32px;          /* hauteur d'une case */
  --ag-mc-rond: 28px;          /* diamètre du chiffre (pastille, survol, bande) */
  --ag-mc-taille: 12px;
  display: block; min-width: 0; color: var(--texte); font: 500 var(--ag-mc-taille)/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none;
}
.ag-mc, .ag-mc *, .ag-mc *::before, .ag-mc *::after { box-sizing: border-box; }
.ag-mc [hidden] { display: none !important; }
.ag-mc[data-forme="panneau"] { width: calc(var(--ag-mc-case) * 7); }
.ag-mc[data-forme="tiroir"] {
  --ag-mc-case: 44px; --ag-mc-rond: 38px; --ag-mc-taille: 14px;
  width: 100%; padding: 4px 12px 12px; background: var(--ag-toile); border-bottom: 1px solid var(--ligne);
}

/* En-tête : « octobre 2026 » puis ‹ › à droite, comme Google */
.ag-mc-tete { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 36px; padding: 0 0 4px 6px; }
.ag-mc-titre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.3 Inter, system-ui, sans-serif; color: var(--texte); }
.ag-mc-titre::first-letter { text-transform: uppercase; }
.ag-mc[data-forme="tiroir"] .ag-mc-titre { font-size: 15px; }
.ag-mc-navs { display: flex; flex: none; gap: 0; }
.ag-mc-nav {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--texte-2); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ag-mc-nav svg { display: block; }
.ag-mc[data-forme="tiroir"] .ag-mc-nav { width: 44px; height: 44px; }
.ag-mc-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--texte) 8%, transparent); color: var(--texte); }
.ag-mc-nav:disabled { opacity: .35; cursor: default; }
.ag-mc-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* Grille : 7 colonnes égales ; l'en-tête L M M J V S D */
.ag-mc-grille { display: block; min-width: 0; }
.ag-mc-corps { display: block; }
.ag-mc-ligne { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-mc-ini { display: flex; align-items: center; justify-content: center; height: 24px; color: var(--texte-2); font: 500 11px/1 Inter, system-ui, sans-serif; }
.ag-mc[data-forme="tiroir"] .ag-mc-ini { height: 28px; font-size: 12px; }

/* Une case : la bande de la période (::before, pleine largeur) puis le chiffre (rond) */
.ag-mc-jour {
  position: relative; display: flex; align-items: center; justify-content: center; height: var(--ag-mc-case); min-width: 0; cursor: pointer;
  outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
:root:root .ag-mc-jour:focus-visible { outline: none; }   /* l'anneau se pose sur le chiffre (css/couleur.css en pose un sur tout [tabindex]) */
.ag-mc-num {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--ag-mc-rond); height: var(--ag-mc-rond);
  border-radius: 50%; color: var(--texte);
}
.ag-mc-jour--sel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--ag-mc-rond); translate: 0 -50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.ag-mc-jour--sel-debut::before { left: calc((100% - var(--ag-mc-rond)) / 2); border-top-left-radius: calc(var(--ag-mc-rond) / 2); border-bottom-left-radius: calc(var(--ag-mc-rond) / 2); }
.ag-mc-jour--sel-fin::before { right: calc((100% - var(--ag-mc-rond)) / 2); border-top-right-radius: calc(var(--ag-mc-rond) / 2); border-bottom-right-radius: calc(var(--ag-mc-rond) / 2); }
.ag-mc-jour--sel .ag-mc-num { font-weight: 600; }

/* Jours d'un autre mois : atténués (lisibles, AA) ; hors séjour : éteints, non choisissables */
.ag-mc-jour--autre .ag-mc-num { color: var(--texte-3); font-weight: 400; }
.ag-mc-jour--hors { cursor: default; }
.ag-mc-jour--hors .ag-mc-num { color: var(--texte-3); font-weight: 400; opacity: .55; }

/* Survol et focus visibles */
@media (hover: hover) {
  .ag-mc-jour:not(.ag-mc-jour--hors):not(.ag-mc-jour--auj):hover .ag-mc-num { background: color-mix(in srgb, var(--texte) 9%, transparent); }
}
.ag-mc-jour:focus-visible .ag-mc-num { outline: 2px solid var(--accent); outline-offset: 1px; }
.ag-mc-jour:active:not(.ag-mc-jour--hors):not(.ag-mc-jour--auj) .ag-mc-num { background: color-mix(in srgb, var(--texte) 14%, transparent); }

/* Aujourd'hui : pastille pleine d'accent, chiffre contrasté (prime sur tout le reste) */
.ag-mc-jour--auj .ag-mc-num { background: var(--accent); color: var(--sur-accent); font-weight: 700; opacity: 1; }
.ag-mc-jour--auj:focus-visible .ag-mc-num { outline-offset: 2px; }

/* =====================================================================================================================
   Recherche — page plein écran (téléphone < 900 px) ou panneau ancré de 480 px (ordinateur)
   ===================================================================================================================== */
.ag-r {
  position: fixed; z-index: 195; display: flex; flex-direction: column; min-width: 0; min-height: 0; color: var(--texte);
  font: 400 14px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.ag-r, .ag-r *, .ag-r *::before, .ag-r *::after { box-sizing: border-box; }
.ag-r [hidden] { display: none !important; }
.ag-r--page { inset: 0; background: var(--ag-toile); padding-top: env(safe-area-inset-top, 0px); }
.ag-r--panneau {
  top: 72px; right: 8px; width: 480px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: hidden;
  background: var(--s1); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: var(--shadow-elevated);
}

.ag-r-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; line-height: 0; }
.ag-r-ico svg { display: block; }

/* Barre : ← + champ (56 px) au téléphone ; loupe + champ (52 px) dans le panneau */
.ag-r-barre { display: flex; flex: none; align-items: center; gap: 4px; min-width: 0; border-bottom: 1px solid var(--ligne); }
.ag-r--page .ag-r-barre { height: 56px; padding: 0 8px 0 4px; }
.ag-r--panneau .ag-r-barre { height: 52px; padding: 0 12px 0 14px; gap: 10px; color: var(--texte-2); }
.ag-r-retour {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--texte); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ag-r-retour:hover { background: color-mix(in srgb, var(--texte) 8%, transparent); }
.ag-r-retour:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ag-r-champ {
  flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--texte);
  font: 400 16px/1.2 Inter, system-ui, sans-serif; outline: none;
}
.ag-r-champ::placeholder { color: var(--texte-2); opacity: 1; }
.ag-r-champ::-webkit-search-cancel-button, .ag-r-champ::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ag-r-effacer {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--texte-2); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ag-r--panneau .ag-r-effacer { width: 36px; height: 36px; margin-right: -6px; }
.ag-r-effacer:hover { background: color-mix(in srgb, var(--texte) 8%, transparent); color: var(--texte); }
.ag-r-effacer:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ag-r-champ:focus-visible { outline: none; }
:root:root .ag-r-champ:focus-visible { outline: none; }
.ag-r-barre:focus-within { border-bottom-color: var(--accent); }

/* Corps : message, liste ; seul le corps défile */
.ag-r-corps { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ag-r--panneau .ag-r-corps { max-height: calc(70vh - 54px); }
.ag-r-message { margin: 0; padding: 32px 24px; color: var(--texte-2); font-size: 15px; text-align: center; }
.ag-r--panneau .ag-r-message { padding: 24px 20px; font-size: 14px; }
.ag-r-statut { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ag-r-liste { padding: 4px 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
.ag-r-mois { padding: 16px 16px 4px 72px; color: var(--texte-2); font: 600 13px/1.3 Inter, system-ui, sans-serif; }
.ag-r-mois::first-letter { text-transform: uppercase; }

/* Un jour : colonne de date (« ven. » sur « 16 ») collée en haut pendant le défilement, puis ses lignes */
.ag-r-jour { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 8px; padding: 6px 8px 6px 8px; border-bottom: 1px solid var(--ligne); }
.ag-r-jour:last-child { border-bottom: 0; }
.ag-r-date { position: sticky; top: 6px; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; }
.ag-r-date-jour { color: var(--texte-2); font: 500 12px/1 Inter, system-ui, sans-serif; }
.ag-r-date-num {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--texte); font: 500 20px/1 Inter, system-ui, sans-serif;
}
.ag-r-jour--auj .ag-r-date-jour { color: var(--accent); font-weight: 600; }
.ag-r-jour--auj .ag-r-date-num { background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.ag-r-lignes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Une ligne : liseré de la famille, titre, horaire · lieu · groupe */
.ag-r-option {
  display: flex; align-items: stretch; gap: 12px; min-width: 0; min-height: 48px; padding: 6px 12px 6px 8px; border-radius: 8px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ag-r--panneau .ag-r-option { min-height: 44px; }
@media (hover: hover) { .ag-r-option:hover { background: color-mix(in srgb, var(--texte) 6%, transparent); } }
.ag-r-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.ag-r-option:active { background: color-mix(in srgb, var(--texte) 10%, transparent); }
.ag-r-lisere { flex: none; width: 4px; border-radius: 2px; background: var(--texte-3); }
.ag-r-option[data-famille="anim"] .ag-r-lisere { background: var(--fam-anim-plein); }
.ag-r-option[data-famille="vie"] .ag-r-lisere { background: var(--fam-vie-plein); }
.ag-r-option[data-famille="libres"] .ag-r-lisere { background: var(--fam-libres-plein); }
.ag-r-option[data-famille="dehors"] .ag-r-lisere { background: var(--fam-dehors-plein); }
.ag-r-option[data-famille="orga"] .ag-r-lisere { background: var(--fam-orga-plein); }
.ag-r-textes { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ag-r-titre { color: var(--texte); font: 500 15px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; hyphens: none; }
.ag-r--panneau .ag-r-titre { font-size: 14px; }
.ag-r-sous { color: var(--texte-2); font: 400 13px/1.35 Inter, system-ui, sans-serif; overflow-wrap: anywhere; hyphens: none; }