/* Pattern: Process */

/* Fond paper-soft sur la section process des pages service (maquette v2 : section
   beige, cartes fondues). L'accueil (mau-section--process) reste blanc = .process
   par défaut de la maquette, donc on l'exclut.
   !important : le markup pose has-paper-background-color (généré par WP AVEC
   !important) ; sans ça la section reste blanche malgré cette règle. Même parade
   que la règle des cartes plus bas.
   Exception (#33/#36, Composant D) : deux pages posent explicitement
   has-paper-background-color (blanc) sur leur section process — le forçage
   !important les écrasait quand même. On exempte aussi ces sections du forçage
   beige (classe d'exception plutôt qu'inversion de logique — D6 : moins de
   surface de régression, l'accueil `.mau-section--process` n'est pas touché). */
.mau-section:has(.mau-process-grid):not(.mau-section--process):not(.has-paper-background-color) {
  background-color: var(--wp--preset--color--paper-soft) !important;
}

/* Emphase dorée dans le titre H2 de la section */
.mau-section:has(.mau-process-grid) .wp-block-heading em {
  color: var(--wp--preset--color--accent);
  font-style: italic;
}

.mau-process-grid .wp-block-column {
  position: relative;
}

.mau-process-step {
  padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
  background: var(--wp--preset--color--paper-soft);
  border-radius: var(--wp--custom--radius--md);
  transition: transform 0.3s;
}
.mau-process-step:hover {
  transform: translateY(-4px);
}

/* La carte d'étape suit le fond de section (toujours paper-soft via le :has
   ci-dessus) pour le rendu PLAT de la maquette : carte beige sur section beige,
   seul le hover la décolle. Plusieurs pages importées posent encore en dur
   `has-paper-background-color` (blanc) sur l'étape — dérive entre copies inline
   de tools/import. On force le fond ici (même principe que la section), scopé à
   la grille pour épargner les usages standalone de `.mau-process-step`.
   !important pour primer la classe utilitaire de fond WP du markup. */
.mau-process-grid .mau-process-step {
  background-color: var(--wp--preset--color--paper-soft) !important;
}

.mau-process-num {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
  font-style: italic;
  line-height: 1;
  margin-block-end: var(--wp--preset--spacing--16) !important;
}

.mau-process-step .wp-block-heading {
  margin-block-end: var(--wp--preset--spacing--8);
  line-height: 1.6; /* maquette v2 : step-title lede 19px → lh 1.6 (30.4px) */
  font-size: 1.1875rem !important; /* maquette v2 : step-title = 19px fixe (pas fluide) — .has-lede-font-size WP injecte !important, on prime avec !important scopé */
}

/* Connecteurs visuels entre étapes (desktop uniquement) */
@media (min-width: 1100px) {
  .mau-process-grid .wp-block-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.5rem;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: var(--wp--preset--color--border-subtle);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  /* 4 colonnes sur une rangée comme la maquette (.process__grid repeat(4,1fr)),
     même logique que la grille services. Les pages à 5 steps restent à 3 colonnes :
     à cette largeur, 5 tracks minmax(0,1fr) tombent sous la largeur du mot → le
     titre se coupe au milieu (« Lanceme|nt »). */
  .mau-process-grid.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--24);
  }
  .mau-process-grid.wp-block-columns:has(.mau-process-step:nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mau-process-grid.wp-block-columns {
    flex-direction: column;
  }
}

/* Variante 5 étapes : grille plain HTML (pas wp:columns) */
.mau-process-grid--five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--16);
}

.mau-process-step__badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--wp--preset--color--accent);
  background: var(--wp--custom--accent-soft);
  border-radius: var(--wp--custom--radius--pill);
  padding: 3px 10px;
  display: inline-block;
  margin-block-end: var(--wp--preset--spacing--16);
}

.mau-process-step__number {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
  font-style: italic;
  line-height: 1;
  color: var(--wp--preset--color--accent);
  margin-block-end: var(--wp--preset--spacing--16);
}

.mau-process-step__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--ink);
  margin: 0 0 var(--wp--preset--spacing--16);
}

.mau-process-step__list {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--slate);
  padding-inline-start: 1.1rem;
  margin: 0;
  line-height: 1.5;
}

.mau-process-step__list li + li { margin-top: 6px; }

.mau-process-step__note {
  font-size: var(--wp--preset--font-size--sm);
  color: #993C1D;
  margin-top: var(--wp--preset--spacing--16);
  font-style: italic;
  border-top: 1px solid rgba(153, 60, 29, 0.2);
  padding-top: var(--wp--preset--spacing--8);
}

@media (min-width: 768px) and (max-width: 1099px) {
  .mau-process-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .mau-process-grid--five { grid-template-columns: 1fr; }
}