/* =================================
   📱 RESPONSIVE GLOBAL 4
================================= */

/* ===============================
   TABLETTE
   900px et moins
================================= */
@media (max-width: 900px) {
    main {
        padding: 0.8rem;
    }

    .container {
        width: 100%;
        padding: 0.5rem;
    }

    /* Cartes */
    .card {
        padding: 1rem;
    }

    /* Informations */
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Formulaires */
    .form-row {
        flex-direction: column;
    }

    /* Profil */
    .profil-grid {
        grid-template-columns: 1fr;
    }

    /* Tableau */
    .table-admin {
        font-size: 0.9rem;
    }

    /* =================================
       TABLETTE / MOBILE
    ================================= */
    .page-grid {
        display: flex;
        flex-direction: column;
    }

    .sidebar {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .content {
        order: 2;
    }

    .sidebar .card {
        width: 90%;
        text-align: center;
    }
}

/* =================================
   HEADER MOBILE
================================= */
@media (max-width: 767px) {
    header {
        padding: 10px;
    }

    .header-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .header-logo {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
    }

    .header-logo img {
        height: 50px;
    }

    .header-content {
        grid-column: 1 / 3;
        grid-row: 1;
        text-align: center;
    }

    .header-content h1 {
        font-size: 1.3rem;
    }

    .header-user {
        display: none;
    }

    .header-burger {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    /* =================================
       MENU MOBILE
    ================================= */
    #main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: none;
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        justify-content: flex-start;
        background: var(--primary-color);
        padding: 10px;
        flex-direction: column;
        z-index: 4000;
    }

    #main-nav.active {
        display: flex;
    }

    /* Styles pour tous les liens du menu */
    #main-nav a {
        width: 100%;
        text-align: center;
        padding: 8px;
        display: block;
    }

    /* Menu admin */
    .admin-menu {
        width: 100%;
    }

    .admin-toggle {
        width: 100%;
        text-align: center;
        padding: 8px;
        background: var(--secondary-color);
        color: var(--text-color);
        display: block;
    }

    /* Menu déroulant admin */
    .admin-dropdown {
        display: none;
        width: 100%;
        background: var(--primary-color);
        padding: 0;
        box-shadow: none;
        flex-direction: column;
    }

    .admin-menu.active .admin-dropdown {
        display: flex;
    }

    .admin-dropdown a {
        width: 100%;
        text-align: center;
        padding: 8px;
        border-bottom: 1px solid var(--border-color);
        display: block;
    }

    /* Style pour "Déconnexion" (dernier lien direct de #main-nav) */
    #main-nav>a[href="/scripts/deconnexion.php"],
    #main-nav>a[href="/connexion.php"] {
        margin-top: 10px;
        border-top: 1px solid var(--border-color);
    }

    /* =================================
       AUTRES ÉLÉMENTS MOBILE
    ================================= */
    /* Cartes */
    .card h2 {
        font-size: 1.2rem;
    }

    /* Informations */
    .info-grid {
        grid-template-columns: 1fr;
    }

    /* Galerie */
    .gallery {
        grid-template-columns: 1fr;
    }

    /* Calendrier */
    .calendar-day {
        min-height: 38px;
        font-size: 0.75rem;
    }

    .calendar-header {
        flex-direction: row;
    }

    .calendar-header h3 {
        font-size: 1rem;
    }

    /* Compétences */
    .competences {
        grid-template-columns: 1fr;
    }

    .competences-grid {
        grid-template-columns: 40px 1fr 80px;
    }

    /* Masquer certaines colonnes */
    .competences-grid .grid-header:nth-child(4),
    .competences-grid .grid-cell:nth-child(4n) {
        display: none;
    }

    /* Boutons */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }
}