/* Page d'une formation (générée côté serveur) */
.fiche-hero { padding: 132px 0 56px; position: relative; overflow: hidden; }
.fiche-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(closest-side, rgba(226, 55, 43, var(--glow)), transparent 70%); z-index: -1; pointer-events: none; }
.fiche-hero h1 { font-size: clamp(2.2rem, 5.6vw, 4.4rem); max-width: 16ch; margin: 10px 0 22px; }
.fiche-hero .lead { margin: 0 0 32px; }
.miettes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 28px; font-size: .86rem; color: var(--fg-faint); }
.miettes a { color: var(--fg-dim); text-decoration: none; }
.miettes a:hover { color: var(--fg); text-decoration: underline; }
.miettes [aria-current] { color: var(--fg); font-weight: 600; }
.fiche-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fiche-note { color: var(--fg-dim); font-size: .92rem; }
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.fiche-texte .h2 { margin-bottom: 26px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.fiche-texte p { color: var(--fg-dim); font-size: 1.06rem; max-width: 42em; margin: 0 0 18px; }
.fiche-texte strong { color: var(--fg); }
.fiche-infos { position: sticky; top: 100px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.fiche-infos dl { margin: 0 0 22px; display: grid; gap: 14px; }
.fiche-infos dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); font-weight: 600; }
.fiche-infos dd { margin: 3px 0 0; font-weight: 600; }
.fiche-infos dd small { font-weight: 400; color: var(--fg-dim); }
.btn.plein { width: 100%; }
.autres { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.autres a { display: grid; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--surface); transition: border-color .25s, transform .3s var(--ease); }
.autres a:hover, .autres a:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
.autres strong { font-family: var(--display); font-size: 1.1rem; }
.autres span { color: var(--fg-dim); font-size: .88rem; }
@media (max-width: 900px) { .fiche-grille { grid-template-columns: 1fr; } .fiche-infos { position: static; } }