/* Pattern: Hero — homepage */

/* Titre h1 hero : Playfair Display weight 400, letter-spacing -0.01em (charte DS v2) */
.mau-section--hero .wp-block-heading {
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mau-hero {
  padding-block: clamp(var(--wp--preset--spacing--64), 10vw, var(--wp--preset--spacing--128));
}

/* Hero des pages intérieures (service, hub) */
.mau-section--hero {
  padding-block: clamp(var(--wp--preset--spacing--48), 6vw, var(--wp--preset--spacing--80));
}

.mau-section--hero .wp-block-columns.alignwide {
  align-items: center;
}

/* Checklist dans le hero — utilise .mau-checklist (mau-common.css) */
.mau-hero-checklist.wp-block-list {
  margin-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) !important;
}

@media (max-width: 767px) {
  .mau-section--hero {
    padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--80);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .mau-section--hero {
    padding-block: var(--wp--preset--spacing--64);
  }
}

/* Hero 2col (service/contact) : colonne carte — 400px fixe comme la maquette (grid 1fr 400px).
   Bat le flex-basis:31%/42% inline WP qui écrase la carte sur tablette (31% × 850px = 263px). */
@media (min-width: 782px) {
  .mau-section--hero .wp-block-columns.alignwide > .wp-block-column:last-child {
    flex-basis: 400px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
}

/* Boutons hero — taille maquette (.btn--lg : padding 16px 28px) */
.mau-section--hero .wp-block-button__link {
  padding: 16px 28px !important;
}

/* Boutons hero sur une seule ligne — DESKTOP (#18, scope Phase 1 = desktop v3).
   Mesure live (MCP, 1280px, pages service ex. /comptabilite-independant-suisse/) :
   le bloc wp:buttons du hero rend en flex-direction:column (classe is-vertical
   posée par l'attribut Gutenberg du markup), PAS en row-qui-wrap — le
   flex-wrap:nowrap déjà posé globalement sur .wp-block-buttons.is-vertical
   (mau-common.css) ne change donc rien tant que la direction reste column. Fix
   réel : forcer la row ici, scopée hero + desktop uniquement (le mobile a déjà
   sa propre règle "2 boutons côte à côte" dans mau-common.css, hors scope de ce
   correctif desktop-only — ne pas y toucher). Spécificité égale mais
   mau-hero.css charge après mau-common.css (tri forcé index 0, functions.php)
   donc gagne à égalité. Largeur disponible confirmée suffisante (colonne
   ~768px vs. ~430px cumulés des 2 boutons) et cohérent maquette
   (.hero__cta-group / .page-hero__actions : flex-wrap:wrap en row partout,
   jamais column). */
@media (min-width: 768px) {
  .mau-section--hero .wp-block-buttons.is-vertical {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  /* Exception : la price card sombre (.mau-offre-card) vit aussi dans
     .mau-section--hero (colonne de droite) mais ses boutons sont voulus
     empilés pleine largeur (width:100% chacun, cf. scm13_tva_card()) — la
     règle desktop #18 ci-dessus les repassait par erreur en row, écrasant
     le texte sur 2 lignes dans la carte étroite. Classe répétée pour battre
     la règle générique à spécificité égale. */
  .mau-section--hero .mau-offre-card .wp-block-buttons.is-vertical {
    flex-direction: column;
  }
}

/* Boutons hero centres sur mobile (#45, reouvert 2026-07-22 - override maquette v2
   assume, cf. ds-deviation-ledger.md). Le conteneur reste flex-direction:column
   sur mobile (pas de regle desktop ci-dessus) ; le centrage horizontal en colonne
   = align-items, pas justify-content. Selectionneur a specificite 0,4,0 (classe
   repetee) : WP core pose sa propre regle a specificite egale (0,3,0)
   .wp-block-buttons.is-content-justification-left.is-vertical{align-items:flex-start}
   (wp-includes/blocks/buttons/style.css) - a egalite, l'editeur Gutenberg perd
   (add_editor_style() injecte le CSS theme AVANT le CSS de layout des blocs),
   meme classe de bug que mau-included-grid. La classe repetee bat l'egalite quel
   que soit l'ordre de chargement. */
@media (max-width: 767px) {
  .mau-section--hero.mau-section--hero .wp-block-buttons.is-vertical {
    align-items: center;
  }
}

/* Hero-stats (page hub indépendants) — 4 stats chiffre Playfair + label,
   filet de séparation au-dessus. Calque la maquette .hero-stats. */
.mau-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--24);
  margin-block-start: var(--wp--preset--spacing--40);
  padding-block-start: var(--wp--preset--spacing--32);
  border-top: 1px solid var(--wp--preset--color--border-subtle);
}

.mau-hero-stat__num {
  font-family: var(--wp--preset--font-family--playfair);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  line-height: 1;
}

/* Lisibilité (#18, Annexe A) : label xs (12px) → sm (14px). */
.mau-hero-stat__lbl {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--slate);
  margin-block-start: var(--wp--preset--spacing--8);
}

/* Maquette : 2 colonnes en tablette et mobile. */
@media (max-width: 1099px) {
  .mau-hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--16);
  }
}

.mau-trust-bar .wp-block-columns {
  align-items: flex-start;
}

.mau-trust-bar .wp-block-column {
  min-width: 0;
}

/* Lisibilité "note / date / nombre de clients" (#18) : les 3 chiffres du bandeau
   de confiance (4.9/5, 38 ans, +500) sont désormais posés en xxl (28px, spec
   maquette .hero__trust-number) directement dans le générateur scm13_trust_stats
   (13-page-content.php) — l'ancien override CSS ciblait .mau-trust-bar, classe
   absente du markup réel (.mau-trust-grid), donc mort : retiré. */

/* Dashboard visuel */
.mau-hero__visual {
  display: flex;
  align-items: center;
}

/* Mobile : la maquette v2 AFFICHE la carte dashboard sous le texte (pleine largeur,
   empilée). On la garde visible et on contraint sa largeur pour éviter tout débordement. */
@media (max-width: 767px) {
  .mau-hero__visual {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .mau-hero__visual .mau-dashboard {
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }
  /* Stats du dashboard : valeur 17px (maquette .hero__dashboard-stat-value) */
  .mau-hero__visual .mau-kpi-mini .has-xxl-font-size,
  .mau-hero__visual .mau-kpi-mini .has-xl-font-size {
    font-size: 17px !important;
    font-weight: 600;
  }
}