/* ─── Le calendrier du site (flatpickr), habillé — UN fichier pour le tunnel, le moteur de formulaires et le livre ─────────
 *
 * Extrait de css/form-inline.css le 2026-10-20 (Ilyes : « harmonise » les formulaires du livre) — la règle du dépôt : un
 * composant que le tunnel a et qu'un autre écran veut s'EXTRAIT, il ne se copie pas. Chargé après form-inline.css par
 * form et formulaire, et à la demande par le portail (js/calendrier-portail.js). Le moteur reste js/datepicker.js.
 */
.flatpickr-calendar {
    font-size: 72%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    height: 38px;
    /* Give it a fixed height */
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-year-select {
    font-weight: 600;
    color: #4b5563;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.35rem 2.25rem 0.35rem 0.5rem;
    /* T, R, B, L */
    transition: all 0.2s ease;
    margin: 0 0.15rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-year-select:hover {
    background-color: #f0f2ff;
    border-color: #6772e5;
}

.flatpickr-monthDropdown-month {
    background: #fff;
    color: #374151;
}

/* ─── Le panneau des années par dizaines (Ilyes, 2026-10-07) ───
 * Ouvert par le bouton de l'année (à gauche du mois) ; une dizaine par boîte, puis
 * ses dix années. Posé PAR-DESSUS les jours, dans le calendrier. */
.flatpickr-year-select { cursor: pointer; }
.iq-annees {
    position: absolute;
    left: 0.5rem; right: 0.5rem; top: 46px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 0.6rem;
    z-index: 5;
}
.iq-annees.hidden { display: none; }
.iq-annees-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.iq-annees-boite {
    padding: 0.5rem 0.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}
.iq-annees-boite:hover { background: #f0f2ff; border-color: #6772e5; color: #5469d4; }
.iq-annees-boite.est-courante { border-color: #6772e5; color: #5469d4; }
.iq-annees-retour {
    display: block;
    margin: 0 0 0.5rem 0.1rem;
    background: none; border: 0;
    font-size: 0.8rem; font-weight: 600; color: #6b7280;
    cursor: pointer;
}
.iq-annees-retour:hover { color: #5469d4; }

.flatpickr-monthDropdown-month:hover {
    background: #f0f2ff;
    color: #5469d4;
}

.flatpickr-day {
    border-radius: 9999px;
    transition: all 0.1s ease;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #6772e5;
    border-color: #6772e5;
}

.flatpickr-day:hover {
    background: #f0f2ff;
}

.flatpickr-day.today {
    border-color: #a5b4fc;
}

.flatpickr-day.today:hover {
    background: #a5b4fc;
    color: #fff;
}