/*
 * Select / Dropdown personnalisé - Inkwell 
 */

.select-inkwell {
    position:relative;
    width:100%;
    font-family:var(--police-corps);
}

.select-inkwell__natif {
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:1px;
    height:1px;
}

.select-inkwell__declencheur {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:12px 16px;
    background-color:#FFFFFF;
    border:1px solid rgba(38, 53, 60, 0.15);
    border-radius:var(--rayon-bouton);
    font-size:0.95rem;
    color:var(--couleur-anthracite);
    cursor:pointer;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.select-inkwell__declencheur:hover {
    border-color:rgba(38, 53, 60, 0.3);
}

.select-inkwell.select-inkwell--ouvert .select-inkwell__declencheur {
    border-color:var(--couleur-corail);
    box-shadow:0 0 0 3px rgba(255, 103, 106, 0.15);
}

.select-inkwell__valeur {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.select-inkwell__valeur--placeholder {
    color:rgba(38, 53, 60, 0.4);
}

.select-inkwell__icone {
    flex-shrink:0;
    color:var(--couleur-corail);
    font-size:0.8rem;
    transition:transform 0.2s ease;
}

.select-inkwell--ouvert .select-inkwell__icone {
    transform:rotate(180deg);
}

.select-inkwell__panneau {
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    z-index:60;
    max-height:260px;
    overflow-y:auto;
    background-color:#FFFFFF;
    border-radius:var(--rayon-carte);
    box-shadow:0 12px 32px rgba(38, 53, 60, 0.18);
    padding:6px;
    display:none;
}

.select-inkwell--ouvert .select-inkwell__panneau {
    display:block;
    animation:select-apparition 0.15s ease;
}

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

.select-inkwell__option {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    border-radius:8px;
    font-size:0.9rem;
    color:var(--couleur-anthracite);
    cursor:pointer;
    transition:background-color 0.12s ease, color 0.12s ease;
}

.select-inkwell__option:hover, 
.select-inkwell__option--surlignee {
    background-color:var(--couleur-beige);
}

.select-inkwell__option--selectionnee {
    color:var(--couleur-corail);
    font-weight:600;
}

.select-inkwell__option i {
    color:var(--couleur-corail);
    font-size:0.8rem;
}

.select-inkwell__groupe-libelle {
    padding:8px 12px 4px;
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:rgba(38, 53, 60, 0.4);
}

.select-inkwell__panneau::-webkit-scrollbar {
    width:6px;
}

.select-inkwell__panneau::-webkit-scrollbar-thumb {
    background-color:var(--couleur-corail);
    border-radius:999px;
}

@media (max-width:400px) {
    .select-inkwell__panneau {
        max-height:220px;
    }
}

/* ==========================================================================
   THÈME SOMBRE
   ========================================================================== */

[data-theme="sombre"] .select-inkwell__declencheur {
    background-color: #232a2f;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f0ebe6;
}

[data-theme="sombre"] .select-inkwell__declencheur:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="sombre"] .select-inkwell.select-inkwell--ouvert .select-inkwell__declencheur {
    border-color: var(--couleur-corail);
    box-shadow: 0 0 0 3px rgba(255, 103, 106, 0.2);
}

[data-theme="sombre"] .select-inkwell__valeur--placeholder {
    color: rgba(240, 235, 230, 0.4);
}

[data-theme="sombre"] .select-inkwell__panneau {
    background-color: #232a2f;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="sombre"] .select-inkwell__option {
    color: #f0ebe6;
}

[data-theme="sombre"] .select-inkwell__option:hover,
[data-theme="sombre"] .select-inkwell__option--surlignee {
    background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="sombre"] .select-inkwell__option--selectionnee {
    color: var(--couleur-corail);
}

[data-theme="sombre"] .select-inkwell__groupe-libelle {
    color: rgba(240, 235, 230, 0.4);
}