/* Base mobile optimizations - Darneo.ma */
/* Typography: Cormorant Garamond (headings), Montserrat (nav/buttons/labels), Inter (body) */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: inherit; }
body {
    overflow-x: hidden;
    max-width: 100vw;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .font-display {
    font-family: 'Cormorant Garamond', serif;
}
nav, nav a, button, label, caption, .font-sans {
    font-family: 'Montserrat', sans-serif;
}
img, video { max-width: 100%; height: auto; }
/* Touch targets min 48x48px (Google) */
button, input[type="submit"], input[type="button"],
a[href^="tel:"], a[href^="mailto:"], a[href^="https://wa.me"] { min-height: 48px; min-width: 48px; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    font-size: 16px !important; min-height: 48px; padding: 0.75rem 1rem;
}

/* Mobile (max 767px) - Centrage et anti-overflow */
@media (max-width: 767px) {
    h1 { font-size: clamp(1.75rem, 5vw + 1rem, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 4vw + 0.5rem, 2rem); }
    
    /* Empêcher le débordement du texte */
    body, p, h1, h2, h3, h4, span, a, li, td, th, label {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }
    
    /* Flex enfants : évite overflow (bug connu) */
    .flex > *, [class*="flex"] > * {
        min-width: 0;
    }
    
    /* Conteneurs principaux */
    main, section, .max-w-7xl, .max-w-8xl, [class*="max-w"] {
        max-width: 100% !important;
        width: 100%;
    }
    
    
    /* Grilles : une colonne sur mobile */
    .grid { width: 100%; }
    
    /* Boutons et liens pleine largeur sur mobile */
    main a[href], main button {
        max-width: 100%;
    }
    
    /* Nav mobile : centrer les liens */
    #mobileMenu, #mobileMenu a {
        text-align: center !important;
    }
    
    /* Tableaux : scroll horizontal si nécessaire */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Centrage contenu principal sur mobile */
    main .text-center,
    section .text-center,
    .max-w-4xl.mx-auto,
    .max-w-2xl.mx-auto {
        text-align: center !important;
    }
    
    /* Réduire le contenu sur mobile - éviter la surcharge */
    .hero-card-desc {
        display: none !important;
    }
    
    /* Hero gauche : masquer paragraphes longs, garder titre + slogan */
    .mobile-simplify-hero .hero-intro-p1,
    .mobile-simplify-hero .hero-intro-p2 {
        display: none !important;
    }
    
    /* Limiter les introductions de section à 2 lignes */
    .mobile-line-clamp-2 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Sections : raccourcir les descriptions sur mobile */
    section .max-w-2xl.mx-auto p,
    section .max-w-3xl.mx-auto p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Expertise cards : masquer description, garder titre + lien */
    .expertise-card-desc {
        display: none !important;
    }
}

/* Logo header : logo-darneo.png avec fond transparent ; pas de mix-blend */
body > nav a.logo img[src*="logo-darneo"],
img.nav-logo-darneo {
    mix-blend-mode: normal;
    filter: drop-shadow(0 1px 1px rgba(47, 47, 47, 0.08));
}
html.dark body > nav a.logo img[src*="logo-darneo"],
html.dark img.nav-logo-darneo {
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    opacity: 0.96;
}