/* =========================================================
   Design tokens (variables) — modifier ici change tout le site
   ========================================================= */
:root {
    /* Echelle de gris neutres */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Accent */
    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-light: #eef2ff;

    /* Semantique */
    --success: #16a34a;
    --success-bg: #f0fdf4;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-bg: #fef2f2;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;

    /* Surfaces */
    --bg-app: var(--gray-50);
    --bg-carte: #ffffff;
    --bordure: var(--gray-200);

    /* Texte */
    --texte: var(--gray-900);
    --texte-secondaire: var(--gray-600);
    --texte-discret: var(--gray-400);

    /* Espacements (base 4px) */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-8: 3rem;

    /* Rayons et ombres */
    --rayon-sm: 6px;
    --rayon-md: 8px;
    --rayon-lg: 12px;
    --ombre-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ombre-md: 0 4px 16px rgba(15, 23, 42, 0.08);

    /* Typographie */
    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --taille-xs: 0.75rem;
    --taille-sm: 0.8125rem;
    --taille-base: 0.9375rem;
    --taille-lg: 1.125rem;
    --taille-xl: 1.5rem;
    --taille-2xl: 1.875rem;

    --sidebar-largeur: 220px;
    --transition: 150ms ease;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--police);
    font-size: var(--taille-base);
    background: var(--bg-app);
    color: var(--texte);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-weight: 600;
    color: var(--texte);
    margin: 0 0 var(--e-4);
}

h1 { font-size: var(--taille-2xl); }
h2 { font-size: var(--taille-lg); margin-top: var(--e-6); }
h3 { font-size: var(--taille-base); }

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* =========================================================
   Ossature : sidebar + contenu
   ========================================================= */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-largeur);
    flex-shrink: 0;
    background: var(--bg-carte);
    border-right: 1px solid var(--bordure);
    padding: var(--e-5) var(--e-4);
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-marque {
    font-size: var(--taille-lg);
    font-weight: 700;
    color: var(--texte);
    margin-bottom: var(--e-6);
    padding: 0 var(--e-3);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--rayon-md);
    color: var(--texte-secondaire);
    font-weight: 500;
    font-size: var(--taille-sm);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.sidebar-nav a:hover {
    background: var(--gray-100);
    color: var(--texte);
}

.sidebar-nav a.actif {
    background: var(--accent-light);
    color: var(--accent);
}

.sidebar-nav svg { flex-shrink: 0; }

.sidebar-deconnexion {
    display: block;
    margin-top: var(--e-5);
    padding: var(--e-2) var(--e-3);
    color: var(--texte-discret);
    font-size: var(--taille-sm);
    text-decoration: none;
}

.sidebar-deconnexion:hover {
    color: var(--texte);
}

.main {
    flex: 1;
    min-width: 0;
}

.contenu {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--e-6) var(--e-6) var(--e-8);
}

.page-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-bottom: var(--e-5);
}

.page-entete h1 {
    margin: 0;
}

.fil-retour {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--taille-sm);
    color: var(--texte-secondaire);
    margin-bottom: var(--e-4);
}

/* =========================================================
   Cartes
   ========================================================= */
.carte {
    background: var(--bg-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
    margin-bottom: var(--e-5);
    overflow: hidden;
}

.carte-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
    border-bottom: 1px solid var(--bordure);
    background: var(--gray-50);
}

.carte-entete h3 {
    margin: 0;
}

.carte-entete .meta {
    font-size: var(--taille-sm);
    color: var(--texte-secondaire);
}

.carte-actions {
    display: flex;
    gap: var(--e-2);
}

/* =========================================================
   Tableaux
   ========================================================= */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: var(--e-3) var(--e-5);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

th:first-child, td:first-child {
    text-align: left;
    white-space: normal;
}

thead th {
    font-size: var(--taille-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--texte-discret);
    font-weight: 600;
    border-bottom: 1px solid var(--bordure);
}

th a.lien-tri {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: inherit;
}

th a.lien-tri:hover {
    color: var(--texte-secondaire);
}

.tri-inactif {
    opacity: 0;
    transition: opacity var(--transition);
}

th a.lien-tri:hover .tri-inactif {
    opacity: 0.6;
}

/* Barre de tri compacte pour mobile : masquee sur desktop, le tableau garde son thead cliquable */
.barre-tri {
    display: none;
}

tbody tr {
    border-bottom: 1px solid var(--bordure);
    transition: background var(--transition);
}

tbody tr:last-child { border-bottom: none; }

tbody tr:hover {
    background: var(--gray-50);
}

tfoot tr {
    background: var(--gray-50);
    font-weight: 600;
    border-top: 1px solid var(--bordure);
}

/* Actions (icones) dans une ligne de tableau */
.actions-ligne {
    display: flex;
    justify-content: flex-end;
    gap: var(--e-1);
    opacity: 0;
    transition: opacity var(--transition);
}

tr:hover .actions-ligne,
.actions-ligne:focus-within {
    opacity: 1;
}

.icone-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--rayon-sm);
    color: var(--texte-discret);
    transition: background var(--transition), color var(--transition);
}

.icone-bouton:hover {
    background: var(--gray-200);
    color: var(--texte);
    text-decoration: none;
}

.icone-bouton.danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* =========================================================
   Badges et valeurs
   ========================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--e-1) var(--e-2);
    border-radius: var(--rayon-sm);
    font-size: var(--taille-xs);
    font-weight: 600;
}

.badge-neutre {
    background: var(--gray-100);
    color: var(--texte-secondaire);
}

.positif { color: var(--success); }
.negatif { color: var(--danger); }

.alerte {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: #92400e;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--rayon-md);
    font-size: var(--taille-sm);
    margin-bottom: var(--e-5);
}

/* =========================================================
   Formulaires
   ========================================================= */
form.carte-form {
    background: var(--bg-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
    padding: var(--e-5);
    max-width: 420px;
}

label {
    display: block;
    margin-top: var(--e-4);
    font-weight: 600;
    font-size: var(--taille-sm);
    color: var(--texte-secondaire);
}

label:first-child { margin-top: 0; }

input, select {
    width: 100%;
    margin-top: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-md);
    font-size: var(--taille-base);
    font-family: var(--police);
    color: var(--texte);
    background: var(--bg-carte);
    transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.actions-formulaire {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

/* =========================================================
   Boutons
   ========================================================= */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    border: 1px solid transparent;
    border-radius: var(--rayon-md);
    font-family: var(--police);
    font-size: var(--taille-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.bouton:hover { text-decoration: none; }

.bouton-primaire {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
.bouton-primaire:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.bouton-secondaire {
    background: var(--bg-carte);
    border-color: var(--bordure);
    color: var(--texte);
}
.bouton-secondaire:hover { background: var(--gray-50); border-color: var(--gray-300); }

.bouton-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}
.bouton-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

/* =========================================================
   Graphiques
   ========================================================= */
.carte-graphique {
    background: var(--bg-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
    padding: var(--e-5);
    margin-bottom: var(--e-5);
}

svg.graphique { display: block; max-width: 100%; height: auto; }

.grille-graphique { stroke: var(--gray-100); stroke-width: 1; }
.axe-graphique { fill: var(--texte-discret); font-size: 11px; }
.zone-graphique { fill: var(--accent-light); opacity: 0.6; }
.ligne-graphique { fill: none; stroke: var(--accent); stroke-width: 2; }
.point-graphique { fill: var(--accent); stroke: var(--bg-carte); stroke-width: 2; }
.etiquette-graphique { font-size: 11px; fill: var(--texte-discret); }

/* =========================================================
   Page d'accueil
   ========================================================= */
.cartes-accueil {
    display: flex;
    gap: var(--e-4);
    flex-wrap: wrap;
}

.carte-accueil {
    background: var(--bg-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-lg);
    box-shadow: var(--ombre-sm);
    padding: var(--e-6) var(--e-5);
    flex: 1;
    min-width: 180px;
    text-align: center;
    text-decoration: none;
    color: var(--texte);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.carte-accueil:hover {
    border-color: var(--accent);
    box-shadow: var(--ombre-md);
    text-decoration: none;
    transform: translateY(-1px);
}

.carte-accueil svg {
    color: var(--accent);
    margin-bottom: var(--e-3);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 720px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--bordure);
        padding: var(--e-3) var(--e-4);
    }

    .sidebar-marque { margin-bottom: var(--e-3); }

    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .contenu {
        padding: var(--e-4);
    }

    table, thead, tbody, tr {
        display: block;
        width: 100%;
    }

    thead tr {
        position: absolute;
        left: -9999px;
    }

    .barre-tri {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--e-3);
        padding: var(--e-3) var(--e-5) 0;
        font-size: var(--taille-sm);
    }

    .barre-tri-label {
        color: var(--texte-discret);
        text-transform: uppercase;
        font-size: var(--taille-xs);
        letter-spacing: 0.03em;
    }

    .barre-tri-lien {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: var(--texte-secondaire);
    }

    .barre-tri-lien .tri-inactif {
        opacity: 0.5;
    }

    .barre-tri-lien.actif {
        color: var(--texte);
        font-weight: 600;
    }

    tbody tr {
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-md);
        margin-bottom: var(--e-3);
        padding: var(--e-2) 0;
    }

    tfoot tr {
        border: 1px solid var(--bordure);
        border-radius: var(--rayon-md);
    }

    td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: normal;
        border-bottom: none;
        padding: var(--e-2) var(--e-4);
    }

    td:before {
        content: attr(data-label);
        font-size: var(--taille-xs);
        text-transform: uppercase;
        color: var(--texte-discret);
        font-weight: 600;
        margin-right: var(--e-3);
    }

    .actions-ligne { opacity: 1; }

    form.carte-form { max-width: 100%; }
}