/*
 * Couleur principale choisie par l'utilisateur (« Mon profil ») : le <body> porte --ap-principale, sa version RVB et
 * la couleur de texte lisible dessus ; Bootstrap et ses composants « primary » en dérivent ici leurs teintes.
 */
[data-apparence-principale] {
    --bs-primary: var(--ap-principale);
    --bs-primary-rgb: var(--ap-principale-rgb);
    --bs-link-color: var(--ap-principale);
    --bs-link-color-rgb: var(--ap-principale-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--ap-principale) 80%, #000);
    --bs-link-hover-color-rgb: var(--ap-principale-rgb);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--ap-principale) 60%, #000);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--ap-principale) 15%, #fff);
    --bs-primary-border-subtle: color-mix(in srgb, var(--ap-principale) 40%, #fff);
    --bs-focus-ring-color: rgba(var(--ap-principale-rgb), 0.25);
}

[data-apparence-principale][data-bs-theme=dark] {
    --bs-link-color: color-mix(in srgb, var(--ap-principale) 65%, #fff);
    --bs-link-hover-color: color-mix(in srgb, var(--ap-principale) 50%, #fff);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--ap-principale) 60%, #fff);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--ap-principale) 20%, #000);
    --bs-primary-border-subtle: color-mix(in srgb, var(--ap-principale) 60%, #000);
}

[data-apparence-principale] .btn-primary {
    --bs-btn-color: var(--ap-principale-texte);
    --bs-btn-bg: var(--ap-principale);
    --bs-btn-border-color: var(--ap-principale);
    --bs-btn-hover-color: var(--ap-principale-texte);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ap-principale) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ap-principale) 80%, #000);
    --bs-btn-active-color: var(--ap-principale-texte);
    --bs-btn-active-bg: color-mix(in srgb, var(--ap-principale) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ap-principale) 75%, #000);
    --bs-btn-disabled-color: var(--ap-principale-texte);
    --bs-btn-disabled-bg: var(--ap-principale);
    --bs-btn-disabled-border-color: var(--ap-principale);
    --bs-btn-focus-shadow-rgb: var(--ap-principale-rgb);
}

[data-apparence-principale] .btn-outline-primary {
    --bs-btn-color: var(--ap-principale);
    --bs-btn-border-color: var(--ap-principale);
    --bs-btn-hover-color: var(--ap-principale-texte);
    --bs-btn-hover-bg: var(--ap-principale);
    --bs-btn-hover-border-color: var(--ap-principale);
    --bs-btn-active-color: var(--ap-principale-texte);
    --bs-btn-active-bg: var(--ap-principale);
    --bs-btn-active-border-color: var(--ap-principale);
    --bs-btn-disabled-color: var(--ap-principale);
    --bs-btn-disabled-border-color: var(--ap-principale);
    --bs-btn-focus-shadow-rgb: var(--ap-principale-rgb);
}

[data-apparence-principale] .nav-pills {
    --bs-nav-pills-link-active-color: var(--ap-principale-texte);
    --bs-nav-pills-link-active-bg: var(--ap-principale);
}

[data-apparence-principale] .pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--ap-principale-rgb), 0.25);
    --bs-pagination-active-color: var(--ap-principale-texte);
    --bs-pagination-active-bg: var(--ap-principale);
    --bs-pagination-active-border-color: var(--ap-principale);
}

[data-apparence-principale] .list-group {
    --bs-list-group-active-color: var(--ap-principale-texte);
    --bs-list-group-active-bg: var(--ap-principale);
    --bs-list-group-active-border-color: var(--ap-principale);
}

[data-apparence-principale] .dropdown-menu {
    --bs-dropdown-link-active-color: var(--ap-principale-texte);
    --bs-dropdown-link-active-bg: var(--ap-principale);
}

[data-apparence-principale] .progress {
    --bs-progress-bar-bg: var(--ap-principale);
}

[data-apparence-principale] .text-bg-primary {
    color: var(--ap-principale-texte) !important;
}

[data-apparence-principale] .form-check-input:checked {
    background-color: var(--ap-principale);
    border-color: var(--ap-principale);
}

[data-apparence-principale] .form-control:focus,
[data-apparence-principale] .form-select:focus,
[data-apparence-principale] .form-check-input:focus {
    border-color: color-mix(in srgb, var(--ap-principale) 50%, #fff);
    box-shadow: 0 0 0 0.25rem rgba(var(--ap-principale-rgb), 0.25);
}

/*
 * Couleur principale en dégradé (--ap-principale-fond) : boutons pleins, entrée active des menus et listes, badges et
 * barre de Sésame. Le survol assombrit le dégradé au lieu de le remplacer par une couleur unie.
 */
[data-apparence-degrade] .btn-primary,
[data-apparence-degrade] .nav-pills .nav-link.active,
[data-apparence-degrade] .list-group-item.active,
[data-apparence-degrade] .dropdown-item.active,
[data-apparence-degrade] .page-item.active .page-link,
[data-apparence-degrade] .text-bg-primary,
[data-apparence-degrade] .bg-primary,
[data-apparence-degrade] .progress-bar {
    background-image: var(--ap-principale-fond);
}

[data-apparence-degrade] .btn-primary {
    border-color: transparent;
}

[data-apparence-degrade] .btn-primary:hover,
[data-apparence-degrade] .btn-primary:active {
    filter: brightness(0.9);
}

/*
 * Fond de page choisi (--ap-fond) : la page en prend la couleur ; cartes, menu et champs s'en détachent légèrement
 * (plus clairs en mode sombre, blancs en mode clair).
 */
[data-apparence-fond] {
    --bs-tertiary-bg: var(--ap-fond);
}

body[data-apparence-fond] {
    background-color: var(--ap-fond) !important;
}

[data-apparence-fond][data-bs-theme=dark] {
    --bs-body-bg: color-mix(in srgb, var(--ap-fond) 93%, #fff);
    --bs-secondary-bg: color-mix(in srgb, var(--ap-fond) 85%, #fff);
    --bs-border-color: color-mix(in srgb, var(--ap-fond) 78%, #fff);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
}

/* bg-body passe par --bs-body-bg-rgb, que color-mix() ne peut pas fournir : même teinte que les cartes. */
[data-apparence-fond] .bg-body {
    background-color: var(--bs-body-bg) !important;
}

[data-apparence-fond][data-bs-theme=light] {
    --bs-secondary-bg: color-mix(in srgb, var(--ap-fond) 85%, #000);
}

/* Liseré de la couleur principale (ou de son dégradé) sous la barre du haut. */
.apparence-lisere {
    border-bottom: 2px solid var(--bs-primary);
}

[data-apparence-degrade] .apparence-lisere {
    border-image: var(--ap-principale-fond) 1;
}

/* Vignettes des thèmes prêts à l'emploi (« Mon profil »). */
.apparence-theme {
    display: flex;
    flex-direction: column;
    width: 7.5rem;
    padding: 0;
    overflow: hidden;
    text-align: left;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.apparence-theme:hover,
.apparence-theme:focus-visible {
    border-color: var(--bs-primary);
}

.apparence-theme-entete {
    height: 0.9rem;
}

.apparence-theme-page {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 2.75rem;
    padding: 0.35rem;
}

.apparence-theme-bouton {
    width: 1.8rem;
    height: 0.7rem;
    border-radius: 0.2rem;
}

.apparence-theme-nom {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}

/* Pastilles des couleurs proposées dans « Mon profil ». */
.apparence-pastille {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    padding: 0;
}

.apparence-pastille-degrade {
    width: 3rem;
    border-radius: 1rem;
}

.apparence-pastille:hover,
.apparence-pastille:focus-visible {
    transform: scale(1.12);
}

.apparence-couleur {
    width: 3.5rem;
    height: 2.25rem;
    padding: 0.2rem;
}

/* Menu latéral d'Agora : libellés espacés de leur icône ; sur écran large, menu fixe à gauche, réductible aux icônes. */
.agora-menu .nav-link .libelle {
    margin-left: 0.5rem;
}

.agora-menu .separateur-module {
    display: none;
}

.agora-contenu {
    min-width: 0;
}

@media (min-width: 992px) {
    .agora-menu {
        width: 15rem;
        flex-shrink: 0;
        min-height: calc(100vh - 3.5rem);
        transition: width 0.15s ease-in-out;
    }

    .menu-reduit .agora-menu {
        width: 4.25rem;
    }

    .menu-reduit .agora-menu .libelle,
    .menu-reduit .agora-menu .titre-module {
        display: none;
    }

    .menu-reduit .agora-menu .separateur-module {
        display: block;
    }

    .menu-reduit .agora-menu .nav-link {
        text-align: center;
        font-size: 1.15rem;
    }

    .menu-reduit .agora-menu .agora-menu-bascule {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agora-menu {
        transition: none;
    }
}

/* Flotte : zone de dépôt de la facture d'une intervention, champs pré-remplis par sa lecture. */
.facture-zone {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    background: var(--bs-tertiary-bg);
    transition: border-color 0.15s, background-color 0.15s;
}

.facture-zone:hover,
.facture-zone-survol {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.facture-champ-rempli {
    background-color: var(--bs-success-bg-subtle);
}

/* Flotte : signature dessinée à l'écran (fiche de remise / restitution). */
.signature-canevas {
    display: block;
    width: 100%;
    height: 10rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

.signature-remplie .signature-canevas {
    border-style: solid;
    border-color: var(--bs-success);
}

.signature-image {
    max-width: 100%;
    max-height: 7rem;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
/* Flotte : schéma du véhicule de l'état des lieux (zones colorées selon leur état). */
.schema-cadre {
    max-width: 13rem;
    margin: 0 auto;
}

.schema-cadre svg {
    display: block;
    width: 100%;
    height: auto;
}

.schema-zone {
    cursor: pointer;
    transition: opacity .15s;
}

.schema-zone:hover {
    opacity: .85;
}

.schema-zone:focus {
    outline: none;
}

.schema-zone:focus-visible,
.schema-zone-active {
    stroke: var(--bs-primary);
    stroke-width: 4;
}

.schema-pastille {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .35rem;
    border-radius: .2rem;
    background: var(--couleur-zone, #8b96a8);
    vertical-align: -.05rem;
}

.schema-zone-bouton {
    border: 2px solid var(--couleur-zone, #8b96a8);
}

.schema-zone-bouton.schema-zone-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem var(--bs-primary-bg-subtle);
}

.schema-etat.active {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}

.schema-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
}
.schema-photo-manquante {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 3;
    text-align: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}