/* =============================================================
   ZYA AGENCY — Responsive CSS
   Breakpoints : tablet ≤ 991px | mobile ≤ 767px | xs ≤ 480px
   ============================================================= */

/* ── 1. TABLETTE (≤ 991px) ─────────────────────────────────── */
@media (max-width: 991px) {

    /* Tailles de police */
    .fs-80 { font-size: 52px !important; }
    .fs-60 { font-size: 40px !important; }
    .fs-50 { font-size: 34px !important; }
    .fs-40 { font-size: 28px !important; }

    /* Hero */
    .pg-hero { padding-top: 120px !important; padding-bottom: 50px !important; }
    .hero-video { min-height: 70vh !important; }
    .hero-video-wrap video { object-fit: cover; }

    /* Espacement sections */
    .pt-80px  { padding-top: 60px !important; }
    .pb-80px  { padding-bottom: 60px !important; }
    .pt-100px { padding-top: 70px !important; }
    .pb-100px { padding-bottom: 70px !important; }
    .mb-80px  { margin-bottom: 50px !important; }
    .mb-60px  { margin-bottom: 40px !important; }
    .mb-50px  { margin-bottom: 30px !important; }

    /* Service title */
    .serv-title { font-size: 32px !important; }

    /* Sections services */
    .serv-style3, .serv-institutionnel { padding: 60px 0 !important; }

    /* Service cards */
    .service-card { padding: 35px !important; gap: 24px !important; }
    .service-content h2 { font-size: 26px !important; }

    /* Image trail — désactivé sur tablette */
    .image-trail-container { display: none !important; }
    .content__img { display: none !important; }

    /* Intro 2 colonnes */
    .col-lg-5.offset-lg-1 { margin-top: 20px; }
}


/* ── 2. MOBILE (≤ 767px) ───────────────────────────────────── */
@media (max-width: 767px) {

    /* Tailles de police */
    .fs-80 { font-size: 34px !important; }
    .fs-60 { font-size: 28px !important; }
    .fs-50 { font-size: 24px !important; }
    .fs-40 { font-size: 22px !important; }
    .fs-20 { font-size: 16px !important; }
    .fs-18 { font-size: 15px !important; }

    /* Hero */
    .pg-hero { padding-top: 90px !important; padding-bottom: 40px !important; }
    .hero-video { min-height: 55vh !important; }
    .pg-hero h1 { line-height: 1.2 !important; }

    /* Hero — vidéo remplacée par overlay sombre */
    .hero-video-wrap video { display: none !important; }
    .hero-video { background: #0d0d1a !important; }
    .hero-overlay { opacity: 0.5 !important; }

    /* Espacement sections */
    .pt-80px  { padding-top: 40px !important; }
    .pb-80px  { padding-bottom: 40px !important; }
    .pt-100px { padding-top: 50px !important; }
    .pb-100px { padding-bottom: 50px !important; }
    .mb-80px  { margin-bottom: 30px !important; }
    .mb-60px  { margin-bottom: 25px !important; }
    .mb-50px  { margin-bottom: 20px !important; }
    .mb-30px  { margin-bottom: 15px !important; }
    .mt-80px  { margin-top: 30px !important; }
    .mt-30px  { margin-top: 15px !important; }

    /* padding internes */
    .p-40px { padding: 20px !important; }
    .p-30px { padding: 20px !important; }

    /* Service pages */
    .serv-title { font-size: 24px !important; }
    .serv-style3, .serv-institutionnel { padding: 40px 0 !important; }
    .service-card { padding: 25px !important; gap: 20px !important; border-radius: 16px !important; }
    .service-content h2 { font-size: 22px !important; }
    .service-content p { font-size: 14px !important; }

    /* Chiffres clés */
    section[style*="#00AEB5"] .fs-80,
    section[style*="#E7257F"] .fs-80 { font-size: 40px !important; }

    /* Boutons — style simplifié tablette */
    .butn-arrow {
        display: inline-block !important;
        width: auto !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
        text-align: center !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }
    .butn-arrow .arrow-icon { display: none !important; }
    .butn-arrow span.text-uppercase { font-size: 12px !important; }

    /* Boutons hero — côte à côte sur mobile */
    .pg-hero .row a.butn-arrow { margin-left: 0 !important; margin-right: 0 !important; }
    .pg-hero .col-lg-8 .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 0 15px !important;
    }

    /* Margin horizontal sur tous les boutons en mobile */
    .butn-arrow { margin-left: 0 !important; margin-right: 8px !important; }

    /* Navbar toggler */
    .navbar-toggler { margin-right: 15px !important; }
    .navbar .logo { max-width: 70px !important; margin-left: 15px !important; }

    /* Contact — box-info empilées */
    .contact-style2 .box-info { margin-bottom: 20px; }

    /* Blog swiper */
    .swiper-container { overflow: hidden; }

    /* Footer */
    .footer-col { margin-bottom: 30px; }

    /* Galerie accueil */
    .gallery-section .col-sm-6,
    .gallery-section .col-lg-3 { margin-bottom: 15px; }

    /* Team section */
    .team-section .col-lg-4 { margin-bottom: 20px; }

    /* Texte centré sur mobile */
    .sm-center { text-align: center !important; }

    /* Masquer le curseur custom sur mobile */
    .cursor, .blur-div { display: none !important; }

    /* Image trail — désactivé */
    .image-trail-container { display: none !important; }
    .content__img { display: none !important; }

    /* Méthode page pôles */
    .method-section .col-lg-3 { margin-bottom: 10px; }
    .method-title { font-size: 24px !important; }

    /* Impact / Stats sections */
    .col-lg-6 + .col-lg-6 { margin-top: 20px; }
}


/* ── 3. TRÈS PETIT MOBILE (≤ 480px) ───────────────────────── */
@media (max-width: 480px) {

    .fs-80 { font-size: 28px !important; }
    .fs-60 { font-size: 24px !important; }
    .fs-40 { font-size: 20px !important; }

    .pg-hero { padding-top: 90px !important; }

    /* Boutons — style simplifié mobile */
    .butn-arrow {
        display: inline-block !important;
        width: auto !important;
        padding: 11px 22px !important;
        border-radius: 50px !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }
    .butn-arrow .arrow-icon { display: none !important; }
    .butn-arrow span.text-uppercase { font-size: 11px !important; }

    /* Contact form */
    #zya-contact-form input,
    #zya-contact-form textarea { font-size: 14px; }

    /* Service card image cachée sur très petit écran */
    .service-media { display: none !important; }

    /* Chiffres */
    .col-lg-6 .fs-80 { font-size: 36px !important; }
}


/* ── 4. NAVBAR MOBILE — menu déroulant ────────────────────── */
@media (max-width: 991px) {

    /* Le menu s'ouvre en dropdown vertical */
    .navbar .navbar-collapse {
        background: #0d0d1a;
        padding: 10px 0 20px;
        border-radius: 0 0 12px 12px;
    }

    .navbar .navbar-nav .nav-link {
        color: rgba(255,255,255,0.85) !important;
        padding: 12px 20px 12px !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    }

    .navbar .dropdown-menu {
        background: rgba(255,255,255,0.04);
        border: none;
        padding: 0 0 0 15px;
    }

    .navbar .dropdown-menu .dropdown-item {
        color: rgba(255,255,255,0.7) !important;
        padding: 10px 15px !important;
        font-size: 13px;
    }

    .navbar .dropdown-menu .dropdown-item:hover {
        background: rgba(255,255,255,0.06);
        color: #fff !important;
    }
}


/* ── 5. FOOTER RESPONSIVE ─────────────────────────────────── */
@media (max-width: 767px) {

    .footer-main-content { text-align: center; }
    .footer-main-content .d-flex { justify-content: center !important; flex-wrap: wrap; gap: 10px; }

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


/* ── 6. ADMIN — responsive sidebar (bonus) ────────────────── */
@media (max-width: 768px) {

    #sidebar { transform: translateX(-250px); transition: transform 0.3s; }
    #sidebar.open { transform: translateX(0); }
    #main { margin-left: 0 !important; }
}