/* ==========================================================================
   MG Carrelage — Page Accueil
   Figma : frame `Accueil` (node 1:2), 1440×4363.
     S1 hero                2:30      1400×753
     S2 notre savoir faire  101:1221  1400×828
     S3 bandeau prestations 78:338    1400×528
     S4 grille prestations  2:331     1400×1259

   Structure Divi de chaque section (cf. layout.css) :
     section.mg-section.mg-canvas > div.et_pb_row.mg-row > div.et_pb_column
   Sur la spécificité et l'usage de `!important`, voir l'en-tête de
   typography.css.
   ========================================================================== */

/* ==========================================================================
   IMAGES DE FOND — à renseigner après l'upload dans la médiathèque

   Le SSR de Divi 5 ne rend pas de façon fiable une background-image définie en
   attribut JSON de section : les deux sections photographiques (hero et
   bandeau) reçoivent donc leur visuel par CSS.

   Décommenter et remplacer les URLs par celles de la médiathèque
   (Médias > cliquer l'image > « Copier l'URL »). Voir docs/images.md.

.mg-hero {
  background-image: url("https://mgcarrelage.com/wp-content/uploads/2026/07/hero.jpg");
}

.mg-bandeau {
  background-image: url("https://mgcarrelage.com/wp-content/uploads/2026/07/bandeau.jpg");
}

   Variante recommandée pour la performance — servir un visuel plus léger aux
   petits écrans (rappel : Divi 5 est desktop-first, donc `max-width`) :

@media (max-width: 980px) {
  .mg-hero    { background-image: url(".../hero-980.jpg"); }
  .mg-bandeau { background-image: url(".../bandeau-980.jpg"); }
}
   ========================================================================== */


/* ==========================================================================
   S1 — Hero (node 2:30)
   Image de fond `cover`, padding 40px, contenu ancré en bas à gauche.
   ========================================================================== */

.mg-hero.mg-section,
.mg-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--mg-h-hero);
}

.mg-hero__contenu.et_pb_row,
.mg-hero__contenu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mg-gouttiere);
}

.mg-hero__contenu > .et_pb_column {
  display: flex;
  flex-direction: column;
  gap: var(--mg-gouttiere);
  width: 100% !important;
  margin: 0 !important;
}

/* Largeurs de ligne du Figma : 1020px pour le titre, 889px pour les textes. */
.mg-hero__contenu .mg-h1 {
  max-width: 1020px;
}

.mg-hero__contenu .mg-eyebrow,
.mg-hero__contenu .mg-lead {
  max-width: 889px;
}

/* Divi ajoute 23px de marge basse à chaque module : le `gap` du conteneur
   gère déjà le rythme vertical. */
.mg-hero__contenu .et_pb_module {
  margin-bottom: 0 !important;
}


/* ==========================================================================
   S2 — Notre savoir faire (node 101:1221)
   Fond blanc. Padding 40px latéral / 50px vertical (Frame 689 en x=40, y=50).
   Rangée 1 : en-tête (sur-titre + titre, gap 30px).
   Rangée 2 : grille cartes / image verticale / cartes.
   ========================================================================== */

.mg-savoir.mg-section,
.mg-savoir {
  background-color: var(--mg-blanc);
}

.mg-savoir .mg-row {
  padding: var(--mg-padding-section-lg) var(--mg-padding-section);
}

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

/* --- En-tête de section (node 101:1409) --------------------------------- */

.mg-savoir__entete.et_pb_row,
.mg-savoir__entete {
  padding-bottom: 50px; /* en-tête de 136px, grille à y=186 dans le Figma */
}

.mg-savoir__entete > .et_pb_column {
  display: flex;
  flex-direction: column;
  gap: var(--mg-gap);
  width: 100% !important;
  margin: 0 !important;
}

.mg-savoir__entete .et_pb_module {
  margin-bottom: 0 !important;
}

/* --- Colonnes de cartes ------------------------------------------------- */

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

/* --- Image verticale centrale (513×542) --------------------------------- */

.mg-savoir__media,
.mg-savoir__media.et_pb_image {
  margin: 0 !important;
  line-height: 0;
}

.mg-savoir__media .et_pb_image_wrap {
  display: block;
  width: 100%;
}

.mg-savoir__media img {
  display: block;
  width: 100%;
  height: 542px;
  object-fit: cover;
  object-position: center;
}

/* --- Carte numérotée (node 101:1231) ------------------------------------ */

/* La carte est une COLONNE Divi portant TROIS modules Texte — numéro, titre,
   texte. Un module par élément, pour que chacun garde sa propre typographie
   réglable dans le Visual Builder. Le centrage porte donc sur la carte.
   DOM : div.et_pb_column.mg-card
           > div.et_pb_text.mg-card__num
           > div.et_pb_text.mg-card__titre
           > div.et_pb_text.mg-card__texte                                  */

.mg-card,
.mg-grid > .et_pb_column.mg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--mg-h-carte);
  padding: var(--mg-padding-carte);
  overflow: hidden;
  background-color: var(--mg-blanc);
  border: 1px solid var(--mg-bordure);
  box-shadow: var(--mg-ombre-carte);
}

.mg-card > .et_pb_module {
  width: 100%;
  margin-bottom: 0 !important;
}

.mg-card__num,
.et_pb_text_inner p.mg-card__num {
  margin: 0 !important;
  padding: 0 !important;
}

.mg-card__titre,
.et_pb_text_inner h3.mg-card__titre {
  margin: 0 !important;
  padding: 0 !important;
}

.mg-card__texte,
.et_pb_text_inner p.mg-card__texte {
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   S3 — Bandeau prestations (node 78:338)
   Image de fond, padding 40px. Titre à gauche (437px), chapô justifié à
   droite (646px), les deux ancrés en bas.
   ========================================================================== */

.mg-bandeau.mg-section,
.mg-bandeau {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--mg-h-bandeau);
}

.mg-bandeau.mg-canvas--image::before {
  background-color: var(--mg-voile-bandeau);
}

.mg-bandeau__contenu.et_pb_row,
.mg-bandeau__contenu {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mg-gap);
}

.mg-bandeau__contenu > .et_pb_column {
  margin: 0 !important;
}

.mg-bandeau__contenu .et_pb_module {
  margin-bottom: 0 !important;
}

.mg-bandeau__titre {
  flex: 0 0 437px;
  width: 437px !important;
  max-width: 437px;
}

.mg-bandeau__texte {
  flex: 1 1 691px;
  width: auto !important;
  max-width: 691px;
}


/* ==========================================================================
   S4 — Grille prestations (node 2:331)
   Deux rangées de 3 cartes. Carte : image (426×413) + titre italique 24px
   + description 16px ; bloc texte en padding 10px, gap 20px.
   ========================================================================== */

.mg-prestations.mg-section,
.mg-prestations {
  background-color: var(--mg-blanc);
}

/* Écart entre les deux rangées : 48px dans le Figma (671 − 40 − 583). */
.mg-prestations .mg-row + .mg-row {
  padding-top: 48px;
}

/* --- Une prestation = une colonne Divi ---------------------------------- */

.mg-presta {
  display: flex;
  flex-direction: column;
}

.mg-presta > .et_pb_module {
  margin-bottom: 0 !important;
}

.mg-presta__media,
.mg-presta__media.et_pb_image {
  margin: 0 !important;
  width: 100%;
  line-height: 0;
}

.mg-presta__media .et_pb_image_wrap {
  display: block;
  width: 100%;
}

.mg-presta__media img {
  display: block;
  width: 100%;
  aspect-ratio: 426 / 413;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* --- Bloc texte (padding 10px, gap 20px) -------------------------------- */

/* Titre et description sont deux modules distincts, chacun avec sa propre
   typographie réglable. Le padding de 10px et l'écart de 20px du Figma
   (node 3:268) se portent donc sur eux. */

.mg-presta__titre,
.mg-presta__desc {
  padding: 0 10px;
  margin-bottom: 0 !important;
}

.mg-presta__titre {
  padding-top: 10px;
  margin-bottom: var(--mg-gouttiere) !important;
}

.mg-presta__desc {
  padding-bottom: 10px;
}

.mg-presta__titre,
.et_pb_text_inner h3.mg-presta__titre {
  margin: 0 !important;
  padding: 0 !important;
  /* Aligne les descriptions des 3 cartes d'une même rangée quel que soit le
     nombre de lignes du titre — 2 lignes pour « Carrelage Intérieur & Parquet
     Céramique », 1 seule pour ses voisines. */
  min-height: calc(2 * 1.5 * var(--mg-fs-h3));
}

.mg-presta__desc,
.et_pb_text_inner p.mg-presta__desc {
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   Responsive (desktop-first)
   ========================================================================== */

@media (max-width: 1180px) {
  /* En bandeau horizontal au-dessus des cartes, l'image reprend un ratio large. */
  .mg-grid--savoir > .mg-savoir__media img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 980px) {
  .mg-savoir__entete.et_pb_row,
  .mg-savoir__entete {
    padding-bottom: var(--mg-padding-carte);
  }

  /* Sous 980px (tablette Divi), le titre de 437px et le chapô de 691px ne
     cohabitent plus : on empile. */
  .mg-bandeau__contenu.et_pb_row,
  .mg-bandeau__contenu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mg-gouttiere);
  }

  .mg-bandeau__titre {
    flex: 1 1 auto;
    width: auto !important;
    max-width: none;
  }

  .mg-bandeau__texte {
    flex: 1 1 auto;
    max-width: none;
  }

  .mg-prestations .mg-row + .mg-row {
    padding-top: var(--mg-gap-presta);
  }
}

@media (max-width: 767px) {
  .mg-presta__titre,
  .et_pb_text_inner h3.mg-presta__titre {
    min-height: 0;
  }

  .mg-presta__media img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 478px) {
  .mg-card,
  .mg-card .et_pb_text_inner {
    min-height: 0;
  }
}