/* Site de formation, couche « Lumière » : chargée après les autres feuilles, elle donne du relief et de la couleur au design system Grand large
   sans changer une seule variable de rôle. Couleurs : variables de training-tokens.css uniquement. Les dégradés s'écrivent ici, à partir des
   rôles de couleur (--primary, --accent, --reward, --hero-*…), jamais une primitive --brand-* ni un hexadécimal : changer la palette ne demande que training-tokens.css. */

.fv-training {
  --grad-deep: linear-gradient(135deg, var(--hero-deep) 0%, var(--hero-base) 45%, var(--hero-lit) 100%);
  --grad-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-bright) 140%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 150%);
  --grad-reward: linear-gradient(135deg, var(--reward) 0%, var(--reward-bright) 150%);
  --grad-success: linear-gradient(135deg, var(--success) 0%, var(--success-bright) 160%);
  --lift: 0 2px 4px color-mix(in srgb, var(--shade) 6%, transparent), 0 14px 32px color-mix(in srgb, var(--shade) 10%, transparent);
  --lift-hover: 0 4px 8px color-mix(in srgb, var(--shade) 8%, transparent), 0 22px 48px color-mix(in srgb, var(--shade) 18%, transparent);
  background:
    radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
    radial-gradient(800px 380px at 0% 28%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--surface);
}

/* ---------- Titre de page ---------- */
.fv-training .mud-typography-h4, .fv-training .mud-typography-h5 { letter-spacing: -0.02em; }
.fv-training h2.mud-typography-h6 { position: relative; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; padding-left: var(--space-4); }
.fv-training h2.mud-typography-h6::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.18em; width: 5px; border-radius: var(--radius-pill); background: var(--grad-accent); }

/* ---------- Héros de l'accueil ---------- */
.fv-resume { padding: var(--space-8) var(--space-8) calc(var(--space-9) + var(--space-3)); border-radius: var(--radius-xl); background:
    radial-gradient(520px 320px at 88% 18%, color-mix(in srgb, var(--reward) 38%, transparent), transparent 70%),
    radial-gradient(640px 360px at 8% 110%, color-mix(in srgb, var(--accent-bright) 22%, transparent), transparent 70%),
    var(--grad-deep); box-shadow: 0 30px 70px color-mix(in srgb, var(--shade) 35%, transparent); isolation: isolate; }
.fv-resume > :not(.fv-resume__sun):not(.fv-resume__wave):not(.fv-resume__rings) { max-width: 620px; }
.fv-resume__sun { top: var(--space-7); right: calc(var(--space-8) + var(--space-5)); width: 132px; height: 132px; background: radial-gradient(circle at 35% 30%, var(--on-media) 0%, var(--reward-bright) 42%, var(--reward) 100%); box-shadow: 0 0 0 18px color-mix(in srgb, var(--reward) 16%, transparent), 0 0 0 44px color-mix(in srgb, var(--reward) 9%, transparent), 0 0 90px 30px color-mix(in srgb, var(--reward) 40%, transparent); z-index: -1; }
.fv-resume__rings { position: absolute; z-index: -1; right: -120px; top: -140px; width: 560px; height: 560px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--on-media) 14%, transparent); box-shadow: inset 0 0 0 60px color-mix(in srgb, var(--on-media) 2%, transparent), inset 0 0 0 61px color-mix(in srgb, var(--on-media) 10%, transparent), inset 0 0 0 130px color-mix(in srgb, var(--on-media) 2%, transparent), inset 0 0 0 131px color-mix(in srgb, var(--on-media) 8%, transparent); pointer-events: none; }
.fv-resume__greeting { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; padding: 6px var(--space-3); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-media) 12%, transparent); color: var(--ink-inverse); backdrop-filter: blur(6px); }
.fv-resume__title { font-size: 52px; font-weight: 300; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.fv-resume__title::first-line { font-weight: 700; }
.fv-resume__detail { font-size: 19px; color: color-mix(in srgb, var(--ink-inverse) 82%, transparent); }
.fv-resume .fv-btn--light { background: var(--on-media); color: var(--hero-base); box-shadow: 0 10px 28px color-mix(in srgb, var(--shade) 35%, transparent); }
.fv-resume .fv-btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 36px color-mix(in srgb, var(--shade) 45%, transparent); }
.fv-resume .fv-btn--outline-inverse { background: color-mix(in srgb, var(--on-media) 8%, transparent); border-color: color-mix(in srgb, var(--on-media) 45%, transparent); backdrop-filter: blur(6px); }
.fv-resume__wave .fv-wave { height: 72px; }
.fv-resume__wave::before { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 72px; background: color-mix(in srgb, var(--on-media) 10%, transparent); clip-path: path("M0 40C160 80 300 0 520 34S860 78 1000 36 1180 6 1400 40V80H0Z"); }

/* ---------- Bandeau de chiffres ---------- */
.fv-kpis { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 320px)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fv-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon num" "icon label"; column-gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--lift); color: var(--ink); text-decoration: none; transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.fv-page a.fv-kpi, :where(.fv-training) a.fv-kpi { color: var(--ink); }
.fv-kpi:hover { transform: translateY(-4px); box-shadow: var(--lift-hover); }
.fv-kpi__icon { grid-area: icon; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--grad-accent); color: var(--on-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.fv-kpi__icon .fv-icon { width: 28px; height: 28px; }
.fv-kpi__num { grid-area: num; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fv-kpi__label { grid-area: label; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-muted); }
@media (max-width: 480px) { .fv-kpis { grid-template-columns: minmax(0, 1fr); } .fv-kpi__num { font-size: 28px; } }

/* ---------- Recherche ---------- */
.fv-training .fv-searchbar__field { position: relative; z-index: 1; min-height: 76px; border-radius: var(--radius-lg); border-color: transparent; box-shadow: var(--lift); }
.fv-training .fv-searchbar__field:hover { border-color: var(--border-strong); }
.fv-training .fv-searchbar__field:focus-within { border-color: var(--primary-ink); box-shadow: 0 0 0 4px var(--primary-soft), var(--lift); }
/* Barre compacte : « Réinitialiser les filtres » sur la rangée du bouton rond (jamais dessous), cartes calées sur leur contenu. */
.fv-training .fv-searchbar__field { min-height: 0; justify-content: center; padding: var(--space-3) var(--space-4); border-color: var(--border); border-radius: var(--radius-md); box-shadow: 0 1px 2px color-mix(in srgb, var(--shade) 6%, transparent), 0 4px 14px color-mix(in srgb, var(--shade) 6%, transparent); }
.fv-training .fv-searchbar__field:hover { border-color: var(--border-strong); }
.fv-training .fv-searchbar__field:focus-within { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.fv-training .fv-searchbar__go { flex-direction: row; gap: var(--space-3); }
.fv-training .fv-searchbar__reset { white-space: nowrap; }
.fv-training .mud-tabs .fv-searchbar { margin-top: var(--space-4); }
.fv-training .fv-searchbar__button { align-self: center; width: 64px; height: 64px; }
@media (max-width: 760px) { .fv-training .fv-searchbar__button { width: 56px; height: 56px; } }
.fv-training .fv-searchbar__button { position: relative; z-index: 1; background: var(--grad-primary); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 40%, transparent); }

/* ---------- Parcours conseillé ---------- */
.fv-path { gap: var(--space-5); }
.fv-step { --step-on: var(--on-primary); --step-grad: var(--grad-primary); --step-tint: var(--accent-soft); --step-ink: var(--accent-ink); padding-top: var(--space-8); }
.fv-step::before { top: 26px; left: 56px; border-top: 3px dotted var(--border-strong); right: calc(var(--space-5) * -1); }
.fv-step__marker { width: 56px; height: 56px; font-size: 22px; font-weight: 700; border: 0; color: var(--step-on); background: var(--step-grad); box-shadow: 0 0 0 6px var(--surface), 0 10px 22px color-mix(in srgb, var(--shade) 22%, transparent); }
.fv-step.is-current .fv-step__marker { box-shadow: 0 0 0 6px var(--primary-soft), 0 10px 22px color-mix(in srgb, var(--shade) 22%, transparent); }
.fv-step.is-done { --step-grad: var(--grad-success); --step-on: var(--on-success); }
.fv-step.is-locked { --step-grad: var(--border-strong); --step-tint: var(--surface-sunken); --step-ink: var(--ink-muted); --step-on: var(--surface); }
.fv-step__body { position: relative; overflow: hidden; padding: var(--space-5); border: 1px solid var(--border); border-top: 0; border-radius: var(--radius-lg); box-shadow: var(--lift); }
.fv-step__body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--step-grad); }
.fv-step__body::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--step-tint); opacity: 0.7; z-index: 0; }
.fv-step__body > * { position: relative; z-index: 1; }
a.fv-step__body:hover { transform: translateY(-5px); box-shadow: var(--lift-hover); }
.fv-step__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--step-tint); color: var(--step-ink); }
.fv-step__title { font-size: 19px; }
@media (max-width: 860px) { .fv-step { padding-top: 0; padding-left: 76px; } .fv-step::before { left: 27px; top: 56px; border-top: 0; border-left: 3px dotted var(--border-strong); } }

/* ---------- Entrées de consultation ---------- */
.fv-ref { position: relative; overflow: hidden; min-height: 88px; padding: var(--space-4); border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--lift); --ref-grad: var(--grad-accent); --ref-glow: var(--accent); }
.fv-ref::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--ref-grad); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.fv-ref:hover { border-color: transparent; box-shadow: var(--lift-hover); transform: translateY(-4px); }
.fv-ref:hover::before { opacity: 1; }
.fv-ref__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--ref-grad); color: var(--on-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--ref-glow) 32%, transparent); }
.fv-ref__icon .fv-icon { width: 26px; height: 26px; }
.fv-ref__title { font-size: 17px; }
.fv-ref__text { display: block; }
.fv-ref__go { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.fv-ref:hover .fv-ref__go { background: var(--primary); color: var(--on-primary); transform: translateX(4px); }

.fv-section-label { font-size: 13px; }
.fv-section-label::after { background: linear-gradient(90deg, var(--border-strong), transparent); }

/* ---------- Couvertures des cartes (modules, listes, destinations) ---------- */
.fv-module__cover, .fv-catalog__cover { background-image: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--on-media) 28%, transparent), transparent 45%), linear-gradient(135deg, color-mix(in srgb, var(--on-media) 10%, transparent), color-mix(in srgb, var(--shade) 18%, transparent)); background-blend-mode: soft-light; }
.fv-module__cover { height: 148px; }
.fv-module__cover--sea, .fv-module__cover:not([class*="--"]) { background-color: var(--cover-sea); }
.fv-module__cover::before, .fv-catalog__cover::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--on-media) 7%, transparent) 0 2px, transparent 2px 18px); pointer-events: none; }
.fv-module__cover .fv-icon { width: 54px; height: 54px; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--shade) 25%, transparent)); }
.fv-module__rubric.fv-tag, .fv-catalog .fv-tag, .fv-dest .fv-tag { background: color-mix(in srgb, var(--on-media) 92%, transparent); color: var(--hero-base); font-weight: 600; box-shadow: 0 2px 6px color-mix(in srgb, var(--shade) 18%, transparent); }
.fv-module, .fv-catalog { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--lift); }
.fv-module:hover, .fv-module:focus-within, .fv-catalog:hover, .fv-catalog:focus-within { box-shadow: var(--lift-hover); transform: translateY(-6px); }
.fv-module__title { font-size: 19px; }
.fv-catalog__cover { height: 128px; background-color: var(--cover-sea); }
.fv-catalog__cover--sand { background-color: var(--cover-sand); }
.fv-catalog__cover--ocean { background-color: var(--cover-ocean); }
.fv-catalog__cover--deep { background-color: var(--cover-deep); }
.fv-catalog__sun { background: radial-gradient(circle at 35% 30%, var(--on-media), var(--reward-bright) 55%, var(--reward)); box-shadow: 0 0 0 8px color-mix(in srgb, var(--on-media) 14%, transparent), 0 0 40px 10px color-mix(in srgb, var(--on-media) 28%, transparent); }
.fv-catalog__go { top: 104px; background: var(--grad-primary); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 40%, transparent); }
.fv-catalog__name { font-size: 21px; }
.fv-catalog__excerpt { border-left-color: var(--accent-bright); }
.fv-dest { border-radius: var(--radius-xl); box-shadow: var(--lift); }
.fv-dest:hover, .fv-dest:focus-within { box-shadow: var(--lift-hover); }
.fv-dest__go { background: var(--grad-primary); }

/* ---------- Héros des fiches ---------- */
.fv-hero { background:
    radial-gradient(520px 300px at 92% 12%, color-mix(in srgb, var(--reward) 30%, transparent), transparent 70%),
    radial-gradient(560px 320px at 0% 120%, color-mix(in srgb, var(--accent-bright) 18%, transparent), transparent 70%),
    var(--grad-deep); }
.fv-hero::before { content: ""; position: absolute; right: -140px; top: -160px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--on-media) 12%, transparent); box-shadow: inset 0 0 0 70px color-mix(in srgb, var(--on-media) 2%, transparent), inset 0 0 0 71px color-mix(in srgb, var(--on-media) 8%, transparent); pointer-events: none; }
.fv-hero > * { position: relative; }
.fv-hero > .fv-wave { position: absolute; }
.fv-hero__title { font-weight: 300; letter-spacing: -0.025em; text-wrap: balance; }
.fv-hero__title strong { font-weight: 700; }
.fv-hero .fv-tag { background: color-mix(in srgb, var(--on-media) 14%, transparent); color: var(--ink-inverse); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--on-media) 22%, transparent); }
.fv-hero__art { background: var(--grad-accent); box-shadow: 0 20px 50px color-mix(in srgb, var(--shade) 30%, transparent); }
.fv-hero__art::after { background: radial-gradient(circle at 35% 30%, var(--on-media), var(--reward-bright) 55%, var(--reward)); box-shadow: 0 0 36px 8px color-mix(in srgb, var(--reward) 50%, transparent); }

/* ---------- Encadrés, tableau des faits, panneau latéral ---------- */
.fv-callout { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.fv-callout__icon { box-shadow: 0 6px 14px color-mix(in srgb, var(--shade) 18%, transparent); }
.fv-sheet { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--lift); }
.fv-sheet__head { background: var(--grad-deep); }
.fv-diagnostic__step, .fv-block-card, .fv-figure { border-radius: var(--radius-lg); box-shadow: var(--lift); border-color: transparent; }
.fv-diagnostic__step::before { background: var(--grad-primary); box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
.fv-band { background: linear-gradient(180deg, var(--surface-sunken), color-mix(in srgb, var(--surface-sunken) 55%, var(--surface))); }

/* ---------- Lecteur de module et quiz ---------- */
.fv-lesson__toc { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--lift); }
.fv-toc a { border-radius: var(--radius-md); }
.fv-toc a[aria-current="step"] { background: var(--primary-soft); box-shadow: inset 4px 0 0 var(--primary); }
.fv-toc a[aria-current="step"] .fv-toc__dot { background: var(--grad-primary); border-color: transparent; }
.fv-toc a.is-done .fv-toc__dot { background: var(--grad-success); border-color: transparent; }
.fv-quiz { border-color: transparent; border-radius: var(--radius-xl); box-shadow: var(--lift-hover); }
.fv-quiz__prompt { font-size: 24px; letter-spacing: -0.01em; }
.fv-choice { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: 0 3px 0 var(--border); }
.fv-choice:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--primary-soft), var(--shadow-sm); }
.fv-choice__key { border-radius: var(--radius-sm); }
.fv-choice[aria-checked="true"] .fv-choice__key { background: var(--grad-accent); }
.fv-bar__track { height: 12px; }
.fv-bar__fill { background: var(--grad-accent); }
.fv-bar.is-done .fv-bar__fill { background: var(--grad-success); }
.fv-medal__disc { background: var(--grad-reward); color: var(--on-reward); }
.fv-streak__flame { background: var(--grad-reward); color: var(--on-reward); }

/* ---------- Boutons ---------- */
.fv-btn--primary { background: var(--grad-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 32%, transparent); }
.fv-btn--primary:hover { background: var(--grad-primary); filter: brightness(1.08); }
.fv-training .mud-button-filled.mud-button-filled-primary { background-image: var(--grad-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent); }

/* ---------- Mode sombre : les ombres s'effacent, les bords prennent la lumière ---------- */
@media (prefers-color-scheme: dark) {
  .fv-training { --lift: 0 2px 4px color-mix(in srgb, var(--shade) 40%, transparent), 0 14px 32px color-mix(in srgb, var(--shade) 35%, transparent); --lift-hover: 0 4px 8px color-mix(in srgb, var(--shade) 50%, transparent), 0 22px 48px color-mix(in srgb, var(--shade) 50%, transparent); }
  .fv-kpi, .fv-ref, .fv-step__body, .fv-module, .fv-catalog { border-color: var(--border); }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 960px) {
  .fv-resume { padding: var(--space-7) var(--space-6) calc(var(--space-9) + var(--space-5)); }
  .fv-resume__title { font-size: 40px; }
  .fv-resume__sun { width: 84px; height: 84px; right: var(--space-5); top: var(--space-5); box-shadow: 0 0 0 10px color-mix(in srgb, var(--reward) 16%, transparent), 0 0 60px 16px color-mix(in srgb, var(--reward) 40%, transparent); }
}
@media (max-width: 640px) {
  .fv-resume { padding: var(--space-6) var(--space-5) calc(var(--space-9) + var(--space-6)); }
  .fv-resume__title { font-size: 32px; }
  .fv-resume__detail { font-size: 16px; }
  .fv-training h2.mud-typography-h6 { font-size: 21px; }
}

/* ---------- Mouvement : une entrée douce, coupée si la personne le demande ---------- */
@keyframes fv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fv-appear { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fv-resume__sun { animation: fv-float 7s var(--ease-tide) infinite; }
.fv-kpis li { animation: fv-appear var(--duration-slow) var(--ease-enter) both; }
.fv-kpis li:nth-child(2) { animation-delay: 70ms; } .fv-kpis li:nth-child(3) { animation-delay: 140ms; } .fv-kpis li:nth-child(4) { animation-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .fv-resume__sun, .fv-kpis li { animation: none; }
  .fv-kpi, .fv-ref, .fv-step__body, .fv-module, .fv-catalog { transition: none; }
  .fv-kpi:hover, .fv-ref:hover, a.fv-step__body:hover, .fv-module:hover, .fv-catalog:hover { transform: none; }
}

/* Les quatre tuiles de chiffres ont la même hauteur, même quand un libellé passe à la ligne. */
.fv-kpis li { display: flex; }
.fv-kpis .fv-kpi { flex: 1; }

/* ---------- Accueil : ligne de bilan du bandeau ---------- */
.fv-resume__stats { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); font-size: 15px; color: var(--ink-inverse); }
.fv-resume__stats a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-inverse); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fv-resume__stats a:focus-visible { outline: 3px solid var(--on-media); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- Accueil : portes et rubriques en tuiles compactes ---------- */
.fv-ref--compact { min-height: 64px; padding: var(--space-3); gap: var(--space-3); }
.fv-ref--compact .fv-ref__icon { width: 40px; height: 40px; }
.fv-ref--compact .fv-ref__icon .fv-icon { width: 22px; height: 22px; }
.fv-ref--compact .fv-ref__title { font-size: 15px; }
@media (max-width: 640px) {
  .fv-ref--compact { grid-template-columns: auto 1fr; }
  .fv-ref--compact .fv-ref__go { display: none; }
}
/* Cinq portes : MudGrid compte douze colonnes et ne sait pas en faire cinq égales. */
.fv-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fv-doors > li:last-child { grid-column: 1 / -1; }
.fv-doors .fv-ref { height: 100%; }
@media (min-width: 641px) {
  .fv-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .fv-doors > li:last-child { grid-column: auto; }
}
@media (min-width: 1280px) { .fv-doors { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- Accueil : « Pour bien démarrer » en rangée compacte ---------- */
.fv-path.fv-path--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); width: 100%; max-width: 100%; margin: 0; padding: 0; }
.fv-step.fv-step--compact { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; }
.fv-step.fv-step--compact::before { display: none; }
.fv-step--compact .fv-step__marker { position: static; flex: none; margin: 0; width: 36px; height: 36px; font-size: 15px; line-height: 1; box-shadow: none; }
/* Étiquette en flex centrée : le texte est au milieu de la hauteur de 48 px, marges et remplissages symétriques. */
.fv-step--compact .fv-step__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: var(--space-2); row-gap: 0; min-height: 48px; margin: 0; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); box-shadow: none; }
.fv-step--compact .fv-step__body::before, .fv-step--compact .fv-step__body::after { display: none; }
.fv-step--compact .fv-step__title, .fv-step--compact .fv-step__detail { margin: 0; padding: 0; line-height: 1.3; }
/* La règle des cartes complètes (dernier enfant poussé en bas, avec un remplissage haut) est plus spécifique : on la neutralise ici pour que le texte reste centré. */
.fv-training .fv-step--compact .fv-step__body { flex-direction: row; }
.fv-training .fv-step--compact .fv-step__body > :last-child { margin-top: 0; padding-top: 0; }
.fv-step--compact .fv-step__title { font-size: 15px; }
@media (max-width: 860px) { .fv-path.fv-path--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Le rond du bandeau reste dans le coin haut, au-dessus du titre : il ne passe plus sur le texte quand la largeur se réduit. */
@media (max-width: 960px) { .fv-resume__sun { width: 56px; height: 56px; top: var(--space-2); right: var(--space-3); } }