/**
 * Datepicker personnalisé - Inkwell
 */

.datepicker-champ {
    position:relative;
    display:inline-block;
    width:100%;
}

.datepicker-champ input {
    width:100%;
    padding:12px 44px 12px 16px;
    border:1px solid rgba(38, 53, 60, 0.15);
    border-radius:var(--rayon-bouton);
    font-size:0.95rem;
    color:var(--couleur-anthracite);
    background-color:#FFFFFF;
    cursor:pointer;
}

.datepicker-champ input:focus {
    outline:none;
    border-color:var(--couleur-corail);
    box-shadow:0 0 0 3px rgba(255, 103, 106, 0.15);
}

.datepicker-champ__icone {
    position:absolute;
    top:50%;
    right:16px;
    transform:translateY(-50%);
    color:var(--couleur-corail);
    pointer-events:none;
}

.datepicker-panneau {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:50;
    width:300px;
    background-color:#FFFFFF;
    border-radius:var(--rayon-carte);
    box-shadow:0 12px 32px rgba(38, 53, 60, 0.18);
    padding:16px;
    display:none;
    font-family:var(--police-corps);
}

.datepicker-panneau.datepicker-panneau--ouvert {
    display:block;
    animation:datepicker-apparition 0.15s ease;
}

@keyframes datepicker-apparition {
    from {
        opacity:0;
        transform:translateY(-6px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.datepicker-entete {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.datepicker-entete__titre {
    font-family:var(--police-titres);
    font-weight:700;
    font-size:0.95rem;
    color:var(--couleur-anthracite);
    text-transform:capitalize;
}

.datepicker-entete__navigation {
    display:flex;
    gap:4px;
}

.datepicker-entete__bouton {
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:var(--couleur-anthracite);
    transition:background-color 0.15s ease, color 0.15s ease;
}

.datepicker-entete__bouton:hover {
    background-color:var(--couleur-beige);
    color:var(--couleur-corail);
}

.datepicker-jours-semaine {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    margin-bottom:6px;
}

.datepicker-jours-semaine span {
    text-align:center;
    font-size:0.72rem;
    font-weight:600;
    color:rgba(38, 53, 60, 0.45);
    text-transform:uppercase;
}

.datepicker-grille {
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:2px;
}

.datepicker-jour {
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:0.85rem;
    color:var(--couleur-anthracite);
    transition:background-color 0.15s ease, color 0.15s ease;
}

.datepicker-jour:hover {
    background-color:var(--couleur-beige);
}

.datepicker-jour--hors-mois {
    color:rgba(38, 53, 60, 0.25);
}

.datepicker-jour--aujourdhui {
    font-weight:700;
    color:var(--couleur-corail);
}

.datepicker-jour--selectionne {
    background-color:var(--couleur-corail);
    color:#FFFFFF;
    font-weight:600;
}

.datepicker-jour--selectionne:hover {
    background-color:#FF5153;
}

.datepicker-jour--desactive {
    color:rgba(38, 53, 60, 0.15);
    pointer-events:none;
}

.datepicker-pied {
    display:flex;
    justify-content:space-between;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(38, 53, 60, 0.08);
}

.datepicker-pied__bouton {
    font-size:0.82rem;
    font-weight:600;
    color:var(--couleur-anthracite);
    padding:6px 10px;
    border-radius:6px;
    transition:background-color 0.15s ease;
}

.datepicker-pied__bouton:hover {
    background-color:var(--couleur-beige);
}

.datepicker-pied__bouton--corail {
    color:var(--couleur-corail);
}

@media (max-width:400px) {
    .datepicker-panneau {
        width:260px;
        padding:12px;
    }
}

.datepicker-heure {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(38, 53, 60, 0.08);
}

.datepicker-heure__icone {
    color:var(--couleur-corail);
    font-size:0.95rem;
}

.datepicker-heure__selecteurs {
    display:flex;
    align-items:center;
    gap:6px;
    font-family:var(--police-corps);
}

.datepicker-heure select {
    appearance:none;
    -webkit-appearance:none;
    background-color:var(--couleur-beige);
    border:1px solid rgba(38, 53, 60, 0.12);
    border-radius:8px;
    padding:6px 10px;
    font-family:var(--police-corps);
    font-weight:600;
    font-size:0.9rem;
    color:var(--couleur-anthracite);
    cursor:pointer;
    text-align:center;
}

.datepicker-heure select:focus {
    outline:none;
    border-color:var(--couleur-corail);
    box-shadow:0 0 0 3px rgba(255, 103, 106, 0.15);
}

.datepicker-heure__separateur {
    font-weight:700;
    color:var(--couleur-anthracite);
}

.datepicker-heure__maintenant {
    font-size:0.78rem;
    font-weight:600;
    color:var(--couleur-corail);
    padding:6px 10px;
    border-radius:6px;
    transition:background-color 0.15s ease;
}

.datepicker-heure__maintenant:hover {
    background-color:var(--couleur-beige);
}

/* ==========================================================================
   VUE SÉLECTION RAPIDE MOIS/ANNÉE
   ========================================================================== */

.datepicker-entete__titre {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.datepicker-entete__titre:hover {
    background-color: var(--couleur-beige);
}

.datepicker-vue-annee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.datepicker-vue-annee__valeur {
    font-family: var(--police-titres);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--couleur-anthracite);
}

.datepicker-mois-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.datepicker-mois-item {
    padding: 12px 4px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-anthracite);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.datepicker-mois-item:hover {
    background-color: var(--couleur-beige);
}

.datepicker-mois-item--actif {
    background-color: var(--couleur-corail);
    color: #ffffff;
}

/* ==========================================================================
   VUE SÉLECTION RAPIDE ANNÉE (décennie)
   ========================================================================== */

.datepicker-vue-annee__valeur {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.datepicker-vue-annee__valeur:hover {
    background-color: var(--couleur-beige);
}

.datepicker-annee-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.datepicker-annee-item {
    padding: 12px 4px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--couleur-anthracite);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.datepicker-annee-item:hover {
    background-color: var(--couleur-beige);
}

.datepicker-annee-item--actif {
    background-color: var(--couleur-corail);
    color: #ffffff;
}