/* ==========================================================================
   Cal Month (.cal-month) — Grille mensuelle « ruban » de Garde Alternée

   Composant propre à l'application (pas dans la bibliothèque) : reprend
   projet/design/GrilleMois.dc.html, variante « ruban », tailles l (bureau)
   et s (tablette, téléphone). Les booléens que la maquette calculait par case
   (début/fin de segment, vacances, transfert…) arrivent en classes posées par
   le rendu de app.js.

   Structure BEM :
   - .cal-month                  → Bloc racine (en-tête des jours + grille)
   - .cal-month--compact         → Taille s (tablette, téléphone)
   - .cal-month--selecting       → Mode sélection (cadre encre 2 px, défilement tactile bloqué)
   - .cal-month__head            → Ligne des jours de la semaine
   - .cal-month__dow             → Un jour de la semaine (--weekend : muted)
   - .cal-month__grid            → Grille 7 colonnes
   - .cal-day                    → Une case (bouton)
   - .cal-day--out               → Jour hors du mois (estompé)
   - .cal-day--weekend           → Samedi, dimanche (fond bg, numéro muted)
   - .cal-day--sunday            → Dernière colonne (pas de séparateur à droite)
   - .cal-day--today             → Aujourd'hui (anneau encre 3 px + surface 2 px, numéro en pastille)
   - .cal-day--hole              → Jour sans parent (« À attribuer »)
   - .cal-day--selected          → Jour sélectionné (cadre + pastille coche)
   - .cal-day--changed           → Modifié par l'autre parent, pas encore vu (coin corné)
   - .cal-day--pending           → Modification hors ligne non envoyée (anneau)
   - .cal-day--conflict          → Conflit à régler (cadre 2 px + pastille « ! »)
   - .cal-day__top               → Ligne du haut (numéro, drapeaux)
   - .cal-day__num               → Numéro du jour (Bricolage, regular, chiffres proportionnels)
   - .cal-day__flag              → Drapeau « Férié » / « Fête » / pictogramme note
   - .cal-day__vac               → Barre des vacances, --ferie : férié (--start, --end)
   - .cal-day__band              → Ruban de garde (--transfer : deux segments séparés de 2 px)
   - .cal-day__seg               → Segment du parent du jour (--p1, --p2, --none, --start, --end, --transfer)
   - .cal-day__seg-next          → Début du parent suivant (jour de transfert)
   - .cal-day__time              → Heure de passage (sous le ruban, à droite)
   - .cal-day__events            → Jours spéciaux
   - .cal-day__event             → Un jour spécial (point de catégorie + nom en taille l)
   - .cal-day__dot               → Point de catégorie (--anniversaire, --medical, --scolaire, --vacances, --autre)
   - .cal-day__mark              → Repère de coin (coin corné, anneau, « ! ») — voir corner.css
   - .cal-day__check             → Pastille coche de la sélection

   Usage (une case, taille l) :
   <div class="cal-month">
     <div class="cal-month__head" aria-hidden="true"><span class="cal-month__dow">lun.</span>…</div>
     <div class="cal-month__grid" role="grid">
       <button class="cal-day cal-day--today" aria-label="samedi 24 octobre, chez Camille, passage 17:30" aria-current="date">
         <span class="cal-day__vac cal-day__vac--start"></span>
         <span class="cal-day__top"><span class="cal-day__num">24</span></span>
         <span class="cal-day__band cal-day__band--transfer">
           <span class="cal-day__seg cal-day__seg--p1 cal-day__seg--start cal-day__seg--transfer">Camille</span>
           <span class="cal-day__seg-next cal-day__seg-next--p2"></span>
         </span>
         <span class="cal-day__time">…flèche… 17:30</span>
         <span class="cal-day__events">
           <span class="cal-day__event"><span class="cal-day__dot cal-day__dot--anniversaire"></span><span>Anniversaire de mamie</span></span>
         </span>
       </button>
     </div>
   </div>

   Accessibilité :
   - Chaque case est un <button> dont l'aria-label dit tout ce que la case
     montre (date, parent, passage, jours spéciaux, « modifié par … ») : les
     repères visuels sont aria-hidden.
   - Aujourd'hui : aria-current="date". Sélection : aria-pressed.
   - Focus clavier : anneau encre décalé vers l'intérieur.

   Règles du rendu (comme la maquette) : un seul repère de coin par case —
   le conflit l'emporte sur « en attente », qui l'emporte sur « modifié » ;
   le nom du parent n'est écrit qu'au début d'un segment et le lundi.
   ========================================================================== */

.cal-month {
  --cal-cell-h: 110px;
  --cal-num-size: 15px;
  --cal-num-lh: 20px;
  --cal-band-h: 26px;
  --cal-band-r: 10px;
  --cal-corner: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--font-body);
  color: var(--color-text);
}

.cal-month--compact {
  --cal-cell-h: 60px;
  --cal-num-size: 13px;
  --cal-num-lh: 17px;
  --cal-band-h: 14px;
  --cal-corner: 14px;
}

/* --------------------------------------------------------------------------
   EN-TÊTE DES JOURS
   -------------------------------------------------------------------------- */
.cal-month__head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-month__dow {
  padding: 0 6px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text);
}

.cal-month--compact .cal-month__dow {
  padding: 0 0 6px;
  font-size: 11px;
  text-align: center;
}

.cal-month__dow--weekend {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   GRILLE
   -------------------------------------------------------------------------- */
.cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: var(--border-hair) solid var(--color-border);
}

.cal-month--selecting .cal-month__grid {
  outline: var(--border-strong) solid var(--color-text);
  outline-offset: 4px;
  touch-action: none; /* glisser pour sélectionner sans faire défiler */
}

/* --------------------------------------------------------------------------
   CASE
   -------------------------------------------------------------------------- */
.cal-day {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--cal-cell-h);
  margin: 0;
  padding: 0;
  overflow: hidden;

  background-color: var(--color-surface);
  border: none;
  border-bottom: var(--border-hair) solid var(--color-border);
  border-radius: 0;
  /* séparateur vertical très léger (line à 45 %) */
  box-shadow: inset -1px 0 0 var(--cal-sep);

  font: inherit;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.cal-day--sunday {
  box-shadow: none;
}

.cal-day--weekend {
  background-color: var(--ga-weekend);
}

.cal-day--out {
  opacity: var(--cal-out-opacity);
  color: var(--cal-out-text);
}

/* Hors du mois : ruban et étiquette réglés par les tokens --cal-out-* (lisibles en sombre) */
.cal-day--out .cal-day__num,
.cal-day--out .cal-day__time {
  color: var(--cal-out-text);
}

.cal-day--out .cal-day__seg--p1,
.cal-day--out .cal-day__seg-next--p1 {
  background-color: color-mix(in oklab, var(--parent-1) var(--cal-out-mix), var(--color-surface));
  color: color-mix(in oklab, var(--parent-1-ink) var(--cal-out-ink), var(--color-text));
}

.cal-day--out .cal-day__seg--p2,
.cal-day--out .cal-day__seg-next--p2 {
  background-color: color-mix(in oklab, var(--parent-2) var(--cal-out-mix), var(--color-surface));
  color: color-mix(in oklab, var(--parent-2-ink) var(--cal-out-ink), var(--color-text));
}

.cal-day--today {
  box-shadow: inset 0 0 0 3px var(--color-text), inset 0 0 0 5px var(--color-surface), inset -1px 0 0 var(--cal-sep);
}

.cal-day--today.cal-day--sunday {
  box-shadow: inset 0 0 0 3px var(--color-text), inset 0 0 0 5px var(--color-surface);
}

.cal-day:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -4px;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   LIGNE DU HAUT
   -------------------------------------------------------------------------- */
.cal-day__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 6px 6px 0;
  box-sizing: border-box;
}

.cal-month--compact .cal-day__top {
  min-height: 20px;
  padding: 4px 4px 0;
}

/* place pour le repère de coin */
.cal-day--changed .cal-day__top,
.cal-day--pending .cal-day__top,
.cal-day--conflict .cal-day__top {
  padding-right: 22px;
}

.cal-month--compact .cal-day--changed .cal-day__top,
.cal-month--compact .cal-day--pending .cal-day__top,
.cal-month--compact .cal-day--conflict .cal-day__top {
  padding-right: 15px;
}

.cal-day__num {
  min-width: 16px;
  font-family: var(--font-display);
  font-size: var(--cal-num-size);
  font-weight: var(--font-weight-normal);
  font-variant-numeric: proportional-nums;
  line-height: var(--cal-num-lh);
  text-align: center;
  border-radius: var(--radius-full);
}

.cal-day--weekend .cal-day__num {
  color: var(--color-text-muted);
}

.cal-day--today .cal-day__num {
  padding: 0 6px;
  background-color: var(--color-text);
  color: var(--ga-today-ink);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.cal-day__flag {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 0 4px;
  background-color: var(--color-surface);
  border: var(--border-hair) solid var(--color-text);
  border-radius: 3px;
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 14px;
}

.cal-day__flag + .cal-day__flag {
  margin-left: 0;
}

.cal-day__flag svg {
  width: 10px;
  height: 10px;
}

/* --------------------------------------------------------------------------
   VACANCES ET FÉRIÉS — barre continue de 4 px, arrondie aux extrémités : verte pour les
   vacances, violette pour un férié, qui prend le pas sur les vacances ce jour-là
   -------------------------------------------------------------------------- */
.cal-day__vac {
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--cal-vacances);
}

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

.cal-day__vac--start {
  left: 6px;
  border-top-left-radius: var(--radius-full);
  border-bottom-left-radius: var(--radius-full);
}

.cal-day__vac--end {
  right: 6px;
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   RUBAN DE GARDE
   -------------------------------------------------------------------------- */
.cal-day__band {
  display: flex;
  flex: none;
  height: var(--cal-band-h);
  margin: 6px 0 2px;
}

.cal-month--compact .cal-day__band {
  margin: 3px 0 2px;
}

.cal-day__band--transfer {
  gap: 2px;
}

.cal-day__seg {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 7px;
  overflow: hidden;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.cal-month--compact .cal-day__seg {
  padding: 0 3px;
  font-size: 9px;
}

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

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

/* « À attribuer » : hachure fine (encre 13 %) + filet continu 1,5 px (encre 42 %) */
.cal-day__seg--none {
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--cal-hole-hatch) 5px 6.5px);
  color: var(--color-text);
  box-shadow: inset 0 1.5px 0 var(--cal-hole-line), inset 0 -1.5px 0 var(--cal-hole-line);
}

.cal-day__seg--none.cal-day__seg--start {
  box-shadow: inset 0 1.5px 0 var(--cal-hole-line), inset 0 -1.5px 0 var(--cal-hole-line), inset 1.5px 0 0 var(--cal-hole-line);
}

.cal-day__seg--none.cal-day__seg--end {
  box-shadow: inset 0 1.5px 0 var(--cal-hole-line), inset 0 -1.5px 0 var(--cal-hole-line), inset -1.5px 0 0 var(--cal-hole-line);
}

.cal-day__seg--none.cal-day__seg--start.cal-day__seg--end {
  box-shadow: inset 0 0 0 1.5px var(--cal-hole-line);
}

.cal-day__seg--start {
  margin-left: 3px;
  border-top-left-radius: var(--cal-band-r);
  border-bottom-left-radius: var(--cal-band-r);
}

.cal-day__seg--end {
  margin-right: 3px;
  border-top-right-radius: var(--cal-band-r);
  border-bottom-right-radius: var(--cal-band-r);
}

/* Jour de transfert : le parent du jour occupe 58 %, le suivant commence */
.cal-day__seg--transfer {
  flex: 0 0 58%;
  margin-right: 0;
  border-top-right-radius: var(--cal-band-r);
  border-bottom-right-radius: var(--cal-band-r);
}

.cal-day__seg-next {
  flex: 1 1 auto;
  border-top-left-radius: var(--cal-band-r);
  border-bottom-left-radius: var(--cal-band-r);
}

.cal-day__seg-next--p1 {
  background-color: var(--parent-1);
}

.cal-day__seg-next--p2 {
  background-color: var(--parent-2);
}

/* --------------------------------------------------------------------------
   HEURE DE PASSAGE
   -------------------------------------------------------------------------- */
.cal-day__time {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: proportional-nums;
  line-height: 13px;
  color: var(--color-text);
}

.cal-month--compact .cal-day__time {
  font-size: 10px;
}

.cal-month--compact .cal-day__time svg {
  display: none;
}

.cal-day__time svg {
  width: 10px;
  height: 10px;
}

/* --------------------------------------------------------------------------
   JOURS SPÉCIAUX
   -------------------------------------------------------------------------- */
.cal-day__events {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 4px 6px;
}

.cal-month--compact .cal-day__events {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px 5px;
}

.cal-day__event {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  line-height: 15px;
}

.cal-day__event > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-month--compact .cal-day__event > span:last-child {
  display: none; /* taille s : le point seul */
}

.cal-day__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--cat-autre);
}

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

/* --------------------------------------------------------------------------
   REPÈRES DE COIN — modifié, en attente, conflit
   -------------------------------------------------------------------------- */
.cal-day--changed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--cal-corner);
  height: var(--cal-corner);
  pointer-events: none;
  background: linear-gradient(225deg, var(--ga-vermillon) 0 46%, var(--color-surface) 46% 58%, transparent 58%);
}

.cal-day--pending::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 7px;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border: var(--border-strong) solid var(--color-text);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
}

.cal-month--compact .cal-day--pending::after {
  top: 5px;
  right: 4px;
  width: 8px;
  height: 8px;
}

.cal-day--conflict {
  box-shadow: inset 0 0 0 2px var(--color-text);
}

.cal-day--conflict::after {
  content: '!';
  position: absolute;
  top: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-radius: var(--radius-full);
  background-color: var(--color-text);
  color: var(--color-surface);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.cal-month--compact .cal-day--conflict::after {
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  font-size: 10px;
}

/* --------------------------------------------------------------------------
   SÉLECTION
   -------------------------------------------------------------------------- */
.cal-day--selected::before {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 3px solid var(--color-text);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-surface), inset 0 0 0 2px var(--color-surface);
}

.cal-day__check {
  display: none;
}

.cal-day--selected .cal-day__check {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background-color: var(--color-text);
  color: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.cal-day__check svg {
  width: 10px;
  height: 10px;
}