/* parametres/assets/css/style.css */
/* --- VARIABLES --- /
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--danger-color: #dc3545;
--dark-bg: #343a40;
--sidebar-width: 250px;
/ Largeur fixe de la sidebar */
}

/* --- BASES --- /
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
overflow-x: hidden;
/ Empêche le scroll horizontal lors des animations */
}

/* --- STRUCTURE GLOBALE (WRAPPER) --- /
/ On suppose que header.php ou le début de page contient un <div id="wrapper"> qui englobe tout */
#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    transition: all 0.3s ease;
}

/* --- SIDEBAR --- /
.sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
background-color: var(--dark-bg);
color: white;
min-height: 100vh;
transition: margin-left 0.3s ease;
/ On s'assure que la sidebar reste fixe si besoin, ou scroll avec la page */
}

.sidebar a {
    color: #adb5bd;
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.sidebar a:hover,
.sidebar a.active {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--primary-color);
}

/* --- CONTENU DE LA PAGE --- /
#page-content-wrapper {
width: 100%;
flex: 1;
/ Prend tout l'espace restant */
}

/* --- STYLE DES CARTES DASHBOARD --- */
.card-dashboard {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card-dashboard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* --- LOGIQUE RESPONSIVE (LE COEUR DU SYSTÈME) --- */
/* 1. COMPORTEMENT SUR MOBILE (Écrans < 768px) */
@media (max-width: 768px) {
    code Code

    /* Par défaut sur mobile, la sidebar est cachée à gauche */
    .sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
    }

    /* Si on ajoute la classe .toggled (via le bouton), la sidebar apparait */
    #wrapper.toggled .sidebar {
        margin-left: 0;
    }

    /* --- Correction des cartes horizontales sur mobile --- */
    /* Force les cartes "row g-0" à s'empiler verticalement */
    .card .row.g-0 {
        display: flex;
        flex-direction: column;
    }

    /* L'image prend toute la largeur et une hauteur fixe */
    .card .col-md-4 {
        width: 100%;
        height: 200px;
    }

    .card .col-md-4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Arrondi seulement en haut sur mobile */
        border-radius: 10px 10px 0 0 !important;
    }

    /* La partie texte prend toute la largeur */
    .card .col-md-8 {
        width: 100%;
    }

    /* Ajustement de la navbar pour qu'elle ne soit pas trop grande */
    .navbar h2 {
        font-size: 1.25rem !important;
        /* Réduit la taille du titre "Bienvenue" */
    }
}

/* 2. COMPORTEMENT SUR ORDI (Écrans > 768px) */
@media (min-width: 769px) {
    code Code

    /* Par défaut sur PC, la sidebar est visible (margin 0) */
    .sidebar {
        margin-left: 0;
    }

    /* Si on ajoute la classe .toggled, la sidebar se cache */
    #wrapper.toggled .sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
    }

    /* Correction de l'image sur PC pour qu'elle remplisse bien la hauteur */
    .card .col-md-4 img {
        height: 100%;
        min-height: 200px;
        border-radius: 10px 0 0 10px !important;
    }
}