/* ==========================================================================
   Cal Year (.cal-year) — Vue annuelle de Garde Alternée, grille par mois

   Composant propre à l'application : reprend projet/design/GrilleAnnee.dc.html,
   variante « mois », motif=false (aucune hachure sur les parents —
   DECISIONS.md › Calendrier). Bureau : 4 colonnes de mois, cases de 24 px ;
   tablette : 26 px ; l'écart entre mois et la taille se règlent par variables.

   Structure BEM :
   - .cal-year                 → Bloc racine (grille des 12 mois)
   - .cal-year--selecting      → Mode sélection : les cases se peignent (pas de défilement tactile)
   - .cal-year__month          → Un mois ; --current : cadre encre
   - .cal-year__head           → Ligne du nom et du décompte (GrilleAnnee : même ligne,
                                 aux deux bouts, sur la ligne de base)
   - .cal-year__title          → Nom du mois (Bricolage 700, 15 px) : bouton vers la vue mois, dont
                                 la zone de clic couvre tout le mois sauf la grille des jours
   - .cal-year__count          → Décompte « C 14 · T 17 · ? 3 » (11 px, muted)
   - .cal-year__grid           → 7 colonnes de cases
   - .cal-yday                 → Une case jour
   - .cal-yday--blank          → Case vide (avant le 1er, après le dernier jour)
   - .cal-yday--p1 / --p2      → Parent du jour
   - .cal-yday--none           → Sans parent (hachure + filet)
   - .cal-yday--transfer-p1 / --transfer-p2 → Jour de transfert vers ce parent (diagonale)
   - .cal-yday--today          → Aujourd'hui (contour encre 2 px, numéro en pastille)
   - .cal-yday--ferie          → Férié ou fête (numéro souligné)
   - .cal-yday--changed        → Modifié par l'autre parent (coin corné)
   - .cal-yday--selected       → Sélectionné (cadre encre doublé de surface ; absent de la
                                 maquette, ajouté avec la sélection en vue année, 2026-10-26)
   - .cal-yday__num            → Numéro (Bricolage regular, proportionnel, 42 % de la case)
   - .cal-yday__vac            → Barre des vacances, --ferie : férié (au-dessus de la case)
   - .cal-yday__event          → Barre du premier jour spécial (bas de la case)

   Usage :
   <div class="cal-year">
     <section class="cal-year__month cal-year__month--current">
       <div class="cal-year__head">
         <button class="cal-year__title" aria-label="octobre : Camille 14 jours, Thomas 15, 2 à attribuer. Ouvrir le mois">octobre</button>
         <span class="cal-year__count" aria-hidden="true">C 14 · T 15 · ? 2</span>
       </div>
       <span class="cal-year__grid" aria-hidden="true">
         <span class="cal-yday cal-yday--blank"></span>
         <span class="cal-yday cal-yday--p1 cal-yday--transfer-p2" data-key="2026-10-02"><span class="cal-yday__num">2</span></span>
       </span>
     </section>
   </div>

   Accessibilité :
   - Le nom du mois est le bouton (vers la vue mois), avec un aria-label qui
     résume le décompte ; les cases sont décoratives (aria-hidden) : un clic
     sur un jour ouvre son détail, raccourci du pointeur — au clavier, le
     détail s'atteint par la vue mois (« Touchez un mois pour l'ouvrir, un
     jour pour son détail », maquette Bureau année).
   ========================================================================== */

.cal-year {
  --cal-ycell: 24px;
  --cal-ygap: 3px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 20px 22px;
  justify-content: space-between;
  font-family: var(--font-body);
  color: var(--color-text);
}

.cal-year--tablet {
  --cal-ycell: 26px;
  gap: 26px;
}

@media (max-width: 640px) {
  .cal-year {
    --cal-ycell: 20px;
    --cal-ygap: 2px;
    grid-template-columns: repeat(2, max-content);
    gap: 18px 16px;
  }
}

/* --------------------------------------------------------------------------
   MOIS
   -------------------------------------------------------------------------- */
.cal-year__month {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -4px;
  padding: 4px;
  border-radius: 4px;
}

.cal-year__month--current {
  outline: var(--border-strong) solid var(--color-text);
}

.cal-year__head {
  display: flex;
  flex-wrap: wrap; /* « Septembre » + « C 15 · T 15 · ? 3 » dépasse une grille de 22 px */
  align-items: baseline;
  justify-content: space-between;
  column-gap: 6px;
  padding: 0 2px;
}

.cal-year__title {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-transform: capitalize;
}

.cal-year__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* Zone de clic du titre étendue à tout le mois ; la grille passe au-dessus (jours cliquables) */
.cal-year__title::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
}

.cal-year__title:focus-visible {
  outline: none;
}

.cal-year__title:focus-visible::after {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 2px;
}

.cal-year__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, var(--cal-ycell));
  gap: var(--cal-ygap);
}

/* --------------------------------------------------------------------------
   CASE
   -------------------------------------------------------------------------- */
.cal-yday {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cal-ycell);
  height: var(--cal-ycell);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
}

.cal-yday--blank {
  cursor: default;
}

.cal-year--selecting .cal-year__grid {
  touch-action: none; /* glisser pour sélectionner sans faire défiler */
}

.cal-yday--selected::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 1;
  pointer-events: none;
  border: var(--border-strong) solid var(--color-text);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--color-surface);
}

.cal-yday--p1 {
  background-color: var(--parent-1);
  color: var(--parent-1-ink);
}

.cal-yday--p2 {
  background-color: var(--parent-2);
  color: var(--parent-2-ink);
}

.cal-yday--none {
  background: repeating-linear-gradient(135deg, var(--color-surface) 0 3px, var(--color-border) 3px 4.5px);
  box-shadow: inset 0 0 0 1.5px var(--cal-hole-line);
  color: var(--color-text);
}

/* Transfert : diagonale, parent du jour puis parent suivant */
.cal-yday--p1.cal-yday--transfer-p2 {
  background: linear-gradient(135deg, var(--parent-1) 0 52%, var(--color-surface) 52% 60%, var(--parent-2) 60%);
}

.cal-yday--p2.cal-yday--transfer-p1 {
  background: linear-gradient(135deg, var(--parent-2) 0 52%, var(--color-surface) 52% 60%, var(--parent-1) 60%);
}

.cal-yday--today {
  outline: var(--border-strong) solid var(--color-text);
  outline-offset: 1px;
}

.cal-yday__num {
  font-family: var(--font-display);
  font-size: max(9px, calc(var(--cal-ycell) * 0.42));
  font-weight: var(--font-weight-normal);
  font-variant-numeric: proportional-nums;
  line-height: 1;
  text-underline-offset: 2px;
}

.cal-yday--ferie .cal-yday__num {
  text-decoration: underline;
}

.cal-yday--today .cal-yday__num {
  padding: 2px 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-text);
  color: var(--ga-today-ink);
}

.cal-yday__vac {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--cal-vacances);
}

.cal-yday__vac--ferie { background-color: var(--cal-ferie); }

.cal-yday__event {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: max(2px, calc(var(--cal-ycell) / 8));
  background-color: var(--cat-autre);
  box-shadow: 0 0 0 1px var(--color-surface);
}

.cal-yday__event--anniversaire { background-color: var(--cat-anniversaire); }
.cal-yday__event--medical { background-color: var(--cat-medical); }
.cal-yday__event--scolaire { background-color: var(--cat-scolaire); }
.cal-yday__event--vacances { background-color: var(--cat-vacances); }

.cal-yday--changed::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: calc(var(--cal-ycell) * 0.62);
  height: calc(var(--cal-ycell) * 0.62);
  border-top-right-radius: 2px;
  pointer-events: none;
  background: linear-gradient(225deg, var(--ga-vermillon) 0 44%, var(--color-surface) 44% 60%, transparent 60%);
}