/**************/
/* RESPONSIVE */
/**************/

/* Tablette et inférieur — affichage du burger */
@media only screen and (max-width: 991px) {
    /* On masque TOUS les conteneurs de navigation possibles —
       .nav (notre menu ACF), ainsi que .main-navigation / .menu /
       header nav qui pourraient être générés par wp_nav_menu ou
       un walker WordPress. Le burger prend le relais. */
    .nav,
    .main-navigation,
    header nav,
    .menu,
    .phone-link { display: none !important; }
    .menu-btn { display: inline-flex; }

    /* Header en flex 2 colonnes : logo à gauche (agrandi) + CTA/burger collés à droite */
    .header-inner {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    /* En mobile, le logo garde la même taille quel que soit l'état
       (hero-mode ou sticky) — on ne le rétrécit pas au scroll. */
    .logo-img { height: 56px; }
    header.main.sticky .logo-img { height: 56px; }

    /* Sur les pages avec hero (.home), on fige l'apparence du header en
       mode "hero-mode" même quand le scroll active la classe `.sticky` :
       fond transparent, logo blanc et bouton burger transparent ne
       changent plus pendant le scroll. */
    .home header.main.sticky {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        padding: 20px 0;
    }
    .home header.main.sticky .logo-light { display: block; }
    .home header.main.sticky .logo-dark  { display: none; }
    .home header.main.sticky .menu-btn {
        background: rgba(255,255,255,0.14);
        border-color: rgba(255,255,255,0.3);
        color: white;
    }

    /* Le CTA et le burger restent groupés à droite */
    .header-cta { margin-left: auto; gap: 10px; }
}

/* Tablette / mobile — sticky CTA mobile */
@media only screen and (max-width: 768px) {
    section { padding: 40px 0; }

    /* Gabarit Page (Default) — compensation du header sticky réduite
       (logo 48px en mode sticky + 10px*2 padding ≈ 68px) + 40px section */
    .page-default { padding: calc(40px + 80px) 0 40px; }
    .page-default-content { font-size: 16px; }
    .page-default-content h2 { font-size: clamp(24px, 5vw, 30px); }

    .mobile-cta { display: flex; }
    .footer-bottom-links a:first-child { margin-left: 0; }

    /* Section Clientèles — bascule en slider Slick sur mobile */
    .age-tabs { display: none !important; }
    .age-panels.slick-initialized .age-panel {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 24px;
    }
    /* Conteneur dédié .age-nav (créé par JS) — aligné à gauche
       et reprend exactement le même gap: 8px que .projects-nav */
    .age-nav {
        justify-content: flex-start !important;
    }
    /* Slick.css force width:20, background:transparent, border:none sur
       .slick-prev/.slick-next — on les neutralise pour retrouver .carousel-btn */
    .age-nav .slick-arrow,
    .age-nav button.slick-prev,
    .age-nav button.slick-next {
        position: static !important;
        transform: none !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        border: 1px solid var(--line) !important;
        background: white !important;
        color: var(--navy) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    .age-nav .slick-arrow::before { content: none !important; display: none !important; }

    /* Section Inspirations — flèches alignées à gauche sur mobile */
    .projects-carousel .projects-nav {
        justify-content: flex-start !important;
    }

    /* Section Produits — flèches au-dessus, vincy-tag en dessous sur mobile */
    .products-tools {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    .products-tools .projects-nav {
        justify-content: flex-start !important;
    }

    /* Vincy-tag — passe en block pour que le texte s'écoule naturellement
       (inline-flex causait des wraps bizarres en traitant chaque morceau
       de texte comme un flex item indépendant). */
    .vincy-tag {
        display: block !important;
        text-align: left;
        line-height: 1.5;
    }
    .vincy-tag .dot {
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
        position: relative;
        top: -1px;
    }
}

/* Tablette portrait et inférieur — bascule des grilles 2/4 colonnes en 1/2 */
@media only screen and (max-width: 900px) {
    .emotion-grid { grid-template-columns: 1fr; gap: 48px; }
    .identity-intro { grid-template-columns: 1fr; gap: 24px; }
    .pillars { grid-template-columns: repeat(2, 1fr); }
    .why-intro-row { grid-template-columns: 1fr; gap: 24px; }
    .why-points { grid-template-columns: repeat(2, 1fr); }
    .dev-columns { grid-template-columns: 1fr; }
    .age-panel.active { grid-template-columns: 1fr; gap: 32px; }
    .expertise-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .footer-top { gap: 40px; }
}

/* Mobile et téléphone large */
@media only screen and (max-width: 640px) {
    body, html { overflow-x: hidden; }
    .tel-link { pointer-events: auto; cursor: pointer; }
    .container { padding: 0 20px; }
    .container-wide, .hero-full { padding: 0 20px; }
    /* Aligné sur .container — voir custom.css `.page-default-content` */
    .page-default-content { padding: 0 20px; }
    .form-row { grid-template-columns: 1fr; }
    .radio-group { grid-template-columns: 1fr; }
    .form-card { padding: 28px 24px; }
    .collage { grid-template-rows: repeat(6, 28px); gap: 8px; }
    .lightbox { padding: 64px 16px 32px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-close { top: 12px; right: 12px; }

    /* Mobile : on cache le CTA du header (le sticky CTA en bas de l'écran fait le job) */
    .header-cta .btn-primary { display: none; }
}

/* Très petits écrans */
@media only screen and (max-width: 560px) {
    .pillars { grid-template-columns: 1fr; }
    .why-points { grid-template-columns: 1fr; }
}

/* Footer mobile — bascule en colonne dès la tablette portrait, sans le
   margin-left:auto du desktop qui pousserait les colonnes à droite */
@media only screen and (max-width: 768px) {
    .footer-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
    }
    /* La colonne Navigation est cachée sur mobile (le menu burger fait le job) */
    .footer-top .footer-brand + .footer-col {
        display: none !important;
    }
    /* Description du brand en pleine largeur sur mobile */
    .footer-brand p { max-width: none !important; }

    /* footer-bottom : tout centré, items empilés */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .footer-bottom-links {
        text-align: center;
    }
    .footer-bottom-links a:first-child { margin-left: 0; }
}

/* Hero — réduction du décalage gauche pour les écrans intermédiaires */
@media only screen and (max-width: 1400px) {
    .hero-content-left { margin-left: 6%; }
}

/* Hero en mobile (≤ 900px) — le bloc et tout son contenu sont centrés.
   En desktop le hero reste aligné à gauche (margin-left: 10%/6%). */
@media only screen and (max-width: 900px) {
    .hero-content,
    .hero-content-left {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    /* On retire les contraintes de largeur pour permettre un vrai centrage.
       !important pour battre la surcharge desktop `.hero h1 { text-align: left !important }`. */
    .hero h1,
    .hero .hero-sub,
    .hero-content h1 {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }
    .hero-badge,
    .hero-badges,
    .hero-ctas {
        justify-content: center;
    }
}