html, body {
    max-width: 100%;
    overflow-x: hidden;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Toute image doit rester fluide et remplir son conteneur */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container toujours centré et jamais plus large que l'écran */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ------------------------------------------------------------
   1. HERO — image du dashboard + mockup téléphone
------------------------------------------------------------ */
@media (max-width: 991px) {
    .hero-v3-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .hero-v3-visual {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding-right: 0;
        padding-bottom: 60px;
    }
    .hero-v3-browser,
    .hero-v3-browser-body img {
        width: 100%;
    }
    .hero-v3-visual::before {
        right: 0;
        left: 0;
    }
}

@media (max-width: 576px) {
    .hero-v3 { padding: 3.5rem 0 2.5rem; }
    .hero-v3-visual {
        max-width: 100%;
        padding-bottom: 0;
        margin-bottom: 90px; /* laisse la place au téléphone flottant */
    }
    .hero-v3-phone {
        display: block;
        position: absolute;
        width: 110px;
        right: 8px;
        bottom: -70px;
    }
    .hero-v3-trust-stats { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   2. APPLICATION MOBILE (bloc "Emportez MbeSchool partout")
------------------------------------------------------------ */
@media (max-width: 991px) {
    .app-dl-card {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem;
        text-align: center;
        gap: 2.5rem;
    }
    .app-dl-visual { order: -1; width: 100%; }
    .app-dl-phone {
        /* largeur relative à l'écran plutôt que fixe en px */
        width: min(280px, 65vw);
        height: auto;
        aspect-ratio: 280 / 570;
        margin: 0 auto;
        transform: none;
        animation: appPhoneFloatMobile 6s ease-in-out infinite;
    }
    .app-dl-sub { margin-left: auto; margin-right: auto; }
    .app-dl-features, .app-dl-badges { justify-content: center; }
    .app-dl-badges { width: 100%; }
    .app-dl-float-1, .app-dl-float-2 { display: none; }
}

@media (max-width: 480px) {
    .app-dl-phone { width: min(220px, 62vw); }
    .app-store-btn { width: 100%; justify-content: center; }
    .app-dl-badges { flex-direction: column; }
}

/* ------------------------------------------------------------
   3. CARROUSEL "COSMOS" — cartes/images qui débordaient
------------------------------------------------------------ */
@media (max-width: 991px) {
    .cosmos__stage {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }
    #track, .cosmos__track {
        width: 100%;
    }
    .cosmos__card-media img {
        width: 100%;
        height: auto;
    }
}

/* ------------------------------------------------------------
   4. GALERIE / SCREENSHOTS — images doivent remplir la vignette
------------------------------------------------------------ */
.gallery-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}
.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .gallery-item { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------
   5. ÉVÉNEMENTS / ARTICLES — cover images
------------------------------------------------------------ */
@media (max-width: 767px) {
    .event-card-cover { height: 160px; }
    .article-thumb img { width: 100%; height: auto; }
}

/* ------------------------------------------------------------
   6. SECTION FONDATEUR / DIRECTEUR
------------------------------------------------------------ */
@media (max-width: 991px) {
    .director-col-photo { width: 100%; max-width: 380px; margin: 0 auto; }
    .director-photo-frame img { width: 100%; height: auto; }
}

/* ------------------------------------------------------------
   7. GRILLES BOOTSTRAP — assure un centrage propre au lieu
      d'un alignement forcé à gauche sur petits écrans
------------------------------------------------------------ */
@media (max-width: 575px) {
    .row { margin-left: -0.5rem; margin-right: -0.5rem; }
    .row > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ------------------------------------------------------------
   8. Cartes cibles / valeurs / avantages — largeur pleine sur mobile
------------------------------------------------------------ */
@media (max-width: 575px) {
    .target-card, .value-card, .feature-card, .testimonial-card {
        width: 100%;
    }
}

/* Sécurité anti-superposition — force l'empilement vertical peu importe
   d'autres règles CSS chargées après (ex: responsive-fixes.css) */
.cosmos{
    display:flex !important;
    flex-direction:column !important;
}
.cosmos__head{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
}
.cosmos__stage{
    position:relative !important;
    inset:auto !important;
    flex:1 1 auto !important;
    min-height:0 !important;
}
.cosmos__controls{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
}