/* ========================================
   PROVIIS - RESPONSIVE DESIGN
   Mobile-First Approach
   ======================================== */

/* ========================================
   BASE - MOBILE FIRST (320px+)
   Les styles de base sont optimisés pour mobile
   ======================================== */

/* Touch-friendly par défaut */
* {
    -webkit-tap-highlight-color: rgba(252, 215, 187, 0.3);
}

/* Assurer que tout est responsive */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* ========================================
   MOBILE LARGE - 481px+
   ======================================== */
@media (min-width: 481px) {
    .hero-baseline {
        font-size: 2.2rem;
    }

    .section-padding {
        padding: 50px 20px;
    }

    .btn-primary,
    .btn-secondary {
        width: auto;
        min-width: 200px;
    }
}

/* ========================================
   TABLET - 641px+
   ======================================== */
@media (min-width: 641px) {
    .top-menu {
        height: 100px;
    }

    .menu-logo img {
        height: 80px !important;
    }

    .hero-new {
        min-height: 450px;
        padding: 80px 30px;
    }

    .hero-baseline {
        font-size: 2.8rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .two-columns {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-padding {
        padding: 60px 30px;
    }

    .btn-primary,
    .btn-secondary {
        width: auto;
    }
}

/* ========================================
   DESKTOP - 901px+
   ======================================== */
@media (min-width: 901px) {
    .top-menu {
        height: 130px !important;
    }

    .menu-logo img {
        height: 110px !important;
    }

    .mobile-menu-trigger {
        display: none !important;
    }

    .desktop-only {
        display: flex !important;
    }

    .header-left,
    .header-right {
        display: flex !important;
    }

    .mobile-nav-container {
        display: none !important;
    }

    .hero-new {
        min-height: 600px;
        padding: 120px 40px;
    }

    .hero-baseline {
        font-size: 3.5rem;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    .features-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-padding {
        padding: 80px 40px;
    }

    body {
        font-size: 1.125rem;
    }
}

/* ========================================
   DESKTOP LARGE - 1201px+
   ======================================== */
@media (min-width: 1201px) {
    .section-inner {
        max-width: 1400px;
    }

    .top-menu-inner {
        max-width: 1600px;
    }
}

/* ========================================
   ULTRA-WIDE - 1441px+
   ======================================== */
@media (min-width: 1441px) {
    .section-inner {
        max-width: 1600px;
    }

    .hero-baseline {
        font-size: 4rem;
    }

    h1 {
        font-size: 3.5rem;
    }
}

/* ========================================
   MOBILE SPECIFIC - max-width 640px
   Surcharge pour mobiles uniquement
   ======================================== */
@media (max-width: 640px) {

    /* Header mobile */
    .top-menu {
        height: 80px !important;
    }

    .menu-logo img {
        height: 60px !important;
    }

    .top-menu-inner {
        padding: 0 20px !important;
    }

    /* Masquer navigation desktop */
    .header-left nav {
        display: none !important;
    }

    .header-right {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* Afficher menu mobile */
    .mobile-menu-trigger {
        display: flex !important;
    }

    /* Hero mobile */
    .hero-new {
        margin-top: 80px;
        min-height: 350px;
        padding: 40px 20px;
    }

    .hero-baseline {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    .hero-subtext {
        font-size: 1rem;
        line-height: 1.5;
    }

    /* Typography mobile */
    h1 {
        font-size: 2rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    body {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Buttons - Touch friendly */
    .btn-primary,
    .btn-secondary,
    .btn-oval,
    .btn-outil {
        min-height: 44px;
        padding: 12px 24px;
        font-size: 16px !important;
        width: 100%;
        text-align: center;
        display: block;
    }

    /* Grids mobile */
    .features-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .two-columns {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    /* Forms mobile - évite le zoom iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
        padding: 14px;
        width: 100%;
        -webkit-appearance: none;
        border-radius: 8px;
    }

    /* Footer mobile */
    .footer-columns {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 30px;
    }

    /* Sections mobile */
    .section-padding {
        padding: 40px 20px !important;
    }

    .section-inner {
        padding: 0 20px;
    }

    /* Search box mobile */
    .search-box,
    .search-container {
        flex-direction: column;
        gap: 12px;
    }

    .search-box input,
    .search-box button {
        width: 100% !important;
    }

    /* Map search bar */
    .map-search-bar {
        flex-direction: column;
        padding: 0 20px;
    }

    .map-search-bar input,
    .map-search-bar button {
        width: 100%;
    }

    /* Advisor cards mobile  */
    .advisor-card {
        padding: 15px;
    }

    /* Images mobile */
    .image-frame img {
        border-radius: 8px;
    }
}

/* ========================================
   TABLET ONLY - 641px à 900px
   Navigation hybride
   ======================================== */
@media (min-width: 641px) and (max-width: 900px) {
    .top-menu-inner {
        padding: 0 30px;
    }

    /* Sur tablette, garder le menu hamburger */
    .mobile-menu-trigger {
        display: flex !important;
    }

    /* Masquer la navigation principale */
    .header-left nav {
        display: none !important;
    }

    /* Garder certains éléments visibles */
    .header-left .menu-logo {
        display: block !important;
    }

    .header-right {
        display: flex !important;
    }

    /* Adapter les grilles tablette */
    .features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {

    .top-menu,
    .mobile-menu-trigger,
    .btn-primary,
    .btn-secondary,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    a {
        text-decoration: underline;
    }

    .section-padding {
        padding: 20px 0;
    }
}