/*
 * ============================================================
 *  PEVESCAL — Correctifs responsivité mobile
 *  Fichier : custom-mobile.css
 *  Toutes les règles ci-dessous ont été extraites de index.html
 *  pour être gérées de façon centralisée et indépendante.
 * ============================================================
 */


/* ── 1. DÉBORDEMENT HORIZONTAL ─────────────────────────────
   Empêche le scroll horizontal sur html ET body.
   (body seul ne suffit pas : le navigateur transfère le
   scroll au html si seul body a overflow-x: hidden)
──────────────────────────────────────────────────────────── */
html {
    overflow-x: hidden;
}


/* ── 2. BOUTON FERMETURE MENU MOBILE ───────────────────────
   Croix ✕ positionnée en haut à droite du panneau .mobile-nav
   (le HTML correspondant : <button class="mobile-nav-close">)
──────────────────────────────────────────────────────────── */
.mobile-nav-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    outline: none;
}

.mobile-nav-close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}


/* ── 3. CENTRAGE & EMPILEMENT HERO MOBILE ──────────────────
   Corrige le chevauchement boutons/texte sur la section hero.
   Le bloc .hero-dashboard (boutons "Votre projet" /
   "Devenir partenaire") était en position:absolute et écrasait
   le texte. Il passe en flux normal sur mobile.
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Hero : hauteur adaptative au lieu de 100vh fixe */
    .hero {
        height: auto;
        min-height: 100vh;
        flex-direction: column;
        background-position: center;
    }

    /* Contenu texte hero : padding-bottom réduit */
    .hero-content {
        position: relative;
        padding: 120px 2rem 2rem;
        display: block;
        height: auto;
        text-align: center;
    }

    /* Éléments texte : sortis du positionnement absolu desktop */
    .hero-tagline,
    .hero h1,
    .hero p {
        position: static;
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .hero p {
        padding-left: 0;
        border: none;
        font-size: 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
        white-space: normal;
    }

    /*
     * Bloc boutons hero : override des 3 états (base + reveal +
     * reveal.active) pour neutraliser le transform:translate3d
     * qui décalait le bloc vers la gauche même après animation.
     */
    .hero-dashboard,
    .hero-dashboard.reveal,
    .hero-dashboard.reveal.active {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: calc(100% - 4rem);
        max-width: 420px;
        margin: 0 auto 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
        box-sizing: border-box;
    }

    /* Préservation de l'animation d'opacité */
    .hero-dashboard.reveal {
        opacity: 0;
    }

    .hero-dashboard.reveal.active {
        opacity: 1;
    }

    /* Boutons pleine largeur sur mobile */
    .dashboard-btn {
        min-width: 100%;
    }

    /* Espace pour la barre d'action fixe en bas */
    body {
        padding-bottom: 70px;
    }
}


/* ── 4. SECTION ÉCONOMIE CIRCULAIRE — MOBILE ───────────────
   La grille 2 colonnes (image + logos) est invisible sur
   mobile car trop étroite (~83px/col). On passe en colonne
   unique et on force la visibilité des éléments .reveal-right.
──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Réduction du padding du bloc conteneur */
    .econ-wrapper {
        padding: 1.5rem !important;
    }

    /* Grille 2 colonnes → 1 colonne (texte puis image puis logos) */
    .econ-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Hauteur auto sur la colonne droite (image + logos) */
    .econ-right-col {
        height: auto !important;
    }

    /*
     * Force la visibilité des éléments animés :
     * .reveal-right démarre à opacity:0 + translateX(50px).
     * Sur mobile la colonne étant trop étroite, l'IntersectionObserver
     * ne déclenchait pas l'animation. On annule l'état initial.
     */
    .econ-right-col .reveal-right {
        opacity: 1 !important;
        transform: none !important;
    }
}