/* Champ de date stylé : un socle dans la DA montre la date en toutes lettres ; l'input date RÉEL (valeur envoyée, validation, min)
   est posé par-dessus, transparent et cliquable : son rendu natif jj/mm/aaaa n'est jamais visible.
   L'anneau de focus est porté par le socle. Spec : 02-CORRECTIONS-SPEC.md sections 2.2 à 2.4. */

.champ__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); margin-block-end: var(--e2); }
.champ__entete label { margin: 0; }
.champ__note { font-size: var(--t-petit); line-height: 1; color: var(--sourdine); white-space: nowrap; }

.socle {
  position: relative;
  display: flex;
  align-items: center;
  block-size: 56px;
  padding-inline: var(--e3);
  background: var(--surface);
  border: 1.5px solid var(--filet-fort);
  border-radius: var(--rayon-s);
  color: var(--encre);
  transition: border-color var(--d-micro) linear, background-color var(--d-micro) linear;
}
.socle__texte { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.socle__icone { flex: none; inline-size: 20px; block-size: 20px; margin-inline-start: var(--e2); color: var(--dominante); }

.champ--date .socle input[type="date"] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  color-scheme: light;
  accent-color: var(--dominante);
}

.socle:hover { border-color: var(--dominante); background: var(--dominante-douce); }
.socle:focus-within { border-color: var(--dominante); outline: 3px solid var(--dominante); outline-offset: 2px; }
.socle[data-invalide="true"] { border-color: var(--attention); border-width: 2px; }

@media (max-width: 759px) {
  .socle { block-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .socle { transition: none; }
}