/*
 * Habillage VDR du back-office Filament.
 *
 * Couleurs et polices sont déclarées dans AdminPanelProvider. Ce fichier place
 * Fraunces sur les titres de page et les grands chiffres, garde les chiffres des
 * tableaux en Manrope, et dessine la jauge de remplissage des départs et
 * l'éditeur de programme, repris du prototype back-office (docs/design).
 *
 * Publié dans public/css/app par php artisan filament:assets.
 *
 * Accent : l'or du logo, comme sur le site public (public/css/vdr-site.css), avec
 * ses règles. Jamais de doré du nuancier en texte sur fond clair : les textes
 * dorés sont en nuance 600, #92660F, 5,09:1 sur blanc. Jamais de texte blanc sur
 * un aplat doré : le texte des boutons est bleu nuit. Jamais de texte doré sur le
 * bleu pâle du site, où il ne tient que 3,99:1.
 */

/* Boutons principaux : or #E9A92A sous un texte bleu nuit (8,1:1), survol #D9981B
   (6,7:1). Filament y poserait un texte blanc, à 2:1 sur l'or. */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: #E9A92A;
    --hover-bg: #D9981B;
    --dark-bg: #E9A92A;
    --dark-hover-bg: #D9981B;
    --text: #0a1f33;
    --hover-text: #0a1f33;
    --dark-text: #0a1f33;
    --dark-hover-text: #0a1f33;
}

/* Titres de page, marque et grands chiffres du tableau de bord en Fraunces. */
.fi-header-heading,
.fi-simple-header-heading,
.fi-logo,
.fi-wi-stats-overview-stat-value {
    font-family: var(--serif-font-family), Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Chiffres des tableaux en Manrope, alignés en colonne comme dans le prototype. */
.fi-ta-text {
    font-variant-numeric: tabular-nums;
}

/* Jauge de remplissage d'un départ. */
.vdr-jauge {
    min-width: 9rem;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
}

.vdr-jauge__barre {
    height: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--gray-200);
}

.dark .vdr-jauge__barre {
    background: var(--gray-700);
}

.vdr-jauge__remplissage {
    height: 100%;
    border-radius: 4px;
    background: var(--info-500);
}

/* Cinq places restantes ou moins : or. */
.vdr-jauge__remplissage--chaud {
    background: var(--primary-500);
}

/* Départ plein : vert. */
.vdr-jauge__remplissage--plein {
    background: var(--success-500);
}

.vdr-jauge__texte {
    margin-top: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

/* Éditeur de programme : la liste des blocs à gauche, le bloc sélectionné à droite. */
.vdr-programme {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.vdr-programme__liste,
.vdr-programme__jour {
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(10 31 51 / 0.06);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 6%, transparent);
}

.dark .vdr-programme__liste,
.dark .vdr-programme__jour {
    background: var(--gray-900);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

/* Sur grand écran, la liste reste visible pendant la saisie d'un long jour. */
@media (min-width: 1001px) {
    .vdr-programme__liste {
        position: sticky;
        top: 5.5rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
    }
}

@media (max-width: 1000px) {
    .vdr-programme {
        grid-template-columns: 1fr;
    }
}

.vdr-programme__outils {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-200);
}

.dark .vdr-programme__outils {
    border-color: var(--gray-700);
}

.vdr-jours {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vdr-jour {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.14s ease;
}

.vdr-jour:last-child {
    border-bottom: none;
}

.vdr-jour:hover {
    background: var(--gray-50);
}

/* Bloc de plusieurs jours : léger fond doré. */
.vdr-jour--groupe {
    background: linear-gradient(90deg, color-mix(in oklab, var(--primary-500) 7%, transparent), transparent);
}

.vdr-jour--actif,
.vdr-jour--actif:hover {
    background: var(--primary-50);
    box-shadow: inset 3px 0 0 var(--primary-500);
}

.dark .vdr-jour {
    border-color: var(--gray-800);
}

.dark .vdr-jour:hover {
    background: color-mix(in oklab, #fff 5%, transparent);
}

.dark .vdr-jour--actif,
.dark .vdr-jour--actif:hover {
    background: color-mix(in oklab, var(--primary-500) 16%, transparent);
}

.vdr-jour__choix {
    display: grid;
    flex: 1;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 11px 4px 11px 14px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.vdr-jour__numero {
    font-family: var(--serif-font-family), Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.05;
    text-align: center;
    color: var(--gray-950);
    font-variant-numeric: tabular-nums;
}

.vdr-jour__numero small {
    display: block;
    font-family: var(--font-family), system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-600);
}

.vdr-jour__texte {
    min-width: 0;
}

.vdr-jour__surtitre {
    display: block;
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--primary-600);
}

.vdr-jour__titre {
    display: block;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-950);
}

.dark .vdr-jour__numero,
.dark .vdr-jour__titre {
    color: #fff;
}

/* Sur fond sombre, les petits textes dorés passent à l'or courant : la nuance 600
   n'y tiendrait pas 4,5:1. */
.dark .vdr-jour__numero small,
.dark .vdr-jour__surtitre {
    color: var(--primary-300);
}

.vdr-jour__reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.vdr-jour__reperes:empty {
    display: none;
}

.vdr-jour__actions {
    display: flex;
    align-items: center;
    padding-right: 8px;
}

.vdr-pastille {
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--gray-100);
    color: var(--gray-600);
}

.vdr-pastille--hotel {
    background: var(--success-50);
    color: var(--success-600);
}

.vdr-pastille--photos {
    background: var(--info-50);
    color: var(--info-700);
}

.vdr-pastille--option {
    background: var(--primary-50);
    color: var(--primary-700);
}

.vdr-pastille--mise-en-avant {
    background: var(--gray-900);
    color: var(--primary-200);
}

.vdr-jours__encadre {
    padding: 6px 12px 6px 56px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--warning-50);
    color: var(--warning-800);
    font-size: 0.8rem;
}

.dark .vdr-jours__encadre {
    border-color: var(--gray-800);
    background: color-mix(in oklab, var(--warning-500) 12%, transparent);
    color: var(--warning-200);
}

.vdr-pastille--encadre {
    background: var(--warning-50);
    color: var(--warning-700);
}

.vdr-jours__vide {
    padding: 18px 14px;
    font-size: 13px;
    color: var(--gray-500);
}

/* Panneau du bloc sélectionné. */
.vdr-programme__jour {
    padding: 20px 22px;
}

.vdr-programme__formulaire {
    display: grid;
    gap: 20px;
}

.vdr-programme__entete {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-200);
}

.dark .vdr-programme__entete {
    border-color: var(--gray-700);
}

.vdr-programme__titre {
    font-family: var(--serif-font-family), Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gray-950);
}

.dark .vdr-programme__titre {
    color: #fff;
}

.vdr-programme__etape {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--gray-500);
}

.vdr-programme__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vdr-programme__pied {
    display: flex;
    justify-content: flex-end;
}

.vdr-programme__vide {
    font-size: 14px;
    color: var(--gray-500);
}

/* Fenêtre « Renuméroter » : la liste de ce qui changera, et l'alerte sur les jours sans bloc. */
.vdr-renumerotation {
    display: grid;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.dark .vdr-renumerotation {
    color: var(--gray-300);
}

.vdr-renumerotation__liste {
    margin: 0;
    padding-left: 1.2rem;
    list-style: disc;
    font-variant-numeric: tabular-nums;
}

.vdr-renumerotation__liste li + li {
    margin-top: 2px;
}

.vdr-renumerotation__note {
    color: var(--gray-500);
}

.vdr-renumerotation__alerte {
    padding: 10px 12px;
    border-left: 3px solid var(--danger-600);
    border-radius: 0 6px 6px 0;
    background: var(--danger-50);
    color: var(--danger-800);
}

.dark .vdr-renumerotation__alerte {
    background: color-mix(in oklab, var(--danger-500) 15%, transparent);
    color: var(--danger-200);
}

/* Barre d'outils du texte (App\Filament\Support\ChampTexte) : trois boutons qui
   montrent l'effet qu'ils produisent. Le surlignage reprend le composant du
   site, texte doré sombre sur fond blanc, jamais un doré du nuancier en texte. */
.vdr-balisage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.vdr-balisage__bouton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: #0a1f33;
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
}

.vdr-balisage__bouton:hover,
.vdr-balisage__bouton:focus-visible {
    border-color: #D9981B;
    background: #faf4ea;
}

.vdr-balisage__bouton mark {
    padding: 0 4px;
    border-radius: 3px;
    background: #fff;
    color: #92660F;
    font-weight: 600;
    outline: 1px solid var(--gray-200);
}

.vdr-balisage__aide {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.vdr-balisage__message {
    font-size: 0.75rem;
    color: #9a3412;
}

.dark .vdr-balisage__bouton {
    border-color: var(--gray-600);
    background: var(--gray-800);
    color: #fff;
}

.dark .vdr-balisage__bouton:hover,
.dark .vdr-balisage__bouton:focus-visible {
    border-color: #F5BE45;
    background: var(--gray-700);
}

.dark .vdr-balisage__aide {
    color: var(--gray-400);
}

.dark .vdr-balisage__message {
    color: #FBCD5C;
}

/* Fenêtre « Aperçu » de l'éditeur de programme : le jour rendu par le site, dans un cadre. */
.vdr-apercu {
    display: grid;
    gap: 10px;
}

.vdr-apercu__note {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.vdr-apercu__cadre {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background: #fff;
}

/*
 * Import d'un programme (lot 10). Chaque aplat pose sa propre couleur de texte :
 * une couleur ne s'hérite jamais à travers un changement de fond.
 * Rouge #9a3412 sur #fdf0ea, doré #92660F sur warm, vert #2d6a4f sur #eaf4ee.
 */
.vdr-import {
    display: grid;
    gap: 18px;
}

.vdr-import__schema,
.vdr-import__rapport,
.vdr-import__relecture {
    border-radius: 0.75rem;
    background: #fff;
    color: #1f2d3b;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgb(10 31 51 / 0.06);
    outline: 1px solid color-mix(in oklab, var(--gray-950) 6%, transparent);
}

.dark .vdr-import__schema,
.dark .vdr-import__rapport,
.dark .vdr-import__relecture {
    background: var(--gray-900);
    color: var(--gray-100);
    outline-color: color-mix(in oklab, #fff 10%, transparent);
}

.vdr-import__schema summary {
    cursor: pointer;
    font-weight: 600;
}

.vdr-import__schema pre,
.vdr-import__source {
    max-height: 32rem;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 12.5px;
    line-height: 1.5;
    background: #f4f8fb;
    color: #1f2d3b;
    padding: 12px 14px;
    border-radius: 0.5rem;
}

.dark .vdr-import__schema pre,
.dark .vdr-import__source {
    background: var(--gray-950);
    color: var(--gray-200);
}

.vdr-import__saisie--json textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.vdr-import__boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vdr-import__bilan {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vdr-import__compte {
    padding: 6px 12px;
    border-radius: 0.5rem;
    background: #f4f8fb;
    color: #1f2d3b;
}

.vdr-import__compte--bloquant,
.vdr-import__constat--bloquant .vdr-import__etat,
.vdr-import__verdict--bloquant,
.vdr-import__alerte,
.vdr-import__danger {
    background: #fdf0ea;
    color: #9a3412;
}

.vdr-import__compte--relire,
.vdr-import__constat--a_relire .vdr-import__etat {
    background: #faf4ea;
    color: #92660F;
}

.vdr-import__compte--verifie,
.vdr-import__constat--verifie .vdr-import__etat {
    background: #eaf4ee;
    color: #2d6a4f;
}

.vdr-import__constat--info .vdr-import__etat {
    background: #f4f8fb;
    color: #2c5f7f;
}

.vdr-import__verdict,
.vdr-import__alerte,
.vdr-import__danger {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 0.5rem;
}

.vdr-import__danger ul,
.vdr-import__danger p {
    color: #9a3412;
}

.vdr-import__famille {
    margin-top: 18px;
}

.vdr-import__famille h3,
.vdr-import__relecture h2,
.vdr-import__programme h4 {
    font-weight: 700;
    margin-bottom: 6px;
}

.vdr-import__constats {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.vdr-import__constats td {
    padding: 6px 8px;
    vertical-align: top;
    border-top: 1px solid var(--gray-100);
}

.dark .vdr-import__constats td {
    border-top-color: var(--gray-800);
}

.vdr-import__etat {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.vdr-import__ou {
    width: 26%;
    color: #5a6c7d;
}

.dark .vdr-import__ou,
.dark .vdr-import__note {
    color: var(--gray-400);
}

.vdr-import__extrait {
    display: block;
    margin-top: 3px;
    color: #556676;
    font-style: italic;
}

.dark .vdr-import__extrait {
    color: var(--gray-400);
}

.vdr-import__verifies summary {
    cursor: pointer;
    font-size: 13px;
    color: #2d6a4f;
    margin-top: 6px;
}

.dark .vdr-import__verifies summary {
    color: #86c5a4;
}

.vdr-import__erreurs,
.vdr-import__liste,
.vdr-import__pertes {
    margin: 4px 0 0 18px;
    list-style: disc;
    font-size: 13px;
}

.vdr-import__erreurs {
    color: #9a3412;
}

.dark .vdr-import__erreurs {
    color: #fca5a5;
}

.vdr-import__note {
    display: block;
    color: #5a6c7d;
    font-size: 12px;
}

.vdr-import__garantie {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--success-600);
    background: var(--success-50);
    color: var(--success-800);
    font-size: 0.875rem;
}

.dark .vdr-import__garantie {
    background: color-mix(in oklab, var(--success-500) 12%, transparent);
    color: var(--success-200);
}

.vdr-import__vide {
    font-size: 13px;
}

.vdr-import__legende {
    font-size: 13px;
    margin-bottom: 12px;
}

.vdr-import__colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 1000px) {
    .vdr-import__colonnes {
        grid-template-columns: 1fr;
    }
}

.vdr-import__source {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
}

.vdr-import__programme {
    font-size: 13.5px;
    line-height: 1.55;
}

.vdr-import__jour {
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--gray-100);
}

.dark .vdr-import__jour {
    border-bottom-color: var(--gray-800);
}

.vdr-import__jour h4 span {
    color: #92660F;
    margin-right: 6px;
}

.dark .vdr-import__jour h4 span {
    color: #FBCD5C;
}

.vdr-import__surtitre {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
}

.vdr-import__faits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 12.5px;
    color: #2c5f7f;
}

.dark .vdr-import__faits {
    color: #9cc3dc;
}

.vdr-import__encadre,
.vdr-import__option {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 0.5rem;
    background: #faf4ea;
    color: #1f2d3b;
}

.dark .vdr-import__encadre,
.dark .vdr-import__option {
    background: var(--gray-800);
    color: var(--gray-100);
}

.vdr-import__option small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vdr-import__prix {
    margin-left: 8px;
    font-weight: 700;
}

.vdr-import__mot--relire {
    background: #fbd9a8;
    color: #0a1f33;
    border-radius: 3px;
    padding: 0 2px;
}

.vdr-import__mot--nouveau {
    background: transparent;
    color: inherit;
    text-decoration: underline dotted #2c5f7f 2px;
    text-underline-offset: 3px;
}

.dark .vdr-import__mot--nouveau {
    text-decoration-color: #9cc3dc;
}

/* Extension dans la relecture de l'import : à part du jour par jour. */
.vdr-import__extension {
    margin-top: 1rem;
    padding: 0.75rem;
    border: 2px dashed var(--primary-400);
    border-radius: 0.5rem;
}

/* Galeries photos : vignettes de la grille, jamais recadrées. Un bandeau large de
   2000 x 924 rentre entier dans sa carte au lieu d'être coupé en carré. */
.vdr-galerie__vignette {
    max-width: 100%;
    height: auto !important;
    max-height: 170px;
    object-fit: contain;
    border-radius: 0.375rem;
}

/* Dépôt des photos d'une galerie (App\Livewire\EnvoiPhotosGalerie). */
.vdr-depot {
    margin-block: 1.5rem;
}

.vdr-depot__zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--gray-300);
    border-radius: 0.75rem;
    background: var(--gray-50);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.vdr-depot__zone:hover,
.vdr-depot__zone--survol {
    border-color: var(--primary-500);
    background: color-mix(in oklab, var(--primary-200) 25%, white);
}

.vdr-depot__zone:focus-within {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.dark .vdr-depot__zone {
    border-color: var(--gray-600);
    background: var(--gray-900);
}

/* Le champ couvre toute la zone, invisible : un clic ouvre le choix des fichiers,
   et le clavier l'atteint comme un champ ordinaire. */
.vdr-depot__champ {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.vdr-depot__invite {
    font-family: var(--serif-font-family, 'Fraunces', serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: #0a1f33;
}

.vdr-depot__ou {
    font-size: 0.875rem;
    color: #5a6c7d;
}

.dark .vdr-depot__invite {
    color: #f4f8fb;
}

.dark .vdr-depot__ou {
    color: var(--gray-400);
}

.vdr-depot__suivi {
    margin-top: 1rem;
}

.vdr-depot__alerte,
.vdr-depot__bilan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

/* Tant que des photos sont en cours : fond d'alerte, texte #9a3412 (6,6:1 sur #fdf2e9). */
.vdr-depot__alerte {
    background: #fdf2e9;
    color: #9a3412;
}

.vdr-depot__roue {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/* Terminé : vert #2d6a4f sur #eaf4ee (5,7:1) ; avec un échec, le fond d'alerte. */
.vdr-depot__bilan {
    background: #eaf4ee;
    color: #2d6a4f;
}

.vdr-depot__bilan--echec {
    background: #fdf2e9;
    color: #9a3412;
}

.vdr-depot__jauge {
    height: 0.375rem;
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--gray-200);
}

.vdr-depot__jauge span {
    display: block;
    height: 100%;
    background: var(--primary-500);
    transition: width 0.3s;
}

.vdr-depot__liste {
    margin-top: 0.75rem;
    max-height: 18rem;
    overflow-y: auto;
    list-style: none;
    padding: 0;
}

.vdr-depot__fichier {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.375rem 0.25rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
}

.vdr-depot__nom {
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
}

.vdr-depot__etat {
    color: #5a6c7d;
}

.vdr-depot__fichier--prete .vdr-depot__etat {
    color: #2d6a4f;
    font-weight: 600;
}

.vdr-depot__fichier--echec .vdr-depot__nom,
.vdr-depot__fichier--echec .vdr-depot__etat {
    color: #9a3412;
    font-weight: 600;
}

.dark .vdr-depot__etat {
    color: var(--gray-400);
}

.dark .vdr-depot__fichier--prete .vdr-depot__etat {
    color: #8fd3ad;
}

.dark .vdr-depot__fichier--echec .vdr-depot__nom,
.dark .vdr-depot__fichier--echec .vdr-depot__etat {
    color: #f4a582;
}

.vdr-depot__lien {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    color: #2c5f7f;
    cursor: pointer;
}

/* Envoi depuis un téléphone (App\Livewire\EnvoiTelephoneGalerie). Pensé pour un pouce :
   le bouton d'envoi, large, reste collé en bas de l'écran ; chaque ligne est assez
   haute pour être touchée sans viser. Couples de couleurs : bouton bleu nuit sur or
   (8,1:1), vert #2d6a4f et rouille #9a3412 sur blanc (6,4 et 7,3:1), rouille sur
   #fdf2e9 (6,6:1), blanc sur rouille (7,3:1). */
.vdr-tel {
    max-width: 36rem;
    margin-inline: auto;
}

.vdr-tel [x-cloak] {
    display: none !important;
}

.vdr-tel__etat {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #eaf4ee;
    color: #2d6a4f;
    font-size: 0.9375rem;
}

.vdr-tel__etat--brouillon {
    background: #fdf2e9;
    color: #9a3412;
}

.vdr-tel__bouton {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    margin-top: 1rem;
    padding: 0 1.25rem;
    border-radius: 0.875rem;
    background: #E9A92A;
    color: #0a1f33;
    font-size: 1.1875rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(10, 31, 51, 0.18);
    cursor: pointer;
}

.vdr-tel__bouton:active {
    background: #D9981B;
}

.vdr-tel__bouton:focus-within {
    outline: 3px solid #0a1f33;
    outline-offset: 3px;
}

.vdr-tel__champ {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.vdr-tel__aide {
    margin-top: 0.625rem;
    font-size: 0.875rem;
    color: #5a6c7d;
}

.vdr-tel__alerte,
.vdr-tel__encours,
.vdr-tel__bilan {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
}

.vdr-tel__alerte {
    background: #fdf2e9;
    color: #9a3412;
}

.vdr-tel__reprendre {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 0.75rem;
    border-radius: 0.625rem;
    background: #9a3412;
    color: #ffffff;
    font-size: 1.0625rem;
    font-weight: 700;
}

.vdr-tel__encours {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #f4f8fb;
    color: #0a1f33;
}

.vdr-tel__roue {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.vdr-tel__bilan {
    background: #eaf4ee;
    color: #2d6a4f;
    font-weight: 600;
}

.vdr-tel__poids {
    display: block;
    font-weight: 400;
}

.vdr-tel__liste {
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.vdr-tel__photo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
}

.vdr-tel__vignette {
    flex: none;
    width: 4rem;
    height: 4rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--gray-100);
}

/* La vignette d'une ligne est un aperçu : recadrée au carré, elle n'est jamais la
   photo publiée, dont le site garde les proportions. */
.vdr-tel__vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vdr-tel__texte {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.vdr-tel__nom {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vdr-tel__statut,
.vdr-tel__avertissement {
    font-size: 0.8125rem;
    color: #5a6c7d;
}

.vdr-tel__photo--enligne .vdr-tel__statut {
    color: #2d6a4f;
    font-weight: 700;
}

.vdr-tel__photo--refusee .vdr-tel__statut,
.vdr-tel__avertissement {
    color: #9a3412;
}

.vdr-tel__photo--retiree {
    opacity: 0.6;
}

.vdr-tel__jauge {
    display: block;
    height: 0.25rem;
    margin-top: 0.25rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--gray-200);
}

.vdr-tel__jauge span {
    display: block;
    height: 100%;
    background: var(--primary-500);
}

.vdr-tel__retirer {
    flex: none;
    min-width: 5.5rem;
    min-height: 3rem;
    padding: 0 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.625rem;
    color: #0a1f33;
    font-size: 0.9375rem;
    font-weight: 600;
}

.vdr-tel__retirer--confirmer {
    border-color: #9a3412;
    background: #9a3412;
    color: #ffffff;
}

.vdr-tel__liens {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.9375rem;
}

.vdr-tel__liens a {
    color: #2c5f7f;
    font-weight: 600;
    text-decoration: underline;
}

.dark .vdr-tel__nom,
.dark .vdr-tel__retirer {
    color: #f4f8fb;
}

.dark .vdr-tel__statut {
    color: var(--gray-400);
}

.dark .vdr-tel__liens a {
    color: #9cc3dc;
}