/* ============================================================
   MAIN LAYOUT — Grille principale [contenu | sidebar]
   Reproduit la structure Lovable :
     max-w-7xl px-6 → max-width 1280px, padding 24px
     grid-cols-[1fr_auto] gap-10/16
     sidebar: w-[305px] self-start
   ============================================================ */

/* ——— Section wrapper ——————————————————————————————————————— */
body.home {
    .main-layout-section {
        background-color: var(--white);
        background-image: url('../../img/pattern2.webp');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center top;
    }
}

.main-layout-section {
    padding-bottom: 100px;
}

/* ——— Conteneur centré ————————————————————————————————————— */
.main-layout-container {
    max-width: var(--main-layout-max-width);
    margin-right: auto;
    margin-left: auto;
    padding: 0px 24px;
}

/* @media (min-width: 768px) {
    .main-layout-container {
        padding-top: 88px;
    }
} */

/* ——— Grille deux colonnes ————————————————————————————————— */
.main-layout__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 1200px) {
    .main-layout__grid {
        grid-template-columns: 1fr var(--main-layout-sidebar-width);
        gap: var(--main-layout-gap);
    }
}

/* ——— Colonne de contenu ——————————————————————————————————— */
.main-layout__content {
    min-width: 0;
    /* Empêche le débordement des enfants flex/grid */
}

/* Le premier bloc de contenu (après le haut_de_page) démarre sans espace
   supplémentaire : le padding-top du conteneur principal suffit. */
.main-layout__content>.builder:first-child {
    padding-top: 0;
}

/* Les .container imbriqués dans les blocs builder ne doivent pas
   avoir leur propre gutter horizontal : le conteneur parent s'en charge. */
.main-layout__content .builder>.container {
    max-width: 100%;
}

/* ——— Sidebar ————————————————————————————————————————————— */
.main-layout__sidebar {
    width: 100%;
}

@media (min-width: 1200px) {
    .main-layout__sidebar {
        width: var(--main-layout-sidebar-width);
        align-self: start;
        /* Collant sous le header fixe (top-header 36px + header 112px + marge 24px) */
        position: sticky;
        top: calc(36px + 112px + 24px);
    }
}

/* < 1200px : la grille .main-layout__grid repasse en une colonne (règle par défaut
   ci-dessus). La sidebar (<aside>, qui suit .main-layout__content dans le DOM) se
   retrouve donc déjà en fin de page/section, sous le contenu principal, sans rien à
   faire de plus ici. Son affichage interne (widgets en ligne avec retour à la ligne)
   est géré sur .sidebar-widgets, cf. sidebar.css — .main-layout__sidebar lui-même n'a
   qu'un seul enfant direct (.sidebar-widgets), donc un display:flex ici serait sans
   effet visuel. */

/* ============================================================
   Page "Mata" (templates/mata.php, body.page-template-mata) — l'iframe MATA MD
   (builder/iframe_mata.php) doit occuper toute la largeur : pas de sidebar, pas
   de conteneur centré à largeur limitée. Tout reste dans .main-layout__grid
   (une seule colonne, sans réserver l'espace de la sidebar), plutôt que la
   grille [contenu | sidebar] utilisée par les autres pages. Scope
   body.page-template-mata uniquement — structure .main-layout* partagée par
   content-flexible.php sur toutes les autres pages, inchangée ailleurs. */
body.page-template-mata {
    .main-layout-container {
        max-width: none;
        padding: 0;
    }

    .main-layout__grid {
        /* Reste une seule colonne même ≥1200px (pas de sidebar à réserver),
           au lieu de repasser en [1fr sidebar] comme sur les autres pages. */
        grid-template-columns: 1fr;
    }

    .main-layout__sidebar {
        display: none;
    }
}