/* ==========================================================================
   FRANÇOIS SANTÉ — Système de design
   Badges QR Employés — feuille de style partagée par toutes les pages
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
    /* Couleurs de marque — vert/jaune dominants (dégradés), rouge réservé à
       quelques cas précis (suppression, alertes, petits accents de logo). */
    --c-primary-900:#0a2e1c;
    --c-primary-800:#0d3d24;
    --c-primary-700:#0f4d2e;
    --c-primary-600:#12643b;
    --c-primary-500:#15804a;
    --c-primary-400:#1f9d5c;
    --c-primary-100:#e3f5ea;
    --c-primary-50: #f2faf5;

    --c-accent:#d1a020;
    --c-accent-dark:#a97a11;

    --c-success:#15804a;
    --c-success-bg:#e3f5ea;
    --c-danger:#c8242f;
    --c-danger-bg:#fbe9ea;
    --c-warning:#b8780c;
    --c-warning-bg:#fbf1dc;

    /* Liseré tricolore décoratif — indépendant des rôles sémantiques ci-dessus */
    --stripe-red:#c8242f;
    --stripe-gold:#b8780c;
    --stripe-green:#15804a;

    /* Encre / neutres */
    --c-ink-900:#10131c;
    --c-ink-700:#3a4152;
    --c-ink-500:#69708a;
    --c-ink-300:#aab0c2;
    --c-ink-200:#dde1ea;
    --c-ink-100:#eef1f7;

    --c-surface:#ffffff;
    --c-bg:#f3f5fa;
    --c-border:#e4e8f1;

    /* Ombres */
    --shadow-xs:0 1px 2px rgba(16,24,50,.05);
    --shadow-sm:0 2px 6px rgba(16,24,50,.06);
    --shadow-md:0 8px 24px rgba(16,24,50,.09);
    --shadow-lg:0 18px 45px rgba(16,24,50,.14);
    --shadow-glow:0 10px 30px rgba(21,128,74,.35);

    /* Rayons */
    --r-sm:8px;
    --r-md:12px;
    --r-lg:18px;
    --r-pill:999px;

    --font-sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
    margin:0;
    font-family:var(--font-sans);
    background:var(--c-bg);
    color:var(--c-ink-700);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
    margin-top:0;
    color:var(--c-ink-900);
    font-weight:700;
    letter-spacing:-.01em;
}

a{
    color:var(--c-primary-500);
    text-decoration:none;
}
a:hover{ color:var(--c-primary-600); text-decoration:underline; }

/* Ancien conteneur générique (conservé pour compat) */
.container{
    max-width:1000px;
    margin:30px auto;
    background:var(--c-surface);
    padding:20px 30px;
    border-radius:var(--r-md);
    box-shadow:var(--shadow-sm);
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

button, .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:0;
    padding:10px 18px;
    border:none;
    border-radius:var(--r-sm);
    background:linear-gradient(135deg, var(--c-primary-500), var(--c-accent-dark));
    color:#fff;
    cursor:pointer;
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 4px 14px rgba(21,128,74,.28);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

button:hover, .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(21,128,74,.36);
    color:#fff;
    text-decoration:none;
}

button:active, .btn:active{ transform:translateY(0); }

button:disabled, .btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.btn.secondary, .btn-secondary{
    background:linear-gradient(135deg,var(--c-accent),var(--c-accent-dark));
    box-shadow:0 4px 14px rgba(209,160,32,.3);
}
.btn.secondary:hover, .btn-secondary:hover{ box-shadow:0 8px 20px rgba(209,160,32,.4); }

.btn.outline, .btn-outline{
    background:var(--c-surface);
    color:var(--c-primary-600);
    border:1px solid var(--c-ink-200);
    box-shadow:none;
}
.btn.outline:hover, .btn-outline:hover{
    background:var(--c-primary-50);
    color:var(--c-primary-600);
    box-shadow:none;
    border-color:var(--c-primary-400);
}

.btn.danger, .btn-danger{
    background:linear-gradient(135deg,#d1414b,var(--c-danger));
    box-shadow:0 4px 14px rgba(200,36,47,.28);
}
.btn.danger:hover, .btn-danger:hover{ box-shadow:0 8px 20px rgba(200,36,47,.36); }

/* ==========================================================================
   TOPBAR — partagée par toutes les pages authentifiées
   ========================================================================== */

.topbar{
    position:fixed;
    top:0; left:0;
    width:100%;
    height:72px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    box-shadow:var(--shadow-sm);
    border-bottom:1px solid var(--c-border);
    z-index:999;
}

.topbar::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,
        var(--stripe-red) 0 33.33%,
        var(--stripe-gold) 33.33% 66.66%,
        var(--stripe-green) 66.66% 100%);
}

.topbar .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:17px;
    color:var(--c-primary-700);
    letter-spacing:-.01em;
    white-space:nowrap;
}

.logo-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--stripe-green);
    box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--stripe-red), 0 4px 10px rgba(10,46,28,.25);
    color:var(--stripe-red);
    font-size:14px;
    font-weight:800;
    font-style:italic;
    font-family:Georgia,'Times New Roman',serif;
    flex-shrink:0;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:14px;
}

.user-box{
    display:flex;
    align-items:center;
    gap:10px;
}

.user-avatar{
    width:32px; height:32px;
    border-radius:50%;
    background:var(--c-primary-100);
    color:var(--c-primary-700);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:13px;
    flex-shrink:0;
}

.user-name{
    font-weight:600;
    font-size:14px;
    color:var(--c-ink-900);
}

.role-badge{
    background:linear-gradient(135deg,var(--c-primary-100),#e3f5ea);
    color:var(--c-primary-700);
    padding:4px 11px;
    border-radius:var(--r-pill);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.logout-btn{
    background:transparent;
    color:var(--c-danger);
    padding:8px 14px;
    border-radius:var(--r-sm);
    border:1px solid rgba(200,36,47,.25);
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    box-shadow:none;
    transition:.2s;
}
.logout-btn:hover{
    background:var(--c-danger-bg);
    color:var(--c-danger);
    text-decoration:none;
    transform:none;
    box-shadow:none;
}

/* Page avec topbar fixe : réserver l'espace */
.has-topbar{ padding-top:96px; }

@media(max-width:600px){
    .topbar{
        height:auto;
        flex-wrap:wrap;
        gap:10px;
        padding:14px 18px;
    }
    .topbar-right{ width:100%; justify-content:space-between; }
    .has-topbar{ padding-top:128px; }
}

/* ==========================================================================
   CARDS / SURFACES
   ========================================================================== */

.card{
    background:var(--c-surface);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
    border:1px solid var(--c-border);
}

.page-wrapper{ padding:24px; }

/* ==========================================================================
   TABLE
   ========================================================================== */

.table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.table th, .table td{
    padding:13px 14px;
    text-align:left;
    border-bottom:1px solid var(--c-border);
}

.table th{
    background:var(--c-primary-50);
    color:var(--c-ink-500);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    position:sticky;
    top:0;
}

.table tbody tr{ transition:background .12s ease; }
.table tbody tr:hover{ background:var(--c-primary-50); }
.table tbody tr:last-child td{ border-bottom:none; }

.photo-thumb{
    width:44px;
    height:56px;
    object-fit:cover;
    border-radius:6px;
    border:1px solid var(--c-border);
    box-shadow:var(--shadow-xs);
}

.table-actions a{
    font-weight:600;
    font-size:13px;
}
.table-actions .sep{ color:var(--c-ink-300); margin:0 6px; }
.table-actions a.danger-link{ color:var(--c-danger); }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.filter-form{
    background:var(--c-surface);
    border-radius:var(--r-md);
    padding:16px;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--c-border);
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:12px;
}

.filter-form .field{ display:flex; flex-direction:column; gap:5px; }
.filter-form label{
    font-size:12px; font-weight:700; color:var(--c-ink-500);
    text-transform:uppercase; letter-spacing:.04em;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
.filter-form input[type="date"],
.search-box input{
    width:100%;
    padding:10px 13px;
    border:1.5px solid var(--c-ink-200);
    border-radius:var(--r-sm);
    font-size:14px;
    font-family:var(--font-sans);
    color:var(--c-ink-900);
    background:var(--c-surface);
    transition:border-color .15s ease, box-shadow .15s ease;
    box-sizing:border-box;
}

form input:focus, .search-box input:focus{
    outline:none;
    border-color:var(--c-primary-400);
    box-shadow:0 0 0 4px rgba(21,128,74,.14);
}

form label{
    display:block;
    margin-top:0;
    font-weight:700;
    font-size:13px;
    color:var(--c-ink-700);
}

.search-box{ position:relative; }
.search-box input{ padding-left:40px; }
.search-box::before{
    content:"🔎";
    position:absolute;
    left:13px; top:50%;
    transform:translateY(-50%);
    font-size:14px;
    opacity:.6;
}

/* --- Formulaires employé (add/edit) --- */

.form-card{
    background:var(--c-surface);
    max-width:920px;
    margin:0 auto;
    padding:28px 28px 32px;
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
    border:1px solid var(--c-border);
}

.form-card h1{
    margin:0 0 4px;
    font-size:23px;
}

.form-subtitle{
    margin:0 0 22px;
    color:var(--c-ink-500);
    font-size:14px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px 18px;
}

.form-group label{
    display:block;
    font-weight:700;
    font-size:13px;
    color:var(--c-ink-700);
    margin-bottom:6px;
}

.form-group--full{ grid-column:1 / -1; }

.form-actions{ margin-top:24px; }
.form-actions button{ width:100%; padding:13px; font-size:15px; }

.back-link{ margin-top:18px; text-align:center; font-size:14px; }
.back-link a{ color:var(--c-ink-500); font-weight:600; }
.back-link a:hover{ color:var(--c-primary-600); }

#cropper-container{
    margin-top:12px;
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
    padding:12px;
    background:var(--c-primary-50);
}
#photo-preview{
    max-width:100%;
    max-height:320px;
    display:block;
    margin:0 auto;
    border-radius:var(--r-sm);
}
#apply-crop{
    margin-top:12px;
    width:100%;
}
#apply-crop:disabled{ background:var(--c-ink-300); }

.current-photo-preview{
    max-width:120px;
    max-height:160px;
    border-radius:var(--r-sm);
    border:1px solid var(--c-border);
    margin-bottom:10px;
    display:block;
    box-shadow:var(--shadow-xs);
}
.old-photo-text{ font-size:12px; color:var(--c-ink-500); margin:0 0 12px; }

.photo-choice-container{
    display:flex;
    gap:10px;
    margin-bottom:6px;
}
.btn-photo-choice{
    flex:1;
    padding:14px 10px;
    border:1.5px dashed var(--c-ink-200);
    border-radius:var(--r-sm);
    background:var(--c-primary-50);
    color:var(--c-ink-500);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    text-align:center;
    transition:all .18s ease;
}
.btn-photo-choice:hover{
    border-color:var(--c-primary-400);
    color:var(--c-primary-600);
    background:var(--c-primary-100);
}
.btn-photo-choice:active{ transform:scale(.98); }

@media(min-width:768px){
    .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .form-actions{ text-align:right; }
    .form-actions button{ width:auto; padding:12px 22px; }
    .back-link{ text-align:left; }
}

/* ==========================================================================
   FICHE EMPLOYÉ (employee_view.php)
   ========================================================================== */

.employee-card{
    max-width:920px;
    margin:0 auto;
    background:var(--c-surface);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
    border:1px solid var(--c-border);
    padding:28px 28px 32px;
}

.employee-header{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items:center;
    margin-bottom:8px;
    padding-bottom:20px;
    border-bottom:1px solid var(--c-border);
}

.employee-photo{
    width:104px;
    height:130px;
    border-radius:var(--r-md);
    border:1px solid var(--c-border);
    object-fit:cover;
    background:var(--c-primary-50);
    box-shadow:var(--shadow-sm);
}

.employee-main-info{ flex:1; min-width:200px; }
.employee-main-info h1{ margin:0 0 8px; font-size:22px; }
.employee-main-info p{ margin:3px 0; font-size:14px; color:var(--c-ink-500); }
.employee-main-info p strong{ color:var(--c-ink-900); }

.badge-link{ margin-top:10px; font-size:14px; }

.employee-details{ margin-top:18px; }

.details-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px 24px;
    font-size:14px;
}
.details-item{
    padding:10px 0;
    border-bottom:1px dashed var(--c-border);
}
.details-item strong{
    display:block;
    color:var(--c-ink-500);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:700;
    margin-bottom:3px;
}

.actions-row{
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:14px;
}

@media(min-width:768px){
    .details-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ==========================================================================
   BADGE / CARTE D'IDENTITÉ (badge.php)
   ========================================================================== */

.badge-card{
    position:relative;
    width:100%;
    max-width:340px;
    background:var(--c-surface);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    padding:0 0 22px;
    text-align:center;
    margin:0 auto;
    overflow:hidden;
    border:1px solid var(--c-border);
}

.badge-card::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg,
        var(--stripe-red) 0 33.33%,
        var(--stripe-gold) 33.33% 66.66%,
        var(--stripe-green) 66.66% 100%);
    z-index:3;
}

.badge-card .badge-ribbon{
    background:linear-gradient(135deg, var(--c-primary-600), var(--c-accent-dark));
    padding:16px 16px 34px;
    color:#fff;
    position:relative;
}
.badge-card .badge-ribbon::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:24px;
    background:var(--c-surface);
    border-radius:50% 50% 0 0 / 100% 100% 0 0;
    transform:scaleX(1.4);
}

.badge-card .badge-org{
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.85;
}
.badge-card h2{
    margin:4px 0 0;
    font-size:15px;
    letter-spacing:.06em;
    font-weight:700;
}

.badge-photo{
    width:112px;
    height:140px;
    object-fit:cover;
    border-radius:var(--r-md);
    border:4px solid var(--c-surface);
    margin:-46px auto 0;
    position:relative;
    z-index:2;
    background:var(--c-primary-50);
    box-shadow:var(--shadow-md);
    display:block;
}

.badge-card h3{
    margin:14px 0 2px;
    font-size:19px;
    color:var(--c-ink-900);
}

.badge-matricule{
    display:inline-block;
    margin:2px 0 12px;
    padding:3px 12px;
    background:#fff;
    border:1px solid var(--c-border);
    color:var(--stripe-green);
    border-radius:var(--r-pill);
    font-size:12px;
    font-weight:800;
    font-style:italic;
    letter-spacing:.04em;
}

.badge-card p{
    margin:3px 0;
    font-size:13px;
    color:var(--c-ink-500);
    padding:0 20px;
}
.badge-card p strong{ color:var(--c-ink-900); }

.badge-qr{ margin-top:16px; }
.badge-qr img{
    width:126px;
    height:126px;
    padding:8px;
    background:#fff;
    border:1px solid var(--c-border);
    border-radius:var(--r-sm);
}

.badge-footer{
    margin-top:12px;
    padding:0 24px;
    font-size:11px;
    color:var(--c-ink-300);
    line-height:1.4;
}

@media print{
    body{ background:#fff; }
    .top-links, .bottom-links, .topbar{ display:none !important; }
    .badge-card{
        box-shadow:none;
        border:1px solid #ccc;
        max-width:340px;
        margin:0 auto;
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
    .badge-card::before,
    .badge-card .badge-ribbon,
    .badge-matricule,
    .role-badge{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}

/* ==========================================================================
   ÉCRAN DE CONNEXION (login.php)
   ========================================================================== */

.auth-body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 15% 20%, rgba(184,120,12,.28), transparent 42%),
        radial-gradient(circle at 85% 80%, rgba(21,128,74,.24), transparent 45%),
        linear-gradient(135deg,var(--c-primary-900),var(--c-primary-700) 60%,var(--c-primary-600));
}

.auth-navbar{
    padding:22px;
    text-align:center;
    color:#fff;
    font-weight:700;
    font-size:15px;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:.9;
}

.auth-wrapper{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.auth-box{
    width:100%;
    max-width:410px;
    padding:42px 34px;
    border-radius:var(--r-lg);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:var(--shadow-xl);
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
    position:relative;
    overflow:hidden;
}

.auth-box::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg,
        var(--stripe-red) 0 33.33%,
        var(--stripe-gold) 33.33% 66.66%,
        var(--stripe-green) 66.66% 100%);
}

.auth-icon{
    width:56px; height:56px;
    margin:0 auto 18px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--stripe-green);
    box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--stripe-red), 0 10px 26px rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--stripe-red);
    font-size:19px;
    font-weight:800;
    font-style:italic;
    font-family:Georgia,'Times New Roman',serif;
}

.auth-box h1{
    text-align:center;
    margin-bottom:6px;
    font-size:23px;
    font-weight:700;
    color:#fff;
}

.auth-subtitle{
    text-align:center;
    margin-bottom:26px;
    font-size:13px;
    color:rgba(255,255,255,.65);
}

.auth-input-group{ margin-bottom:16px; }

.auth-input-group label{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    opacity:.8;
    display:block;
    margin-bottom:7px;
    color:#fff;
}

.auth-input-group input{
    width:100%;
    padding:12px 14px;
    border-radius:var(--r-sm);
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    font-family:var(--font-sans);
    outline:none;
    transition:.2s;
    box-sizing:border-box;
}
.auth-input-group input::placeholder{ color:rgba(255,255,255,.45); }
.auth-input-group input:focus{
    border-color:var(--c-accent);
    background:rgba(255,255,255,.14);
    box-shadow:0 0 0 3px rgba(209,160,32,.25);
}

.auth-submit{
    width:100%;
    padding:13px;
    margin-top:6px;
    border:none;
    border-radius:var(--r-sm);
    background:linear-gradient(135deg,var(--c-primary-500),var(--c-accent-dark));
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:.25s;
    box-shadow:0 10px 26px rgba(21,128,74,.35);
}
.auth-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(21,128,74,.45);
}
.auth-submit:disabled{ opacity:.7; cursor:not-allowed; transform:none; }

.auth-spinner{
    width:17px; height:17px;
    border:2.5px solid rgba(255,255,255,.4);
    border-top:2.5px solid #fff;
    border-radius:50%;
    animation:auth-spin .8s linear infinite;
    display:none;
}
@keyframes auth-spin{ to{ transform:rotate(360deg); } }

.auth-error{
    background:rgba(200,36,47,.18);
    border:1px solid rgba(200,36,47,.4);
    color:#fff;
    padding:11px 14px;
    border-radius:var(--r-sm);
    margin-bottom:16px;
    text-align:center;
    font-size:13px;
}

.auth-footer{
    text-align:center;
    padding:16px;
    font-size:12px;
    color:rgba(255,255,255,.6);
}

/* ==========================================================================
   DASHBOARD — spécifiques restants
   ========================================================================== */

.dashboard-header{ max-width:1180px; margin:0 auto 16px; }

.actions-row.top-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:12px;
}

.counter-box{
    background:var(--c-primary-900);
    color:#fff;
    padding:10px 18px;
    border-radius:var(--r-sm);
    font-weight:800;
    font-size:14px;
    box-shadow:var(--shadow-sm);
}
.counter-box span{ color:var(--c-accent); }

.search-box.dash-search{ max-width:1180px; margin:0 auto 16px; }
.filter-form.dash-filter{ max-width:1180px; margin:0 auto 16px; }
.table-container{
    max-width:1180px;
    margin:0 auto;
    background:var(--c-surface);
    border-radius:var(--r-lg);
    padding:8px;
    box-shadow:var(--shadow-md);
    border:1px solid var(--c-border);
    overflow-x:auto;
}

.empty-state{
    max-width:1180px;
    margin:40px auto;
    text-align:center;
    color:var(--c-ink-500);
    background:var(--c-surface);
    border-radius:var(--r-lg);
    padding:50px 20px;
    box-shadow:var(--shadow-sm);
}

.pagination{
    max-width:1180px;
    margin:18px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}
.pagination-status{
    font-size:13px;
    font-weight:700;
    color:var(--c-ink-500);
}

/* ==========================================================================
   FICHE EMPLOYÉ / VÉRIFICATION QR (employee_view.php) — rendu badge portrait
   ========================================================================== */

.verify-page{
    min-height:100vh;
    background:var(--c-bg);
}

.verify-wrapper{
    display:flex;
    justify-content:center;
    padding:48px 16px;
}

.verify-card{
    position:relative;
    width:100%;
    max-width:380px;
    background:linear-gradient(160deg, var(--c-primary-900), var(--c-primary-800) 60%, var(--c-primary-700));
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    padding:32px 26px 30px;
    color:#fff;
    text-align:center;
}

.verify-card::before,
.verify-card::after{
    content:"";
    position:absolute;
}
.verify-card::before{
    top:-18px; right:-46px;
    width:170px; height:76px;
    transform:rotate(35deg);
    background:linear-gradient(135deg, var(--stripe-red), var(--stripe-gold));
}
.verify-card::after{
    top:-46px; right:34px;
    width:80px; height:80px;
    transform:rotate(35deg);
    background:var(--c-primary-500);
    opacity:.55;
}

.verify-brand{
    position:relative; z-index:2;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--stripe-gold);
}
.verify-tagline{
    position:relative; z-index:2;
    font-size:11px;
    color:rgba(255,255,255,.6);
    margin:2px 0 20px;
}

.verify-photo{
    position:relative; z-index:2;
    width:112px; height:112px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
    box-shadow:0 0 0 3px var(--stripe-red), 0 8px 20px rgba(0,0,0,.35);
    margin:0 auto 16px;
    background:var(--c-primary-100);
    display:block;
}
.verify-photo-placeholder{
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:rgba(255,255,255,.5);
}

.verify-name{
    position:relative; z-index:2;
    font-size:20px;
    font-weight:800;
    color:#fff;
    margin:0 0 4px;
}
.verify-role{
    position:relative; z-index:2;
    font-size:13px;
    color:rgba(255,255,255,.65);
    margin:0 0 14px;
}

.verify-matricule{
    position:relative; z-index:2;
    display:inline-block;
    padding:4px 16px;
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.25);
    font-size:12px;
    font-weight:800;
    letter-spacing:.05em;
    color:var(--stripe-gold);
}

.verify-status{
    position:relative; z-index:2;
    margin-top:16px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    color:#5fd499;
    background:rgba(21,128,74,.18);
    border:1px solid rgba(95,212,153,.35);
    padding:5px 12px;
    border-radius:var(--r-pill);
}

.verify-divider{
    position:relative; z-index:2;
    height:1px;
    background:rgba(255,255,255,.15);
    margin:22px 0 18px;
}

.verify-details{
    position:relative; z-index:2;
    text-align:left;
    display:grid;
    gap:11px;
}
.verify-detail-row{
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:13px;
    padding-bottom:9px;
    border-bottom:1px dashed rgba(255,255,255,.12);
}
.verify-detail-row:last-child{ border-bottom:none; padding-bottom:0; }
.verify-detail-row .label{
    color:rgba(255,255,255,.5);
    font-weight:700;
    text-transform:uppercase;
    font-size:10.5px;
    letter-spacing:.05em;
    white-space:nowrap;
}
.verify-detail-row .value{
    color:#fff;
    font-weight:600;
    text-align:right;
    word-break:break-word;
}

.verify-back{
    position:relative; z-index:2;
    margin-top:24px;
    text-align:center;
}
.verify-back a{ color:rgba(255,255,255,.7); font-size:13px; font-weight:600; }
.verify-back a:hover{ color:#fff; }

/* ==========================================================================
   OLD NAVBAR (compat pages non encore migrées)
   ========================================================================== */

.navbar{
    background:var(--c-primary-900);
    color:#fff;
    padding:10px 20px;
}
.navbar a{ color:#fff; margin-right:15px; }

/* ==========================================================================
   LANDING PAGE PUBLIQUE (index.php)
   ========================================================================== */

.landing{ background:var(--c-surface); }

.landing-nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:999;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--c-border);
}
.landing-nav::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,
        var(--stripe-red) 0 33.33%,
        var(--stripe-gold) 33.33% 66.66%,
        var(--stripe-green) 66.66% 100%);
}

.landing-nav .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    font-size:18px;
    color:var(--c-primary-700);
}

.landing-nav-links{
    display:flex;
    align-items:center;
    gap:28px;
}
.landing-nav-links a{
    color:var(--c-ink-700);
    font-weight:600;
    font-size:14px;
}
.landing-nav-links a:hover{ color:var(--c-primary-600); text-decoration:none; }

.landing-nav-right{
    display:flex;
    align-items:center;
    gap:14px;
}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    font-size:22px;
    line-height:1;
    color:var(--c-primary-700);
    cursor:pointer;
    padding:6px 4px;
}

@media(max-width:760px){
    .landing-nav{ padding:0 14px; }

    .nav-toggle{ display:inline-flex; }

    .landing-nav .logo{ font-size:15px; gap:7px; }

    .landing-nav-links{
        display:none;
        position:absolute;
        top:100%; left:0; right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:var(--c-surface);
        box-shadow:var(--shadow-md);
        border-bottom:1px solid var(--c-border);
    }
    .landing-nav-links.open{ display:flex; }
    .landing-nav-links a{
        padding:14px 24px;
        text-align:right;
        border-bottom:1px solid var(--c-border);
    }

    .landing-nav-right{ gap:6px; }
    .landing-nav-right .btn{
        padding:8px 9px;
        font-size:11.5px;
        white-space:nowrap;
    }
    .nav-toggle{ font-size:19px; padding:4px; }
}

@media(max-width:420px){
    .landing-nav .logo-text{ display:none; }
}

/* --- HERO --- */
.landing-hero{
    padding:150px 24px 90px;
    text-align:center;
    background:
        radial-gradient(circle at 12% 15%, rgba(21,128,74,.10), transparent 40%),
        radial-gradient(circle at 88% 25%, rgba(184,120,12,.14), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(200,36,47,.08), transparent 45%),
        var(--c-bg);
}

.hero-eyebrow{
    display:inline-block;
    padding:6px 16px;
    border-radius:var(--r-pill);
    background:var(--c-primary-100);
    color:var(--c-primary-700);
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:20px;
}

.landing-hero h1{
    max-width:760px;
    margin:0 auto 18px;
    font-size:clamp(28px,4.5vw,46px);
    line-height:1.15;
}

.hero-subtitle{
    max-width:600px;
    margin:0 auto 32px;
    font-size:17px;
    color:var(--c-ink-500);
    line-height:1.6;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
}
.hero-actions .btn{ padding:14px 26px; font-size:15px; }

/* --- SECTIONS GÉNÉRIQUES --- */
.landing-section{
    max-width:1080px;
    margin:0 auto;
    padding:80px 24px;
}
.landing-section.alt{
    max-width:none;
    background:var(--c-primary-50);
}
.landing-section.alt > .landing-inner{
    max-width:1080px;
    margin:0 auto;
}

.section-eyebrow{
    color:var(--c-accent-dark);
    font-weight:800;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:10px;
}
.section-title{
    font-size:clamp(24px,3vw,32px);
    margin-bottom:14px;
    max-width:640px;
}
.section-text{
    color:var(--c-ink-500);
    font-size:16px;
    line-height:1.7;
    max-width:680px;
}

/* --- À PROPOS --- */
.about-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
}
.about-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:26px;
}
.about-stat{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
    padding:18px;
    box-shadow:var(--shadow-sm);
}
.about-stat .num{ font-size:22px; font-weight:800; color:var(--c-primary-700); display:block; }
.about-stat .lbl{ font-size:12px; color:var(--c-ink-500); font-weight:600; }

@media(min-width:860px){
    .about-grid{ grid-template-columns:1.1fr .9fr; }
}

/* --- PRODUITS --- */
.product-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
    margin-top:36px;
}
@media(min-width:700px){
    .product-grid{ grid-template-columns:repeat(3,1fr); }
}

.product-card{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    padding:28px 24px;
    box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}
.product-icon{
    width:56px; height:56px;
    border-radius:14px;
    background:var(--c-primary-100);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:16px;
}
.product-card h3{ font-size:18px; margin-bottom:8px; }
.product-card p{ color:var(--c-ink-500); font-size:14px; line-height:1.6; margin:0; }

.wellness-disclaimer{
    margin-top:32px;
    padding:16px 20px;
    background:var(--c-warning-bg);
    border:1px solid rgba(184,120,12,.25);
    border-radius:var(--r-md);
    font-size:13px;
    color:#6b4d0a;
    line-height:1.6;
}

/* --- RÉSEAU --- */
.role-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    margin-top:32px;
}
@media(min-width:700px){
    .role-grid{ grid-template-columns:repeat(3,1fr); }
}
.role-card{
    text-align:center;
    padding:26px 18px;
    background:var(--c-surface);
    border-radius:var(--r-md);
    border:1px solid var(--c-border);
}
.role-card .role-icon{ font-size:28px; margin-bottom:10px; }
.role-card h4{ margin:0 0 6px; font-size:15px; color:var(--c-ink-900); }
.role-card p{ margin:0; font-size:13px; color:var(--c-ink-500); }

.city-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.city-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-pill);
    font-size:13px;
    font-weight:700;
    color:var(--c-primary-700);
}

/* --- CTA FINALE --- */
.landing-cta{
    max-width:1080px;
    margin:0 auto 80px;
    padding:48px 36px;
    border-radius:var(--r-lg);
    background:linear-gradient(135deg,var(--c-primary-800),var(--c-accent-dark));
    color:#fff;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.landing-cta::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg,
        var(--stripe-red) 0 33.33%,
        var(--stripe-gold) 33.33% 66.66%,
        var(--stripe-green) 66.66% 100%);
}
.landing-cta h2{ color:#fff; font-size:26px; margin-bottom:12px; }
.landing-cta p{ color:rgba(255,255,255,.8); max-width:520px; margin:0 auto 26px; }
.landing-cta .btn-secondary{ }

/* --- FOOTER --- */
.landing-footer{
    background:var(--c-primary-900);
    color:rgba(255,255,255,.75);
    padding:50px 24px 26px;
}
.footer-grid{
    max-width:1080px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:26px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
@media(min-width:700px){
    .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; }
}
.landing-footer h5{
    color:#fff;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 14px;
}
.landing-footer .logo{ color:#fff; font-weight:800; font-size:17px; margin-bottom:10px; }
.landing-footer p, .landing-footer li{ font-size:13px; line-height:1.9; }
.landing-footer ul{ list-style:none; padding:0; margin:0; }
.landing-footer a{ color:rgba(255,255,255,.75); }
.landing-footer a:hover{ color:#fff; }
.footer-bottom{
    max-width:1080px;
    margin:20px auto 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:rgba(255,255,255,.5);
}