/* ==========================================================
   STOCKMASTER ATELIER PRO
   Style principal
========================================================== */

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--success:#16a34a;
--warning:#f59e0b;
--danger:#dc2626;

--background:#eef3f8;

--sidebar:#1f2937;

--card:#ffffff;

--text:#222;

--border:#d9dde3;

--shadow:0 10px 30px rgba(0,0,0,.08);

--radius:16px;

}

body.dark{

--background:#111827;

--sidebar:#0f172a;

--card:#1e293b;

--text:#f3f4f6;

--border:#334155;

--shadow:0 10px 25px rgba(0,0,0,.45);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:"Segoe UI",Arial,sans-serif;

}

body{

background:var(--background);

color:var(--text);

display:flex;

min-height:100vh;

transition:.3s;

}

/************************************************/
/* MENU */
/************************************************/

#sidebar{

width:260px;

background:var(--sidebar);

color:white;

display:flex;

flex-direction:column;

box-shadow:4px 0 20px rgba(0,0,0,.15);

}

.logo i{

font-size:50px;

margin-bottom:10px;

}

.logo h2{

font-size:24px;

}

#sidebar ul{

list-style:none;

padding:20px 0;

}

#sidebar li{

padding:18px 30px;

cursor:pointer;

transition:.25s;

font-size:17px;

}

#sidebar li:hover{

background:rgba(255,255,255,.12);

padding-left:40px;

}

#sidebar i{

width:28px;

}

/************************************************/
/* CONTENU */
/************************************************/

#content{

flex:1;

display:flex;

flex-direction:column;

}

/************************************************/
/* HEADER */
/************************************************/

header{

height:80px;

background:var(--card);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

box-shadow:var(--shadow);

z-index:5;

}

header h1{

font-size:30px;

font-weight:700;

}

header button{

width:50px;

height:50px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

cursor:pointer;

transition:.25s;

}

header button:hover{

transform:rotate(20deg);

}

/************************************************/
/* DASHBOARD */
/************************************************/

.dashboard{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

padding:30px;

}

.card-dashboard{

background:var(--card);

border-radius:var(--radius);

padding:25px;

box-shadow:var(--shadow);

transition:.25s;

border:1px solid var(--border);

}

.card-dashboard:hover{

transform:translateY(-6px);

}

.card-dashboard h3{

font-size:17px;

margin-bottom:15px;

color:#777;

}

.card-dashboard h1{

font-size:40px;

color:var(--primary);

}

/************************************************/
/* CONTENU */
/************************************************/

#contenuPrincipal{

margin:0 30px 30px;

background:var(--card);

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

border:1px solid var(--border);

}

/************************************************/
/* RESPONSIVE */
/************************************************/

@media(max-width:900px){

#sidebar{

width:75px;

}

.logo h2{

display:none;

}

#sidebar li{

font-size:0;

}

#sidebar li i{

font-size:22px;

}

header h1{

font-size:22px;

}

}
/* =====================================================
   HEADER APPLICATION
===================================================== */

.header-app{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

}

.header-left{

    display:flex;

    align-items:center;

    gap:20px;

    width:100%;

}

.logo-mini{

    width:48px;

    height:48px;

    border-radius:12px;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.header-search{

    flex:1;

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

.header-title{

    display:flex;
    flex-direction:column;
    justify-content:center;

    margin-right:20px;

    min-width:330px;

}

.header-title h5{

    margin:0;

    font-weight:700;

    color:#1f2937;

}

.header-title small{

    color:#6b7280;

    font-style:italic;

    font-size:13px;

}

.header-search{

    flex:1;

}
/* ==========================================
   Photo Objet
========================================== */

.photo-objet {

    width: 220px;
    height: 220px;

    object-fit: cover;

    border-radius: 12px;

    border: 2px solid #dcdcdc;

    background: #fafafa;

    transition: .25s;

}

.photo-objet:hover{

    transform: scale(1.02);

    box-shadow:0 0 15px rgba(0,0,0,.15);

}

#photoFile{

    margin-top:10px;

}
/* =======================================================
   LOGO STOCKMASTER
======================================================= */

.logo {

    text-align: center;
    padding: 20px 10px 35px;

    border-bottom:1px solid rgba(255,255,255,.10);

}

.logo img {

    width: 210px;
    height: auto;
    display: block;
    margin: auto;

}

.logo-mini img {

    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: contain;

}
/* ==========================================================
   SPLASH SCREEN
========================================================== */

#splashScreen{

    overflow:hidden;

    position:fixed;
    inset:0;

    background:linear-gradient(
        135deg,
        #0f172a 0%,
        #1e3a8a 55%,
        #2563eb 100%
    );

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:99999;

    transition:opacity .6s ease;

}
.splash-content{

    position:relative;

    text-align:center;

    color:white;

}

.splash-content::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:50%;
    top:45%;

    transform:translate(-50%,-50%);

    background:radial-gradient(
        circle,
        rgba(37,99,235,.25),
        transparent 70%
    );

    z-index:-1;

}

#splashScreen.hide{

    opacity:0;
    pointer-events:none;
    visibility:hidden;

}

.splash-content{

    text-align:center;
    color:white;
    max-width:700px;
    padding:20px;

}

.splash-content img{

    width:240px;

    margin-bottom:30px;

    animation:logoIntro .8s ease;

}
.splash-content h1{

    font-size:52px;

    margin:0;

    opacity:0;

    animation:fadeIn .8s ease forwards;

    animation-delay:.3s;

}

.splash-content h3{

    letter-spacing:6px;

    font-weight:300;

    margin-top:5px;

    opacity:0;

    animation:fadeIn .8s ease forwards;

    animation-delay:.5s;

}


@keyframes logoIntro{

    from{

        transform:scale(.75);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

.splash-content h1{

    font-size:48px;
    margin:0;

}

.splash-slogan{

    margin:28px 0;

    font-size:19px;

    font-style:italic;

    color:#cbd5e1;

    line-height:1.6;

    opacity:0;

    animation:fadeIn .8s ease forwards;
    animation-delay:.8s;

}

/* ===========================================
   Chargement Atelier
=========================================== */

.atelier-loader{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

    margin-top:35px;

    font-size:42px;

}

.tool{

    color:white;

    opacity:0;

    transform:scale(.35);

    transition:all .35s ease;

}

.tool.visible{

    opacity:1;

    transform:scale(1);

}

.atelier-ready{

    margin-top:35px;

    font-size:22px;

    color:#6dff7d;

    opacity:0;

    transition:opacity .6s ease;

}

.atelier-ready.visible{

    opacity:1;

}

.atelier-ready i{

    margin-right:8px;

}
@keyframes loaderFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes rotation{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.splash-content small{

    display:block;
    margin-top:25px;
    color:#8fa3b7;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
@keyframes toolAppear{

    from{

        opacity:0;

        transform:translateY(20px) scale(.5);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@keyframes readyAppear{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}
#loadingText{

    margin-top:35px;

    font-size:22px;

    color:white;

    opacity:1;

    transition:opacity .5s ease;

}
#loadingText i{

    animation:rotation 1s linear infinite;

}
#readyText{

    margin-top:-32px;

    font-size:22px;

    color:#6DFF7D;

    opacity:0;

    transition:opacity .6s ease;

}
@keyframes rotation{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
@keyframes readyPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

    
}
.list-group-item.active{

    background:#0d6efd;

    color:#fff;

    border-radius:6px;

    font-weight:600;

}
#listeEmplacements .list-group-item{

    margin-bottom:4px;

    border-radius:6px;

}

.scanner-module { max-width: 850px; }
.scanner-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: .75rem;
    background: #111;
}
.scanner-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scanner-camera-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
    background: #252525;
}
.scanner-target {
    position: absolute;
    z-index: 2;
    left: 12%;
    right: 12%;
    top: 38%;
    height: 24%;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: .5rem;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.scanner-modes .btn { min-height: 48px; }

.etiquettes-module { max-width: 1500px; }
.etiquette-preview-card { position: sticky; top: 1rem; }
.etiquette-preview-stage {
    min-height: 360px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    border-radius: .5rem;
    background: repeating-linear-gradient(45deg, #e9ecef, #e9ecef 10px, #f8f9fa 10px, #f8f9fa 20px);
}
.etiquette-paper {
    box-sizing: border-box;
    width: 50mm;
    height: 30mm;
    padding: 0;
    overflow: hidden;
    display: block;
    position: relative;
    flex: 0 0 auto;
    color: #000;
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
    font-family: Arial, sans-serif;
}
.etiquette-name {
    font-size: 3.1mm;
    line-height: 1.1;
    font-weight: 700;
    overflow-wrap: anywhere;
    overflow: hidden;
}
.etiquette-meta { overflow: hidden; white-space: nowrap; }
.etiquette-paper svg { display: block; overflow: visible; }
.etiquette-value { text-align: center; font: 700 2.3mm monospace; line-height: 1.1; }
#etiquettePlaceholder { margin: auto; text-align: center; }
#imprimantesListe { max-height: 310px; overflow-y: auto; }

@media (max-width: 576px) {
    .scanner-module { padding: 0; }
    .scanner-module .card-body { padding: 1rem; }
    .scanner-module #scannerCode { min-height: 58px; font-size: 1.15rem; }
    .scanner-module #scannerResultat { font-size: 1.05rem; }
    .scanner-module .btn { width: 100%; min-height: 52px; }
    .scanner-module .scanner-modes .btn { width: 50%; }
    .scanner-video-wrapper { aspect-ratio: 3 / 4; }
    .scanner-target { left: 7%; right: 7%; top: 40%; height: 20%; }
    .etiquettes-module { padding: 0; }
    .etiquette-preview-card { position: static; }
    .etiquette-preview-stage { min-height: 300px; padding: .75rem; }
    .etiquettes-module .btn-lg { width: 100%; min-height: 52px; }
}

/* BUILD 0021 — Statistiques */
.stats-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; }
.stats-kpi .card-body { display:flex; align-items:center; gap:.85rem; }
.stats-kpi i { font-size:1.5rem; width:2rem; text-align:center; }
.stats-kpi strong { display:block; font-size:1.35rem; line-height:1.2; overflow-wrap:anywhere; }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.stats-panel { min-width:0; background:var(--card); color:var(--text); }
.stats-panel h3 { font-size:1.05rem; margin-bottom:1rem; }
.stats-bar-row + .stats-bar-row { margin-top:.9rem; }
.stats-bar { height:.55rem; background:color-mix(in srgb,var(--text) 12%,transparent); border-radius:999px; overflow:hidden; margin:.25rem 0; }
.stats-bar span { display:block; height:100%; min-width:0; border-radius:inherit; background:var(--primary); }
.stats-list { display:grid; gap:.7rem; }
.stats-list > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.15rem .75rem; padding-bottom:.6rem; border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent); min-width:0; }
.stats-list > div:last-child { border-bottom:0; padding-bottom:0; }
.stats-list span { color:var(--text); opacity:.72; overflow-wrap:anywhere; }
.stats-list button { flex-basis:100%; width:max-content; text-align:left; }
body.dark .statistiques-module .card { background:var(--card); color:var(--text); border-color:rgba(255,255,255,.12); }
@media(max-width:767.98px) { .statistiques-module { padding-left:0; padding-right:0; } .stats-grid { grid-template-columns:1fr; } .stats-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .stats-cards { grid-template-columns:1fr; } .stats-panel .card-body,.stats-kpi .card-body { padding:1rem; } }

/* BUILD 0022 — Exports & Sauvegardes */
.exports-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.exports-grid .card { min-width:0; background:var(--card); color:var(--text); }
.exports-grid h3 { font-size:1.15rem; margin-bottom:1rem; }
.export-info-card { grid-column:1/-1; }
.restore-card { grid-column:1/-1; }
.restore-card .form-control { background:var(--card); color:var(--text); border-color:var(--border); }
.restore-card .form-control:focus { background:var(--card); color:var(--text); }
.restore-confirmation { padding:1rem; border:2px solid var(--danger); border-radius:.65rem; }
.export-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.export-actions .btn { min-height:46px; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.export-actions .btn-primary { grid-column:1/-1; }
.export-counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.65rem; }
.export-counts > div { display:flex; justify-content:space-between; gap:.75rem; padding:.7rem; border-radius:.5rem; background:color-mix(in srgb,var(--text) 6%,transparent); }
body.dark .exports-module .card { border-color:rgba(255,255,255,.12); }
@media(max-width:767.98px) { .exports-module { padding-left:0; padding-right:0; } .exports-grid { grid-template-columns:1fr; } .export-info-card,.restore-card { grid-column:auto; } .export-actions { grid-template-columns:1fr; } .export-actions .btn-primary { grid-column:auto; } .export-actions .btn { min-height:52px; } .restore-card .btn { width:100%; min-height:52px; } }

/* BUILD 0023 — Paramètres */
.parametres-module { max-width:1500px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.settings-card { min-width:0; background:var(--card); color:var(--text); border-color:var(--border); }
.settings-card h3 { display:flex; align-items:center; gap:.55rem; font-size:1.12rem; margin-bottom:1rem; }
.settings-card h3 i { width:1.35rem; text-align:center; color:var(--primary); }
.settings-card .form-control,.settings-card .form-select { background:var(--card); color:var(--text); border-color:var(--border); }
.settings-card .form-control:focus,.settings-card .form-select:focus { background:var(--card); color:var(--text); }
.settings-card .form-text,.settings-card .text-secondary { color:var(--text)!important; opacity:.68; }
.settings-list { display:grid; gap:.7rem; margin-bottom:1rem; }
.settings-list > div { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent); padding-bottom:.65rem; }
.settings-list > div:last-child { border-bottom:0; } .settings-list dt { font-weight:500; } .settings-list dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.settings-counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.65rem; }
.settings-counts > div { display:flex; justify-content:space-between; gap:.75rem; padding:.7rem; border-radius:.5rem; background:color-mix(in srgb,var(--text) 6%,transparent); }
.settings-save { position:sticky; bottom:0; display:flex; justify-content:flex-end; padding:1rem 0; margin-top:1rem; background:linear-gradient(transparent,var(--background) 25%); }
body.dark .settings-card { border-color:rgba(255,255,255,.12); } body.dark .settings-card option { background:var(--card); color:var(--text); }
@media(max-width:767.98px) { .parametres-module { padding-left:0; padding-right:0; } .settings-grid { grid-template-columns:1fr; } .settings-save .btn { width:100%; min-height:54px; } }
@media(max-width:420px) { .settings-card .card-body { padding:1rem; } .settings-list > div { flex-direction:column; gap:.25rem; } .settings-list dd { text-align:left; } }

/* BUILD 0024 — Notifications & Alertes */
.header-actions{display:flex;align-items:center;gap:.65rem}.notifications-wrapper{position:relative}header .notifications-button{position:relative;width:50px;height:50px;padding:0;border-radius:50%;color:var(--text);background:var(--card)}header .notifications-button:hover{transform:none;color:var(--primary)}.notifications-badge{position:absolute;top:-4px;right:-5px;min-width:21px;height:21px;padding:0 5px;border-radius:99px;color:#fff;background:var(--danger);border:2px solid var(--card);font-size:.68rem;line-height:17px}.notifications-panel{position:absolute;z-index:1000;top:calc(100% + .75rem);right:0;width:min(390px,calc(100vw - 1.5rem));max-height:calc(100vh - 105px);overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);box-shadow:0 18px 45px rgba(0,0,0,.22)}.notifications-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border)}header .notifications-header button{width:auto;height:auto;border-radius:.4rem;font-size:.82rem}.notifications-list{max-height:calc(100vh - 175px);overflow-y:auto}.notification-item{width:100%;height:auto;min-height:82px;display:grid;grid-template-columns:14px minmax(0,1fr);gap:.65rem;padding:.9rem 1rem;border:0;border-bottom:1px solid var(--border);border-radius:0;color:var(--text);background:transparent;text-align:left;font-size:.92rem}.notification-item:hover{transform:none;background:color-mix(in srgb,var(--primary) 7%,var(--card))}.notification-critique .notification-level{color:var(--danger)}.notification-attention .notification-level{color:var(--warning)}.notification-information .notification-level{color:var(--primary)}.notification-content{min-width:0;display:grid;gap:.15rem}.notification-message{font-weight:600}.notification-content small{opacity:.7;overflow-wrap:anywhere}.notifications-empty{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:1.5rem;text-align:center}body.dark .header-app{background:var(--card);border-color:var(--border)}
@media(max-width:700px){.header-app{padding:12px}.header-title small{display:none}.notifications-panel{position:fixed;top:76px;left:.75rem;right:.75rem;width:auto;max-height:calc(100vh - 88px)}}
@media(max-width:480px){.header-title{display:none}.header-search .input-group-text{display:none}.header-actions{gap:.35rem}header .notifications-button,#themeButton{width:44px;height:44px}}
/* Correctif BUILD 0024 — actualisation et lisibilité */
header .notifications-header #notificationsRefresh,
header .notifications-header #notificationsRefresh:hover,
header .notifications-header #notificationsRefresh:focus,
header .notifications-header #notificationsRefresh:active,
header .notifications-header #notificationsRefresh:disabled { transform:none; rotate:none; }
header .notifications-header #notificationsRefresh { min-width:112px; white-space:nowrap; }
.notification-item { align-items:start; }
.notification-content { display:flex; flex-direction:column; gap:.28rem; min-width:0; line-height:1.3; }
.notification-title { display:block; margin-bottom:.12rem; overflow-wrap:anywhere; }
.notification-message { display:block; margin:.08rem 0 .18rem; overflow-wrap:anywhere; line-height:1.35; }
.notification-content small { display:block; line-height:1.4; }
.notifications-updated { min-height:34px; padding:.55rem 1rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--text); opacity:.7; text-align:right; }
.notifications-updated.text-danger { opacity:1; }
@media(max-width:480px){.notifications-header{gap:.6rem}.notification-item{padding:.85rem}.notifications-updated{text-align:left}}

/* Le bouton thème ne doit pas hériter de la rotation générique du header. */
#themeButton,
#themeButton:hover,
#themeButton:focus,
#themeButton:active,
#themeButton:disabled {
    transform:none;
    rotate:none;
}
/* Correctif responsive mobile/tablette — panneau de navigation hors flux */
.mobile-menu-button,
.mobile-menu-close,
.sidebar-overlay { display:none; }

#content { min-width:0; }

@media (max-width:1024px) {
    body { display:block; max-width:100%; }
    body.mobile-menu-open { overflow:hidden; }

    #sidebar {
        position:fixed;
        z-index:1100;
        inset:0 auto 0 0;
        width:min(82vw,300px);
        height:100dvh;
        overflow-y:auto;
        transform:translateX(-105%);
        transition:transform .25s ease;
        box-shadow:8px 0 28px rgba(0,0,0,.32);
    }
    #sidebar.mobile-open { transform:translateX(0); }
    #sidebar .logo { padding:16px 58px 12px 16px; }
    #sidebar .logo img { width:112px; }
    #sidebar ul { padding:8px 0 20px; }
    #sidebar li { min-height:52px; padding:14px 22px; font-size:16px; }
    #sidebar li:hover { padding-left:28px; }
    #sidebar li i { width:30px; font-size:19px; }

    header .mobile-menu-close,
    header .mobile-menu-button,
    #sidebar .mobile-menu-close {
        display:flex;
        align-items:center;
        justify-content:center;
        width:46px;
        min-width:46px;
        height:46px;
        padding:0;
        border-radius:12px;
        transform:none;
    }
    #sidebar .mobile-menu-close {
        position:absolute;
        z-index:1;
        top:12px;
        right:12px;
        color:#fff;
        background:rgba(255,255,255,.12);
    }
    #sidebar .mobile-menu-close:hover,
    header .mobile-menu-button:hover { transform:none; }
    header .mobile-menu-button { color:#fff; background:var(--primary); }

    .sidebar-overlay {
        position:fixed;
        z-index:1090;
        inset:0;
        width:100%;
        height:100%;
        padding:0;
        border:0;
        border-radius:0;
        background:rgba(15,23,42,.58);
    }
    .sidebar-overlay:not([hidden]) { display:block; }

    #content { width:100%; max-width:100%; }
    .header-app {
        height:auto;
        min-height:80px;
        display:grid;
        grid-template-columns:auto auto minmax(0,1fr) auto;
        gap:10px 12px;
        padding:12px 16px;
    }
    .header-left { display:contents; }
    .mobile-menu-button { grid-column:1; grid-row:1; }
    .logo-mini { grid-column:2; grid-row:1; }
    .header-title { grid-column:3; grid-row:1; min-width:0; margin-right:0; }
    .header-title small { display:none; }
    .header-search { grid-column:1/-1; grid-row:2; width:100%; min-width:0; }
    .header-search .input-group,
    .header-search .form-control { width:100%; min-width:0; }
    .header-actions { grid-column:2; grid-row:1; }
    .logo-mini,
    .logo-mini img { width:44px; min-width:44px; height:44px; }

    #contenuPrincipal {
        width:auto;
        max-width:calc(100% - 32px);
        min-width:0;
        margin:16px;
        padding:20px;
    }
    #contenuPrincipal .container,
    #contenuPrincipal .container-fluid,
    #contenuPrincipal .row,
    #contenuPrincipal [class*="col-"] { min-width:0; }
    #contenuPrincipal img,
    #contenuPrincipal video,
    #contenuPrincipal canvas { max-width:100%; }
    #contenuPrincipal .table-responsive { max-width:100%; overflow-x:auto; }
    #contenuPrincipal input:not([type="checkbox"]):not([type="radio"]),
    #contenuPrincipal select,
    #contenuPrincipal textarea { max-width:100%; }

    .notifications-panel {
        position:fixed;
        z-index:1120;
        top:82px;
        left:12px;
        right:12px;
        width:auto;
        max-height:calc(100dvh - 94px);
    }
    .notifications-list { max-height:calc(100dvh - 180px); }
}

@media (max-width:576px) {
    .header-app { padding:10px 12px; gap:9px; }
    .header-left { gap:8px; }
    .header-title { display:none; }
    .header-search .input-group-text { display:none; }
    .header-actions { gap:6px; }
    header .notifications-button,
    #themeButton { width:44px; min-width:44px; height:44px; }

    #contenuPrincipal {
        max-width:calc(100% - 20px);
        margin:10px;
        padding:12px;
        border-radius:12px;
    }
    #contenuPrincipal .card-body { min-width:0; }
    #contenuPrincipal .btn { min-height:46px; }
    #contenuPrincipal > .container-fluid { padding-left:0; padding-right:0; }
    #contenuPrincipal > .container-fluid > .card .row.text-center {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px 8px;
    }
    #contenuPrincipal > .container-fluid > .card .row.text-center > .col { min-width:0; }
    #contenuPrincipal > .container-fluid > .card .row.text-center h3 {
        font-size:1.2rem;
        overflow-wrap:anywhere;
    }
    .scanner-video-wrapper { width:100%; }
    .etiquette-preview-stage { min-height:240px; padding:12px; }
}

@media (max-width:360px) {
    .logo-mini { display:none; }
    #contenuPrincipal > .container-fluid > .card .row.text-center { grid-template-columns:1fr; }
}