/* Utilitaires communs à tous les patterns homepage */

/* Padding-block de section : défaut = 80 (mode de la maquette v2).
   Overrides ci-dessous pour les sections à 100 (personas/testimonials/faq) ou autres. */
/* padding-inline répété sur .mau-section.has-global-padding (0,2,0) pour battre
   la règle WP `.has-global-padding` (root-padding = 0 en desktop), même technique
   que le hero. Sans ça, le contenu .alignwide touche les bords quand viewport ≈ wideSize. */
.mau-section,
.mau-section.has-global-padding {
  padding-block: var(--wp--preset--spacing--80);
  padding-inline: var(--wp--preset--spacing--32);
}

/* Breakout full-bleed unifié pour toutes les sections pleine largeur.
   Le mécanisme root-padding natif de WP ne traverse pas les conteneurs
   constrained imbriqués (main > post-content), donc on sort explicitement
   jusqu'aux bords du viewport. Le contenu interne (.alignwide) reste
   contraint à wideSize ; le padding-inline de section fait la gouttière.
   `overflow-x: clip` sur .wp-site-blocks absorbe la scrollbar comptée par vw. */
.mau-section.alignfull {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  /* Sections jointives (fidèle maquette v2) : neutralise le block-gap WP (24px)
     du conteneur constrained, sinon le fond beige du wrapper transparaît entre
     deux sections en une bande épaisse. Les séparateurs sont des border-top 1px. */
  margin-block: 0;
}

/* Hero pages internes (maquette `.page-hero` : 64px haut / 80px bas). */
.mau-section--hero,
.mau-section--hero.has-global-padding {
  padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--80);
  padding-inline: var(--wp--preset--spacing--32);
}

/* Hero homepage (maquette `.hero` : 40px haut / 80px bas), repéré par le visuel dashboard. */
.mau-section--hero:has(.mau-hero__visual),
.mau-section--hero:has(.mau-hero__visual).has-global-padding {
  padding-block: 40px var(--wp--preset--spacing--80);
}

.mau-eyebrow {
  margin-block-end: var(--wp--preset--spacing--12) !important;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}

.mau-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--wp--preset--color--accent);
  vertical-align: middle;
  margin-inline-end: 8px;
}

/* En-tête de section centré (opt-in). La maquette centre le trio eyebrow+titre+lede
   de ~64 % des sections (par TYPE : faq, services, process, proscons, obligations,
   dual-offer…), à l'identique desktop/mobile. L'alignement vit dans le markup via le
   modifieur mau-section--center-head, posé par tools/import/align-section-headers.mjs
   (mapping texte eyebrow → maquette, tools/lint/section-header-align.json). Opt-IN :
   les sections « left » restent au défaut → aucune régression. Le trio est enfant
   direct de .mau-section (le corps vit dans des .mau-*-grid / wp:html). */
.mau-section--center-head > .mau-eyebrow,
.mau-section--center-head > .mau-eyebrow + .wp-block-heading,
.mau-section--center-head > .mau-eyebrow + .wp-block-heading + p {
  text-align: center;
}

/* H2/H3 de section — poids 600 (le défaut navigateur des titres est 700, trop
   gras vs maquette). La police Inter vient déjà de theme.json (elements.heading) ;
   on la réaffirme ici pour blinder contre tout débordement de composant. */
.mau-section h2,
.mau-section h3 {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
}

/* Taille des titres d'EN-TÊTE de section = slug `display` (clamp 28→44px,
   « H2 section » dans theme.json, calqué sur .section-title de la maquette).
   Ciblé sur l'inner-header `eyebrow + h2` UNIQUEMENT (frère adjacent) : c'est
   le seul marqueur structurel fiable du titre de section. Les h2 de CONTENU
   (sous-titres d'article/offre, token xxxl) gardent ainsi leur taille (32px) au
   lieu d'être sur-dimensionnés. !important pour primer les classes de preset
   `.has-*-font-size` que WP génère en !important. */
.mau-eyebrow + h2 {
  font-size: var(--wp--preset--font-size--display) !important;
  line-height: 1.15;
}

/* En-tête de section témoignages « à l'étroit » (.mau-testimonials-header--tight) :
   certains titres (maquette desktop V3) sont trop longs pour tenir sur le nombre
   de lignes attendu en taille `display` (44px) dans la colonne 66 %. On revient
   au token `xxxl` (32px, déjà utilisé pour les h2 de contenu) pour CES instances
   uniquement. Spécificité (0,2,1) > `.mau-eyebrow + h2` (0,1,1) : gagne malgré
   les deux !important, sans toucher le comportement global du composant. */
.mau-testimonials-header--tight .mau-eyebrow + h2 {
  font-size: var(--wp--preset--font-size--xxxl) !important;
  line-height: 1.2;
}

/* Variante encore plus étroite : certains titres restent sur 2 lignes même au
   token `xxxl` (32px) — mesuré : largeur naturelle du texte > largeur de
   colonne disponible même à 32px. Un cran de plus, `xxl` (28px). Même
   mécanique de spécificité que `--tight` ci-dessus. */
.mau-testimonials-header--tighter .mau-eyebrow + h2 {
  font-size: var(--wp--preset--font-size--xxl) !important;
  line-height: 1.2;
}

/* Emphase dorée globale dans les titres de section — fidèle maquette .section-title em */
.mau-section .wp-block-heading em {
  color: var(--wp--preset--color--accent);
  font-style: italic;
  font-weight: 400;
}

/* Titre d'en-tête de section (H2 display) — interlettrage serré maquette v2 */
.mau-eyebrow + h2 {
  letter-spacing: -0.02em;
}

/* Rythme d'en-tête de section — fidèle maquette (.section-header) :
   eyebrow → h2 = 12 · h2 → lede = 16 · h2/lede → contenu = 48.
   Sans cela, le block-gap WP (24px posé en margin-block-start sur chaque enfant
   de flux d'un groupe constrained) écrase la marge basse de l'eyebrow (collapse
   sur le margin-top du h2) et tasse le contenu à un uniforme 24/24. On reprend
   le marqueur structurel `eyebrow + h2` (idem taille/interlettrage ci-dessus) et
   on neutralise le block-gap sur le trio. Cible : 48 = valeur dominante maquette
   (services, faq, proscons, related-articles, gallery, compare, obligations…). */
.mau-eyebrow + h2 {
  margin-top: var(--wp--preset--spacing--12);
}
.mau-section > .mau-eyebrow + h2 + .has-lede-font-size {
  margin-top: var(--wp--preset--spacing--16);
}
.mau-section > .mau-eyebrow + h2 + :not(.has-lede-font-size),
.mau-section > .mau-eyebrow + h2 + .has-lede-font-size + * {
  margin-top: var(--wp--preset--spacing--48);
}

/* Plancher h2 de section : évite la chute au défaut navigateur (~24px) si ni
   eyebrow ni token de taille explicite. Le !important du sélecteur eyebrow ci-dessus
   prime sur les sections avec eyebrow ; le :not n'interfère pas avec les h2 tokenisés. */
.mau-section h2:not([class*="-font-size"]) {
  font-size: var(--wp--preset--font-size--xxxl);
}

/* Équilibrage des coupures de ligne sur tous les h2 de section — prévient les
   retours à la ligne mal placés quelle que soit la largeur de colonne contenante. */
.mau-section h2 {
  text-wrap: balance;
}

/* H2 de contenu (offre/légal, token xxxl) — typo fluide maquette v2 (DEV-002) :
   32px desktop → 26px mobile, interligne 1.2 (.offer-detail__content h2). */
.mau-section h2.has-xxxl-font-size {
  line-height: 1.2;
}
@media (max-width: 767px) {
  .mau-section h2.has-xxxl-font-size {
    font-size: 1.625rem !important; /* 26px — bat le preset .has-xxxl-font-size (font-size + !important) */
  }
}

/* H1 hero pages internes — interlettrage maquette v2 (-0.005em → -0.27px à 54px) */
.mau-section--hero h1 {
  letter-spacing: -0.005em;
  margin-block-end: var(--wp--preset--spacing--24);
}

/* Lede hero — espacement bas maquette v2 (32px) ; reset du margin-top WP global */
.mau-section--hero p.has-lede-font-size {
  margin-block-start: 0;
  margin-block-end: var(--wp--preset--spacing--32);
  line-height: 1.55; /* maquette v2 .page-hero__lede */
}

/* Section offres — séparateur haut + padding-block maquette (80/100), bat .has-global-padding */
.mau-section.mau-section--offres {
  border-top: 1px solid var(--wp--preset--color--border-subtle);
  padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--100);
}

/* Section pillars (homepage + Contact) — séparateurs haut et bas, fidèle maquette `.pillars` */
.mau-section.mau-section--pillars {
  border-top: 1px solid var(--wp--preset--color--border-subtle);
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
  padding-block: var(--wp--preset--spacing--64);
}

/* Sections à 100 (maquette v2) — le reste hérite du défaut 80 */
.mau-section.mau-section--personas,
.mau-section.mau-section--testimonials,
.mau-section.mau-section--faq {
  padding-block: var(--wp--preset--spacing--100);
}

/* Icônes SVG */
.mau-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.mau-icon--accent {
  color: var(--wp--preset--color--accent);
  stroke: var(--wp--preset--color--accent);
  margin-block-end: var(--wp--preset--spacing--16);
}

.mau-icon--lg  { width: 32px; height: 32px; }
.mau-icon--xl  { width: 40px; height: 40px; }

/* Liens arrow */
.mau-link-arrow {
  /* Norme maquette : liens « En savoir plus → » de carte à 13px (mappé token
     sm). Porté par le composant pour que les instances sans classe de taille
     (spans bruts des imports) n'héritent plus du 16px de base. Une classe
     has-*-font-size explicite dans le markup reste prioritaire (!important). */
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s;
}
.mau-link-arrow:hover { opacity: 0.75; }

/* Persona links */
.mau-persona-link {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  font-weight: 600;
}
.mau-persona-link:hover { text-decoration: underline; }

/* Dashboard panels partagés */
.mau-dashboard {
  position: relative;
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--lg);
}

.mau-dashboard__chart {
  margin-block: var(--wp--preset--spacing--16);
  background: var(--wp--preset--color--paper-soft);
  border-radius: var(--wp--custom--radius--sm);
  padding: var(--wp--preset--spacing--8);
}

/* Stats empilées verticalement dans la carte (maquette v2).
   row-gap/column-gap explicites pour primer sur le block-gap WP (32px par défaut). */
.mau-dashboard .wp-block-columns {
  flex-direction: column;
  row-gap: var(--wp--preset--spacing--12);
  column-gap: var(--wp--preset--spacing--12);
}

.mau-kpi-mini {
  min-width: 0;
  background: var(--wp--preset--color--paper-soft);
  border-radius: var(--wp--custom--radius--sm);
  padding: var(--wp--preset--spacing--12);
}

.mau-kpi-mini p {
  word-break: break-word;
}

/* Bouton outline */
.mau-btn-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--wp--preset--color--accent);
  background: transparent;
  color: var(--wp--preset--color--accent);
}
.mau-btn-outline .wp-block-button__link:hover,
.mau-btn-outline .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--accent);
  color: #ffffff;
}

/* Bouton grande taille (maquette .btn--lg : padding 16px 28px). Utilitaire réutilisable
   hors hero — ex. CTA des sections feature des pages segment. */
.mau-btn-lg .wp-block-button__link,
.wp-block-button__link.mau-btn-lg {
  padding: 16px 28px !important;
}

/* Boutons avec icône inline */
.wp-block-button__link .mau-icon {
  margin-inline-end: 6px;
}

/* Boutons verticaux : flex-direction:column + flex-wrap:wrap (défaut Gutenberg) = boutons côte à côte.
   Forcer nowrap pour qu'ils s'empilent correctement. */
.wp-block-buttons.is-vertical {
  flex-wrap: nowrap;
}

/* Bouton outline sur fond sombre (section ink) */
.mau-btn-outline--on-ink .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--accent);
  background: transparent;
  color: var(--wp--preset--color--accent);
}
.mau-btn-outline--on-ink .wp-block-button__link:hover,
.mau-btn-outline--on-ink .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--accent);
  color: #ffffff;
}

/* ─── Checklist utilitaire ─────────────────────────────────────────── */
/* .mau-hero-checklist = alias en usage dans le contenu de pages */

.mau-checklist.wp-block-list,
.mau-hero-checklist.wp-block-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.mau-checklist.wp-block-list li,
.mau-hero-checklist.wp-block-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: var(--wp--preset--spacing--8);
  line-height: 1.5;
}

.mau-checklist.wp-block-list li::before,
.mau-hero-checklist.wp-block-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 700;
}

.mau-checklist--arrow.wp-block-list li::before {
  content: "→";
}

/* Variante « divided » — ✓ doré + filets séparateurs entre items (maquette
   .feature-offer__list). Pour les spec-lists des sections feature (pages segment). */
.mau-checklist--divided.wp-block-list li {
  margin-bottom: 0;
  padding-block: var(--wp--preset--spacing--12);
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.mau-checklist--divided.wp-block-list li:last-child {
  border-bottom: none;
}

/* Pastille ronde autour du ✓ (maquette .feature-offer__list-icon : 28×28,
   fond accent-soft, ✓ centré). Place le glyphe dans un badge plutôt qu'à nu. */
.mau-checklist--divided.wp-block-list li {
  padding-left: 42px; /* 28px badge + 14px gap (maquette) */
}
.mau-checklist--divided.wp-block-list li::before {
  top: var(--wp--preset--spacing--12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--custom--accent-soft);
  font-size: 0.875rem; /* 14px — maquette */
}

/* ─── Grille de métiers / professions (icon grid 4×2) ─────────────── */

.mau-metiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--12);
  margin-top: var(--wp--preset--spacing--32);
}

.mau-metier-item {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--20);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.mau-metier-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--wp--custom--accent-soft);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mau-metier-item__icon svg {
  width: 100%;
  height: 100%;
  margin: 0; /* neutralise le margin-block-end hérité de .mau-icon--accent */
}

.mau-metier-item p {
  font-family: var(--wp--preset--font-family--playfair);
  font-size: 15px;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  margin: 0;
  line-height: 1.3;
}

/* ─── Fil d'Ariane ─────────────────────────────────────────────────── */

.mau-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
  background: transparent;
  padding: 0;
  margin: 0;
}

.mau-breadcrumb a.mau-breadcrumb__link {
  color: var(--wp--preset--color--slate);
  text-decoration: none;
}
.mau-breadcrumb a.mau-breadcrumb__link:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}

.mau-breadcrumb__sep {
  color: var(--wp--preset--color--slate);
  opacity: 0.4;
  padding-inline: 0.3em;
  user-select: none;
}

.mau-breadcrumb__current {
  color: var(--wp--preset--color--ink);
  font-weight: 600;
}

/* Template page.html (pages utilitaires sans template dédié) : wp:post-title ne porte pas
   wp-block-heading, donc n'hérite pas du font-weight 400 des héros. Maquette : Playfair 400. */
.page-template-default .wp-block-post-title {
  font-weight: 400;
}

/* ─── Breakpoints ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Gutter horizontal racine resserré sur mobile (charte : 16px).
     Surcharge la var lue par .has-global-padding ET le breakout .alignfull. */
  .wp-site-blocks {
    --wp--style--root--padding-right: var(--wp--preset--spacing--20);
    --wp--style--root--padding-left: var(--wp--preset--spacing--20);
  }

  /* Rythme vertical mobile = maquette v2 : 44px par défaut (vs 64 auparavant).
     Hero et offres ont leurs valeurs propres. Valeurs littérales : la maquette
     mobile n'est pas sur l'échelle 8 (44 n'a pas de token). */
  .mau-section,
  .mau-section.has-global-padding {
    padding-block: 44px;
    padding-inline: var(--wp--preset--spacing--20);
  }
  .mau-section--offres,
  .mau-section--offres.has-global-padding {
    padding-block: 40px 44px;
  }

  /* Titre hero mobile : marge basse 20px (tous héros). Taille = clamp `hero` (32px mobile,
     maquette .page-hero__title). SEUL le hero homepage (avec dashboard .mau-hero__visual)
     descend à 28px (maquette .hero__title) — scopé via :has pour ne pas toucher les pages internes.
     Pages segment (body.page-template-page-segment) : h1 use preset `display` (clamp floor 28px)
     → forcé 32px. Scopé par template body-class pour ne pas régresser ressources/equipe/article. */
  .mau-section--hero h1 {
    margin-block-end: 20px;
  }
  .mau-section--hero:has(.mau-hero__visual) h1 {
    font-size: 28px !important;
  }
  .page-template-page-segment .mau-section--hero h1.has-display-font-size,
  .page-template-page-segment .mau-hero h1.has-display-font-size {
    font-size: 32px !important;
  }
  /* Artisanat (.mau-hero) h1 : maquette Playfair 400 (regular), pas 700. */
  .page-template-page-segment .mau-hero h1 {
    font-weight: 400 !important;
  }

  /* Lede hero mobile : presets lede/md restent à 19/18px, réduction explicite requise.
     Pages segment utilisent .mau-hero (sans BEM --hero) → couvrir les deux.
     Home : lede = h1 + p (frère adjacent dans la colonne gauche du hero 2-colonnes).
     Exception geo (page-template-page-geo) : 18px (maquette), pas 16. */
  .mau-section--hero p.has-lede-font-size,
  .mau-hero p.has-lede-font-size {
    font-size: 16px !important;
  }
  .page-template-page-geo .mau-section--hero p.has-lede-font-size,
  .page-template-page-geo .mau-hero p.has-lede-font-size {
    font-size: 18px !important;
  }
  .mau-section--hero:has(.mau-hero__visual) h1 + p.has-md-font-size {
    font-size: 15px !important;
  }

  /* Hero CTA mobile — deux comportements distincts (fidèles maquette v2, cf.
     .preview-frame.mobile) :
     — HOME (hero avec dashboard, .hero__cta-group) : 2 boutons côte à côte
       compacts (nowrap + flex:1 + 13px). Conservé tel quel.
     — SERVICE/hub (.page-hero__actions) : flex-wrap:wrap, largeur naturelle,
       PAS de white-space:nowrap. L'ancienne règle globale forçait nowrap+flex:1
       +white-space:nowrap sur TOUS les héros → le 2e bouton / le n° de téléphone
       se tronquait sur les pages service (#48). On laisse désormais wrapper.
     !important : gap/wrap viennent du blockGap WP, padding/font de la règle hero non-mobile. */
  .mau-section--hero:has(.mau-hero__visual) .wp-block-buttons {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .mau-section--hero:has(.mau-hero__visual) .wp-block-button {
    flex: 1;
  }
  .mau-section--hero:has(.mau-hero__visual) .wp-block-button__link {
    width: 100%;
    padding: 11px 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  /* Service/hub hero : boutons wrap, pas de troncature (maquette .page-hero__actions
     = display:flex; gap:14px; flex-wrap:wrap, aucun override mobile). */
  .mau-section--hero:not(:has(.mau-hero__visual)) .wp-block-buttons {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  .mau-section--hero:not(:has(.mau-hero__visual)) .wp-block-button__link {
    padding: 13px 20px !important;
    font-size: 15px !important;
  }

  /* Hero trust bar mobile : rangée de 3, compacte et centrée (maquette .hero__trust).
     flex:1 + !important pour battre le flex-basis:100% que WP impose aux colonnes <782px. */
  .mau-section--hero .mau-trust-bar {
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }
  .mau-section--hero .mau-trust-bar.wp-block-columns > .wp-block-column {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center;
  }
  .mau-section--hero .mau-trust-bar .has-xl-font-size { font-size: 18px !important; }
  .mau-section--hero .mau-trust-bar .has-md-font-size { font-size: 14px !important; }
  .mau-section--hero .mau-trust-bar .has-sm-font-size { font-size: 10px !important; }

  /* Gaps de grille empilée — valeurs maquette mobile.
     !important pour battre le block-gap WP des colonnes (row-gap 32 par défaut). */
  .mau-section--personas .mau-personas-grid {
    gap: 12px !important;
  }
  .mau-process-grid {
    gap: 16px !important;
  }
  .mau-section--testimonials .mau-testimonials-grid {
    gap: 12px;
  }

  .mau-metiers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--16);
  }

  /* Section offres — header (eyebrow + H2 + lede) centré sur mobile (maquette v2) */
  .mau-section--offres > .mau-eyebrow,
  .mau-section--offres > .wp-block-heading,
  .mau-section--offres > p.has-lede-font-size {
    text-align: center;
  }

  /* Page hero split (service/hub) : colonne carte — pas de débordement sur mobile */
  .mau-section--hero .wp-block-columns.alignwide > .wp-block-column {
    min-width: 0;
  }
}