/* =========================================
   RESET GLOBAL + PAGE QUARTIER
   ========================================= */

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* interdit le scroll horizontal */
}

body.quartier-page {
    background: #001944; /* Bleu charte */
    font-family: Georgia, serif;
    color: #fef8f0;
}

/* Le wrapper principal ne doit JAMAIS être centré
   ni avoir de max-width → toujours 100% écran */
#quartier-page-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Par sécurité : on casse tout max-width résiduel
   éventuel venant du thème autour du main */
body.quartier-page main,
body.quartier-page .site,
body.quartier-page .site-content,
body.quartier-page .content-area,
body.quartier-page .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* =========================================
   STRUCTURE DES SECTIONS (sauf HERO)
   ========================================= */

/* On ne touche PAS au hero ici (géré par section-hero.css)
   On s’occupe seulement des sections "texte" & "vidéos". */

/* Section ABOUT */
.quartier-about {
    width: 100%;
    margin: 0;
    padding: 4rem 1.5rem 3rem;
    box-sizing: border-box;
}

/* Conteneur interne centré */
.quartier-about .qa-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.qa-header h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.1rem;
    margin: 0 0 .75rem;
}

.qa-subtitle {
    font-size: 1rem;
    opacity: .85;
    margin: 0 0 1.75rem;
}

.qa-text {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 42rem;
    margin: 0 auto;
}

/* =========================================
   SECTIONS CARROUSELS IMAGES (si utilisées)
   ========================================= */

.quartier-carousel {
    width: 100%;
    margin: 0;
    padding: 4rem 1.5rem;
    box-sizing: border-box;
}

.quartier-carousel .qc-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.qc-header h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.1rem;
    margin: 0 0 .75rem;
    text-align: center;
}

.qc-subtitle {
    font-size: 1rem;
    opacity: .85;
    margin: 0 0 2.5rem;
    text-align: center;
}

/* =========================================
   SECTION VIDÉOS
   ========================================= */

#quartier-videos {
    width: 100%;
    margin: 0;
    padding: 4rem 1.5rem 4.5rem;
    box-sizing: border-box;
}

#quartier-videos .qv-container {
    max-width: 1200px;
    margin: 0 auto;
}

.qv-header h2 {
    font-family: "Playfair Display", serif;
    font-size: 2.1rem;
    margin: 0 0 .75rem;
    text-align: center;
}

.qv-header p {
    font-size: 1rem;
    opacity: .85;
    margin: 0 0 2.5rem;
    text-align: center;
}

/* Pour les textes / CTA éventuels dans la section vidéos */
.qv-cta {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* =========================================
   DIVERS
   ========================================= */

.quartier-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Un peu d’air en bas de page sur mobile */
@media (max-width: 768px) {
    .quartier-about,
    .quartier-carousel,
    #quartier-videos {
        padding: 3rem 1.25rem 3.5rem;
    }
}