/* ==========================================================================
   MG Carrelage — Pages intérieures
     La société    Figma 2:196
     Showroom      Figma 101:908
     Réalisations  Figma 101:1015
     Contact       Figma 101:1137

   Réutilise le gabarit et la typographie de layout.css / typography.css. Sur la
   spécificité et l'usage de `!important`, voir l'en-tête de typography.css.
   ========================================================================== */

/* ==========================================================================
   IMAGES DE FOND DES HERO

   Comme sur l'accueil, les fonds photographiques passent par le CSS : le rendu
   serveur de Divi 5 n'affiche pas fiablement une background-image posée en
   attribut de bloc.

   Chaque page porte sa propre classe, émise par les layouts. Les règles
   ci-dessous posent la couleur de repli ; il reste à renseigner les URLs de la
   médiathèque dans le bloc commenté juste après.
   ========================================================================== */

.mg-hero--societe,
.mg-hero--showroom,
.mg-hero--realisations,
.mg-hero--contact {
  background-color: var(--mg-taupe);
}

/* À décommenter et compléter après upload des visuels (voir docs/images.md) :

.mg-hero--societe      { background-image: url(".../mg-hero-societe.jpg"); }
.mg-hero--showroom     { background-image: url(".../mg-hero-showroom.jpg"); }
.mg-hero--realisations { background-image: url(".../mg-hero-realisations.jpg"); }
.mg-hero--contact      { background-image: url(".../mg-hero-contact.jpg"); }

*/

/* --- Variantes de hero --------------------------------------------------- */

/* Réalisations et Contact : bloc centré (nodes 101:1017, 101:1139). */
.mg-hero--centre.mg-section,
.mg-hero--centre {
  justify-content: center;
}

.mg-hero--centre .mg-hero__contenu.et_pb_row,
.mg-hero--centre .mg-hero__contenu {
  align-items: center;
}

.mg-hero--centre .mg-hero__contenu > .et_pb_column {
  align-items: center;
  max-width: 930px;
  margin: 0 auto !important;
}

.mg-hero--centre .mg-h1,
.mg-hero--centre .mg-h1 h1,
.mg-hero--centre .mg-lead,
.mg-hero--centre .mg-lead .et_pb_text_inner,
.mg-hero--centre .mg-lead .et_pb_text_inner p {
  max-width: 930px;
}

/* Showroom : ancré en bas à gauche, titre et chapô sur 930px. */
.mg-hero .mg-h1,
.mg-hero .mg-lead {
  max-width: 930px;
}

/* La société : titre étroit à gauche, paragraphe justifié à droite, gap 60px
   (node 101:760). Réutilise la mécanique du bandeau de l'accueil. */
.mg-hero--duo .mg-bandeau__contenu.et_pb_row,
.mg-hero--duo .mg-bandeau__contenu {
  gap: 60px;
}

.mg-hero--duo .mg-bandeau__titre {
  flex: 0 0 385px;
  width: 385px !important;
  max-width: 385px;
}

.mg-hero--duo .mg-bandeau__texte {
  flex: 1 1 671px;
  max-width: 671px;
}

.mg-hero--duo .mg-lead--justifie {
  max-width: 671px;
}


/* ==========================================================================
   Ancrages de section
   Une classe par section : sert de point d'accroche pour le rythme vertical et
   pour toute retouche ultérieure sans toucher aux modules.
   ========================================================================== */

.mg-societe-intro,
.mg-showroom,
.mg-realisations,
.mg-contact {
  background-color: var(--mg-blanc);
}

/* La société — les trois rangées sont CONTIGUËS : dans le Figma elles occupent
   y=0, y=562 et y=1124 d'un cadre de 1686px, sans le moindre écart. Le padding
   de 40px appartient à la SECTION, pas aux rangées — sinon un espace apparaît
   entre les encarts, et il n'est réglable nulle part dans l'interface. */
/* Deux classes : `.mg-section.et_pb_section { padding: 0 20px }` de layout.css
   l'emporterait sinon et le padding vertical serait perdu. */
.mg-societe-approche,
.mg-societe-approche.mg-section {
  background-color: var(--mg-blanc);
  padding-top: var(--mg-padding-section);
  padding-bottom: var(--mg-padding-section);
}

.mg-societe-approche .mg-row {
  padding: 0 var(--mg-padding-section);
}

/* Le bloc de texte du « Qui sommes nous ? » est calé en bas de son visuel : le
   Figma place le paragraphe à y=348 dans un bloc de 645px. */
.mg-societe-intro__texte {
  justify-content: flex-end;
}


/* ==========================================================================
   Rangée à deux colonnes texte / visuel — La société
   ========================================================================== */

.mg-duo.et_pb_row,
.mg-duo {
  display: flex;
  align-items: center;
  gap: 0;
}

.mg-duo > .et_pb_column {
  width: 50% !important;
  max-width: 50%;
  margin: 0 !important;
  padding: 0;
}

/* Le bloc de texte du « Qui sommes nous ? » est ancré en bas (node 2:239). */
.mg-duo--bas.et_pb_row,
.mg-duo--bas {
  align-items: flex-end;
}

.mg-duo__texte {
  display: flex;
  flex-direction: column;
  gap: var(--mg-gouttiere);
  padding: var(--mg-padding-carte);
}

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

.mg-duo__media-col {
  align-self: stretch;
}

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

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

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

/* Le paragraphe d'introduction reprend la taille du chapô mais en encre. */
/* Bloc « Qui sommes nous ? » : deux paragraphes de tailles différentes,
   justifiés (node 2:240 — 32px puis 24px). */
.mg-societe-intro__bloc {
  width: 100%;
  margin-bottom: 0 !important;
}

.mg-societe-intro__texte .mg-intro-1,
.et_pb_text_inner p.mg-intro-1 {
  margin: 0 0 24px !important;
}

.mg-societe-intro__texte .mg-intro-2,
.et_pb_text_inner p.mg-intro-2 {
  margin: 0 !important;
}


/* ==========================================================================
   Encarts colorés — La société (nodes 2:601, 101:1422, 2:584)

   Chaque encart occupe une demi-rangée de 660×562, avec 40px de padding et un
   contenu de 580×482 réparti haut/bas (`justify-content: space-between`).
   Trois teintes, une par encart :
     Savoir-faire technique  #afa395
     Le plus ?               #514942
     Conseil & Proximité     #b7aba0
   Textes en blanc, titres en italique 32px, corps justifié.
   ========================================================================== */

/* Trois classes : la règle `.mg-duo > .et_pb_column { padding: 0 }` plus haut
   dans ce fichier l'emporterait sinon, et les encarts perdraient leurs 40px. */
.mg-encart,
.mg-duo > .et_pb_column.mg-encart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mg-gap);
  min-height: 562px;
  padding: var(--mg-padding-carte);
}

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

.mg-encart--beige       { background-color: var(--mg-beige); }
.mg-encart--taupe       { background-color: var(--mg-taupe); }
.mg-encart--beige-clair { background-color: var(--mg-beige-clair); }

/* Titre en haut, dernier bloc collé en bas : `margin-top: auto` sur le dernier
   module suffit, et fonctionne que l'encart ait deux ou trois modules —
   contrairement à `space-between`, qui répartirait les trois à égalité. */
.mg-encart > .et_pb_module:last-child {
  margin-top: auto;
}

/* Points d'accroche des trois modules d'un encart — titre, accroche, détail.
   Aucune typographie ici : elle vit dans les attributs de bloc, pour rester
   modifiable dans le Visual Builder (voir le bloc suivant). */
.mg-encart__titre,
.mg-encart__intro,
.mg-encart__bas {
  width: 100%;
}

/* ── Typographie des encarts : volontairement ABSENTE d'ici ───────────────
   Taille, graisse, interligne, style et couleur sont posés dans les ATTRIBUTS
   des trois modules (voir police() dans divi/mg_divi.py). C'est ce qui les rend
   réglables dans le Visual Builder : le panneau Design de Divi les affiche et
   régénère sa propre règle CSS quand le client les change.

   Une règle en `!important` ici écraserait ce réglage — le client verrait son
   changement accepté puis sans effet. C'est exactement le défaut signalé.

   Seule exception : un filet de sécurité sur la COULEUR, pour que le texte
   reste lisible sur fond coloré si les attributs ne passaient pas à l'import.
   Sans `!important` : Divi marque la couleur `!important` dans la règle qu'il
   génère, donc tout réglage fait dans l'interface l'emporte.
   ──────────────────────────────────────────────────────────────────────── */

/* Divi ajoute une marge basse aux paragraphes : neutralisée pour que le rythme
   vertical vienne du `gap` du conteneur. */
.mg-encart .et_pb_text_inner > :last-child {
  margin-bottom: 0;
}

/* Puces rondes blanches, retrait de 33px comme dans le Figma. */
.mg-encart ul.mg-liste {
  gap: 4px;
  list-style: disc;
  padding-left: 33px;
}

.mg-encart ul.mg-liste > li {
  padding-left: 0;
  list-style: disc;
}

/* Les puces carrées vertes du reste du site ne s'appliquent pas ici. */
.mg-encart ul.mg-liste > li::before {
  content: none;
}


/* ==========================================================================
   Listes à puces — La société, Showroom
   ========================================================================== */

ul.mg-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.mg-liste > li {
  position: relative;
  margin: 0;
  padding-left: 22px;
}

ul.mg-liste > li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--mg-vert);
}

/* Le Figma note les informations pratiques du Showroom avec des chevrons. */
ul.mg-liste--fleche > li::before {
  content: "›";
  top: 0;
  width: auto;
  height: auto;
  background: none;
}


/* ==========================================================================
   Showroom (node 4:1166)
   ========================================================================== */

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

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

/* Informations pratiques : Poppins Light 24px en gris (node 4:1171). */
.mg-showroom__infos .et_pb_text_inner > p:first-child {
  margin-bottom: var(--mg-gouttiere) !important;
}


/* ==========================================================================
   Réalisations (node 153:389)
   Deux cartes par rangée : visuel 595×346 à coins arrondis, puis titre et
   description dans un encadré.
   ========================================================================== */

.mg-grid--real {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  align-items: start;
}

.mg-grid--real > .et_pb_column {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
}

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

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

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

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

.mg-real__media img {
  display: block;
  width: 100%;
  aspect-ratio: 595 / 346;
  height: auto;
  object-fit: cover;
  object-position: center;
  /* Les visuels de réalisation sont les seuls arrondis de la maquette
     (nœuds `rounded-rectangle`), et le bloc de texte sous eux n'a pas de fond :
     l'arrondi porte donc sur les quatre coins. */
  border-radius: 8px;
}

/* Pas de fond, pas de bordure : le node 3:553 n'est qu'un bloc de texte avec
   40px de padding. */
.mg-real__texte {
  padding: var(--mg-padding-carte);
  margin-bottom: 0 !important;
}

.mg-real__texte .et_pb_text_inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

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


/* ==========================================================================
   Contact (node 3:487)
   Colonne d'informations 461px + formulaire 769px.
   ========================================================================== */

.mg-contact__contenu.et_pb_row,
.mg-contact__contenu {
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

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

.mg-contact__infos {
  display: flex;
  flex-direction: column;
  gap: var(--mg-gouttiere);
  flex: 0 0 461px;
  width: 461px !important;
  max-width: 461px;
}

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

/* Paragraphe d'introduction du bloc Contact (node 3:495) : justifié comme dans
   la maquette, sur 461px. */
/* Le Figma pousse les coordonnées vers le bas du bloc (node 3:496, y=474). */
.mg-contact__coord {
  margin-top: auto !important;
  padding-top: var(--mg-padding-footer);
}

.mg-contact__form-col {
  flex: 1 1 auto;
  width: auto !important;
  max-width: 769px;
}

/* --- Coordonnées avec pictogrammes -------------------------------------- */

ul.mg-coord {
  display: flex;
  flex-direction: column;
  gap: var(--mg-gouttiere);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mg-coord__item {
  position: relative;
  margin: 0;
  padding-left: 42px;
}

.mg-coord__item a {
  text-decoration: none;
}


/* Pictogrammes en SVG inline (data URI) : pas de dépendance à une police
   d'icônes, et la couleur suit l'encre de la maquette. */
.mg-coord__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.mg-coord__item--tel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.mg-coord__item--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E");
}

.mg-coord__item--adresse::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201e1e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* --- Formulaire : champs soulignés (node 4:1128) ------------------------- */

/* Ces règles habillent n'importe quel formulaire de contact Divi portant la
   classe `mg-form` — y compris un module ajouté à la main dans le Visual
   Builder. C'est voulu : le schéma de bloc du module Formulaire n'est pas
   documenté, et ce repli doit rester habillé. */

.mg-form .et_pb_contact_form,
.mg-form .et_pb_contact {
  display: flex;
  flex-wrap: wrap;
  gap: 40px var(--mg-gap-presta);
}

.mg-form p.et_pb_contact_field,
.mg-form .mg-form__champ {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
}

/* Le sélecteur d'élément `p` de la règle pleine largeur ci-dessus ajoute un
   point de spécificité : il faut le reprendre ici, sinon les champs Nom et
   Prénom restent sur toute la largeur. */
.mg-form p.et_pb_contact_field.et_pb_contact_field_half,
.mg-form p.mg-form__champ--demi,
.mg-form .mg-form__champ.mg-form__champ--demi {
  width: calc(50% - (var(--mg-gap-presta) / 2));
}

.mg-form .et_pb_contact_form_label {
  display: none;
}

.mg-form input[type="text"],
.mg-form input[type="email"],
.mg-form input[type="tel"],
.mg-form textarea,
.mg-form select {
  width: 100%;
  padding: 0 0 8px;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mg-encre) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mg-form textarea {
  min-height: 86px;
  resize: vertical;
}

.mg-form input::placeholder,
.mg-form textarea::placeholder {
  opacity: 1;
}

.mg-form input:focus,
.mg-form textarea:focus {
  outline: none;
  border-bottom-color: var(--mg-vert) !important;
}

/* Bouton d'envoi : bloc clair 189×70, sans rayon (node 101:1334). */
.mg-form .et_pb_button,
.mg-form button[type="submit"],
.mg-form input[type="submit"] {
  /* Sans cette remise à zéro, le navigateur conserve l'apparence native du
     bouton et ignore `background-color` — y compris en `!important`. */
  -webkit-appearance: none;
  appearance: none;
  min-width: 189px;
  min-height: 70px;
  margin-top: var(--mg-padding-carte);
  padding: 20px 30px !important;
  /* Verre dépoli translucide, pas un aplat : la teinte dépend du fond. */
  background-color: var(--mg-bouton-fond) !important;
  -webkit-backdrop-filter: blur(var(--mg-bouton-flou));
  backdrop-filter: blur(var(--mg-bouton-flou));
  border: 0 !important;
  border-radius: var(--mg-bouton-radius) !important;
  transition: background-color var(--mg-transition), color var(--mg-transition);
}

.mg-form .et_pb_button::after {
  display: none !important;
}

.mg-form .et_pb_button:hover,
.mg-form button[type="submit"]:hover,
.mg-form input[type="submit"]:hover {
  background-color: var(--mg-vert) !important;
}


/* ==========================================================================
   Localisation (node 4:1165)
   ========================================================================== */

.mg-localisation.mg-section,
.mg-localisation {
  background-color: var(--mg-gris-fond);
}

/* Le Figma place le titre À GAUCHE et la carte à sa droite, avec 102px
   d'écart — et non l'un au-dessus de l'autre. */
.mg-localisation__contenu.et_pb_row,
.mg-localisation__contenu {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 102px;
}

.mg-localisation__contenu > .et_pb_column {
  display: flex;
  flex-direction: column;
  gap: var(--mg-padding-carte);
  width: auto !important;
  margin: 0 !important;
}

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

.mg-localisation__titre .et_pb_text_inner p {
  display: flex;
  align-items: center;
  gap: var(--mg-padding-carte);
  margin: 0 !important;
}


/* La flèche horizontale de la maquette (vector 101:1336). */
.mg-fleche {
  position: relative;
  display: inline-block;
  flex: 0 0 86px;
  width: 86px;
  height: 1px;
  background-color: var(--mg-encre);
}

.mg-fleche::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--mg-encre);
  border-right: 1px solid var(--mg-encre);
  transform: rotate(45deg);
}

.mg-localisation__carte,
.mg-localisation__carte.et_pb_image {
  flex: 0 0 634px;
  width: 634px !important;
  max-width: 634px;
  margin: 0 !important;
  line-height: 0;
}

.mg-localisation__carte img {
  display: block;
  width: 100%;
  aspect-ratio: 634 / 422;
  height: auto;
  object-fit: contain;
}


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

@media (max-width: 1180px) {
  .mg-contact__contenu.et_pb_row,
  .mg-contact__contenu {
    gap: var(--mg-padding-footer);
  }

  .mg-contact__infos {
    flex: 0 0 380px;
    width: 380px !important;
    max-width: 380px;
  }

  .mg-contact__coord {
    padding-top: var(--mg-padding-carte);
  }
}

@media (max-width: 980px) {
  /* Les rangées texte / visuel s'empilent, visuel toujours au-dessus pour
     garder un rythme régulier quel que soit le sens d'alternance. */
  .mg-duo.et_pb_row,
  .mg-duo {
    flex-direction: column;
  }

  .mg-duo > .et_pb_column {
    width: 100% !important;
    max-width: 100%;
  }

  .mg-duo__media-col {
    order: -1;
  }

  .mg-duo__media img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .mg-duo__texte {
    padding: var(--mg-padding-carte) 0;
  }

  .mg-grid--real {
    gap: var(--mg-padding-carte);
  }

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

  .mg-hero--duo .mg-bandeau__contenu.et_pb_row,
  .mg-hero--duo .mg-bandeau__contenu {
    gap: var(--mg-gouttiere);
  }

  .mg-contact__contenu.et_pb_row,
  .mg-contact__contenu {
    flex-direction: column;
    gap: var(--mg-padding-carte);
  }

  .mg-contact__infos,
  .mg-contact__form-col {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: 100%;
  }

  .mg-localisation__contenu.et_pb_row,
  .mg-localisation__contenu {
    flex-direction: column;
    gap: var(--mg-padding-carte);
  }

  .mg-localisation__carte,
  .mg-localisation__carte.et_pb_image {
    flex: 1 1 auto;
    width: 100% !important;
  }
}

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

  .mg-form .et_pb_contact_form,
  .mg-form .et_pb_contact {
    gap: var(--mg-padding-carte);
  }

  .mg-form p.et_pb_contact_field.et_pb_contact_field_half,
  .mg-form .mg-form__champ--demi {
    width: 100%;
  }

  .mg-localisation__titre .et_pb_text_inner p {
    gap: var(--mg-gouttiere);
  }

  .mg-localisation__carte,
  .mg-localisation__carte.et_pb_image {
    flex: 1 1 auto;
    width: 100% !important;
  }

  .mg-fleche {
    flex-basis: 48px;
    width: 48px;
  }
}