/* =====================================================================
   PharmaGest — Design system
   Palette : clinique, sobre, digne de confiance.
   - Fond neutre très clair, encre profonde presque noire pour le texte
   - Accent principal : sarcelle profond (confiance, santé, précision)
   - Accent secondaire : vert sauge (validation / succès)
   - Alerte péremption : ambre. Rupture de stock : corail.
   ===================================================================== */

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

:root {
    --encre: #10201d;
    --fond: #f6f8f7;
    --surface: #ffffff;
    --bordure: #dde5e2;

    --sarcelle-900: #0b3d3c;
    --sarcelle-700: #0f5f5b;
    --sarcelle-500: #147d76;
    --sarcelle-100: #e3f0ee;

    --sauge-600: #4c7a5e;
    --sauge-100: #e7f2ea;

    --ambre-600: #a5680c;
    --ambre-100: #fbedd1;

    --corail-600: #b1402f;
    --corail-100: #fbe3de;

    --rayon: 8px;
    --ombre: 0 1px 2px rgba(16, 32, 29, 0.06), 0 4px 12px rgba(16, 32, 29, 0.05);
    --police-titre: 'Lexend', sans-serif;
    --police-corps: 'Inter', sans-serif;
    --police-donnees: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police-corps);
    background: var(--fond);
    color: var(--encre);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 600; margin: 0 0 .5em; color: var(--sarcelle-900); }
a { color: var(--sarcelle-700); }

/* --- Structure --- */
.app-shell { display: flex; min-height: 100vh; }

.barre-laterale {
    width: 240px;
    background: var(--sarcelle-900);
    color: #d9ece9;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.barre-laterale .logo {
    padding: 18px 20px;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.barre-laterale .logo .logo-badge {
    background: #fff;
    border-radius: 8px;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.barre-laterale .logo .logo-badge img { display: block; height: 30px !important; width: auto !important; max-width: 30px; max-height: 30px; }
.barre-laterale .logo .logo-texte { line-height: 1.15; }
.barre-laterale .logo span { color: var(--sauge-100); }

/* --- Filigrane (logo en fond, sur chaque rubrique) --- */
.contenu-principal { position: relative; }
.contenu-principal .filigrane-logo {
    content: "";
    position: fixed;
    top: 50%;
    left: calc(50% + 120px);
    transform: translate(-50%, -50%);
    width: 46vw;
    max-width: 620px;
    height: 46vw;
    max-height: 620px;
    background: url('../img/logo.png') center center no-repeat;
    background-size: contain;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
.contenu-principal > *:not(.filigrane-logo) { position: relative; z-index: 1; }
@media (max-width: 900px) {
    .contenu-principal .filigrane-logo { left: 50%; width: 70vw; height: 70vw; }
}
.barre-laterale nav { padding: 14px 10px; flex: 1; overflow-y: auto; }
.barre-laterale .groupe-titre {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: #7fa9a3; margin: 18px 10px 6px;
}
.barre-laterale a.lien-nav {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--rayon);
    color: #cfe6e2; text-decoration: none; font-size: .92rem; font-weight: 500;
    margin-bottom: 2px;
}
.barre-laterale a.lien-nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.barre-laterale a.lien-nav.actif { background: var(--sarcelle-700); color: #fff; }
.barre-laterale .pied-utilisateur {
    padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem;
}
.barre-laterale .pied-utilisateur .role { color: #8fb9b3; text-transform: capitalize; }
.barre-laterale .pied-utilisateur a { color: #f2c9c0; }

.contenu-principal { flex: 1; padding: 28px 34px; max-width: 1400px; }
.entete-page { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.entete-page p.sous-titre { color: #5b6d68; margin: 4px 0 0; font-size: .93rem; }

/* --- Cartes / stats --- */
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 26px; }
.carte-stat {
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 18px 20px; box-shadow: var(--ombre);
}
.carte-stat .etiquette { font-size: .78rem; color: #5b6d68; text-transform: uppercase; letter-spacing: .05em; }
.carte-stat .valeur { font-family: var(--police-donnees); font-size: 1.7rem; font-weight: 600; color: var(--sarcelle-900); margin-top: 4px; }
.carte-stat .valeur.alerte { color: var(--corail-600); }
.carte-stat .tendance { font-size: .82rem; margin-top: 6px; color: var(--sauge-600); }

.carte {
    background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 22px; box-shadow: var(--ombre); margin-bottom: 22px;
}

/* --- Tableaux --- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
thead th {
    text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: #5b6d68; padding: 10px 12px; border-bottom: 2px solid var(--bordure);
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--bordure); }
tbody tr:hover { background: var(--sarcelle-100); }
td.numerique, th.numerique { text-align: right; font-family: var(--police-donnees); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .76rem; font-weight: 600; }
.badge-succes { background: var(--sauge-100); color: var(--sauge-600); }
.badge-alerte { background: var(--ambre-100); color: var(--ambre-600); }
.badge-danger { background: var(--corail-100); color: var(--corail-600); }
.badge-neutre { background: var(--sarcelle-100); color: var(--sarcelle-700); }

/* --- Formulaires --- */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: #33453f; }
input, select, textarea {
    width: 100%; padding: 9px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon);
    font-family: var(--police-corps); font-size: .93rem; background: var(--surface); color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sarcelle-500); outline-offset: 1px; border-color: var(--sarcelle-500); }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }

.btn {
    display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: var(--rayon);
    padding: 10px 18px; font-family: var(--police-corps); font-weight: 600; font-size: .9rem;
    cursor: pointer; text-decoration: none;
}
.btn-principal { background: var(--sarcelle-700); color: #fff; }
.btn-principal:hover { background: var(--sarcelle-900); }
.btn-secondaire { background: var(--surface); border: 1px solid var(--bordure); color: var(--encre); }
.btn-secondaire:hover { background: var(--sarcelle-100); }
.btn-danger { background: var(--corail-600); color: #fff; }
.btn-petit { padding: 6px 12px; font-size: .8rem; }

/* --- Alertes --- */
.alerte { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 18px; font-size: .9rem; font-weight: 500; }
.alerte-succes { background: var(--sauge-100); color: var(--sauge-600); border: 1px solid #b9d9c4; }
.alerte-erreur { background: var(--corail-100); color: var(--corail-600); border: 1px solid #f0c2b8; }

/* --- Page de connexion --- */
.ecran-connexion {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, var(--sarcelle-900) 0%, var(--sarcelle-700) 55%, var(--sauge-600) 130%);
}
.carte-connexion {
    background: var(--surface); border-radius: 12px; padding: 40px 36px; width: 100%; max-width: 380px;
    box-shadow: 0 20px 60px rgba(11,61,60,.35);
}
.carte-connexion .logo-connexion { font-family: var(--police-titre); font-weight: 700; font-size: 1.4rem; color: var(--sarcelle-900); margin-bottom: 4px; }
.carte-connexion .logo-connexion span { color: var(--sauge-600); }
.carte-connexion .logo-connexion img { display: block; max-width: 160px; height: auto; margin: 0 auto 10px; }
.carte-connexion p.tag { color: #5b6d68; font-size: .88rem; margin-bottom: 26px; }

/* --- Paiement --- */
.grille-paiement { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.option-paiement {
    border: 2px solid var(--bordure); border-radius: var(--rayon); padding: 18px 14px;
    text-align: center; cursor: pointer; background: var(--surface); transition: border-color .15s;
}
.option-paiement:hover { border-color: var(--sarcelle-500); }
.option-paiement.selectionne { border-color: var(--sarcelle-700); background: var(--sarcelle-100); }
.option-paiement img { height: 32px; margin-bottom: 8px; }
.option-paiement .nom-methode { font-weight: 600; font-size: .88rem; }

/* --- Scan produit (douchette / caméra) --- */
.bloc-scanner {
    background: var(--sarcelle-100); border: 1px solid var(--bordure); border-radius: var(--rayon);
    padding: 16px 18px; margin-bottom: 20px;
}
.bloc-scanner-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bloc-scanner-entete label { font-weight: 600; font-size: .92rem; }
#champScanner { font-family: var(--police-donnees); font-size: 1rem; letter-spacing: .02em; }
#champScanner:focus { outline: 2px solid var(--sarcelle-500); outline-offset: 1px; }

/* --- Utilitaires --- */
.text-muted { color: #5b6d68; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
@media (max-width: 880px) {
    .app-shell { flex-direction: column; }
    .barre-laterale { width: 100%; height: auto; position: relative; }
    .contenu-principal { padding: 20px; }
}

/* --- Mode hors-ligne / synchronisation --- */
.bandeau-hors-ligne {
    position: sticky; top: 0; z-index: 1000; width: 100%;
    padding: 10px 18px; font-size: .9rem; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.bandeau-hl-off { background: var(--corail-100); color: var(--corail-600); border-bottom: 1px solid var(--corail-600); }
.bandeau-hl-sync { background: var(--ambre-100); color: var(--ambre-600); border-bottom: 1px solid var(--ambre-600); }
.bandeau-hl-erreur { background: var(--corail-100); color: var(--corail-600); border-bottom: 1px solid var(--corail-600); }
.bandeau-hors-ligne button { white-space: nowrap; }

.toast-hors-ligne {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--sarcelle-900); color: #fff; padding: 12px 18px; border-radius: var(--rayon);
    box-shadow: var(--ombre); z-index: 2000; max-width: 90vw; opacity: 0; transition: opacity .3s, transform .3s;
    font-size: .88rem;
}
.toast-hors-ligne.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-hl-erreur { background: var(--corail-600); }

.panneau-erreurs-hors-ligne {
    position: fixed; inset: 0; background: rgba(16,32,29,.45); z-index: 3000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.panneau-erreurs-contenu {
    background: var(--surface); border-radius: var(--rayon); padding: 22px; max-width: 560px; width: 100%;
    max-height: 80vh; overflow-y: auto; box-shadow: var(--ombre);
}
.panneau-erreurs-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ligne-erreur-hl { border-top: 1px solid var(--bordure); padding: 10px 0; }
.ligne-erreur-hl .texte-muted { color: var(--corail-600); font-size: .85rem; margin: 4px 0 8px; }