/* Pattern: Grille "Inclus dans l'offre" */

/* Emphase accent sur le titre H2 de la section */
.mau-section:has(.mau-included-grid) h2 em {
  color: var(--wp--preset--color--accent);
  font-style: italic;
}

.mau-included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* grilles wp:html directes : items = enfants directs, 3 colonnes */
  gap: var(--wp--preset--spacing--16);
}

/* Grilles via wp:columns : WP insère des wp-block-column wrapper entre la grille
   et les items. Sans override, WP flex (2-col) écrase notre grille.
   — 4 items (2/colonne, ex. location-bureau) → 2 colonnes.
   — 6 items (3/colonne, ex. gestion-comptabilite) → display:contents + 3 colonnes
     (les items deviennent enfants directs de la grille).
   display:grid explicite (pas juste hérité de .mau-included-grid) : WP pose sa
   propre .is-layout-flex{display:flex} à spécificité égale (1 classe) sur ce
   même élément. Sur le front notre CSS est injecté après celui de WP → ça
   passe. Dans l'éditeur Gutenberg, add_editor_style() injecte les patterns
   AVANT les styles de layout générés par bloc → sans ce display:grid porté
   par un sélecteur à 2 classes (qui l'emporte quel que soit l'ordre), la
   grille reste display:flex dans l'éditeur alors qu'elle est display:grid
   sur le front (aperçu mobile Gutenberg cassé, front correct). */
.mau-included-grid.wp-block-columns,
.mau-included-grid.is-layout-flex {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.mau-included-grid:has(> .wp-block-column > .mau-included-item:nth-child(3)) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
}
.mau-included-grid:has(> .wp-block-column > .mau-included-item:nth-child(3)) > .wp-block-column {
  display: contents;
}

.mau-included-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--wp--preset--color--paper-soft);
  border-radius: var(--wp--custom--radius--md);
  margin-block-start: 0 !important;
}

.mau-included-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--wp--preset--color--accent);
  color: #fff;
  border-radius: var(--wp--custom--radius--sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.mau-included-item__title {
  font-weight: 600;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--ink);
  margin: 0 0 4px;
}

.mau-included-item__desc {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--slate);
  line-height: 1.45;
  margin: 0;
}

/* Callout "Notre tout compris" */
.mau-transparency-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--wp--preset--color--paper-soft);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-left: 3px solid var(--wp--preset--color--accent);
  border-radius: 0;
  padding: var(--wp--preset--spacing--24);
  margin-top: var(--wp--preset--spacing--32);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--slate);
}

.mau-transparency-note__icon {
  color: var(--wp--preset--color--accent);
  flex-shrink: 0;
  line-height: 0;
  margin-top: 2px;
}

.mau-transparency-note__title {
  display: block;
  font-family: var(--wp--preset--font-family--playfair);
  font-size: var(--wp--preset--font-size--lede);
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  /* line-height serré (maquette 1.25) : sans lui, la grande boîte de ligne
     héritée fait remonter l'icône (calée en flex-start) au-dessus du titre. */
  line-height: 1.25;
  margin: 0 0 8px;
}

.mau-transparency-note__text {
  margin: 0;
  color: var(--wp--preset--color--slate);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
}

/* Emphase dans le corps : dorée (maquette .transparency-note__text strong). */
.mau-transparency-note__text strong {
  color: var(--wp--preset--color--accent);
  font-weight: 600;
}

@media (min-width: 768px) and (max-width: 1099px) {
  .mau-included-grid {
    grid-template-columns: repeat(3, 1fr); /* wp:html direct */
  }
  .mau-included-grid.wp-block-columns {
    grid-template-columns: repeat(2, 1fr); /* wp:columns : 2 cols sur tablette */
  }
}

@media (max-width: 767px) {
  /* Mobile : empiler en 1 colonne. On doit égaler la spécificité des variantes
     wp:columns (2-col) et surtout du sélecteur :has() 3-col (sinon son
     grid-template-columns:repeat(3,1fr) l'emporte → cartes ~106px, titres
     illisibles wrap lettre par lettre). Les items en display:contents restent
     enfants directs de la grille et s'empilent proprement. */
  .mau-included-grid,
  .mau-included-grid.wp-block-columns,
  .mau-included-grid:has(> .wp-block-column > .mau-included-item:nth-child(3)) {
    grid-template-columns: 1fr;
  }
}