/* ============================================================
   Siteo — flat design moderne (inspiration Material)
   Encre #101C36 · Cobalt #2E5BFF · Corail #FF6B4A · Papier #F6F7FB
   Titres : Bricolage Grotesque · Texte : Figtree
   ============================================================ */

:root {
    --siteo-encre: #101C36;
    --siteo-encre-2: #182747;
    --siteo-cobalt: #2E5BFF;
    --siteo-cobalt-fonce: #1E46DB;
    --siteo-cobalt-teinte: #EDF1FF;
    --siteo-corail: #FF6B4A;
    --siteo-corail-teinte: #FFF0EC;
    --siteo-vert: #12B76A;
    --siteo-vert-teinte: #E8F8F0;
    --siteo-ambre: #F79009;
    --siteo-ambre-teinte: #FEF4E6;
    --siteo-violet: #7A5AF8;
    --siteo-violet-teinte: #F1EEFE;
    --siteo-papier: #F6F7FB;
    --siteo-surface: #FFFFFF;
    --siteo-bordure: #E6E9F0;
    --siteo-texte: #101C36;
    --siteo-texte-2: #5A6A85;
    --siteo-erreur: #E5484D;
    --police-titres: 'Bricolage Grotesque', 'Figtree', 'Segoe UI', sans-serif;
    --police-texte: 'Figtree', 'Segoe UI', sans-serif;
}

html, body {
    margin: 0;
    font-family: var(--police-texte);
    background: var(--siteo-papier);
    color: var(--siteo-texte);
}

/* ============ Layout applicatif ============ */

.barre-app.mud-appbar {
    border-bottom: 1px solid var(--siteo-bordure);
}

.cadre-contenu {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 32px 48px;
}

/* Bloc utilisateur (barre du haut) */
.bloc-utilisateur {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 12px;
}

.avatar-utilisateur {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--siteo-cobalt-teinte);
    color: var(--siteo-cobalt);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
}

.infos-utilisateur {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.nom-utilisateur {
    font-weight: 600;
    font-size: .875rem;
    color: var(--siteo-texte);
}

.role-utilisateur {
    font-size: .72rem;
    color: var(--siteo-texte-2);
}

/* ============ Tiroir de navigation (encre) ============ */

.tiroir-nav .mud-drawer-content {
    display: flex;
    flex-direction: column;
}

.marque {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
}

.marque-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--siteo-cobalt);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--police-titres);
    font-weight: 800;
    font-size: 1.25rem;
}

.marque-nom {
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    letter-spacing: -.01em;
}

.marque-sous {
    font-size: .72rem;
    color: #8FA0BF;
    margin-top: 1px;
}

.section-nav {
    padding: 18px 24px 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6B7FA3;
}

.menu-nav .mud-nav-link {
    margin: 2px 12px;
    border-radius: 10px;
    padding: 10px 12px;
    color: #C9D2E3;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.menu-nav .mud-nav-link .mud-icon-root {
    color: #8FA0BF;
    font-size: 1.25rem;
    transition: color .15s ease;
}

.tiroir-nav .menu-nav .mud-nav-link:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff;
}

.tiroir-nav .menu-nav .mud-nav-link:hover .mud-icon-root {
    color: #C9D2E3;
}

.tiroir-nav .menu-nav .mud-nav-link.active {
    background: var(--siteo-cobalt) !important;
    color: #fff !important;
}

.tiroir-nav .menu-nav .mud-nav-link.active .mud-icon-root {
    color: #fff !important;
}

/* ============ En-tête d'écran ============ */

.entete-ecran {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.entete-titre {
    margin: 0;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.entete-sous-titre {
    margin: 4px 0 0;
    color: var(--siteo-texte-2);
    font-size: .9rem;
}

.entete-actions {
    display: flex;
    gap: 10px;
}

/* ============ Cartes statistiques ============ */

.carte-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--siteo-surface);
    border: 1px solid var(--siteo-bordure);
    border-radius: 14px;
    padding: 18px;
    height: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease, transform .15s ease;
}

.carte-stat:hover {
    border-color: #CBD5E8;
}

.carte-stat-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carte-stat-icone .mud-icon-root {
    font-size: 1.35rem;
}

.teinte-cobalt { background: var(--siteo-cobalt-teinte); color: var(--siteo-cobalt); }
.teinte-corail { background: var(--siteo-corail-teinte); color: var(--siteo-corail); }
.teinte-vert   { background: var(--siteo-vert-teinte);   color: var(--siteo-vert); }
.teinte-ambre  { background: var(--siteo-ambre-teinte);  color: var(--siteo-ambre); }
.teinte-violet { background: var(--siteo-violet-teinte); color: var(--siteo-violet); }

.carte-stat-libelle {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--siteo-texte-2);
}

.carte-stat-valeur {
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: -.02em;
    margin-top: 2px;
}

/* ============ Fiche prospect ============ */

.ligne-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}

.ligne-info .mud-icon-root {
    color: var(--siteo-texte-2);
    margin-top: 2px;
}

/* Petits boutons de liens externes, poussés à droite de la ligne. */
.ligne-info .liens-externes {
    margin-left: auto;
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.ligne-info .liens-externes .mud-icon-button {
    padding: 4px;
}

.ligne-info .liens-externes .mud-icon-root {
    font-size: 1.05rem;
    color: var(--siteo-cobalt);
    margin-top: 0;
}

/* ============ Éditeur de devis ============ */

.ligne-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid var(--siteo-bordure);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: border-color .15s ease, background-color .15s ease;
}

.ligne-option-active {
    border-color: var(--siteo-cobalt);
    background: var(--siteo-cobalt-teinte);
}

.carte-total {
    position: sticky;
    top: 84px;
}

.ligne-total {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--siteo-bordure);
    font-size: .95rem;
}

.texte-cobalt {
    color: var(--siteo-cobalt);
}

.texte-negatif {
    color: var(--siteo-erreur);
}

/* ============ Tableau de bord admin (phase 6) ============ */

.grille-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.bordure-chaude {
    border-color: var(--siteo-ambre) !important;
    background: var(--siteo-ambre-teinte);
}

.noeud-arbre {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}

.noeud-arbre-2 {
    padding-left: 28px;
}

.ligne-moi td {
    background: var(--siteo-cobalt-teinte);
    font-weight: 600;
}

/* Tables ouvrables au double-clic : curseur main et pas de sélection de texte parasite. */
.lignes-cliquables tbody tr {
    cursor: pointer;
}

.lignes-cliquables tbody td {
    user-select: none;
}

/* ============ Menu notifications ============ */

.bouton-cloche {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--siteo-texte-2);
    transition: background-color .15s ease;
}

.bouton-cloche:hover {
    background: rgba(16, 28, 54, .06);
}


.menu-notifications {
    min-width: 340px;
    max-width: 420px;
}

.entete-notifications {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
    border-bottom: 1px solid var(--siteo-bordure);
}

.item-notification.non-lue {
    background: var(--siteo-cobalt-teinte);
}

/* ============ Surfaces plates (MudBlazor) ============ */

/* Cartes et tableaux : bordure fine plutôt qu'ombre. */
.mud-main-content .mud-paper:not(.mud-menu-list):not(.mud-popover) {
    border: 1px solid var(--siteo-bordure);
    border-radius: 14px;
}

.mud-popover .mud-paper,
.mud-popover.mud-paper {
    border: 1px solid var(--siteo-bordure);
}

.mud-dialog {
    border-radius: 16px;
    border: 1px solid var(--siteo-bordure);
}

.mud-dialog .mud-dialog-title {
    font-family: var(--police-titres);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Tableaux : le conteneur MudTable n'est pas un mud-paper, on lui donne sa bordure plate. */
.mud-main-content .mud-table {
    overflow: hidden;
    border: 1px solid var(--siteo-bordure);
    border-radius: 14px;
    background: var(--siteo-surface);
}

.mud-table .mud-table-head th {
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--siteo-texte-2) !important;
    background: #FAFBFE;
    border-bottom: 1px solid var(--siteo-bordure);
}

.mud-table .mud-table-body tr:hover td {
    background: #F7F9FF;
}

.mud-table .mud-table-body td {
    border-color: #EDF0F6;
}

.mud-table .mud-toolbar {
    border-bottom: 1px solid var(--siteo-bordure);
}

/* Alertes plates */
.mud-alert {
    border-radius: 12px;
}

/* ============ Pages d'authentification (écran scindé) ============ */

.scene-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, 44%) 1fr;
}

.panneau-auth {
    position: relative;
    overflow: hidden;
    background: var(--siteo-encre);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
}

.panneau-auth-haut {
    position: relative;
    z-index: 1;
    max-width: 460px;
}

.marque-auth {
    padding: 0;
    margin-bottom: 56px;
}

.panneau-auth-titre {
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 14px;
}

.panneau-auth-texte {
    color: #AAB8D4;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 32px;
}

.points-auth {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.points-auth li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #D5DDEC;
    font-size: .92rem;
}

.point-puce {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--siteo-corail);
    transform: translateY(-1px);
}

.panneau-auth-pied {
    position: relative;
    z-index: 1;
    color: #6B7FA3;
    font-size: .78rem;
}

/* Formes géométriques plates du panneau */
.forme-auth {
    position: absolute;
    border-radius: 28%;
    pointer-events: none;
}

.forme-auth-1 {
    width: 420px;
    height: 420px;
    right: -160px;
    bottom: -180px;
    background: var(--siteo-encre-2);
    transform: rotate(18deg);
}

.forme-auth-2 {
    width: 200px;
    height: 200px;
    right: 40px;
    bottom: 140px;
    background: var(--siteo-cobalt);
    opacity: .16;
    transform: rotate(-12deg);
}

.zone-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--siteo-papier);
    padding: 32px 24px;
}

.carte-auth {
    width: 100%;
    max-width: 420px;
    background: var(--siteo-surface);
    border: 1px solid var(--siteo-bordure);
    border-radius: 16px;
    padding: 2.25rem;
    box-sizing: border-box;
}

.titre-auth {
    margin: 0 0 .25rem;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -.02em;
    color: var(--siteo-texte);
}

.sous-titre-auth {
    margin: 0 0 1.5rem;
    color: var(--siteo-texte-2);
    font-size: .92rem;
}

.carte-auth label {
    display: block;
    margin-top: .9rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--siteo-texte);
}

.champ-auth {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .68rem .8rem;
    margin-top: .3rem;
    border: 1px solid var(--siteo-bordure);
    border-radius: 10px;
    font-size: .95rem;
    font-family: var(--police-texte);
    background: #FBFCFE;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.champ-auth:focus {
    outline: none;
    background: #fff;
    border-color: var(--siteo-cobalt);
    box-shadow: 0 0 0 3px rgba(46, 91, 255, .14);
}

.case-auth {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    cursor: pointer;
    font-weight: 500 !important;
    color: var(--siteo-texte-2) !important;
}

.case-auth input {
    accent-color: var(--siteo-cobalt);
    width: 15px;
    height: 15px;
}

.btn-auth {
    width: 100%;
    margin-top: 1.4rem;
    padding: .72rem;
    background: var(--siteo-cobalt);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
    font-family: var(--police-texte);
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}

.btn-auth:hover {
    background: var(--siteo-cobalt-fonce);
}

.btn-auth:active {
    transform: translateY(1px);
}

.erreur-auth {
    background: #FDECEA;
    color: #B71C1C;
    padding: .6rem .8rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .88rem;
}

.info-auth {
    background: var(--siteo-cobalt-teinte);
    color: #1E3FAE;
    padding: .6rem .8rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    font-size: .88rem;
}

.validation-message {
    display: block;
    color: var(--siteo-erreur);
    font-size: .78rem;
    font-weight: 500;
    margin-top: .3rem;
}

@media (max-width: 900px) {
    .scene-auth {
        grid-template-columns: 1fr;
    }

    .panneau-auth {
        display: none;
    }
}

/* ============ UI d'erreur Blazor ============ */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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