/* ============================================
   RESPONSIVE.CSS — Adaptations mobile/tablette
   ============================================ */

/* --- MOBILE (≤ 768px) --- */
@media (max-width: 768px) {

    /* Navigation : tout sur une ligne */
    .nav-container {
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        padding: 5px 12px 5px 8px; /* gauche réduit pour coller le logo */
    }

    .logo {
        padding-left: 0;
        margin-left: 0;
    }

    .nav-logo-img {
        height: 45px !important;
        margin-right: 0;
    }

    /* On masque le texte "PORTFOLIO GMP" sur mobile */
    .logo span {
        display: none !important;
    }

    nav ul {
        gap: 4px;
        margin: 0;
        padding: 0;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Bouton thème collé au bord droit */
    .theme-btn {
        padding: 6px 8px;
        font-size: 1rem;
    }

    nav ul li a {
        font-size: 0.8rem;
        padding: 5px 4px;
    }

    .btn-cv {
        padding: 6px 8px;
        font-size: 0.72rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Grille → 1 colonne */
    .skills-grid {
        grid-template-columns: 1fr !important;
    }

    .skill-item {
        width: 100%;
        max-width: none;
    }

    /* Hero */
    .hero {
        padding: 60px 15px;
    }

    .hero h1 {
        letter-spacing: -1px;
        margin: 15px 0;
    }

    .hero .subtitle {
        font-size: 1.1rem;
    }

    .description {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .hero-btns {
        max-width: 100%;
    }
.hero-btns .btn-primary,
    .hero-btns .btn-secondary {
        font-size: 1.1rem; /* Texte un peu plus petit sur mobile */
        padding: 15px;      /* Boutons moins épais */
    }
    /* Contact */
    .contact-page {
        padding-top: 120px !important;
    }

    .contact-container {
        padding: 0 20px 60px;
        gap: 30px;
    }

    .contact-info,
    .contact-form-container {
        min-width: 100%;
    }

    .contact-header h1 {
        font-size: 1.8rem;
    }
}

/* --- TABLETTE (≤ 900px) --- */
@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-page {
        padding-top: 100px;
    }
}

/* --- DESKTOP (≥ 769px) : masquer le bouton flottant contact --- */
@media (min-width: 769px) {
    .floating-contact {
        display: none;
    }

    }
    
    .contact-page {
        padding-top: 100px;
    }