/* Blocs du corps de page (inc/widgets.php) : étapes, engagements, profils. Couleurs via les variables du thème. */
.w-bloc { padding-block: clamp(3rem, 7vw, 5.5rem); }
.w-bloc h2 { font-family: var(--font-heading); font-size: var(--text-h2); color: var(--marine); margin-bottom: 2rem; max-width: 24ch; }
.w-sur { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .75rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lien); }
.w-sur::before { content: ""; width: 1.6rem; height: 2px; background: var(--or); }
.w-grille { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.w-grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.w-grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.w-carte { position: relative; display: block; height: 100%; padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; overflow: hidden; }
.w-carte h3 { font-family: var(--font-heading); font-size: var(--text-h3); color: var(--marine); margin: 1rem 0 .4rem; }
.w-carte p { color: var(--muted-foreground); }
.w-num { position: absolute; top: 1rem; right: 1.25rem; font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: 1; color: color-mix(in oklch, var(--or) 30%, transparent); }
.w-icone { display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: color-mix(in oklch, var(--or) 18%, var(--surface)); color: var(--marine); }
.w-icone svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-lien { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--lien); }
.w-etapes { background: var(--muted); }
.w-etapes .c-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.w-marine { background: var(--marine); color: var(--blanc); }
.w-marine h2 { color: var(--blanc); }
.w-marine .w-sur { color: var(--or); }
.w-pilier { padding: 1.5rem; border: 1px solid color-mix(in oklch, var(--blanc) 16%, transparent); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--blanc) 5%, var(--marine)); }
.w-pilier .w-icone { background: var(--or); color: var(--marine); }
.w-pilier h3 { font-family: var(--font-heading); font-size: var(--text-h3); margin: 1rem 0 .4rem; }
.w-pilier p { color: var(--sur-marine-doux); }
@media (prefers-reduced-motion: no-preference) {
  .w-carte, .w-pilier { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
  .w-carte:hover, .w-pilier:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--or) 60%, transparent); }
  .w-icone { transition: transform .3s var(--ease); }
  .w-carte:hover .w-icone, .w-pilier:hover .w-icone { transform: rotate(-8deg) scale(1.08); }
  .w-profil:hover .w-lien { transform: translateX(4px); }
  .w-lien { transition: transform .25s var(--ease); }
}