/* ═══════════════════════════════════════════════════════════════════════════
   NECObot — champs de date et d'heure du site (site/public/date-heure.css)
   Demande de l'administrateur du 10/10/2026, vers 16 h (capture du calendrier du navigateur sur le champ « Supprimée
   le ») : « rends le calendrier et les heures plus esthétiques stp ». Composant : js/date-heure.js. Chargé par index.html
   après /theme/components.css, dont la fenêtre .modal (fond, bordure, ombre, ::backdrop, animation d'ouverture), les
   boutons .btn et le champ .input servent de base.
   · Noir et blanc seulement : jour, heure ou minutes choisis en plein (couleur de la marque, texte inversé), aujourd'hui
     cerclé, jours hors des bornes grisés et barrés ; aucune couleur d'état.
   · Jetons de tokens.css (thèmes clair et sombre), aucune couleur écrite en dur ni :root local (tests/test-front.js).
   · 360 px de large : la fenêtre tient dans l'écran (une colonne de sept cases de 40 px), cases plus hautes au doigt.
   · Contraste élevé de Windows : couleurs du système (Highlight, CanvasText, GrayText) ; icônes dessinées par des
     bordures (le contraste élevé efface les fonds).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Champ : la saisie et son bouton dans le même cadre ── */
.dh-champ {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
/* Place du bouton dans le champ. !important : la règle des anciens champs des formulaires (« .form-group input:not(…) »,
   style.css) pose padding avec une spécificité plus forte (pages Anniversaires et Jeux des subs) */
.dh-champ .dh-saisie {
  width: 100%;
  min-width: 0;
  padding-right: calc(var(--control-height) - var(--space-1)) !important;
  font-variant-numeric: tabular-nums;
}
.tbl-dense .dh-champ .dh-saisie {
  padding-right: calc(var(--control-height-sm) + var(--space-1)) !important;
}
.dh-ouvrir {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dh-ouvrir:hover {
  background: var(--color-hover);
  color: var(--color-text);
}
.dh-ouvrir:active {
  background: var(--color-active);
}
.dh-ouvrir:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: 0;
}
.dh-ouvrir:disabled {
  opacity: 0.45;
  background: transparent;
}

/* Icônes dessinées en CSS (bordures seulement) : calendrier (cadre, barre du haut, deux anneaux), horloge (cadran, deux
   aiguilles) */
.dh-icone {
  position: relative;
  display: block;
  flex: none;
}
.dh-icone-date {
  width: 0.875rem;
  height: 0.8125rem;
  margin-top: 0.125rem;
  border: 2px solid currentColor;
  border-top-width: 0.25rem;
  border-radius: 3px;
}
.dh-icone-date::before,
.dh-icone-date::after {
  content: "";
  position: absolute;
  top: calc(-0.25rem - 3px);
  height: 0.3125rem;
  border-left: 2px solid currentColor;
  border-radius: 1px;
}
.dh-icone-date::before {
  left: 1px;
}
.dh-icone-date::after {
  right: 1px;
}
.dh-icone-heure {
  width: 0.9375rem;
  height: 0.9375rem;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
}
.dh-icone-heure::before,
.dh-icone-heure::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
}
.dh-icone-heure::before {
  bottom: calc(50% - 1px);
  height: 0.3125rem;
  border-left: 2px solid currentColor;
}
.dh-icone-heure::after {
  top: calc(50% - 1px);
  width: 0.25rem;
  border-top: 2px solid currentColor;
}

/* ── Fenêtre ── */
/* Page derrière la fenêtre : défilement bloqué, barre de défilement compensée (--dh-gouttiere, posée par le script) */
html.dh-ouvert,
html.dh-ouvert body {
  overflow: hidden;
}
html.dh-ouvert body {
  padding-right: var(--dh-gouttiere, 0px);
}
.dh-fenetre {
  width: min(20.5rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-color: var(--color-border-strong);
}
/* Écran large : sous le champ (place posée par le script), la page reste visible autour, comme une bulle. Jamais plus
   haute que la place entre son haut et le bas de l'écran (8 px de marge, celle du script) : au-delà, elle défile en
   elle-même (overflow de .modal). Relecture 52.1 du 10/10/2026 : posée pour sa taille d'ouverture, elle sortait de
   l'écran en grandissant (mois de 6 semaines, message d'erreur de l'heure) ; le script la remonte de ce qu'il faut */
.dh-fenetre.dh-ancree {
  position: fixed;
  inset: var(--dh-y, 0px) auto auto var(--dh-x, 0px);
  max-height: calc(100dvh - var(--dh-y, 0px) - 8px);
  margin: 0;
}
.dh-fenetre.dh-ancree::backdrop {
  background: transparent;
}
.dh-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.dh-titre {
  min-width: 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.dh-fermer {
  flex: none;
  margin-right: calc(var(--space-2) * -1);
}

/* En-tête du calendrier : mois précédent, « novembre 2026 » (choix rapide du mois et de l'année), mois suivant */
.dh-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}
/* Mois précédent et suivant indisponibles à la borne (aria-disabled : ils gardent le focus ; estompés par la marque) : au
   survol, sans le contour que la marque rend aux boutons indisponibles à contour */
.dh-nav .btn[aria-disabled="true"]:hover {
  border-color: transparent;
}
.dh-bascule {
  justify-self: center;
  max-width: 100%;
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-normal);
}
.dh-bascule-texte {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-chevron {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.dh-chevron-gauche {
  rotate: 135deg;
  translate: 0.125rem 0;
}
.dh-chevron-droite {
  rotate: -45deg;
  translate: -0.125rem 0;
}
.dh-chevron-bas {
  width: 0.375rem;
  height: 0.375rem;
  rotate: 45deg;
  translate: 0 -0.125rem;
}

/* Grilles : jours (sept colonnes, lundi d'abord), mois (quatre), heures et minutes (six) */
.dh-grille {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
}
.dh-grille th {
  padding: var(--space-1) 0 var(--space-2);
  color: var(--color-text-subtle);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-align: center;
}
.dh-case,
.dh-vide {
  height: 2.25rem;
  padding: 0;
}
.dh-case {
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dh-case:hover {
  background: var(--color-hover);
}
.dh-case:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: 1px;
}
/* Aujourd'hui (jour de Paris) : cerclé ; mois en cours dans le choix rapide, de même */
.dh-case[aria-current="date"] {
  box-shadow: inset 0 0 0 1.5px var(--color-text);
  font-weight: var(--fw-bold);
}
/* Choisi : en plein, texte inversé (aujourd'hui choisi : un fin cercle inversé en plus) */
.dh-case[aria-selected="true"] {
  background: var(--color-brand);
  box-shadow: none;
  color: var(--color-on-brand);
  font-weight: var(--fw-bold);
}
.dh-case[aria-selected="true"]:hover {
  background: rgb(var(--color-brand-rgb) / 0.86);
}
.dh-case[aria-selected="true"][aria-current="date"] {
  box-shadow: inset 0 0 0 2px var(--color-brand), inset 0 0 0 3.5px var(--color-on-brand);
}
/* Hors des bornes : grisé, barré, refusé */
.dh-case[aria-disabled="true"] {
  color: var(--color-text-subtle);
  opacity: 0.5;
  text-decoration: line-through;
  cursor: not-allowed;
}
.dh-case[aria-disabled="true"]:hover {
  background: transparent;
}
.dh-grille-mois .dh-case {
  height: 2.75rem;
  font-family: var(--font-body);
}
/* Minutes en attente d'une heure : estompées, sans le trait des jours refusés */
.dh-grille-attente .dh-case[aria-disabled="true"] {
  text-decoration: none;
}

/* Heure : saisie libre « HH:MM » en tête (son libellé « Heure (HH:MM) » est lu par les lecteurs d'écran), intertitres des
   grilles ; cases plus basses que celles des jours (fenêtre moins haute : elle tient sous le champ plus souvent) */
.dh-libre {
  display: grid;
  gap: var(--space-1);
}
.dh-fenetre-heure .dh-case {
  height: 2rem;
}
.dh-sous-titre {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.dh-saisie-libre {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  text-align: center;
}
.dh-erreur {
  display: flex;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.dh-erreur:empty {
  display: none;
}
.dh-erreur:not(:empty)::before {
  content: "✕" / "";
  flex: none;
}
.dh-saisie-libre[aria-invalid="true"],
.dh-saisie-libre[aria-invalid="true"]:focus {
  border-color: var(--color-text);
  outline-color: var(--color-text);
}

/* Pied : « Effacer » à gauche, « Aujourd'hui » ou « Valider » à droite */
.dh-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* Écran étroit (fenêtre centrée) : marges réduites */
@media (max-width: 37.49rem) {
  .dh-fenetre {
    padding: var(--space-3);
  }
}
/* Au doigt : cases de 40 px (heures et minutes comprises) */
@media (pointer: coarse) {
  .dh-case,
  .dh-vide,
  .dh-fenetre-heure .dh-case {
    height: 2.5rem;
  }
}
/* Contraste élevé de Windows : choisi en couleur de sélection du système, aujourd'hui cerclé, refusés en GrayText */
@media (forced-colors: active) {
  .dh-case[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .dh-case[aria-current="date"] {
    outline: 1px solid CanvasText;
    outline-offset: -3px;
  }
  .dh-case[aria-disabled="true"] {
    color: GrayText;
  }
  .dh-fenetre {
    border: 1px solid CanvasText;
  }
}