/* =========================================================
   CHAMPS DATE EN FRANÇAIS (core/date_display.js)
   Le JS emballe chaque input[type="date"] dans `.date-fr-field` et y
   ajoute `.date-fr-display`, superposé au texte natif ("09/19/2026")
   pour afficher "Samedi 19 septembre 2026". Le wrapper est un bloc
   transparent côté style : largeur/marges/paddings restent portés par
   l'input lui-même, donc les règles de chaque contexte (modale,
   ligne de planning…) continuent de s'appliquer sans changement.

   Chargé APRÈS theme.css dans base.html, et les sélecteurs qualifient
   l'input (`input.date-fr-input`) : sinon `.modal-body input[type="date"]`
   (theme.css) gagne en spécificité et le texte natif reste visible.
   ========================================================= */
.date-fr-field {
    display: block;
    position: relative;
}

/* Texte natif rendu invisible (mais toujours là : picker, clavier,
   validation). `color: transparent` suffit ; l'icône de calendrier
   (::-webkit-calendar-picker-indicator) garde sa propre couleur. */
.date-fr-field input.date-fr-input {
    color: transparent;
}

.date-fr-display {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    color: var(--text);
    pointer-events: none; /* les clics traversent jusqu'à l'input */
}

.date-fr-display-empty {
    color: var(--text-faint);
}

/* Au focus, on rend la main au rendu natif : la saisie clavier
   (jj/mm/aaaa, flèches) doit rester visible. */
.date-fr-field.date-fr-focused input.date-fr-input {
    color: var(--text);
}

.date-fr-field.date-fr-focused .date-fr-display {
    display: none;
}