/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    /* Grids en une colonne sur mobile */
    .hero-content,
    .about-content,
    .contact-grid,
    .entreprise-grid,
    .bts-grid,
    .skills-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* Textes plus petits */
    .hero-text h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    .section-title::before {
        font-size: 3rem;
        top: -30px;
    }

    /* Navigation verticale et compacte */
    nav {
        padding: 0.5rem 0;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        gap: 0.3rem;
    }

    nav a {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
        width: 90%;
        text-align: center;
    }

    /* Timeline à gauche */
    .timeline::before {
        left: 0;
    }

    /* Avatar plus petit */
    .avatar-placeholder {
        width: 200px;
        height: 200px;
    }

    .avatar-placeholder div[style*="font-size: 8rem"] {
        font-size: 4rem !important;
    }

    .avatar-placeholder div[style*="font-size: 2rem"] {
        font-size: 1.2rem !important;
    }

    /* Sections avec moins de padding */
    section {
        padding: 80px 15px 40px;
        min-height: auto;
    }

    /* Modales adaptées */
    .modal-content {
        margin: 0.5rem;
        max-height: 95vh;
    }

    .modal-header {
        padding: 1.5rem;
    }

    .modal-header h2 {
        font-size: 1.5rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-close {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    /* Tableau responsive */
    .tableau-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 0.75rem;
        min-width: 600px;
    }

    table th,
    table td {
        padding: 0.6rem 0.4rem;
        white-space: nowrap;
    }

    /* Cartes projets */
    .project-card {
        margin-bottom: 1rem;
    }

    .project-content {
        padding: 1rem;
    }

    .project-content h3 {
        font-size: 1.1rem;
    }

    .project-content p {
        min-height: auto;
        font-size: 0.9rem;
    }

    /* Formulaire contact */
    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
        padding: 0.8rem;
    }

    /* Veille technologique */
    .veille-card {
        padding: 1rem;
    }

    .veille-card h4 {
        font-size: 1rem;
    }

    /* Fix pour les contenus qui débordent */
    .entreprise-card,
    .bts-card,
    .skill-category,
    .veille-card,
    .timeline-item,
    .highlight-box {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Images et iframes responsive */
    img, iframe {
        max-width: 100%;
        height: auto;
    }

    .cv-preview iframe {
        height: 400px;
    }

    /* Textes dans les cartes */
    .entreprise-card p,
    .bts-card p,
    .about-text p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Boutons CTA */
    .cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
        text-align: center;
    }

    /* Resource links dans modales */
    .resource-links {
        flex-direction: column;
    }

    .resource-link {
        width: 100%;
        text-align: center;
    }

    /* Grilles de veille */
    .veille-grid,
    .sources-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Timeline items */
    .timeline-item {
        margin-left: 20px;
        padding: 1.5rem;
    }

    .timeline-item h3 {
        font-size: 1.1rem;
    }

    .timeline-item .date {
        font-size: 0.9rem;
    }

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

    /* Skills tags */
    .skill-tag {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    /* Social links */
    .social-links {
        justify-content: center;
    }

    .social-link {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    /* Textes encore plus petits */
    .hero-text h1 {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    nav a {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .avatar-placeholder {
        width: 180px;
        height: 180px;
    }

    /* Padding réduit */
    section {
        padding: 70px 10px 30px;
    }

    .container {
        padding: 0 10px;
    }

    /* Boutons plus petits */
    .project-link {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }

    /* Modal encore plus compact */
    .modal-header h2 {
        font-size: 1.2rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* Cartes avec moins de padding */
    .entreprise-card,
    .bts-card,
    .skill-category {
        padding: 1.5rem;
    }
}