/* === CALENDRIER === */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.cal-title { font-size: 1.1rem; text-transform: capitalize; }
.cal-nav {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer; font-size: 1.1rem; width: 2.2rem; height: 2.2rem;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.cal-nav:hover { color: var(--accent); border-color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.cal-dow { text-align: center; font-size: 0.68rem; color: var(--text-secondary); padding-bottom: 0.15rem; }
/* Hauteur bornée (pas carré) pour que mois + heatmap tiennent dans le viewport. */
.cal-cell {
  position: relative; height: clamp(2.1rem, 6vh, 2.9rem); border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cal-cell.empty { background: transparent; }
/* Jour mesuré : fond teinté accent (plus clair qu'un point flottant), accent au survol. */
.cal-cell.has { background: var(--accent-muted); color: var(--text-primary); cursor: pointer; border-color: transparent; font-weight: 600; }
.cal-cell.has:hover { border-color: var(--accent); }
.cal-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Jour avec événement(s) : point coloré sous le numéro (couleur du 1er événement du jour).
   Un jour à événement seul (sans mesure) reste cliquable pour voir le détail. */
.cal-cell { position: relative; }
/* Points d'événements : empilés verticalement à droite de la cellule (un par type, max 3). */
.cal-ev-dots { position: absolute; top: 50%; inset-inline-end: 3px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.cal-ev-dot { width: 4.5px; height: 4.5px; border-radius: 50%; display: inline-block; }
.cal-cell.has-ev:not(.has) { cursor: pointer; border-color: var(--border); background: transparent; color: var(--text-primary); }
.cal-cell.has-ev:not(.has):hover { border-color: var(--accent); }
.cal-ev-time { color: var(--text-secondary); font-weight: 400; font-size: 0.82rem; margin-inline-start: 0.3rem; }
.cal-ev-note { color: var(--text-secondary); font-size: 0.85rem; }
/* Jour sélectionné (clic calendrier ou heatmap) : fond plein accent, distinct du contour "aujourd'hui". */
.cal-cell.cal-sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cal-detail { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cal-day { display: flex; flex-direction: column; gap: 0.4rem; }
.cal-day-title { font-family: var(--font-title); font-weight: 600; font-size: 0.92rem; }
.cal-day-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.92rem; }
/* Chaque valeur du jour = une puce lisible : métrique colorée + valeur en gras. */
.cal-tag { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); background: var(--bg-secondary); }
.cal-tag-m { font-weight: 600; }
.cal-tag-v { font-weight: 700; }

/* Vue annuelle (heatmap GitHub) sous le mois : intensité = nombre de tests. */
.cal-year { margin-top: 1.3rem; position: relative; }
.cal-year-title { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0.35rem; }
/* Heatmap + sélecteur d'années à droite. Taille des cases = var (calculée en JS pour tenir sur mobile). */
.hm-row { display: flex; align-items: flex-start; gap: 0.75rem; }
/* Padding sur les 4 côtés : le contour de sélection (1px + offset 1px = 2px débordant) n'est plus rogné,
   y compris sur la 1re et la dernière colonne. overflow-x:auto clippe sinon ce contour au ras du bord. */
.hm { --hm-cell: 11px; --hm-gap: 3px; overflow-x: auto; padding: 3px 5px 4px 3px; flex: 1 1 auto; min-width: 0; }
.hm-body { display: flex; gap: 6px; width: max-content; }
.hm-days { display: grid; grid-template-rows: repeat(7, var(--hm-cell)); gap: var(--hm-gap); margin-top: 20px; }
.hm-days span { font-size: 0.7rem; color: var(--text-secondary); line-height: var(--hm-cell); }
.hm-cols { display: flex; flex-direction: column; }
.hm-months { height: 20px; display: grid; gap: var(--hm-gap); }
.hm-month { grid-row: 1; font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.hm-grid { display: grid; grid-template-rows: repeat(7, var(--hm-cell)); grid-auto-flow: column; grid-auto-columns: var(--hm-cell); gap: var(--hm-gap); }
.hm-cell { width: var(--hm-cell); height: var(--hm-cell); border-radius: 2px; background: var(--bg-secondary); }
.hm-cell.hm-empty { background: transparent; }
.hm-on { cursor: pointer; border: none; padding: 0; }
.hm-on:hover { outline: 1px solid var(--text-primary); outline-offset: 1px; }
/* Intensité par alpha (pas opacity) : la cellule reste opaque, le contour de sélection reste net. */
.hm-l1 { background: rgba(var(--accent-rgb), 0.28); }
.hm-l2 { background: rgba(var(--accent-rgb), 0.5); }
.hm-l3 { background: rgba(var(--accent-rgb), 0.75); }
.hm-l4 { background: rgba(var(--accent-rgb), 1); }
/* Jour sélectionné dans la heatmap : contour fin, garde l'intensité de la cellule. */
.hm-on.hm-sel { outline: 1px solid var(--text-primary); outline-offset: 1px; position: relative; z-index: 1; }
.hm-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 0.6rem; font-size: 0.7rem; color: var(--text-secondary); }
.hm-sw { width: 11px; height: 11px; border-radius: 2px; }
.hm-sw0 { background: var(--bg-secondary); }
.hm-legend span:first-child { margin-inline-end: 4px; }
.hm-legend span:last-child { margin-inline-start: 4px; }

/* Sélecteur d'années : liste verticale sur ordi, bouton dépliant sur mobile. */
.hm-years { flex: 0 0 auto; position: relative; }
.hm-years-cur {
  list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem;
  font-size: 0.78rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.3rem;
}
.hm-years-cur::-webkit-details-marker { display: none; }
.hm-years-cur::after { content: "▾"; font-size: 0.7em; }
.hm-years-list { display: flex; flex-direction: column; gap: 0.3rem; }
.hm-year {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-secondary); cursor: pointer; font-size: 0.78rem; padding: 0.2rem 0.7rem;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; text-align: center;
}
.hm-year:hover { color: var(--accent); border-color: var(--accent); }
.hm-year.is-active { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }
/* Mobile : le bouton d'années remonte au niveau du titre (à droite), la liste s'ouvre en surcouche. */
@media (max-width: 639px) {
  .hm-years { position: absolute; top: 0; right: 0; }
  .cal-year-title { padding-inline-end: 5.5rem; }
  /* Plus d'air sous le bouton d'années pour qu'il ne touche pas les noms de mois. */
  .hm-row { margin-top: 0.9rem; }
  /* Fenêtre roulante dimensionnée par JS pour tenir pile : pas de scroll, centrée, non rognée. */
  .hm { overflow-x: hidden; }
  .hm-body { margin-inline: auto; }
  .hm-years-list {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card); padding: 0.4rem;
  }
}
/* Ordi : liste toujours visible, le bouton-résumé masqué (details forcé ouvert en JS). Les années
   passent AU-DESSUS de la heatmap (en ligne, à droite) -> la heatmap prend toute la largeur (moins de rognage). */
@media (min-width: 640px) {
  .hm-years-cur { display: none; }
  .hm-row { flex-direction: column; gap: 0.4rem; }
  .hm-years { order: -1; align-self: stretch; }
  .hm-years-list { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  /* Cases un peu plus grandes sur desktop : la heatmap occupe davantage la largeur dispo. */
  .hm { --hm-cell: 12px; }
}

@media (max-width: 480px) {
  /* Cases du mois nettement rectangulaires (plus larges que hautes) sur petit écran. */
  .cal-grid { gap: 0.2rem; }
  .cal-cell { height: 1.9rem; font-size: 0.8rem; }
  .app-view, .login-view { padding: 1rem 0.9rem 3rem; }
  .card { padding: 1.1rem; }
  .header { padding: 0 0.9rem; }
  .logo { font-size: 1.2rem; }
  .header-actions { gap: 0.5rem; }
  .header .pill { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
  /* Saisie : date + compteur sur la 1re ligne, note (souvent longue) sur sa propre ligne. */
  .hist-count { order: 2; }
  .hist-note { order: 3; flex-basis: 100%; margin-inline-start: 0; }
  /* Date picker modal : centré aussi sur mobile (il n'est plus ancré au champ). */
  .dp-pop { max-width: calc(100vw - 2rem); }
}