:root {

    --couleur-fond: #f5f5f5;
    --couleur-texte: #1f2933;
    --couleur-menu-fond: #1f2933;

    --couleur-menu-texte: #f9fbfd;

    --couleur-menu-lien: #cbd2d9;

    --couleur-menu-lien-hover-bg: #323f4b;

    --couleur-menu-lien-hover-texte: #ffffff;

    --couleur-menu-lien-actif-bg: #1769aa;

    --couleur-menu-lien-actif-texte: #ffffff;



    --couleur-section-titre-texte: #e5e7eb;



    --couleur-carte-fond: #ffffff;

    --couleur-carte-bordure: #e2e2e2;

    --couleur-carte-ombre: rgba(15, 23, 42, 0.08);



    --couleur-lien: #1d4ed8;

    --couleur-lien-hover: #1e40af;



    --couleur-champ-fond: #ffffff;

    --couleur-champ-bordure: #d1d5db;



    --couleur-bouton-fond: #2563eb;

    --couleur-bouton-fond-hover: #1d4ed8;

    --couleur-bouton-texte: #ffffff;



    --couleur-erreur: #dc2626;

    --couleur-texte-muted: #6b7280;
 /* Tableaux (th & lignes zébrées) */
    --couleur-table-entete-fond: #e5e7eb;
    --couleur-table-entete-texte: #111827;
    --couleur-table-zebra: #f9fafb;

}

:root[data-theme="sombre"] {
    --couleur-fond: #020617;          /* fond page */
    --couleur-texte: #e5e7eb;

    --couleur-menu-fond: #020617;
    --couleur-menu-texte: #e5e7eb;
    --couleur-menu-lien: #9ca3af;
    --couleur-menu-lien-hover-bg: #111827;
    --couleur-menu-lien-hover-texte: #f9fafb;
    --couleur-menu-lien-actif-bg: #1d4ed8;
    --couleur-menu-lien-actif-texte: #f9fafb;

    --couleur-section-titre-texte: #9ca3af;

    /* cartes un peu plus claires que le fond global */
    --couleur-carte-fond: #0b1120;
    --couleur-carte-bordure: #1f2937;
    --couleur-carte-ombre: rgba(15, 23, 42, 0.7);

    --couleur-lien: #60a5fa;
    --couleur-lien-hover: #93c5fd;

    /* champs / inputs */
    --couleur-champ-fond: #020617;
    --couleur-champ-bordure: #374151;

    --couleur-bouton-fond: #3b82f6;
    --couleur-bouton-fond-hover: #60a5fa;
    --couleur-bouton-texte: #f9fafb;

    --couleur-erreur: #f87171;
    --couleur-texte-muted: #9ca3af;

    /* tableaux */
    --couleur-table-entete-fond: #020617;
    --couleur-table-entete-texte: #e5e7eb;
    --couleur-table-zebra: #020617;
}



/* Réglages globaux */



*,

*::before,

*::after {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background: var(--couleur-fond);

    color: var(--couleur-texte);

}



/* Liens */



a {

    color: var(--couleur-lien);

    text-decoration: none;

}



a:hover {

    color: var(--couleur-lien-hover);

    text-decoration: underline;

}



/* Layout principal (pages connectées) */



.layout {

    display: flex;

    min-height: 100vh;

}



.menu-lateral {

    width: 230px;

    background: var(--couleur-menu-fond);

    color: var(--couleur-menu-texte);

    display: flex;

    flex-direction: column;

    padding: 16px 12px;

}



.menu-titre {

    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    margin-bottom: 16px;

    font-size: 1.1rem;

}



.logo-semawe {

    width: 28px;

    height: 28px;

    object-fit: contain;

}



.menu-utilisateur {

    font-size: 0.9rem;

    margin-bottom: 4px;

    opacity: 0.9;

}



.menu-role {

    font-size: 0.8rem;

    opacity: 0.7;

    margin-bottom: 16px;

}



.menu-nav a {

    display: block;

    padding: 6px 10px;

    margin-bottom: 4px;

    border-radius: 4px;

    font-size: 0.9rem;

    color: var(--couleur-menu-lien);

}



.menu-nav a:hover {

    background: var(--couleur-menu-lien-hover-bg);

    color: var(--couleur-menu-lien-hover-texte);

    text-decoration: none;

}



.menu-nav a.actif {

    background: var(--couleur-menu-lien-actif-bg);

    color: var(--couleur-menu-lien-actif-texte);

}



.menu-section-titre {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    margin: 12px 4px 4px;

    color: var(--couleur-section-titre-texte);

}



.menu-bas {

    margin-top: auto;

    font-size: 0.85rem;

}



.menu-bas a {

    color: var(--couleur-menu-texte);

}



.menu-bas a:hover {

    text-decoration: underline;

}



.contenu {

    flex: 1;

    padding: 20px 26px;

    background: var(--couleur-fond);

    overflow-x: auto;

}



.contenu > h1 {

    margin-top: 0;

    margin-bottom: 20px;

    font-size: 1.6rem;

}



/* Carte / blocs de page */



.bloc-page {

    background: var(--couleur-carte-fond);

    border-radius: 6px;

    padding: 16px 18px;

    box-shadow: 0 1px 3px var(--couleur-carte-ombre);

    border: 1px solid var(--couleur-carte-bordure);

}



.texte-muted {

    color: var(--couleur-texte-muted);

}



/* Grille de cartes pour la page d'accueil */



.section-cartes {

    display: grid;

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

    gap: 16px;

    margin-top: 16px;

}



.section-cartes .bloc-page {

    min-height: 130px;

}





/* Pages type “carte centrée” (connexion, etc.) */



.page-centree {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5rem;

}



.carte {

    background: var(--couleur-carte-fond);

    border-radius: 12px;

    border: 1px solid var(--couleur-carte-bordure);

    padding: 2rem;

    width: 100%;

    max-width: 400px;

    box-shadow: 0 12px 30px var(--couleur-carte-ombre);

}



.carte-titre {

    margin-top: 0;

    margin-bottom: 1.5rem;

    font-size: 1.4rem;

    font-weight: 600;

    text-align: center;

}



/* Formulaires */



.champ-groupe {

    margin-bottom: 1rem;

}



.champ-label {

    display: block;

    margin-bottom: 0.35rem;

    font-size: 0.9rem;

}



.champ-saisie {

    width: 100%;

    padding: 0.75rem;

    border-radius: 8px;

    border: 1px solid var(--couleur-champ-bordure);

    background: var(--couleur-champ-fond);

    color: var(--couleur-texte);

    font-size: 0.95rem;

}



.champ-saisie:focus {

    outline: none;

    border-color: var(--couleur-bouton-fond);

    box-shadow: 0 0 0 1px var(--couleur-bouton-fond);

}

/* En thème sombre, tous les inputs/select/textarea ont un fond sombre,
   même s'ils n'ont pas la classe .champ-saisie (cas des tableaux) */
:root[data-theme="sombre"] input[type="text"],
:root[data-theme="sombre"] input[type="number"],
:root[data-theme="sombre"] input[type="password"],
:root[data-theme="sombre"] input[type="email"],
:root[data-theme="sombre"] select,
:root[data-theme="sombre"] textarea {
    background: var(--couleur-champ-fond);
    color: var(--couleur-texte);
    border: 1px solid var(--couleur-champ-bordure);
    border-radius: 6px;
}

:root[data-theme="sombre"] input[type="text"]:focus,
:root[data-theme="sombre"] input[type="number"]:focus,
:root[data-theme="sombre"] input[type="password"]:focus,
:root[data-theme="sombre"] input[type="email"]:focus,
:root[data-theme="sombre"] select:focus,
:root[data-theme="sombre"] textarea:focus {
    outline: none;
    border-color: var(--couleur-bouton-fond);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.5);
}


/* Boutons */



.bouton-principal {

    width: 100%;

    padding: 0.8rem;

    border-radius: 8px;

    border: none;

    background: var(--couleur-bouton-fond);

    color: var(--couleur-bouton-texte);

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    margin-top: 0.5rem;

}



.bouton-principal:hover {

    background: var(--couleur-bouton-fond-hover);

}



/* Messages */



.message-erreur {

    color: var(--couleur-erreur);

    margin-bottom: 1rem;

    text-align: center;

    font-size: 0.9rem;

}



/* Interrupteur de thème */



.interrupteur-theme {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.9rem;

    cursor: pointer;

    user-select: none;

}



.interrupteur-theme input {

    display: none;

}



.interrupteur-theme .piste {

    width: 40px;

    height: 20px;

    border-radius: 999px;

    background: var(--couleur-champ-bordure);

    position: relative;

    transition: background 0.2s ease;

}



.interrupteur-theme .bulle {

    position: absolute;

    top: 2px;

    left: 2px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--couleur-carte-fond);

    transition: transform 0.2s ease;

}



.interrupteur-theme input:checked + .piste {

    background: var(--couleur-bouton-fond);

}



.interrupteur-theme input:checked + .piste .bulle {

    transform: translateX(20px);

}





/* Tableaux */



table {

    border-collapse: collapse;

    width: 100%;

    font-size: 0.9rem;

    background: var(--couleur-carte-fond);

}



/* On force les bordures et couleurs, même s'il y a des styles inline */

th,

td {

    border: 1px solid var(--couleur-carte-bordure) !important;

    padding: 6px 8px;

    color: var(--couleur-texte);

}



th {

    background: var(--couleur-table-entete-fond) !important;

    color: var(--couleur-table-entete-texte) !important;

    text-align: left;

}



/* rayures sur les lignes (on cible les cellules pour écraser d'éventuels background inline) */

tbody tr:nth-child(even) td {

    background: var(--couleur-table-zebra) !important;

}



/* petites classes utilitaires */



.tableau-compact {

    font-size: 0.85rem;

}



.tableau-nombre {

    text-align: right;

    white-space: nowrap;

}



.tableau-centre {

    text-align: center;

}





/* Écarts sur les vues globales / propositions */



.ecart-positif {

    background: #e6f4ea !important;

}



.ecart-negatif {

    background: #fdecea !important;

}



.ecart-neutre {

    background: #f9fafb !important;

}



/* Variante en thème sombre : teintes plus discrètes */



:root[data-theme="sombre"] .ecart-positif {

    background: rgba(22, 163, 74, 0.18) !important;

}



:root[data-theme="sombre"] .ecart-negatif {

    background: rgba(220, 38, 38, 0.22) !important;

}



:root[data-theme="sombre"] .ecart-neutre {

    background: rgba(148, 163, 184, 0.15) !important;

}