/* Charte Caréco : noir, rouge #E51B1B, blanc. */
:root {
    --careco-rouge: #E51B1B;
    --careco-rouge-fonce: #B81414;
    --careco-noir: #0B0B0B;
    --careco-gris: #F4F4F4;
    --bs-primary: #E51B1B;
    --bs-primary-rgb: 229, 27, 27;
    --bs-link-color: #E51B1B;
    --bs-link-color-rgb: 229, 27, 27;
    --bs-link-hover-color: #B81414;
    --bs-link-hover-color-rgb: 184, 20, 20;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--careco-noir);
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--careco-rouge);
}

.btn-primary {
    --bs-btn-bg: var(--careco-rouge);
    --bs-btn-border-color: var(--careco-rouge);
    --bs-btn-hover-bg: var(--careco-rouge-fonce);
    --bs-btn-hover-border-color: var(--careco-rouge-fonce);
    --bs-btn-active-bg: var(--careco-rouge-fonce);
    --bs-btn-active-border-color: var(--careco-rouge-fonce);
    --bs-btn-disabled-bg: var(--careco-rouge);
    --bs-btn-disabled-border-color: var(--careco-rouge);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(229, 27, 27, 0.55);
}

.form-control:focus {
    border-color: var(--careco-rouge);
}

.form-check-input:checked {
    background-color: var(--careco-rouge);
    border-color: var(--careco-rouge);
}

.table thead th {
    border-bottom: 2px solid var(--careco-noir);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--careco-rouge);
}

.validation-message {
    color: var(--careco-rouge);
}

.blazor-error-boundary {
    background: var(--careco-rouge-fonce);
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Une erreur est survenue."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Bandeau d'erreur Blazor : masqué par défaut sur toutes les mises en page (connexion, impression comprises). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.6rem 1.25rem;
    background: #fff4e5;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ---------- Notifications de messages clients ---------- */
.alerte-messages {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alerte-messages-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #555;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

    .alerte-messages-lien.a-lire { color: var(--careco-noir); }

.alerte-pastille {
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 0.7rem;
    background: var(--careco-rouge);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4rem;
    text-align: center;
    animation: pastille 1.2s ease-in-out 2;
}

@keyframes pastille {
    50% { transform: scale(1.25); }
}

.alerte-activer { font-size: 0.8rem; }

.alerte-toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(360px, calc(100vw - 2rem));
}

.alerte-toast {
    position: relative;
    background: var(--careco-noir);
    color: #fff;
    padding: 0.75rem 2rem 0.75rem 1rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 4px 0 0 var(--careco-rouge);
    font-size: 0.9rem;
}

    .alerte-toast a { color: #ff8a8a; font-weight: 700; }

.alerte-toast-titre { font-weight: 800; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; color: #ff8a8a; }
.alerte-toast-client { font-weight: 700; }
.alerte-toast-texte { margin: 0.25rem 0 0.4rem; opacity: 0.9; }

.alerte-toast-fermer {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

/* ---------- Photo type du véhicule (TecDoc) ---------- */
.image-vehicule {
    display: block;
    object-fit: contain;
    background: #fff;
}

.image-vehicule-vignette { width: 72px; height: 36px; }
.image-vehicule-moyenne { width: 100%; max-width: 220px; height: auto; margin-top: 0.4rem; }
.image-vehicule-grande { width: 100%; max-width: 360px; height: auto; margin: 0.5rem auto 0; }

.cellule-vehicule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Administration ---------- */
.admin-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.admin-tuile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #dcdcdc;
    border-left: 4px solid var(--careco-noir);
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
}

    .admin-tuile:hover {
        border-left-color: var(--careco-rouge);
        background: var(--careco-gris);
        color: #333;
    }

.admin-tuile-titre {
    color: var(--careco-noir);
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.admin-cases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.25rem 1rem;
}

/* ---------- Saisie d'une demande ---------- */
.saisie-etapes {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .saisie-etapes button {
        border: 0;
        background: var(--careco-gris);
        color: #666;
        padding: 0.45rem 0.9rem;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
    }

    .saisie-etapes li.faite button {
        color: var(--careco-noir);
    }

    .saisie-etapes li.active button {
        background: var(--careco-noir);
        color: #fff;
        box-shadow: inset 0 -3px 0 var(--careco-rouge);
    }

.saisie-script {
    background: var(--careco-gris);
    border-left: 4px solid var(--careco-rouge);
    padding: 0.75rem 1rem;
    font-style: italic;
    max-width: 900px;
}

.saisie-client-choisi {
    background: #e9f6ec;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
}

.saisie-vehicule-trouve {
    display: flex;
    flex-direction: column;
    background: #e9f6ec;
    border-left: 4px solid #2e7d32;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
}

.saisie-tecdoc {
    margin-top: 0.2rem;
    color: #444;
}

.saisie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e3e3e3;
}

.saisie-confirmation {
    max-width: 640px;
    margin: 2rem auto;
    text-align: center;
}

.saisie-numero {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.5rem 2rem;
    background: var(--careco-noir);
    color: #fff;
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: inset 0 -6px 0 var(--careco-rouge);
}

/* ---------- Statuts (couleurs reprises du module actuel) ---------- */
.statut {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
}

    .statut::before {
        content: "";
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        background: currentColor;
    }

.statut-incomplete { color: #7b1fa2; }
.statut-a_rechercher { color: #111; }
.statut-a_rappeler { color: #1565c0; }
.statut-client_contacte { color: #b8860b; }
.statut-acompte_demande { color: #1e40ff; }
.statut-validee { color: #e68a00; }
.statut-a_preparer { color: #8b2c2c; }
.statut-terminee { color: #2e7d32; }
.statut-refusee { color: var(--careco-rouge); }

.badge-urgent {
    background: var(--careco-rouge);
    color: #fff;
    letter-spacing: 0.04em;
}

.ligne-cliquable {
    cursor: pointer;
}

/* ---------- Ma file ---------- */
.ma-file-tuile {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--careco-noir);
    color: #fff;
    text-decoration: none;
    box-shadow: inset 4px 0 0 var(--careco-rouge);
}

    .ma-file-tuile:hover { color: #fff; background: #222; }

.ma-file-nombre {
    font-size: 2rem;
    font-weight: 800;
}

/* ---------- Fiche demande ---------- */
.fiche-bloc {
    border: 1px solid #e0e0e0;
    padding: 0.75rem 1rem;
    height: 100%;
}

.fiche-bloc-titre {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #777;
    margin-bottom: 0.35rem;
}

.fiche-commentaire {
    background: var(--careco-gris);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    height: 100%;
}

.fiche-main {
    background: #fff4e5;
    border-left: 4px solid #e68a00;
    padding: 0.5rem 0.9rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

    .fiche-main.moi {
        background: #e9f6ec;
        border-left-color: #2e7d32;
    }

.fiche-lignes th {
    font-size: 0.8rem;
    white-space: nowrap;
}

.dispo-oui { background-color: #e9f6ec; }
.dispo-non { background-color: #fdeaea; }

.fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fiche-histo {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

    .fiche-histo li {
        padding: 0.3rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

/* ---------- Photos ---------- */
.photos-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    max-width: 900px;
    min-height: 110px;
    margin-bottom: 1rem;
    border: 2px dashed #b5b5b5;
    background: var(--careco-gris);
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

    .photos-zone:hover, .photos-zone:focus-within, .photos-zone:has(.photos-input:active) {
        border-color: var(--careco-rouge);
        background: #fff5f5;
    }

    .photos-zone.en-cours {
        border-color: var(--careco-noir);
        opacity: 0.7;
    }

/* Le champ fichier couvre toute la zone : on peut y déposer ou cliquer. */
.photos-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.photos-zone-texte {
    font-weight: 700;
    pointer-events: none;
}

.photos-zone-aide {
    font-size: 0.8rem;
    color: #777;
    pointer-events: none;
}

.photos-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
    max-width: 1100px;
}

.photo {
    margin: 0;
    border: 1px solid #e0e0e0;
    background: #fff;
}

    .photo img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        background: #111;
    }

    .photo figcaption {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }

.fiche-total {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    max-width: 1100px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    background: var(--careco-noir);
    color: #fff;
}

    .fiche-total .text-success { color: #8fe3a1 !important; }

.fiche-devis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    max-width: 1100px;
}

@media (max-width: 991.98px) {
    .fiche-devis { grid-template-columns: 1fr; }
}

.fiche-devis-lien, .fiche-discussion {
    border: 1px solid #e0e0e0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.fiche-discussion {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 520px;
    overflow-y: auto;
}

.fiche-message { max-width: 85%; padding: 0.45rem 0.7rem; }
    .fiche-message.client { align-self: flex-start; background: var(--careco-gris); border-left: 4px solid var(--careco-noir); }
    .fiche-message.equipe { align-self: flex-end; background: #fdeaea; }
.fiche-message-texte { white-space: pre-wrap; }
.fiche-message-info { font-size: 0.75rem; color: #777; }

/* ---------- Impression ---------- */
.impression {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.5rem;
    font-size: 0.95rem;
}

.impression-barre {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.impression-entete {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 4px solid var(--careco-rouge);
}

    .impression-entete img { width: 64px; height: 64px; }

.impression-marque {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.impression-numero {
    font-size: 1.3rem;
    font-weight: 800;
}

.impression-blocs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.25rem 0;
}

    .impression-blocs h2 {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #777;
        margin-bottom: 0.3rem;
    }

.impression-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

    .impression-table th, .impression-table td {
        padding: 0.35rem 0.4rem;
        border-bottom: 1px solid #ddd;
        vertical-align: top;
    }

    .impression-table thead th {
        border-bottom: 2px solid #000;
        font-size: 0.8rem;
        text-transform: uppercase;
    }

    .impression-table tfoot td { border-bottom: 0; }
    .impression-table tr.barre td { text-decoration: line-through; color: #888; }

.impression-pied {
    margin-top: 2rem;
    font-weight: 700;
    color: var(--careco-rouge);
}

@media print {
    .no-print { display: none !important; }
    .impression { padding: 0; max-width: none; }
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Devis en ligne (page publique, sur téléphone d'abord) ---------- */
.devis {
    min-height: 100vh;
    background: var(--careco-gris);
}

.devis-entete {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--careco-noir);
    color: #fff;
    border-bottom: 4px solid var(--careco-rouge);
}

    .devis-entete img { width: 44px; height: 44px; background: #fff; }

.devis-marque { font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; line-height: 1; }
.devis-slogan { font-size: 0.8rem; opacity: 0.8; }

.devis-corps {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

    .devis-corps h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
    .devis-corps h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 1.75rem 0 0.75rem; }

.devis-sur-titre { color: var(--careco-rouge); font-weight: 800; text-transform: uppercase; margin: 0; font-size: 0.85rem; }
.devis-vehicule { color: #555; }

.devis-etat { background: #fff; border-left: 4px solid #777; padding: 0.6rem 0.9rem; margin: 0.75rem 0; font-weight: 700; }
    .devis-etat.ok { border-left-color: #2e7d32; color: #2e7d32; }

.devis-lignes { list-style: none; padding: 0; margin: 1rem 0 0; }

    .devis-lignes li {
        background: #fff;
        padding: 0.8rem 1rem;
        margin-bottom: 0.5rem;
        border-left: 4px solid var(--careco-noir);
    }

        .devis-lignes li.indispo { opacity: 0.6; border-left-color: #bbb; }

.devis-ligne-haut { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
.devis-prix { white-space: nowrap; font-size: 1.1rem; }
.devis-ligne-bas { font-size: 0.85rem; color: #666; margin-top: 0.2rem; }
    .devis-ligne-bas .dispo { color: #2e7d32; font-weight: 700; }
.devis-question { margin-top: 0.4rem; font-size: 0.9rem; background: #fff4e5; padding: 0.35rem 0.5rem; }

.devis-total {
    background: var(--careco-noir);
    color: #fff;
    padding: 0.9rem 1rem;
    margin-top: 0.75rem;
}

    .devis-total > div { display: flex; justify-content: space-between; font-size: 1.1rem; }
    .devis-total strong { font-size: 1.25rem; }

.devis-acompte { margin: 0.5rem 0 0; font-size: 0.9rem; opacity: 0.9; }

.devis-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
    .devis-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #111; }

.devis-messages { display: flex; flex-direction: column; gap: 0.5rem; }
.devis-vide { color: #666; }

.devis-message { max-width: 85%; padding: 0.55rem 0.8rem; }
    .devis-message.client { align-self: flex-end; background: var(--careco-noir); color: #fff; }
    .devis-message.equipe { align-self: flex-start; background: #fff; border-left: 4px solid var(--careco-rouge); }
.devis-message-texte { white-space: pre-wrap; }
.devis-message-info { font-size: 0.75rem; opacity: 0.7; margin-top: 0.2rem; }

.devis-saisie { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

    .devis-saisie textarea {
        width: 100%;
        border: 1px solid #ccc;
        padding: 0.6rem;
        font-size: 1rem;
    }

    .devis-saisie button {
        align-self: flex-end;
        border: 0;
        background: var(--careco-rouge);
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        padding: 0.6rem 1.5rem;
    }

        .devis-saisie button:disabled { opacity: 0.5; }

.devis-erreur { color: var(--careco-rouge); font-weight: 700; }

.devis-info-retour {
    background: #fff;
    border-left: 4px solid var(--careco-rouge);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
}

.devis-envoye {
    background: #e9f6ec;
    color: #1b5e20;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
}
.devis-pied { margin-top: 2rem; font-size: 0.85rem; color: #666; }

/* ---------- Page de connexion ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    background: var(--careco-noir);
}

.login-visuel {
    flex: 1.3;
    position: relative;
    overflow: hidden;
    background: #000 url("img/careco-voiture-particules.webp") center 40% / cover no-repeat;
}

.login-losange {
    position: absolute;
    width: min(46%, 52vh);
    aspect-ratio: 1;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 3px solid var(--careco-rouge);
}

.login-slogan {
    position: absolute;
    left: 2.5rem;
    bottom: 2rem;
    margin: 0;
    z-index: 1;
    color: white;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.02;
}

.login-panneau {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: white;
}

.login-carte {
    width: 100%;
    max-width: 380px;
}

.login-icone {
    width: 96px;
    height: 96px;
    margin-left: -24px;
    margin-bottom: -12px;
}

.login-titre {
    margin: 0.5rem 0 0;
    font-size: 2rem;
    text-transform: uppercase;
}

.login-sous-titre {
    color: #6b6b6b;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .login-visuel {
        display: none;
    }
}