/* ==========================================================================
   MG Carrelage — Gabarit

   Le Figma encarte tout le contenu de 20px : canvas 1440, sections dessinées en
   x=20 / width=1400, contenu interne 1320. Divi, lui, rend ses sections en
   pleine largeur avec une rangée contrainte à 1080px. Ce fichier redresse les
   deux, en collant à la structure que Divi génère réellement :

     section.et_pb_section.mg-section.mg-canvas   ← le bloc visible de 1400px
       div.et_pb_row.mg-row                       ← padding 40px, contenu 1320px
         div.et_pb_column                         ← colonnes Divi
           modules

   La gouttière de 20px est un padding horizontal de la SECTION, et
   `background-clip: content-box` empêche le fond (couleur comme image) de
   peindre cette gouttière. C'est ce qui permet d'obtenir le bloc de 1400px du
   Figma sans ajouter de conteneur intermédiaire que Divi ne saurait pas créer.
   ========================================================================== */

.mg-section,
.mg-section *,
.mg-header,
.mg-header *,
.mg-footer,
.mg-footer * {
  box-sizing: border-box;
}

/* --- La section : gouttière + bloc visible de 1400px --------------------- */

/* Divi impose `padding: 54px 0` sur .et_pb_section : la maquette gère ses
   propres espacements, on neutralise. */
.mg-section.et_pb_section,
.mg-section {
  width: 100%;
  max-width: calc(var(--mg-largeur-page) + 2 * var(--mg-gouttiere));
  margin: 0 auto;
  padding: 0 var(--mg-gouttiere);
  background-color: transparent;
  background-clip: content-box;
}

/* Respiration entre sections : dans le Figma, le hero est à y=175 et la section
   suivante à y=948 = 175 + 753 + 20. Soit 20px. */
.mg-section + .mg-section {
  margin-top: var(--mg-gouttiere);
}

/* --- Fond du bloc ------------------------------------------------------- */

.mg-canvas {
  background-color: var(--mg-blanc);
}

/* Variante photographique (hero, bandeau). L'image est posée en CSS et non en
   attribut de bloc Divi : le SSR de Divi 5 ne rend pas de façon fiable une
   background-image définie dans le JSON d'une section. Un voile garantit le
   contraste du texte blanc quelle que soit l'image finalement fournie. */
.mg-canvas--image {
  position: relative;
  isolation: isolate;
  background-color: var(--mg-taupe);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mg-canvas--image::before {
  content: "";
  position: absolute;
  /* Comme le fond, le voile s'arrête à la gouttière. */
  inset: 0 var(--mg-gouttiere);
  z-index: -1;
  background-color: var(--mg-voile-hero);
  pointer-events: none;
}

.mg-canvas--image,
.mg-canvas--image p,
.mg-canvas--image h1,
.mg-canvas--image h2,
.mg-canvas--image h3 {
  color: var(--mg-blanc);
}

/* --- La rangée : padding interne, contenu à 1320px ---------------------- */

/* Divi contraint .et_pb_row à `width: 80%; max-width: 1080px` : on libère,
   la largeur utile vient de la section (1400) moins ce padding (2×40) = 1320. */
.mg-row.et_pb_row,
.mg-row {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--mg-padding-section);
}

.mg-row + .mg-row {
  padding-top: 0;
}

/* --- Largeurs de ligne relevées dans le Figma --------------------------- */

/* Structure, pas typographie : ces valeurs cadrent la longueur des lignes et
   n'ont rien à faire dans les attributs d'un module. */
.mg-h2--court,
.mg-h2--court h2 {
  max-width: 709px;      /* titre de section (node 101:1253) */
}

.mg-showroom__lead {
  max-width: 1240px;     /* accroche du showroom (node 110:277) */
}

.mg-contact__intro {
  max-width: 461px;      /* colonne d'introduction Contact (node 3:495) */
}

@media (max-width: 767px) {
  .mg-h2--court,
  .mg-h2--court h2,
  .mg-showroom__lead,
  .mg-contact__intro {
    max-width: none;
  }
}


/* --- Grilles ------------------------------------------------------------ */

/* Les grilles s'appliquent à une RANGÉE Divi : ses colonnes deviennent les
   éléments de la grille. */
.mg-grid {
  display: grid;
  gap: var(--mg-gap);
}

/* Divi assigne une largeur en pourcentage à chaque colonne
   (.et_pb_column_1_3 { width: 29.6667% }). Dans une piste de grille ou un
   conteneur flex, ce pourcentage se calcule sur la piste et écrase les
   colonnes — d'où des cartes réduites à ~110px. On neutralise. */
.mg-grid > .et_pb_column,
.mg-grid > .et_pb_module,
.mg-flex > .et_pb_column,
.mg-flex > .et_pb_module {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
}

.mg-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Savoir-faire : cartes / image verticale 513px / cartes */
.mg-grid--savoir {
  grid-template-columns: minmax(0, 1fr) var(--mg-l-portrait) minmax(0, 1fr);
  align-items: center;
}

.mg-grid--savoir > .mg-savoir__media {
  /* L'image garde sa largeur fixe de 513px, elle n'est pas étirée. */
  width: var(--mg-l-portrait) !important;
}

/* Prestations : 3 colonnes, écart 20px (et non 30px) */
.mg-grid--presta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mg-gap-presta);
}

/* --- Conteneurs flex ---------------------------------------------------- */

.mg-flex {
  display: flex;
  gap: var(--mg-gap);
}

/* --- Responsive (desktop-first, `max-width` uniquement) ----------------- */

@media (max-width: 1180px) {
  /* L'image verticale ne tient plus ses 513px à côté de deux colonnes de
     cartes : elle passe en bandeau, en tête de grille, sur toute la largeur. */
  .mg-grid--savoir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mg-grid--savoir > .mg-savoir__media {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100% !important;
  }
}

@media (max-width: 980px) {
  .mg-grid--3,
  .mg-grid--presta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mg-grid--savoir,
  .mg-grid--3,
  .mg-grid--presta {
    grid-template-columns: minmax(0, 1fr);
  }
}