/* ==========================
   Depann'Home Pro v1.0 Foundation
========================== */

:root{
    --primary:#003B73;
    --secondary:#0A5C36;
    --danger:#b42318;
    --bg:#edf2f7;
    --surface:#ffffff;
    --text:#1f2937;
    --muted:#64748b;
    --border:#e5e7eb;
    --shadow:0 8px 18px rgba(0,0,0,.08);
    --shadow-hover:0 14px 30px rgba(0,0,0,.12);
    --radius:18px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Segoe UI,Arial,sans-serif;
    background:linear-gradient(180deg,#f7fafc 0%,var(--bg) 45%,#e7edf5 100%);
    color:var(--text);
    min-height:100vh;
    line-height:1.5;
}

.auth-pending #authRoot{
    visibility:hidden;
}

button,
input,
select,
textarea{
    font:inherit;
}

textarea{
    resize:vertical;
}

/* ==========================
   HEADER
========================== */

.topbar{
    background:var(--surface);
    padding:18px 25px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.header-content{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    gap:22px;
}

.user-session{
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    color:var(--muted);
    font-size:14px;
}

.logout-button{
    border:1px solid var(--border);
    border-radius:10px;
    padding:9px 11px;
    background:var(--surface);
    color:var(--primary);
    cursor:pointer;
    font-weight:700;
}

.logout-button:hover{
    border-color:var(--secondary);
    color:var(--secondary);
}

/* ==========================
   AUTHENTIFICATION
========================== */

.auth-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:28px;
}

.auth-card{
    width:min(100%, 460px);
    padding:30px;
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow-hover);
    display:grid;
    gap:18px;
}

.auth-brand{
    display:flex;
    align-items:center;
    gap:16px;
}

.auth-brand h1{
    color:var(--primary);
    font-size:24px;
}

.auth-brand p{
    color:var(--muted);
}

.auth-logo{
    width:84px;
    height:64px;
    object-fit:contain;
}

.auth-form{
    display:grid;
    gap:14px;
}

.auth-form label{
    display:grid;
    gap:7px;
    color:var(--primary);
    font-weight:700;
}

.auth-form input{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    color:var(--text);
    outline:none;
    font-weight:400;
}

.auth-form input:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.password-input{
    position:relative;
    display:block;
}

.password-input input{
    padding-right:94px;
}

.password-toggle{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    border:0;
    border-radius:8px;
    padding:6px 8px;
    background:#eaf3fb;
    color:var(--primary);
    cursor:pointer;
    font-size:13px;
    font-weight:800;
}

.password-toggle:hover,
.password-toggle:focus-visible{
    background:#d8eadf;
    color:var(--secondary);
    outline:none;
}

.auth-outline-button{
    background:var(--surface);
    border:1px solid var(--secondary);
    color:var(--secondary);
    box-shadow:none;
}

.auth-outline-button:hover{
    color:white;
}

.auth-separator{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:14px;
}

.auth-separator::before,
.auth-separator::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

.auth-message{
    min-height:1.5em;
    color:var(--secondary);
    font-size:14px;
}

.auth-message.error{
    color:var(--danger);
}

.auth-link-button{
    justify-self:start;
    border:none;
    padding:0;
    background:transparent;
    color:var(--primary);
    cursor:pointer;
    font-weight:700;
}

.logo{
    width:min(360px,52vw);
    height:120px;
    object-fit:contain;
}

.topbar h1{
    color:var(--primary);
    font-size:30px;
    font-weight:700;
}

.topbar p{
    color:#666;
    margin-top:4px;
}

/* ==========================
   FIL D'ARIANE
========================== */

#breadcrumb{
    max-width:1200px;
    margin:auto;
    padding:15px 25px;
    color:#666;
    font-size:15px;
}

/* ==========================
   CONTENU
========================== */

#app{
    max-width:1200px;
    margin:auto;
    padding:25px;
    padding-bottom:110px;
}

#search{
    width:100%;
    padding:18px;
    border:none;
    border-radius:16px;
    font-size:17px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    outline:none;
}

#search:focus{
    box-shadow:0 0 0 3px rgba(10,92,54,.18),0 3px 10px rgba(0,0,0,.08);
}

.quick-actions{
    display:flex;
    gap:15px;
    margin:25px 0;
}

.quick-actions button{
    flex:1;
    background:linear-gradient(180deg, var(--primary), #024a8a);
    color:white;
    border:none;
    border-radius:16px;
    padding:16px 18px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow:0 8px 16px rgba(0,59,115,.16);
}

.quick-actions button:hover{
    background:linear-gradient(180deg, var(--secondary), #084c2d);
    transform:translateY(-1px);
    box-shadow:0 12px 20px rgba(0,59,115,.18);
}

.quick-actions button:focus-visible,
.secondary-button:focus-visible,
.nav-button:focus-visible{
    outline:3px solid rgba(10,92,54,.22);
    outline-offset:2px;
}

body.desktop-device #photoBtn,
body.desktop-device #favoritesBtn,
body.desktop-device footer .nav-button:not([data-nav="home"]){
    display:none;
}

.nav-label-messages{
    display:none;
}

body.desktop-device .nav-label-clients{
    display:none;
}

body.desktop-device .nav-label-messages{
    display:inline;
}

.photo-recognition-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:flex-end;
}

.photo-recognition-panel .procedure-section{
    text-align:left;
}

.photo-recognition-preview{
    margin:18px 0;
    padding:16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#f8fbfe;
}

.photo-recognition-preview img{
    width:100%;
    max-height:280px;
    object-fit:contain;
    border-radius:12px;
    display:block;
    background:#fff;
}

.photo-recognition-preview figcaption{
    margin-top:10px;
    color:var(--muted);
    font-size:14px;
}

.photo-recognition-best{
    margin-top:14px;
    padding:16px;
    border-radius:16px;
    background:#eef7f1;
    border:1px solid rgba(10,92,54,.15);
}

.photo-recognition-suggestions{
    margin-top:16px;
    display:grid;
    gap:14px;
}

.photo-recognition-suggestions h4{
    color:var(--primary);
}

.resource-image-link{
    display:grid;
    gap:10px;
    align-items:center;
    text-decoration:none;
    color:inherit;
}

.resource-image-link img{
    width:100%;
    max-width:260px;
    border-radius:12px;
    border:1px solid var(--border);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    object-fit:cover;
    background:#fff;
}

.resource-image-link span{
    color:var(--primary);
    font-weight:600;
}

.section-title{
    color:var(--primary);
    margin-bottom:20px;
}

/* ==========================
   CARTES
========================== */

.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
}

.detail-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

.brand-card{
    background:var(--surface);
    border-radius:var(--radius);
    padding:30px;
    text-align:center;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:.25s;
    border:1px solid rgba(0,59,115,.06);
    min-height:165px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand-card.has-image{
    padding:20px 20px 22px;
}

.brand-card:hover,
.brand-card:focus{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
    outline:none;
}

.brand-card-image{
    width:100%;
    display:block;
    overflow:hidden;
    border-radius:18px;
    margin-bottom:16px;
}

.brand-card-image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}

.card-icon{
    font-size:48px;
    line-height:1;
}

.brand-card-content{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.brand-card.has-image .brand-card-content{
    align-items:flex-start;
}

.brand-card h2{
    margin-top:15px;
    color:var(--primary);
    font-size:22px;
}

.card-subtitle{
    color:var(--muted);
    margin-top:8px;
}

.full-card{
    min-height:0;
    text-align:left;
    cursor:default;
    align-items:stretch;
}

.full-card:hover,
.full-card:focus{
    transform:none;
}

.empty-state{
    grid-column:1/-1;
    background:var(--surface);
    border:1px dashed #9fb4ca;
    border-radius:var(--radius);
    padding:28px;
    color:var(--muted);
    text-align:center;
}

/* ==========================
   FICHES PROCEDURE
========================== */

.procedure-card{
    gap:18px;
}

.procedure-header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}

.eyebrow{
    color:var(--secondary);
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.procedure-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.procedure-meta span{
    background:#eef6ff;
    color:var(--primary);
    border-radius:999px;
    padding:9px 13px;
    font-weight:600;
}

.procedure-section{
    border-top:1px solid var(--border);
    padding-top:18px;
    margin-top:18px;
}

.technical-notice-section{
    background:linear-gradient(180deg, rgba(14,165,233,.06), rgba(16,185,129,.05));
    border:1px solid rgba(14,165,233,.16);
    border-radius:18px;
    padding:18px;
}

.notice-diagram{
    margin:12px 0 0;
    padding:14px 16px;
    border-radius:14px;
    background:#0f172a;
    color:#e2e8f0;
    white-space:pre-wrap;
    word-break:break-word;
    font-size:13px;
    line-height:1.55;
    overflow:auto;
}

.combination-table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.12);
    background:#fff;
}

.combination-table thead th{
    text-align:left;
    padding:12px 14px;
    font-size:13px;
    color:#0f172a;
    background:linear-gradient(180deg, rgba(14,165,233,.12), rgba(16,185,129,.08));
    border-bottom:1px solid rgba(15,23,42,.08);
}

.combination-table tbody td{
    vertical-align:top;
    padding:12px 14px;
    border-bottom:1px solid rgba(15,23,42,.08);
    font-size:14px;
    line-height:1.45;
}

.combination-table tbody tr:last-child td{
    border-bottom:none;
}

.combination-table tbody td:first-child{
    width:22%;
    font-weight:700;
    color:var(--primary);
}

.combination-table tbody td:nth-child(2){
    width:48%;
}

.combination-table tbody td:nth-child(3){
    width:30%;
    color:var(--muted);
}

.procedure-section h3{
    color:var(--primary);
}

.photo-gallery{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    margin-top:14px;
}

.photo-gallery-item{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    background:var(--surface);
}

.photo-gallery-item a{
    display:block;
}

.product-photo{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    aspect-ratio:4/3;
}

.document-preview-gallery{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-top:14px;
}

.document-preview-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
    transition:transform .2s ease, box-shadow .2s ease;
}

.document-preview-card:hover,
.document-preview-card:focus-visible{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
    outline:none;
}

.document-preview-card img{
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    object-position:top;
    background:#f8fafc;
}

.document-preview-card span{
    padding:12px;
    text-align:center;
    font-size:14px;
}

@media (max-width: 980px) {
    .photo-gallery{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .document-preview-gallery{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .photo-gallery{
        grid-template-columns:1fr;
    }

    .document-preview-gallery{
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px){
    .combination-table,
    .combination-table thead,
    .combination-table tbody,
    .combination-table th,
    .combination-table td,
    .combination-table tr{
        display:block;
        width:100%;
    }

    .combination-table thead{
        display:none;
    }

    .combination-table tbody tr{
        border-bottom:1px solid rgba(15,23,42,.08);
        padding:10px 0;
    }

    .combination-table tbody td{
        border-bottom:none;
        padding:8px 14px;
    }

    .combination-table tbody td:first-child,
    .combination-table tbody td:nth-child(2),
    .combination-table tbody td:nth-child(3){
        width:100%;
    }

    .combination-table tbody td:first-child::before,
    .combination-table tbody td:nth-child(2)::before,
    .combination-table tbody td:nth-child(3)::before{
        display:block;
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:var(--muted);
        margin-bottom:4px;
    }

    .combination-table tbody td:first-child::before{content:"Gamme / modèle";}
    .combination-table tbody td:nth-child(2)::before{content:"Séquence / action";}
    .combination-table tbody td:nth-child(3)::before{content:"Contrôle après";}
}

.web-guides-section{
    display:grid;
    gap:12px;
}

.web-guides-section .muted{
    margin:0;
}

.web-guide-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.web-guide-link{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:10px 14px;
    border-radius:12px;
    color:#fff;
    background:var(--primary);
    font-weight:700;
    text-decoration:none;
}

.web-guide-link:hover{
    background:var(--secondary);
}

.commerce-section{
    background:#f8fbff;
    border:1px solid rgba(0,59,115,.08);
}

.commerce-buy-link{
    display:inline-flex;
    align-self:flex-start;
    margin-top:8px;
    text-decoration:none;
}

.commerce-offers{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    margin-top:16px;
}

.commerce-offer{
    display:grid;
    gap:6px;
    padding:14px 15px;
    border:1px solid rgba(0,59,115,.12);
    border-radius:16px;
    background:var(--surface);
    box-shadow:0 4px 12px rgba(0,0,0,.05);
    color:inherit;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.commerce-offer:hover,
.commerce-offer:focus{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    border-color:rgba(0,59,115,.18);
    outline:none;
}

.commerce-price{
    color:var(--primary);
    font-weight:700;
}

.commerce-offer small{
    color:var(--muted);
}

.commerce-offer-link{
    color:var(--secondary);
    font-weight:700;
}


.brand-card ol,
.brand-card ul{
    margin-top:15px;
    padding-left:22px;
    text-align:left;
}

.brand-card p{
    margin-top:10px;
}

.muted{
    color:var(--muted);
}

.secondary-button{
    background:linear-gradient(180deg, var(--secondary), #096341);
    color:white;
    border:none;
    border-radius:14px;
    padding:12px 16px;
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    box-shadow:0 7px 16px rgba(10,92,54,.18);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}

.secondary-button:hover{
    background:linear-gradient(180deg, #096341, #084c2d);
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(10,92,54,.22);
}

.secondary-button:active,
.quick-actions button:active,
.nav-button:active{
    transform:translateY(0);
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.danger-button{
    background:var(--danger);
    justify-self:start;
}

.danger-button:hover{
    background:#8f1d14;
}

/* ==========================
   CONSOLE CRÉATEUR
========================== */

.creator-entry-card{
    margin-top:20px;
}

.creator-entry-card .secondary-button{
    align-self:flex-start;
    margin-top:4px;
}

.creator-console{
    display:grid;
    gap:18px;
}

.creator-heading,
.creator-layout,
.creator-form-actions,
.creator-member,
.creator-member-actions{
    display:flex;
    gap:14px;
}

.creator-heading{
    align-items:flex-start;
    justify-content:space-between;
    padding:22px;
    border:1px solid rgba(0,59,115,.12);
    border-radius:var(--radius);
    background:linear-gradient(135deg,#eff6ff,#f0fdf4);
}

.creator-heading h2,
.creator-workspace h3,
.creator-members-section h3{
    margin:3px 0;
    color:var(--primary);
}

.creator-layout{
    align-items:flex-start;
}

.creator-accounts{
    display:grid;
    flex:0 0 280px;
    gap:9px;
}

.creator-account{
    display:grid;
    gap:3px;
    width:100%;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.creator-account:hover,
.creator-account.selected{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.creator-account strong{
    color:var(--primary);
}

.creator-subscription-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}

.creator-subscription-summary article{
    display:grid;
    gap:4px;
    padding:14px;
    border:1px solid rgba(0,59,115,.1);
    border-radius:14px;
    background:#f8fbff;
}

.creator-subscription-summary span{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.creator-subscription-summary strong{
    color:var(--primary);
    font-size:20px;
}

.creator-subscription-summary .attention{
    border-color:#f59e0b;
    background:#fff8e8;
}

.creator-subscription-badge{
    width:max-content;
    max-width:100%;
    overflow-wrap:anywhere;
    padding:4px 7px;
    border-radius:8px;
    background:#eaf3fb;
    color:var(--primary) !important;
    font-size:12px;
    font-style:normal;
    font-weight:800;
}

.creator-subscription-badge.trial{background:#ede9fe;color:#6d28d9 !important;}
.creator-subscription-badge.past_due{background:#fff4d8;color:#9a6700 !important;}
.creator-subscription-badge.suspended,
.creator-subscription-badge.cancelled{background:#fee2e2;color:#b42318 !important;}

.creator-account span,
.creator-account small,
.creator-member span{
    color:var(--muted);
    font-size:13px;
}

.creator-workspace{
    flex:1;
    min-width:0;
    display:grid;
    gap:18px;
    padding:22px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow);
}

.creator-form{
    display:grid;
    gap:18px;
}

.creator-subscription-fields{
    display:grid;
    gap:12px;
    min-width:0;
    padding:16px;
    border:1px solid rgba(0,59,115,.12);
    border-radius:14px;
    background:#f8fbff;
}

.creator-subscription-fields legend{
    padding:0 7px;
    color:var(--primary);
    font-weight:800;
}

.creator-subscription-fields .muted{
    margin:0;
    font-size:13px;
}

.creator-form-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
}

.creator-switch{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    align-content:start;
    gap:8px;
}

.creator-switch input{
    width:auto !important;
}

.creator-switch span{
    color:var(--muted);
    font-size:13px;
    font-weight:400;
}

.creator-state{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:5px 9px;
    border-radius:999px;
    background:#dcfce7;
    color:#15803d;
    font-size:12px;
    font-weight:800;
}

.creator-state.suspended{
    background:#fee2e2;
    color:#b42318;
}

.creator-members-section{
    display:grid;
    gap:14px;
    padding-top:18px;
    border-top:1px solid var(--border);
}

.creator-members{
    display:grid;
    gap:10px;
}

.creator-member{
    align-items:center;
    justify-content:space-between;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.creator-member > div:first-child{
    display:grid;
    gap:3px;
    min-width:0;
}

.creator-member strong{
    color:var(--primary);
}

.creator-member-actions{
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
}

@media (max-width:700px){
    .creator-heading,
    .creator-layout,
    .creator-member{
        flex-direction:column;
        align-items:stretch;
    }

    .creator-accounts{
        flex-basis:auto;
        width:100%;
    }

    .creator-workspace,
    .creator-heading{
        padding:16px;
    }

    .creator-heading .secondary-button,
    .creator-member-actions,
    .creator-form-actions{
        width:100%;
        justify-content:stretch;
    }

    .creator-member-actions .secondary-button,
    .creator-form-actions .secondary-button{
        flex:1;
    }

    .creator-subscription-summary{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* ==========================
   MAGASIN
========================== */

.store-panel{
    max-width:820px;
    margin:auto;
}

.store-form{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(180px,1fr) auto;
    gap:14px;
    align-items:end;
}

.store-form label{
    display:grid;
    gap:7px;
    color:var(--primary);
    font-weight:700;
}

.store-form input,
.store-form select{
    width:100%;
    min-height:48px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    color:var(--text);
    outline:none;
    font-weight:400;
}

.store-form input:focus,
.store-form select:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.store-results{
    display:grid;
    gap:14px;
}

.store-results > h3{
    color:var(--primary);
    margin-top:4px;
}

.store-match-list{
    display:grid;
    gap:10px;
}

.store-match{
    display:grid;
    gap:4px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.store-match:hover,
.store-match:focus-visible{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
    outline:none;
}

.store-match strong{
    color:var(--primary);
}

.store-match span{
    color:var(--muted);
    font-size:14px;
}

.store-actions{
    display:grid;
    gap:12px;
}

.store-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.store-external-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

/* ==========================
   CLIENTS
========================== */

.client-panel{
    background:var(--surface);
    border:1px solid rgba(0,59,115,.08);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
}

.client-toolbar-actions{
    display:flex;
    gap:12px;
    margin-top:18px;
    align-items:center;
}

.client-directory-form{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.client-directory-form label{
    display:grid;
    gap:6px;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
}

.client-directory-form input,
.client-directory-form select{
    min-width:0;
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-weight:400;
}

.client-directory-actions{
    display:flex;
    align-items:end;
    gap:8px;
}

.client-directory-results{
    display:grid;
    gap:18px;
}

.client-results-group{
    overflow:hidden;
}

.client-results-group-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    background:#eef6ff;
    border-bottom:1px solid var(--border);
}

.client-results-group-heading h2{
    margin:0;
    color:var(--primary);
    font-size:20px;
}

.client-results-group-heading .eyebrow{
    margin:0 0 4px;
}

.client-results-group-heading > span{
    padding:6px 10px;
    border-radius:999px;
    background:var(--surface);
    color:var(--primary);
    font-size:13px;
    font-weight:800;
}

.client-search{
    flex:1;
    border:1px solid var(--border);
    border-radius:12px;
    padding:13px 14px;
    outline:none;
}

.client-search:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.client-form{
    display:grid;
    gap:18px;
}

.form-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.form-grid label{
    display:grid;
    gap:7px;
    color:var(--primary);
    font-weight:700;
}

.form-grid input,
.form-grid select,
.form-grid textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    color:var(--text);
    outline:none;
    font-weight:400;
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.form-wide{
    grid-column:1/-1;
}

.form-actions{
    display:flex;
    justify-content:flex-end;
}

.client-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:18px;
}

.client-table-wrapper{
    display:block;
    overflow-x:auto;
    border:1px solid rgba(0,59,115,.1);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow);
}

.client-table{
    width:100%;
    min-width:880px;
    border-collapse:collapse;
    text-align:left;
}

.client-table th,
.client-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    vertical-align:middle;
}

.client-table th{
    background:#eef6ff;
    color:var(--primary);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.client-table tbody tr:hover{
    background:#f7fbff;
}

.client-table tbody tr:last-child td{
    border-bottom:none;
}

.client-table td strong{
    color:var(--primary);
}

.client-table td small{
    display:block;
    margin-top:3px;
    color:var(--muted);
}

.client-table .client-card-actions{
    justify-content:flex-end;
}

.client-table .client-card-actions .secondary-button{
    padding:8px 10px;
    font-size:13px;
}

.client-search-hint{
    display:block;
    margin-top:10px;
    color:var(--muted);
    font-size:13px;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.client-card{
    background:var(--surface);
    border:1px solid rgba(0,59,115,.08);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:var(--shadow);
    display:grid;
    gap:18px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.client-card:hover,
.client-card:focus-within{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
    border-color:rgba(0,59,115,.14);
}

.client-card h3{
    color:var(--primary);
    font-size:21px;
    margin-top:4px;
}

.client-card-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.client-card-actions .secondary-button{
    padding:10px 12px;
    font-size:14px;
}

.client-files-zone{
    border:1px dashed #b8c7d8;
    border-radius:16px;
    padding:18px;
    background:#f8fbff;
    display:grid;
    gap:16px;
}

.file-count-badge{
    align-self:flex-start;
    background:#eef6ff;
    color:var(--primary);
    border-radius:999px;
    padding:8px 12px;
    font-weight:700;
}

.file-input-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.file-input-grid label{
    display:grid;
    gap:7px;
    color:var(--primary);
    font-weight:700;
}

.file-input-grid input,
.file-input-grid select{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    color:var(--text);
    outline:none;
    background:white;
    font-weight:400;
}

.photo-capture-label{
    background:#effaf3;
    border-radius:14px;
    padding:12px;
    border:1px solid rgba(10,92,54,.18);
}

.small-note{
    font-size:13px;
}

.attachment-list{
    display:grid;
    gap:12px;
}

.attachment-card{
    background:white;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
}

.attachment-preview{
    width:82px;
    height:82px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid var(--border);
    background:#eef6ff;
}

.attachment-card h4{
    color:var(--primary);
    word-break:break-word;
}

.attachment-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.attachment-actions a{
    text-decoration:none;
    display:inline-flex;
    align-items:center;
}

/* ==========================
   BIBLIOTHÈQUE PARTAGÉE
========================== */

.library-section-panel,
.library-upload-panel,
.library-list-panel{
    margin-top:20px;
}

.library-catalog-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:20px;
}

.library-tools-panel{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.library-tools-panel .library-catalog-panel{
    margin-top:20px;
}

body[data-role="technician"] .library-tools-panel{
    grid-template-columns:1fr;
}

body[data-role="technician"] .library-tools-panel .library-catalog-panel{
    margin-top:0;
}

.library-catalog-panel h2{
    margin:3px 0;
    color:var(--primary);
}

.dashboard-panel{
    display:grid;
    gap:20px;
}

.dashboard-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.dashboard-heading h2,
.dashboard-card h3{
    margin:3px 0;
    color:var(--primary);
    text-transform:capitalize;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.dashboard-card{
    min-width:0;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#f8fbff;
}

.dashboard-events{
    display:grid;
    gap:10px;
    margin-top:14px;
}

.dashboard-event{
    display:grid;
    gap:2px;
    width:100%;
    padding:12px 14px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.dashboard-event:hover,
.dashboard-event:focus-visible{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
    outline:none;
}

.dashboard-event time{
    color:inherit;
    font-size:12px;
    font-weight:800;
}

.dashboard-event strong{
    color:inherit;
}

.dashboard-event span,
.dashboard-event small,
.dashboard-catalog-note{
    color:var(--muted);
}

.dashboard-event.color-blue{background:#dbeafe;color:#1d4ed8;}
.dashboard-event.color-green{background:#dcfce7;color:#15803d;}
.dashboard-event.color-orange{background:#ffedd5;color:#c2410c;}
.dashboard-event.color-red{background:#fee2e2;color:#b91c1c;}
.dashboard-event.color-purple{background:#ede9fe;color:#6d28d9;}
.dashboard-event.color-gray{background:#e2e8f0;color:#334155;}

.dashboard-catalog-note{
    padding-top:4px;
    border-top:1px solid var(--border);
}

.library-section-layout{
    display:grid;
    grid-template-columns:minmax(240px, .8fr) minmax(0, 1.6fr);
    gap:18px;
    margin-top:18px;
}

.library-section-form{
    display:grid;
    align-content:start;
    gap:10px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#f8fbff;
}

.library-section-form label{
    display:grid;
    gap:7px;
    color:var(--primary);
    font-weight:700;
}

.library-section-form input{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 13px;
    background:#fff;
    color:var(--text);
    outline:none;
}

.library-section-form input:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.library-section-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:10px;
    align-content:start;
}

.library-section-button{
    display:grid;
    gap:4px;
    min-height:78px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    color:var(--primary);
    text-align:left;
    cursor:pointer;
}

.library-section-button:hover,
.library-section-button.selected{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.library-section-button span,
.library-document-card small{
    color:var(--muted);
}

.library-document-list{
    display:grid;
    gap:12px;
    margin-top:16px;
}

.library-document-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:18px;
    align-items:start;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#f8fbff;
}

.library-document-card h3{
    color:var(--primary);
}

.library-document-card p{
    margin:5px 0;
}

.library-document-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.library-document-actions .secondary-button,
.library-document-actions .danger-button{
    text-decoration:none;
    border:none;
    border-radius:14px;
    padding:10px 12px;
    cursor:pointer;
    font-weight:700;
}

/* ==========================
   PLANNING
========================== */

.calendar-panel,
.calendar-form-panel,
.calendar-grid-panel{
    margin-top:20px;
}

.calendar-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.calendar-toolbar h2{
    color:var(--primary);
    margin-top:3px;
}

.calendar-toolbar-actions,
.calendar-form-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:9px;
}

.calendar-event-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:18px;
}

.calendar-client-summary,
.calendar-appointment-information,
.calendar-billing-actions{
    margin-top:18px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.calendar-client-summary h3,
.calendar-billing-actions h3{
    margin:3px 0;
    color:var(--primary);
}

.calendar-client-summary > div:first-child > .muted,
.calendar-billing-actions .muted{
    margin:4px 0 0;
}

.calendar-contact-list{
    display:grid;
    gap:8px;
    margin-top:14px;
}

.calendar-contact-item{
    display:grid;
    grid-template-columns:92px minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-top:1px solid var(--border);
}

.calendar-contact-item span{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}

.calendar-contact-item strong{
    min-width:0;
    overflow-wrap:anywhere;
}

.calendar-appointment-information .eyebrow{
    margin:0;
}

.calendar-appointment-information dl{
    margin-top:12px;
}

.calendar-billing-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.calendar-billing-actions > div:last-child{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.calendar-client-messages-slot > .client-panel{
    margin-top:18px;
}

.calendar-quitus,
.calendar-intervention-photos{
    display:grid;
    gap:14px;
    margin-top:18px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.calendar-quitus label,
.calendar-intervention-photos label{
    display:grid;
    gap:7px;
    color:var(--primary);
    font-weight:700;
}

.calendar-quitus input,
.calendar-intervention-photos input{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
}

.quitus-status{
    align-self:start;
    padding:6px 10px;
    border-radius:999px;
    background:#fff4d8;
    color:#9a6700;
    font-size:13px;
    font-weight:800;
}

.quitus-status.signed{
    background:#dcfce7;
    color:#15803d;
}

.quitus-signature-canvas{
    width:100%;
    height:160px;
    touch-action:none;
    border:2px dashed #94a3b8;
    border-radius:12px;
    background:#fff;
    cursor:crosshair;
}

.calendar-intervention-photos{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.calendar-intervention-photos > div:first-child,
.calendar-intervention-photos .calendar-form-actions,
.calendar-intervention-photos .auth-message{
    grid-column:1/-1;
}

.calendar-intervention-photos section{
    min-width:0;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
}

.calendar-intervention-photos h3,
.calendar-intervention-photos h4{
    margin:3px 0;
    color:var(--primary);
}

.intervention-photo-previews{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(80px, 1fr));
    gap:8px;
    margin:10px 0;
}

.intervention-photo-previews img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border:1px solid var(--border);
    border-radius:9px;
}

.calendar-client-upload{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    min-width:0;
    max-width:100%;
    gap:12px;
    margin-top:18px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface-alt);
}

.calendar-client-upload > div:first-child,
.calendar-client-upload .calendar-form-actions,
.calendar-client-upload .auth-message{
    grid-column:1/-1;
}

.calendar-client-upload h3{
    margin:3px 0;
}

.calendar-client-upload > *,
.calendar-client-upload label,
.calendar-client-upload p{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
}

.calendar-client-upload input,
.calendar-client-upload select{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
}

.calendar-toolbar-actions .secondary-button{
    padding:10px 12px;
}

.technician-calendar-home{
    padding:18px 4px 8px;
    text-align:center;
}

.technician-calendar-home .eyebrow{
    margin:0;
    color:var(--secondary);
}

.technician-calendar-home h2{
    margin:8px auto 18px;
    max-width:620px;
    color:var(--primary);
    font-size:clamp(28px, 8vw, 42px);
    line-height:1.15;
    text-transform:capitalize;
}

.technician-calendar-navigation{
    display:grid;
    grid-template-columns:54px 1fr 54px;
    gap:10px;
    max-width:360px;
    margin:0 auto;
}

.technician-calendar-navigation .secondary-button{
    min-height:48px;
    padding:8px 10px;
    font-size:16px;
}

.technician-calendar-navigation .secondary-button.active{
    color:#fff;
    background:var(--secondary);
    border-color:var(--secondary);
}

.technician-calendar-view-switcher{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
    max-width:360px;
    margin:10px auto 0;
    padding:4px;
    border-radius:14px;
    background:#edf4f0;
}

.technician-calendar-view-switcher .secondary-button{
    min-height:38px;
    padding:6px 8px;
    border-color:transparent;
    background:transparent;
    font-size:13px;
}

.technician-calendar-view-switcher .secondary-button.active{
    color:#fff;
    background:var(--secondary);
    border-color:var(--secondary);
}

body.mobile-device[data-role="technician"] .calendar-grid-panel{
    padding:14px;
    background:transparent;
    box-shadow:none;
}

body.mobile-device[data-role="technician"] .calendar-list-day{
    padding:18px;
    border-radius:18px;
    box-shadow:0 8px 22px rgba(0,59,115,.08);
}

.calendar-availability{
    margin-top:16px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.calendar-availability.has-conflict{
    border-color:#f59e0b;
    background:#fff8e8;
}

.calendar-availability-heading{
    display:flex;
    justify-content:space-between;
    align-items:start;
    gap:16px;
}

.calendar-availability-heading h3{
    margin:3px 0 0;
    color:var(--primary);
    text-transform:capitalize;
}

.calendar-time-preview{
    display:grid;
    gap:7px;
    margin-top:12px;
}

.calendar-time-slot{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:3px 12px;
    padding:9px 11px;
    border-left:4px solid #94a3b8;
    border-radius:8px;
    background:#fff;
}

.calendar-time-slot time{
    grid-row:span 2;
    color:var(--primary);
    font-weight:800;
}

.calendar-time-slot small{
    color:var(--muted);
}

.calendar-time-slot-preview{
    border-left-color:var(--secondary);
    background:#eaf8ef;
}

.calendar-time-slot-preview.conflict{
    border-left-color:#dc2626;
    background:#fff0f0;
}

.client-navigation-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.calendar-view-switcher{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.calendar-view-switcher .secondary-button.active{
    color:#fff;
    background:var(--secondary);
    border-color:var(--secondary);
}

.calendar-technician-filter{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:16px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.calendar-technician-filter strong{
    color:var(--primary);
}

.calendar-technician-options{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px 12px;
}

.calendar-technician-options label{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--primary);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.calendar-legend{
    display:flex;
    flex-wrap:wrap;
    gap:12px 16px;
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
}

.calendar-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.calendar-legend i{
    width:11px;
    height:11px;
    border-radius:50%;
}

.calendar-weekdays,
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
}

.calendar-weekdays{
    margin-top:4px;
    border:1px solid var(--border);
    border-bottom:none;
    border-radius:14px 14px 0 0;
    overflow:hidden;
    background:#f1f6fb;
}

.calendar-weekdays span{
    padding:10px 8px;
    text-align:center;
    color:var(--primary);
    font-size:13px;
    font-weight:800;
}

.calendar-grid{
    border:1px solid var(--border);
    border-radius:0 0 14px 14px;
    overflow:hidden;
}

.calendar-day{
    min-height:146px;
    padding:7px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:#fff;
    cursor:pointer;
}

.calendar-day:nth-child(7n){
    border-right:none;
}

.calendar-day:nth-last-child(-n + 7){
    border-bottom:none;
}

.calendar-day.outside{
    background:#f8fafc;
}

.calendar-day.today{
    background:#effaf3;
}

.calendar-day-number{
    display:inline-grid;
    place-items:center;
    min-width:30px;
    height:30px;
    border-radius:50%;
    background:transparent;
    color:var(--primary);
    font-weight:800;
}

.calendar-day.today .calendar-day-number{
    background:var(--secondary);
    color:#fff;
}

.calendar-day:hover,
.calendar-day:focus-visible{
    background:#f1f8ff;
    outline:none;
}

.calendar-event-list{
    display:grid;
    gap:5px;
    margin-top:4px;
}

.calendar-event{
    display:grid;
    gap:1px;
    width:100%;
    padding:6px 7px;
    border:none;
    border-left:4px solid currentColor;
    border-radius:7px;
    text-align:left;
    cursor:pointer;
    font-size:11px;
    line-height:1.2;
}

.calendar-event:hover,
.calendar-event:focus-visible{
    filter:brightness(.94);
    outline:2px solid currentColor;
    outline-offset:1px;
}

.calendar-event strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.calendar-event small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    opacity:.85;
}

.calendar-event-client{
    font-weight:800;
}

.calendar-event-contact{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
}

.calendar-event.color-blue{background:#dbeafe;color:#1d4ed8;}
.calendar-event.color-green{background:#dcfce7;color:#15803d;}
.calendar-event.color-orange{background:#ffedd5;color:#c2410c;}
.calendar-event.color-red{background:#fee2e2;color:#b91c1c;}
.calendar-event.color-purple{background:#ede9fe;color:#6d28d9;}
.calendar-event.color-gray{background:#e2e8f0;color:#334155;}

.calendar-list-view{
    display:grid;
    gap:12px;
}

.calendar-list-day{
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
}

.calendar-list-day h3{
    margin:0 0 10px;
    color:var(--primary);
    font-size:16px;
    text-transform:capitalize;
}

.calendar-list-day-clickable{
    cursor:pointer;
}

.calendar-list-day-clickable:hover,
.calendar-list-day-clickable:focus-visible{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
    outline:none;
}

.calendar-list-events{
    display:grid;
    gap:8px;
}

.calendar-list-events .calendar-event{
    padding:10px 12px;
    font-size:14px;
}

.calendar-event-detail dl{
    display:grid;
    grid-template-columns:minmax(110px, .3fr) 1fr;
    gap:10px 16px;
    margin:20px 0 0;
}

.calendar-event-detail dt{
    color:var(--muted);
    font-weight:800;
}

.calendar-event-detail dd{
    margin:0;
    white-space:pre-wrap;
}

/* ==========================
   DEVIS ET FACTURES
========================== */

.billing-overview-panel,
.billing-profile-panel,
.billing-template-panel,
.billing-editor-panel,
.billing-list-panel{
    margin-top:20px;
}

.billing-overview,
.billing-branding,
.billing-overview-actions,
.billing-metrics,
.billing-document-item,
.purchases-overview,
.purchase-item{
    display:flex;
    align-items:center;
    gap:16px;
}

.billing-overview{
    justify-content:space-between;
}

.purchases-overview{
    justify-content:space-between;
}

.billing-branding{
    min-width:0;
}

.billing-branding h2,
.billing-document-item h3{
    color:var(--primary);
}

.billing-logo-preview,
.billing-logo-placeholder{
    width:88px;
    height:68px;
    flex:0 0 auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    object-fit:contain;
}

.billing-logo-placeholder{
    display:grid;
    place-items:center;
    padding:7px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-align:center;
}

.billing-overview-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
}

.billing-metrics{
    flex-wrap:wrap;
    margin-top:18px;
}

.billing-metrics span{
    padding:9px 12px;
    border-radius:999px;
    background:#eef6ff;
    color:var(--primary);
    font-size:14px;
}

.billing-metrics strong{
    color:var(--secondary);
    font-size:17px;
}

.billing-base-template{
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:#effaf3 !important;
}

.billing-base-template button{
    border:none;
    padding:3px 6px;
    border-radius:6px;
    color:var(--danger);
    background:transparent;
    cursor:pointer;
    font-weight:700;
}

.billing-accounted-metric{
    background:#effaf3 !important;
}

.billing-register-filters{
    display:grid;
    grid-template-columns:minmax(220px, 1fr) repeat(2, minmax(160px, .45fr));
    gap:10px;
    margin-top:16px;
}

.billing-register-filters input,
.billing-register-filters select{
    width:100%;
    min-width:0;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
}

.billing-accounting-option{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--primary);
    font-weight:700;
}

.billing-accounting-option input{
    width:18px;
    height:18px;
    accent-color:var(--secondary);
}

.billing-accounting-status{
    color:#b45309;
    font-weight:700;
}

.billing-accounting-status.is-accounted{
    color:var(--secondary);
}

.billing-default-option{
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:13px 14px;
    border:1px solid rgba(10,92,54,.2);
    border-radius:12px;
    background:#effaf3;
    color:var(--primary);
    font-weight:700;
}

.billing-default-option input{
    width:18px;
    height:18px;
    flex:0 0 auto;
    accent-color:var(--secondary);
}

.billing-template-form{
    margin-top:18px;
}

.billing-template-form .form-actions{
    align-items:end;
}

.billing-template-list,
.billing-document-list,
.purchase-list{
    display:grid;
    gap:10px;
    margin-top:16px;
}

.billing-template-item,
.billing-document-item,
.purchase-item{
    justify-content:space-between;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.billing-template-item strong{
    color:var(--primary);
}

.billing-template-item p{
    margin-top:3px;
}

.billing-template-item small,
.billing-document-item small{
    color:var(--muted);
}

.billing-template-item .danger-button{
    border:none;
    border-radius:10px;
    padding:8px 10px;
    cursor:pointer;
}

.billing-lines-section{
    display:grid;
    gap:14px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#f8fbff;
}

.billing-lines{
    display:grid;
    gap:10px;
}

.billing-line{
    display:grid;
    grid-template-columns:1.2fr 2fr .65fr .8fr 1fr .75fr 1fr auto;
    gap:8px;
    align-items:center;
    padding:10px;
    border:1px solid rgba(0,59,115,.1);
    border-radius:12px;
    background:#fff;
}

.billing-line input,
.billing-line select{
    width:100%;
    min-width:0;
    padding:9px 10px;
    border:1px solid var(--border);
    border-radius:9px;
    background:#fff;
}

.billing-line-total{
    color:var(--primary);
    text-align:right;
    white-space:nowrap;
}

.billing-line .danger-button{
    border:none;
    border-radius:9px;
    padding:7px 10px;
    cursor:pointer;
    font-size:18px;
}

.billing-totals{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:14px;
    padding-top:5px;
}

.billing-totals span{
    display:grid;
    gap:2px;
    color:var(--muted);
    font-size:13px;
}

.billing-totals strong{
    color:var(--primary);
    font-size:17px;
}

.billing-document-item{
    align-items:center;
}

.purchase-item{
    align-items:center;
}

.billing-document-item > div:first-child{
    flex:1;
}

.purchase-item > div:first-child{
    flex:1;
}

.billing-document-amount{
    display:grid;
    text-align:right;
}

.billing-document-amount strong{
    color:var(--secondary);
    font-size:18px;
}

.billing-document-item .secondary-button{
    padding:9px 12px;
}

.billing-document-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;
}

.billing-read-only-lines{
    display:grid;
    gap:8px;
    margin-top:18px;
}

.billing-read-only-lines div{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:12px;
    align-items:center;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:#f8fbff;
}

.billing-read-only-lines b{
    color:var(--primary);
    text-align:right;
}

.client-billing-panel{
    margin-top:18px;
}

.client-billing-list{
    display:grid;
    gap:10px;
    margin-top:16px;
}

.client-billing-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#f8fbff;
}

.client-billing-item h3{
    color:var(--primary);
}

.client-activity-list{
    display:grid;
    gap:9px;
    margin-top:12px;
}

.client-activity-item{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:12px 14px;
    border-left:4px solid var(--secondary);
    border-radius:10px;
    background:#f8fbff;
}

.client-activity-item strong{
    color:var(--primary);
}

.client-activity-item p,
.client-activity-item time{
    margin-top:3px;
    color:var(--muted);
    font-size:13px;
}

.client-activity-item time{
    flex:0 0 auto;
    text-align:right;
}

/* ==========================
   MESSAGERIE
========================== */

.messages-layout{
    display:grid;
    grid-template-columns:minmax(190px, .65fr) minmax(0, 1.8fr);
    gap:16px;
    margin-top:18px;
}

.message-conversation{
    display:grid;
    grid-template-rows:auto minmax(250px, 1fr) auto;
    gap:12px;
    min-width:0;
}

.message-conversation-header{
    padding-bottom:9px;
    border-bottom:1px solid var(--border);
    color:var(--primary);
}

.message-thread{
    display:grid;
    align-content:start;
    gap:10px;
    max-height:460px;
    overflow-y:auto;
    padding:8px;
}

.message-bubble{
    max-width:min(78%, 580px);
    padding:10px 12px;
    border-radius:14px;
}

.message-bubble.outgoing{
    justify-self:end;
    background:#e0f4e8;
    border-bottom-right-radius:3px;
}

.message-bubble.incoming{
    justify-self:start;
    background:#eef6ff;
    border-bottom-left-radius:3px;
}

.message-bubble.message-unread-target{
    outline:3px solid rgba(217,119,6,.45);
    box-shadow:0 0 0 6px rgba(217,119,6,.12);
}

.message-bubble small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
}

.message-form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

.message-form textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    outline:none;
}

.message-form textarea:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(10,92,54,.12);
}

.message-form .auth-message{
    grid-column:1/-1;
}

.message-edit-button{
    margin-top:8px;
    padding:5px 8px;
    font-size:12px;
}

.message-edit-form{
    display:grid;
    gap:8px;
    min-width:min(70vw, 360px);
}

.message-edit-form textarea{
    width:100%;
    padding:8px;
    border:1px solid var(--border);
    border-radius:9px;
}

.message-edit-form div{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.message-alert{
    display:inline-grid;
    min-width:18px;
    height:18px;
    place-items:center;
    margin-left:4px;
    padding:0 4px;
    border-radius:999px;
    background:#dc2626;
    color:#fff;
    font-size:10px;
    font-style:normal;
    line-height:1;
    vertical-align:middle;
}

#messagesBtn,
.nav-button[data-nav="messages"]{
    display:none;
}

body[data-role="technician"] #purchasesBtn,
body[data-role="technician"] .nav-button[data-nav="purchases"]{
    display:none;
}

body.desktop-device[data-role="technician"] .quick-actions > :not(#calendarBtn):not(#libraryBtn),
body.desktop-device[data-role="technician"] .nav-button:not([data-nav="calendar"]):not([data-nav="library"]){
    display:none;
}

/* Un téléphone tactile garde la même navigation technicien en portrait et paysage. */
body.mobile-device[data-role="technician"] .quick-actions > :not(#calendarBtn):not(#libraryBtn),
body.mobile-device[data-role="technician"] .nav-button:not([data-nav="calendar"]):not([data-nav="library"]){
    display:none;
}

body.mobile-device[data-role="technician"] .quick-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

body.mobile-device[data-role="technician"] footer{
    justify-content:center;
}

.message-alert[hidden]{
    display:none;
}

.nav-button .message-alert{
    position:absolute;
    top:4px;
    right:4px;
    margin:0;
}

.nav-button{
    position:relative;
}

/* ==========================
   FOOTER
========================== */

footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    min-height:78px;
    background:var(--surface);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
    padding:6px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border-top:2px solid rgba(10,92,54,.18);
    box-shadow:0 -5px 18px rgba(0,59,115,.14);
    z-index:10;
}

.nav-button{
    background:none;
    border:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:74px;
    min-height:60px;
    cursor:pointer;
    color:#475569;
    font-size:22px;
    padding:8px 12px;
    border-radius:14px;
    transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.nav-button:hover,
.nav-button:focus-visible{
    color:#fff;
    background:var(--secondary);
    box-shadow:0 4px 10px rgba(10,92,54,.24);
    transform:translateY(-1px);
    outline:none;
}

.nav-button span{
    font-size:12px;
    margin-top:4px;
    font-weight:700;
}

.nav-button.active{
    color:#fff;
    background:linear-gradient(180deg, var(--secondary), #084c2d);
    box-shadow:0 4px 10px rgba(10,92,54,.22);
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:700px){
    .team-member{
        display:grid;
        gap:6px;
        padding:12px 0;
        border-top:1px solid rgba(0,59,115,.12);
    }

    .header-content{
        flex-direction:column;
        text-align:center;
    }

    .user-session{
        margin-left:0;
        justify-content:center;
    }

    .logo{
        width:min(320px,86vw);
        height:120px;
    }

    .quick-actions{
        flex-direction:column;
    }

    .store-form{
        grid-template-columns:1fr;
    }

    .store-form .secondary-button{
        width:100%;
    }

    .client-toolbar-actions,
    .form-heading{
        flex-direction:column;
        align-items:stretch;
    }

    .client-directory-form{
        grid-template-columns:1fr;
    }

    .client-directory-actions{
        align-items:stretch;
    }

    .client-directory-actions .secondary-button{
        flex:1;
    }

    .client-results-group-heading{
        padding:14px;
    }

    .form-grid,
    .file-input-grid{
        grid-template-columns:1fr;
    }

    .client-search-hint{
        display:block;
    }

    .client-table-wrapper{
        overflow:visible;
        border:none;
        background:transparent;
        box-shadow:none;
    }

    .client-table{
        min-width:0;
    }

    .client-table thead{
        display:none;
    }

    .client-table,
    .client-table tbody,
    .client-table tr,
    .client-table td{
        display:block;
        width:100%;
    }

    .client-table tbody{
        display:grid;
        gap:12px;
    }

    .client-table tr{
        padding:14px;
        border:1px solid rgba(0,59,115,.1);
        border-radius:16px;
        background:var(--surface);
        box-shadow:var(--shadow);
    }

    .client-table td{
        padding:5px 0;
        border:none;
    }

    .client-table td::before{
        content:attr(data-label);
        display:block;
        margin-bottom:2px;
        color:var(--muted);
        font-size:11px;
        font-weight:800;
        letter-spacing:.03em;
        text-transform:uppercase;
    }

    .client-table td:first-child::before{
        display:none;
    }

    .client-table .client-card-actions{
        justify-content:stretch;
    }

    .client-table .client-card-actions .secondary-button{
        flex:1;
    }

    .library-section-layout,
    .library-document-card{
        grid-template-columns:1fr;
    }

    .calendar-toolbar{
        flex-direction:column;
    }

    .calendar-toolbar-actions,
    .calendar-form-actions{
        justify-content:stretch;
        width:100%;
    }

    .calendar-toolbar-actions .secondary-button,
    .calendar-form-actions .secondary-button{
        flex:1;
    }

    .calendar-client-upload{
        grid-template-columns:1fr;
        width:100%;
        padding:12px;
    }

    .calendar-contact-item{
        grid-template-columns:1fr auto;
        gap:5px 10px;
    }

    .calendar-contact-item span{
        grid-column:1/-1;
    }

    .calendar-billing-actions{
        display:grid;
    }

    .calendar-billing-actions > div:last-child{
        justify-content:stretch;
    }

    .calendar-billing-actions .secondary-button{
        flex:1;
    }

    .calendar-intervention-photos{
        grid-template-columns:1fr;
        padding:12px;
    }

    .calendar-intervention-photos > div:first-child,
    .calendar-intervention-photos .calendar-form-actions,
    .calendar-intervention-photos .auth-message{
        grid-column:auto;
    }

    .calendar-view-switcher .secondary-button{
        flex:1;
    }

    .calendar-technician-filter{
        align-items:stretch;
        flex-direction:column;
    }

    .calendar-technician-options{
        justify-content:flex-start;
    }

    .calendar-event-detail dl{
        grid-template-columns:1fr;
        gap:3px;
    }

    .calendar-day{
        min-height:108px;
        padding:4px;
    }

    .calendar-weekdays span{
        padding:8px 2px;
        font-size:11px;
    }

    .calendar-event{
        padding:4px;
        font-size:10px;
    }

    .calendar-event small{
        display:none;
    }

    .calendar-event .calendar-event-client,
    .calendar-event .calendar-event-contact{
        display:block;
        overflow:visible;
        white-space:normal;
        text-overflow:clip;
        overflow-wrap:anywhere;
        font-size:9px;
        line-height:1.15;
    }

    .billing-overview,
    .billing-branding,
    .billing-document-item,
    .purchases-overview,
    .purchase-item{
        align-items:stretch;
        flex-direction:column;
    }

    .billing-overview-actions{
        justify-content:stretch;
    }

    .billing-overview-actions .secondary-button{
        flex:1;
    }

    .billing-register-filters{
        grid-template-columns:1fr;
    }

    .billing-template-item{
        display:grid;
        gap:10px;
    }

    .billing-template-item .danger-button{
        width:100%;
    }

    .billing-line{
        grid-template-columns:1fr 1fr;
    }

    .billing-line select,
    .billing-line input[data-field="description"]{
        grid-column:1/-1;
    }

    .billing-line-total{
        text-align:left;
        padding:7px 0;
    }

    .billing-read-only-lines div{
        grid-template-columns:1fr auto;
    }

    .billing-read-only-lines b{
        grid-column:2;
    }

    .billing-totals{
        justify-content:space-between;
    }

    .billing-document-item .secondary-button{
        width:100%;
    }

    .purchase-item .secondary-button{
        width:100%;
    }

    .billing-document-actions{
        width:100%;
    }

    body.mobile-device #purchasesBtn,
    body.mobile-device .nav-button[data-nav="purchases"]{
        display:none;
    }

    .client-billing-item{
        align-items:stretch;
        flex-direction:column;
    }

    .client-billing-item .client-card-actions .secondary-button{
        flex:1;
    }

    .messages-layout{
        grid-template-columns:1fr;
    }

    .message-thread{
        max-height:360px;
    }

    .message-form{
        grid-template-columns:1fr;
    }

    .library-document-actions{
        justify-content:stretch;
    }

    .library-document-actions .secondary-button,
    .library-document-actions .danger-button{
        flex:1;
        text-align:center;
        justify-content:center;
    }

    .attachment-card{
        grid-template-columns:1fr;
    }

    .attachment-actions{
        justify-content:stretch;
        width:100%;
    }

    .attachment-actions .secondary-button{
        flex:1;
        justify-content:center;
    }

    .form-actions{
        justify-content:stretch;
    }

    .form-actions .secondary-button,
    .client-toolbar-actions .secondary-button{
        width:100%;
    }

    .nav-button{
        flex:0 0 78px;
        min-width:78px;
        min-height:64px;
        font-size:21px;
        padding:6px 5px;
    }

    .nav-button span{
        font-size:11px;
        white-space:nowrap;
    }

    footer{
        justify-content:flex-start;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scrollbar-width:thin;
        scroll-snap-type:x proximity;
    }

    .nav-button{
        scroll-snap-align:center;
    }

    .cards-grid{
        grid-template-columns:1fr;
    }

    .procedure-header{
        flex-direction:column;
    }
}