/**
 * Responsive Mobile Amélioré - Portfolio Nathan Diegelmann
 * Optimisé pour confort de lecture et espacement généreux
 * @version 2.0
 */

/* ==========================================
   MEDIA QUERY TABLETTE (768px - 1024px)
   ========================================== */
@media (max-width: 1024px) and (min-width: 769px) {

    /* Sections plus spacieuses */
    section {
        padding: 4.5rem 2.5rem !important;
    }

    /* Containers avec padding confortable */
    .container,
    [class*="container-"] {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Hero spacieux */
    .hero-v2 {
        padding: 4rem 2.5rem !important;
    }

    .hero-left {
        padding: 6rem 3rem 4rem !important;
    }

    /* Grilles 2 colonnes */
    [class*="grid"]:not(.hero-circle) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem;
    }

    /* Espacements entre éléments */
    .section-title-main {
        margin-bottom: 1.5rem !important;
    }

    .section-subtitle {
        margin-bottom: 3rem !important;
    }
}

/* ==========================================
   MEDIA QUERY MOBILE (max-width: 768px)
   CHANGEMENTS PRINCIPAUX POUR AÉRATION
   ========================================== */
@media (max-width: 768px) {

    /* ==========================================
       1. ESPACEMENTS GÉNÉRAUX AUGMENTÉS
       ========================================== */

    /* Sections : +50% d'espace vertical */
    section {
        padding: 4rem 2rem !important;
        margin-bottom: 0 !important;
    }

    /* Containers plus spacieux */
    .container,
    [class*="container-"] {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        max-width: 100%;
    }

    /* ==========================================
       2. HERO SECTION - PLUS AÉRÉ
       ========================================== */

    .hero-v2 {
        padding: 5rem 2rem 4rem !important;
        min-height: auto !important;
    }

    .hero-left {
        padding: 3rem 2rem !important;
        gap: 2rem;
    }

    .hero-right {
        padding: 3rem 2rem !important;
    }

    /* Espacements hero */
    .hero-greeting {
        margin-bottom: 1.5rem !important;
    }

    .hero-name {
        margin-bottom: 2rem !important;
        line-height: 1.3 !important;
    }

    .hero-role {
        margin-bottom: 2rem !important;
    }

    .hero-description-v2 {
        margin-bottom: 2.5rem !important;
        line-height: 1.8 !important;
        font-size: 1.05rem !important;
    }

    /* Boutons CTA - Taille tactile minimum 44px */
    .hero-cta {
        gap: 1.5rem !important;
        margin-bottom: 2.5rem !important;
        flex-direction: column;
        align-items: stretch;
    }

    .cta-btn {
        padding: 16px 28px !important; /* = 48px hauteur */
        font-size: 1rem !important;
        width: 100%;
        min-height: 48px !important;
        justify-content: center;
    }

    .cta-btn i {
        font-size: 1.1rem;
    }

    /* Liens sociaux avec bon espacement */
    .hero-socials {
        gap: 1.25rem !important;
        margin-top: 2rem !important;
    }

    .social-link {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.3rem !important;
    }

    /* ==========================================
       3. TYPOGRAPHIE AMÉLIORÉE
       ========================================== */

    /* Titres avec line-height généreux */
    h1,
    .hero-title,
    .hero-name {
        font-size: clamp(2.2rem, 7vw, 3.5rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 1.5rem !important;
        word-break: break-word;
    }

    h2,
    .section-title-main {
        font-size: clamp(1.75rem, 5.5vw, 2.5rem) !important;
        line-height: 1.4 !important;
        margin-bottom: 1.25rem !important;
    }

    h3,
    .category-title,
    .timeline-title {
        font-size: clamp(1.35rem, 4.5vw, 2rem) !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }

    h4 {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
    }

    /* Paragraphes avec line-height confortable */
    p,
    .text,
    [class*="text"],
    .section-subtitle {
        font-size: 1.05rem !important;
        line-height: 1.75 !important;
        margin-bottom: 1.5rem !important;
    }

    .section-subtitle {
        margin-bottom: 3rem !important;
    }

    /* ==========================================
       4. GRILLES ET COLONNES EN SINGLE COLUMN
       ========================================== */

    /* Toutes les grilles passent en 1 colonne */
    [class*="grid"]:not(.hero-circle),
    [class*="-grid"]:not(.hero-circle),
    .projects-grid,
    .projects-grid-full,
    .skills-grid,
    .skills-columns,
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Technologies grille : 2 colonnes max sur mobile */
    .technologies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Hero stats en colonne */
    .hero-stats {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .stat,
    .stat-card {
        width: 100% !important;
        max-width: 100%;
        padding: 1.5rem !important;
    }

    /* ==========================================
       5. CARTES ET CONTENEURS SPACIEUX
       ========================================== */

    .card,
    [class*="card"]:not(.stat-card),
    .project-card,
    .project-card-full,
    .skill-card,
    .tech-card,
    .about-card,
    .electric-card-wrapper {
        padding: 2rem 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    /* Cartes projets avec espace généreux */
    .project-card-full {
        padding: 2.5rem 2rem !important;
    }

    .project-title {
        margin-bottom: 1.5rem !important;
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    .project-desc {
        margin-bottom: 2rem !important;
        line-height: 1.7 !important;
        font-size: 1.05rem !important;
    }

    .project-tech {
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .tech-tag {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.95rem !important;
    }

    .project-links {
        gap: 1.5rem !important;
    }

    .project-btn {
        padding: 14px 24px !important;
        min-height: 48px !important;
        font-size: 1rem !important;
    }

    /* ==========================================
       6. COMPÉTENCES - BIEN ESPACÉES
       ========================================== */

    .skills-category {
        margin-bottom: 3rem !important;
        padding: 2rem 1.5rem !important;
    }

    .category-title {
        margin-bottom: 2rem !important;
    }

    .skills-list {
        gap: 1.75rem !important;
    }

    .skill-item {
        margin-bottom: 1.5rem !important;
    }

    .skill-name {
        margin-bottom: 1rem !important;
        font-size: 1.05rem !important;
    }

    .skill-bar-bg {
        height: 12px !important;
        margin-top: 0.75rem !important;
    }

    /* ==========================================
       7. TIMELINE / PARCOURS SPACIEUX
       ========================================== */

    .timeline {
        gap: 2.5rem !important;
    }

    .timeline-item {
        padding: 2rem 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    .timeline-date {
        margin-bottom: 1.25rem !important;
        font-size: 1rem !important;
    }

    .timeline-title {
        margin-bottom: 1.25rem !important;
    }

    .timeline-company {
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
    }

    .timeline-desc {
        line-height: 1.75 !important;
        font-size: 1.05rem !important;
    }

    /* ==========================================
       8. CONTACT & FORMULAIRES
       ========================================== */

    .contact-form-container,
    .contact-form-modern {
        padding: 2.5rem 2rem !important;
        margin-bottom: 2.5rem !important;
    }

    .contact-form-title {
        margin-bottom: 1.5rem !important;
        font-size: 1.5rem !important;
    }

    .contact-form-subtitle {
        margin-bottom: 2.5rem !important;
        line-height: 1.7 !important;
    }

    /* Formulaire avec espacement généreux */
    .form-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .form-group {
        margin-bottom: 2rem !important;
    }

    .form-group label {
        margin-bottom: 1rem !important;
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    input,
    textarea,
    select {
        padding: 1rem 1.25rem !important;
        font-size: 16px !important; /* Empêche zoom iOS */
        line-height: 1.5 !important;
        min-height: 48px !important;
    }

    textarea {
        min-height: 150px !important;
        line-height: 1.7 !important;
    }

    /* Bouton submit avec taille tactile */
    button[type="submit"],
    .submit-btn,
    .form-submit-btn,
    .cyber-btn {
        padding: 16px 32px !important;
        font-size: 1.05rem !important;
        min-height: 52px !important;
        margin-top: 1.5rem !important;
    }

    /* ==========================================
       9. BOUTONS GÉNÉRAUX - TAILLE TACTILE
       ========================================== */

    .btn,
    button,
    [class*="btn"]:not(.floating-nav-btn):not(.mobile-menu-toggle) {
        padding: 14px 28px !important;
        font-size: 1rem !important;
        min-height: 48px !important;
        margin: 1rem 0 !important;
    }

    .btn-group {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-danger {
        padding: 14px 28px !important;
        min-height: 48px !important;
    }

    /* ==========================================
       10. IMAGES ET MÉDIAS
       ========================================== */

    img {
        max-width: 100%;
        height: auto;
        margin-bottom: 1.5rem;
    }

    /* Éviter les images écrasées */
    .hero-avatar,
    .project-image,
    [class*="image"] {
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    /* ==========================================
       11. NAVIGATION MOBILE
       ========================================== */

    #floatingNavBtn {
        width: 52px !important;
        height: 52px !important;
        top: 20px !important;
        right: 20px !important;
    }

    #floatingNavMenu {
        top: 85px !important;
        right: 20px !important;
        left: 20px !important;
        padding: 1.5rem !important;
    }

    .floating-nav-link {
        padding: 16px 20px !important;
        font-size: 1.05rem !important;
        margin-bottom: 0.5rem !important;
        min-height: 48px !important;
    }

    /* ==========================================
       12. NOTICES ET BOXES
       ========================================== */

    .projects-notice,
    .alternance-box,
    .about-intro {
        padding: 2rem 1.5rem !important;
        margin-bottom: 3rem !important;
        line-height: 1.75 !important;
    }

    .alternance-text,
    .about-intro-text {
        font-size: 1.05rem !important;
        line-height: 1.75 !important;
    }

    /* ==========================================
       13. CONTACT CARDS
       ========================================== */

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .contact-card {
        padding: 2rem 1.5rem !important;
        min-height: auto !important;
    }

    .contact-info-label {
        margin-bottom: 0.75rem !important;
        font-size: 1rem !important;
    }

    .contact-info-value {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
    }

    /* ==========================================
       14. FOOTER SPACIEUX
       ========================================== */

    .portfolio-footer {
        padding: 3rem 2rem !important;
    }

    .footer-nav {
        flex-direction: column !important;
        gap: 1.25rem !important;
        margin-bottom: 2.5rem !important;
    }

    .footer-nav a {
        padding: 0.75rem !important;
        font-size: 1.05rem !important;
    }

    .footer-copyright,
    .footer-signature {
        margin-top: 1.5rem !important;
        line-height: 1.6 !important;
    }
}

/* ==========================================
   MEDIA QUERY PETITS MOBILES (max-width: 480px)
   ENCORE PLUS D'ESPACE POUR CONFORT
   ========================================== */
@media (max-width: 480px) {

    /* Sections encore spacieuses */
    section {
        padding: 3.5rem 1.5rem !important;
    }

    .container,
    [class*="container-"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Hero adapté */
    .hero-v2 {
        padding: 4rem 1.5rem 3rem !important;
    }

    .hero-left {
        padding: 2.5rem 1.5rem !important;
    }

    /* Titres lisibles */
    h1,
    .hero-name {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
        line-height: 1.35 !important;
    }

    h2 {
        font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
    }

    h3 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }

    /* Textes minimum 1rem */
    p,
    .text {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    /* Cartes */
    .card,
    [class*="card"] {
        padding: 1.75rem 1.25rem !important;
    }

    /* Technologies grid : 1 colonne sur très petit mobile */
    .technologies-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Boutons toujours minimum 44px */
    .cta-btn,
    .btn,
    button {
        padding: 15px 24px !important;
        min-height: 50px !important;
    }
}

/* ==========================================
   MEDIA QUERY ULTRA PETITS (max-width: 360px)
   DERNIÈRE SÉCURITÉ
   ========================================== */
@media (max-width: 360px) {

    section {
        padding: 3rem 1rem !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero-left {
        padding: 2rem 1rem !important;
    }

    /* Textes jamais en dessous de 1rem */
    h1 { font-size: 1.9rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    p { font-size: 1rem !important; }

    .card {
        padding: 1.5rem 1rem !important;
    }
}

/* ==========================================
   UTILITIES - HELPERS SPACING
   ========================================== */
@media (max-width: 768px) {

    /* Marges bottom généreuses */
    .mb-1 { margin-bottom: 1rem !important; }
    .mb-2 { margin-bottom: 1.5rem !important; }
    .mb-3 { margin-bottom: 2rem !important; }
    .mb-4 { margin-bottom: 2.5rem !important; }
    .mb-5 { margin-bottom: 3rem !important; }

    /* Padding généreux */
    .p-1 { padding: 1rem !important; }
    .p-2 { padding: 1.5rem !important; }
    .p-3 { padding: 2rem !important; }
    .p-4 { padding: 2.5rem !important; }

    /* Gap pour flex/grid */
    .gap-1 { gap: 1rem !important; }
    .gap-2 { gap: 1.5rem !important; }
    .gap-3 { gap: 2rem !important; }
}