/* ============================================================
   T DIGITAL AGENCY — Listes déroulantes
   ------------------------------------------------------------
   Une liste déroulante native est dessinée par le système, pas
   par le site : fond bleu Windows, police du bureau, aucune
   maîtrise. Sur une page de commande, c'est le seul élément qui
   ne ressemble pas à la marque.

   Ce fichier habille un remplaçant construit par liste.js. Le
   <select> d'origine reste dans la page et garde la valeur :
   sans JavaScript, c'est lui qui s'affiche, et le formulaire
   fonctionne exactement comme avant.
   ============================================================ */

.liste {
    --liste-accent: #f97316;
    --liste-navy: #122142;
    --liste-bord: #e2e8f0;
    --liste-muet: #5b6478;
    --liste-rayon: 13px;
    --liste-courbe: cubic-bezier(.16, 1, .3, 1);

    position: relative;
    width: 100%;
}

/* Le <select> d'origine : présent pour le clavier et les
   lecteurs d'écran, invisible à l'œil. */
.liste .liste-natif {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- Le bouton ---------- */
.liste-bouton {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--liste-bord);
    border-radius: var(--liste-rayon);
    background: rgba(255, 255, 255, 0.6);
    font-family: inherit; font-size: 0.95rem; font-weight: 500;
    color: var(--liste-navy);
    text-align: left; cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

/* Le champ porte parfois une icone posee en absolu par-dessus lui :
   on lui laisse la place, mais seulement quand elle existe. */
.liste[data-icone="true"] .liste-bouton { padding-left: 48px; }

.liste-bouton:hover { background: #fff; border-color: #cbd5e1; }

.liste-bouton:focus-visible,
.liste[data-ouvert="true"] .liste-bouton {
    outline: none;
    background: #fff;
    border-color: var(--liste-accent);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.12);
}

.liste-valeur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.liste-chevron {
    flex: none; width: 15px; height: 15px;
    color: var(--liste-muet);
    transition: transform .22s var(--liste-courbe), color .2s ease;
}
.liste[data-ouvert="true"] .liste-chevron { transform: rotate(180deg); color: var(--liste-accent); }

/* ---------- Le panneau ---------- */
.liste-panneau {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 8px);
    z-index: 60;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--liste-bord);
    border-radius: var(--liste-rayon);
    box-shadow: 0 18px 44px -18px rgba(18, 33, 66, .38),
                0 2px 8px rgba(18, 33, 66, .06);
    max-height: 288px; overflow-y: auto;
    /* fermé : on retire aussi la visibilité, sinon le panneau
       resterait cliquable une fois transparent */
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.985);
    transform-origin: top center;
    transition: opacity .12s ease, transform .12s ease, visibility 0s .12s;
}

/* Ouverture vers le haut quand le bas de l'écran est trop proche. */
.liste[data-sens="haut"] .liste-panneau {
    top: auto; bottom: calc(100% + 8px);
    transform: translateY(6px) scale(.985);
    transform-origin: bottom center;
}

.liste[data-ouvert="true"] .liste-panneau {
    opacity: 1; visibility: visible;
    transform: none;
    transition: opacity .18s var(--liste-courbe),
                transform .18s var(--liste-courbe),
                visibility 0s;
}

/* ---------- Les options ---------- */
.liste-option {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 0.92rem; font-weight: 500;
    color: var(--liste-navy);
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.liste-texte { flex: 1; min-width: 0; transition: transform .16s var(--liste-courbe); }

.liste-option[data-actif="true"] { background: rgba(249, 115, 22, 0.09); }
.liste-option[data-actif="true"] .liste-texte { transform: translateX(3px); }

.liste-option[aria-selected="true"] { color: var(--liste-accent); font-weight: 700; }

.liste-coche {
    flex: none; width: 15px; height: 15px;
    color: var(--liste-accent);
    opacity: 0; transform: scale(.6);
    transition: opacity .18s var(--liste-courbe), transform .18s var(--liste-courbe);
}
.liste-option[aria-selected="true"] .liste-coche { opacity: 1; transform: none; }

/* Une note secondaire sur une option : « +15 % », « 48 h »… */
.liste-note {
    flex: none;
    font-size: 0.78rem; font-weight: 700;
    color: var(--liste-muet);
    padding: 3px 8px; border-radius: 999px;
    background: #f1f5f9;
    transition: background .14s ease, color .14s ease;
}
.liste-option[aria-selected="true"] .liste-note,
.liste-option[data-actif="true"] .liste-note {
    background: rgba(249, 115, 22, 0.14);
    color: #c2570b;
}

/* ---------- Entrée en cascade ----------
   Les options arrivent l'une après l'autre. Le décalage est
   plafonné dans liste.js : au-delà de quelques options, attendre
   son tour devient une lenteur, pas une élégance. */
@keyframes liste-entree {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}
.liste[data-ouvert="true"] .liste-option {
    animation: liste-entree .2s var(--liste-courbe) both;
    animation-delay: var(--retard, 0ms);
}

/* ---------- Mouvement réduit ----------
   Le réglage système prime : on garde l'effet visuel, on retire
   le déplacement. */
@media (prefers-reduced-motion: reduce) {
    .liste-panneau,
    .liste-chevron,
    .liste-texte,
    .liste-coche { transition-duration: .01ms !important; }
    .liste[data-ouvert="true"] .liste-option { animation: none !important; }
    .liste-panneau { transform: none !important; }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 480px) {
    .liste-panneau { max-height: 244px; }
    .liste-option { padding: 13px 12px; }
}