/* ══════════════════════════════════════════════════════════════
   LDNR — Fiche formation  (single-ldnr_fiche.php)
   Variables : --fiche-accent et --fiche-accent-rgb injectés via PHP
   ══════════════════════════════════════════════════════════════ */

.ldnr-fiche {
  min-height: 100vh;
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Reveal au scroll — observé par fiche.js (IntersectionObserver) ── */
.ldnr-fiche .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
.ldnr-fiche .reveal.is-in { opacity: 1; transform: translateY(0); }
.ldnr-fiche .reveal[data-delay="1"] { transition-delay: .08s; }
.ldnr-fiche .reveal[data-delay="2"] { transition-delay: .16s; }
.ldnr-fiche .reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .ldnr-fiche .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.fiche-crumbs {
  padding: 8rem 5vw 0;
  max-width: 1440px;
  margin: 0 auto;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.fiche-crumbs a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.25s ease;
}
.fiche-crumbs a:hover {
  color: var(--fiche-accent);
}

.fiche-crumbs__sep {
  margin: 0 10px;
  opacity: 0.35;
}

.fiche-crumbs__here {
  color: rgba(255, 255, 255, 0.75);
}

[data-theme="light"] .fiche-crumbs a {
  color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .fiche-crumbs a:hover {
  color: var(--fiche-accent);
}
[data-theme="light"] .fiche-crumbs__here {
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 480px) {
  .fiche-crumbs {
    padding-top: 6rem;
    font-size: 10px;
  }
}

/* ── HERO layout ────────────────────────────────────────────── */
.fiche-hero {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding: 1vh 5vw 4rem;
  gap: 4rem;
  max-width: 1440px;
  margin: 0 auto;
}

.fiche-hero__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── Pills ──────────────────────────────────────────────────── */
.fiche-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Effet verre + typo des pills : voir .pill-label + .lg .lg--pill dans colors.css / liquid-glass.css */

/* Titre : voir .hero__title dans colors.css (réutilisable hors fiches) */

/* ── Accroche ───────────────────────────────────────────────── */
.fiche-hero__accroche {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.75;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin: 0;
}

/* ── CTAs ───────────────────────────────────────────────────── */
.fiche-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

/* Les deux boutons portent .lg .lg--pill (verre liquide).
   On garde la typo/taille ici ; le verre gère fond, bordure et reflets. */
.fiche-btn {
  padding: 0.8rem 1.8rem;          /* surcharge le padding de .lg--pill */
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-text);
  /* transition douce de la teinte (le verre anime déjà box-shadow) */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Bouton principal : surcouche colorée (--lg-tint) pilotée par l'accent
   formation, avec une intensité plus forte en light pour rester lisible →
   la couleur suit automatiquement le mode clair/sombre. */
.fiche-btn--primary {
  --lg-tint: color-mix(in srgb, var(--fiche-accent) 28%, transparent);
}
.fiche-btn--primary:hover {
  --lg-tint: color-mix(in srgb, var(--fiche-accent) 42%, transparent);
}
[data-theme="light"] .fiche-btn--primary {
  --lg-tint: color-mix(in srgb, var(--fiche-accent) 40%, transparent);
}
[data-theme="light"] .fiche-btn--primary:hover {
  --lg-tint: color-mix(in srgb, var(--fiche-accent) 55%, transparent);
}

/* Bouton secondaire : verre neutre (teinte par défaut de .lg), juste le liseré.
   Léger renfort de teinte au survol, adapté au thème. */
.fiche-btn--ghost:hover {
  --lg-tint: rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .fiche-btn--ghost:hover {
  --lg-tint: rgba(0, 0, 0, 0.06);
}

/* ── Visuel : cercles ───────────────────────────────────────── */
.fiche-hero__visual {
  flex: 0 0 auto;
  position: relative;
  width: 46%;
  height: clamp(380px, 68vh, 700px);
  min-height: 380px;
}

.fiche-hero__circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--fiche-accent) 45%, transparent);
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--fiche-accent) 4%, transparent),
    0 0 50px  color-mix(in srgb, var(--fiche-accent) 22%, transparent),
    0 0 120px color-mix(in srgb, var(--fiche-accent) 10%, transparent);
  background: color-mix(in srgb, var(--fiche-accent) 4%, var(--color-bg));
}

.fiche-hero__circle--large {
  width: clamp(220px, 42vh, 480px);
  height: clamp(220px, 42vh, 480px);
  top: 5%;
  right: 2%;
}

.fiche-hero__circle--small {
  width: clamp(135px, 26vh, 300px);
  height: clamp(135px, 26vh, 300px);
  bottom: 8%;
  right: 0%;
}

.fiche-hero__circle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Date de dernière modification ───────────────────────────── */
.fiche-hero__date {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.fiche-hero__date-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.fiche-hero__date-value {
  font-weight: 500;
  color: var(--fiche-accent);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fiche-hero {
    flex-direction: column;
    padding-top: 8rem;
    gap: 2rem;
    min-height: auto;
  }

  .fiche-hero__visual {
    width: 100%;
    height: 44vw;
    min-height: 180px;
  }

  .fiche-hero__date {
    top: 4.5rem;
  }

  .fiche-hero__circle--large {
    width: 36vw;
    height: 36vw;
    top: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .fiche-hero__circle--small {
    width: 22vw;
    height: 22vw;
    bottom: 0;
    right: auto;
    left: calc(50% + 4vw);
  }
}

@media (max-width: 480px) {
  .fiche-hero {
    padding: 7rem 1.5rem 3rem;
    gap: 1.5rem;
  }

  .fiche-hero__visual {
    height: 48vw;
    min-height: 160px;
  }

  .fiche-hero__circle--large {
    width: 38vw;
    height: 38vw;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }

  .fiche-hero__circle--small {
    width: 24vw;
    height: 24vw;
    left: calc(50% + 4vw);
    right: auto;
  }

  .fiche-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   Sections sous le hero — Snapshot, Description, Métiers,
   Certification, Prérequis, Programme, Tarif, Modalités, Stats.
   Les cartes utilisent le système Liquid Glass (.lg) existant :
   fond, bordure, ombre et padding des variantes --card/--pill sont
   déjà gérés par liquid-glass.css — on ne définit ici que la mise
   en page et la typographie.
   ══════════════════════════════════════════════════════════════ */

.fiche-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3.5vw 1vw;
}
.fiche-section--flush { padding-top: 0; }

.fiche-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2.75rem;
}
.fiche-section-head__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fiche-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.fiche-h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.fiche-h2 em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--fiche-accent); }
.fiche-lede { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* ── Layout sidebar + contenu ───────────────────────────────── */
.fiche-layout {
  display: flex;
  align-items: flex-start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1vh 5vw 4rem;
}
.fiche-sidebar {
  flex: 0 0 220px;
  width: 220px;
  margin-left: calc(-220px - 2rem);
  margin-right: 2em;
  padding: 1.5rem;
  top: 6.5rem;
  align-self: start;
}
.fiche-sidebar.lg { position: sticky; } /* liquid-glass force position:relative sur .lg */
.fiche-content { flex: 1 1 auto; min-width: 0; width: 100%; }
.fiche-sidebar__label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.875rem;
}
.fiche-toc { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 1.375rem; }
.fiche-toc a {
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: 0.625rem;
  transition: color 0.3s, background 0.3s, color 0.3s;
}
.fiche-toc a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.fiche-toc a.is-current { color: var(--fiche-accent); font-weight: 500; }
.fiche-sidebar__cta {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fiche-sidebar__arr { color: var(--fiche-accent); }

@media (max-width: 1700px) {
  .fiche-sidebar { display: none; }
}

/* ── 1. Snapshot ────────────────────────────────────────────── */
.fiche-snapshot {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9375rem;
}
.fiche-snap__k {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.625rem;
}
.fiche-snap__v { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.fiche-snap__v em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--fiche-accent); font-size: 0.9em; }
.fiche-snap--warn .fiche-snap__v  { color: #f7c977; }
.fiche-snap--accent .fiche-snap__v { color: var(--fiche-accent); }

@media (max-width: 1100px) { .fiche-snapshot { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .fiche-snapshot { grid-template-columns: repeat(2, 1fr); } }

/* ── 2. Description + citation ─────────────────────────────── */
/* Texte riche (champ wysiwyg objectifs_intro) */
/* La couleur est posee sur le CONTENEUR, pas sur les <p> : le champ wysiwyg
   peut produire des noeuds de texte nus (import sans <p>), qui heritaient
   alors d une couleur sombre du theme parent. Meme pattern que
   .fiche-cert-info__rt. */
.fiche-description__rt { color: var(--color-text-muted); }
.fiche-description__rt > *:first-child { margin-top: 0; }
.fiche-description__rt > *:last-child  { margin-bottom: 0; }
.fiche-description__rt p { margin: 0 0 1rem; }
.fiche-description__rt strong { color: var(--color-text); font-weight: 600; }
.fiche-description__rt ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}
.fiche-description__rt li {
  position: relative;
  padding-left: 1.5rem;
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.fiche-description__rt li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fiche-accent);
}

.fiche-description p {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.fiche-pullquote {
  margin: 2.5rem 0;
  padding: 2rem 2.25rem;
  position: relative;
  overflow: hidden;
}
.fiche-pullquote q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.3;
  color: var(--color-text);
  quotes: "«\00a0" "\00a0»";
}
.fiche-pullquote q::before { content: open-quote; color: var(--fiche-accent); }
.fiche-pullquote q::after  { content: close-quote; color: var(--fiche-accent); }
.fiche-pullquote__by {
  margin-top: 1.125rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fiche-pullquote__avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--fiche-accent), #b48cff);
}

/* ── 3. Métiers ─────────────────────────────────────────────── */
.fiche-metiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.fiche-metier__head {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}
.fiche-metier__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fiche-accent) 16%, var(--color-surface));
  position: relative;
}
/* Icône recolorée à l'accent via mask — fonctionne sur SVG ou PNG à fond transparent */
.fiche-metier__icon::before {
  content: "";
  position: absolute;
  inset: 0.6875rem;
  background-color: var(--fiche-accent);
  -webkit-mask-image: var(--metier-icon-url);
  mask-image: var(--metier-icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.fiche-metier__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0; color: var(--color-text); }
.fiche-metier__salary {
  font-family: var(--font-ui);
  font-size: 0.71875rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.fiche-metier__grow { color: var(--fiche-accent); }
.fiche-metier__more { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--color-text-muted); }

@media (max-width: 900px)  { .fiche-metiers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .fiche-metiers-grid { grid-template-columns: 1fr; } }

/* ── 4. Certification ───────────────────────────────────────── */
.fiche-cert-card { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 3.75rem); }
.fiche-cert-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(65% 110% at 100% 0%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(65% 110% at 100% 0%, #000 40%, transparent 80%);
  opacity: 0.85;
  pointer-events: none;
}
.fiche-cert-grid { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; }
.fiche-cert-badge {
  position: relative;
  overflow: hidden;
  width: clamp(140px, 16vw, 200px);
  height: clamp(140px, 16vw, 200px);
  border-radius: 1.75rem;
  background: color-mix(in srgb, var(--fiche-accent) 16%, var(--color-surface));
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.25rem;
  animation: fiche-cert-glow 5s ease-in-out infinite;
}
/* Halo irisé tournant derrière le contenu — repris du mockup */
.fiche-cert-badge::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg, var(--fiche-accent), transparent 30%, transparent 70%, var(--fiche-accent));
  opacity: 0.3;
  filter: blur(20px);
  animation: fiche-cert-spin 8s linear infinite;
}
.fiche-cert-badge > * { position: relative; z-index: 1; }
.fiche-cert-badge__lvl { font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fiche-accent); }
.fiche-cert-badge__num { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 700; line-height: 1; color: var(--fiche-accent); }
.fiche-cert-badge__by { font-family: var(--font-ui); font-size: 0.59375rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); line-height: 1.4; }

@keyframes fiche-cert-glow {
  0%, 100% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--fiche-accent) 8%, transparent),
      0 0 40px -12px color-mix(in srgb, var(--fiche-accent) 55%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--fiche-accent) 14%, transparent),
      0 0 65px -8px color-mix(in srgb, var(--fiche-accent) 85%, transparent);
  }
}
@keyframes fiche-cert-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fiche-cert-badge, .fiche-cert-badge::before { animation: none; }
}
.fiche-cert-info h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.015em; margin: 0 0 1rem; }
.fiche-cert-info h3 em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--fiche-accent); }
/* Texte riche (champ wysiwyg rncp_description) */
.fiche-cert-info__rt { color: var(--color-text-muted); font-size: 0.9375rem; max-width: 56ch; margin: 0 0 1.375rem; }
.fiche-cert-info__rt > *:last-child { margin-bottom: 0; }
.fiche-cert-info__rt p { margin: 0 0 0.75rem; }
.fiche-cert-info__rt strong { color: var(--color-text); font-weight: 600; }
.fiche-cert-info__rt ul { margin: 0 0 0.75rem; padding-left: 1.15rem; display: grid; gap: 0.35rem; }
.fiche-cert-info__rt li { line-height: 1.55; }
.fiche-cert-info__rt li::marker { color: var(--fiche-accent); }

.fiche-cert-info p { color: var(--color-text-muted); font-size: 0.9375rem; max-width: 56ch; margin: 0 0 1.375rem; }
.fiche-cert-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.fiche-cert-chip {
  display: inline-flex; align-items: center; padding: 0.4375rem 0.75rem; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-nav-border);
  font-size: 0.78125rem; color: var(--color-text);
}
.fiche-cert-link { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 500; color: var(--fiche-accent); text-decoration: none; }

@media (max-width: 900px) { .fiche-cert-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ── 5. Prérequis ───────────────────────────────────────────── */
.fiche-prereq { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fiche-prereq-col { padding: 1.625rem; }
.fiche-prereq-col h3 {
  display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
  font-size: 0.8125rem; font-weight: 600; font-family: var(--font-ui);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted);
  margin: 0 0 1.125rem;
}
.fiche-prereq-col__pill { padding: 0.25rem 0.625rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--color-text); font-size: 0.7em; }
.fiche-prereq-col--required .fiche-prereq-col__pill { color: var(--fiche-accent); border-color: color-mix(in srgb, var(--fiche-accent) 35%, transparent); }
.fiche-prereq-item { padding: 0.875rem 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.90625rem; color: var(--color-text-muted); }
.fiche-prereq-item:first-of-type { border-top: none; padding-top: 0.25rem; }
.fiche-prereq-item b { color: var(--color-text); font-weight: 600; }

@media (max-width: 720px) { .fiche-prereq { grid-template-columns: 1fr; } }

/* ── 6. Programme ───────────────────────────────────────────── */
.fiche-prog-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1.375rem;
  padding: 1.125rem 1.375rem; margin-bottom: 1.75rem; font-family: var(--font-ui);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted);
}
.fiche-prog-bar b { color: var(--color-text); text-transform: none; letter-spacing: normal; font-size: 1rem; }
.fiche-prog-list { display: flex; flex-direction: column; }
.fiche-module { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.fiche-module:first-of-type { border-top: none; }
.fiche-module__head { display: flex; align-items: center; gap: 1.125rem; padding: 1.125rem 0; cursor: pointer; }
.fiche-module__num { font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); width: 3.5rem; flex-shrink: 0; }
.fiche-module__title { flex: 1; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.fiche-module__meta { font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
/* Note : la rotation vit sur ::before (la flèche), PAS sur le cercle
   parent. La flèche est un carré dont on ne dessine que 2 bordures
   (chevron), recentrée visuellement par un translate(-1px,-2px) — un
   petit décalage calibré pour SA propre boîte. Si on fait tourner le
   cercle parent (une boîte bien plus grande, donc un centre différent),
   ce décalage se retrouve projeté du mauvais côté après 180°, d'où une
   flèche qui semblait tourner autour d'un point mal aligné. En tournant
   ::before directement (45deg → 225deg, même boîte, même décalage), le
   repère reste cohérent tout au long de l'animation. */
.fiche-module__caret { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1px solid var(--color-nav-border); display: grid; place-items: center; flex-shrink: 0; transition: background 0.3s, border-color 0.3s; }
.fiche-module__caret::before { content: ''; display: block; width: 0.4375rem; height: 0.4375rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s; }
.fiche-module.is-open .fiche-module__caret { background: var(--fiche-accent); border-color: var(--fiche-accent); }
.fiche-module.is-open .fiche-module__caret::before { transform: rotate(225deg) translate(-1px, -2px); border-color: var(--color-bg); }
.fiche-module__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s, opacity 0.4s; opacity: 0; overflow: hidden; }
.fiche-module.is-open .fiche-module__body { grid-template-rows: 1fr; opacity: 1; padding-bottom: 1.25rem; }
.fiche-module__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.75rem; min-height: 0; padding-top: 1.25rem; }
.fiche-module__skills { display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; color: var(--color-text-muted); }
.fiche-module__skills b { color: var(--color-text); font-weight: 600; }
.fiche-module__side { display: flex; flex-direction: column; gap: 0.75rem; }
.fiche-module__stat { padding: 0.875rem 1rem; }
.fiche-module__stat .k { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.fiche-module__stat .v { margin-top: 0.25rem; font-size: 1.1875rem; font-weight: 700; color: var(--color-text); }

@media (max-width: 720px) { .fiche-module__cols { grid-template-columns: 1fr; gap: 1.125rem; } }

/* ── 7. Tarif & financement ─────────────────────────────────── */
.fiche-tarif-head {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.75rem;
  padding: 1.75rem 2rem; margin-bottom: 1rem;
}
.fiche-tarif-price { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--color-text); }
.fiche-tarif-price em { font-family: var(--font-display); font-style: italic; color: var(--fiche-accent); font-weight: 400; font-size: 0.5em; margin-left: 0.375rem; }
.fiche-tarif-info { font-size: 0.84375rem; color: var(--color-text-muted); max-width: 44ch; }
.fiche-tarif-info b { color: var(--color-text); font-weight: 600; }
.fiche-tarif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.fiche-fin-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}
.fiche-fin-card__info { flex: 1 1 0; min-width: 0; }
.fiche-fin-card h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.375rem; }
.fiche-fin-card__places {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fiche-accent);
  text-transform: uppercase;
}
.fiche-fin-card p { font-size: 0.84375rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 1.125rem; }
.fiche-fin-card a { font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fiche-accent); text-decoration: none; }

@media (max-width: 900px) {
  .fiche-tarif-head { grid-template-columns: 1fr; gap: 1.125rem; }
  .fiche-tarif-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .fiche-tarif-grid { grid-template-columns: 1fr; } }

/* ── 8. Modalités ───────────────────────────────────────────── */
.fiche-mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.fiche-mod { padding: 1.75rem; cursor: pointer; }
.fiche-mod__head { display: flex; align-items: center; gap: 1rem; }
.fiche-mod__label { font-family: var(--font-ui); font-size: 0.65625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); }
.fiche-mod__head h4 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.125rem 0 0; }
.fiche-mod__caret { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1px solid var(--color-nav-border); display: grid; place-items: center; margin-left: auto; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s, border-color 0.3s; }
.fiche-mod__caret::before { content: ''; display: block; width: 0.4375rem; height: 0.4375rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); }
.fiche-mod.is-open .fiche-mod__caret { transform: rotate(180deg); background: var(--fiche-accent); border-color: var(--fiche-accent); }
.fiche-mod.is-open .fiche-mod__caret::before { border-color: var(--color-bg); }
.fiche-mod__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s, opacity 0.4s; opacity: 0; overflow: hidden; }
.fiche-mod.is-open .fiche-mod__body { grid-template-rows: 1fr; opacity: 1; }
.fiche-mod__inner { padding-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1.875rem; min-height: 0; }
.fiche-mod__row { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.fiche-mod__row--full { grid-column: 1 / -1; }
.fiche-mod__row .k { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.fiche-mod__row .v { font-size: 0.875rem; color: var(--color-text); }

@media (max-width: 720px) {
  .fiche-mod-grid { grid-template-columns: 1fr; }
  .fiche-mod__inner { grid-template-columns: 1fr; }
}

/* ── 9. Statistiques de réussite ─────────────────────────────── */
.fiche-success-frame { padding: clamp(1.5rem, 4vw, 2.5rem); }
.fiche-success-head { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.fiche-success-head__label { font-family: var(--font-ui); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.fiche-promo-tabs { display: inline-flex; padding: 0.25rem; background: var(--color-surface); border-radius: 999px; }
.fiche-promo-tab {
  padding: 0.5rem 1rem; border-radius: 999px; font-family: var(--font-ui); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted);
  background: transparent; border: none; cursor: pointer; transition: all 0.3s;
}
.fiche-promo-tab.is-active { background: var(--fiche-accent); color: var(--color-bg); }
/* Le nombre de jauges est desormais variable (2 a 6 selon les champs ACF
   renseignes) : auto-fit plutot que 4 colonnes figees, sinon 6 jauges
   donnaient une derniere rangee de 2 elements etires. */
.fiche-success-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
/* Jauge masquee par le JS quand la session n a pas de valeur pour ce champ.
   Regle explicite : l attribut hidden ne suffit pas face a un display pose
   par ailleurs. */
.fiche-s-stat[hidden] { display: none; }
.fiche-s-stat { text-align: center; padding: 1rem; }
.fiche-s-arc { position: relative; width: clamp(110px, 14vw, 160px); height: clamp(110px, 14vw, 160px); margin: 0 auto 1.125rem; }
.fiche-s-arc svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fiche-s-arc .bg { stroke: rgba(255, 255, 255, 0.12); }
.fiche-s-arc .fg { stroke: var(--fiche-accent); stroke-linecap: round; transition: stroke-dashoffset 2s; }
.fiche-s-arc__num { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(1.5rem, 3vw, 2.375rem); font-weight: 700; letter-spacing: -0.015em; }
.fiche-s-arc__num .suf { font-family: var(--font-display); font-style: italic; color: var(--fiche-accent); font-size: 0.6em; font-weight: 400; }
.fiche-s-stat__label { font-size: 0.875rem; color: var(--color-text); font-weight: 500; }

@media (max-width: 720px)  { .fiche-success-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .fiche-success-grid { grid-template-columns: 1fr; } }

/* ── CTA band finale ─────────────────────────────────────────── */
.fiche-cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(3.125rem, 7vw, 6.875rem) 1.75rem;
  text-align: center;
  border-top: 1px solid var(--color-nav-border);
  border-bottom: 1px solid var(--color-nav-border);
  background: radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--fiche-accent) 14%, transparent), transparent 65%);
}
.fiche-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 10%, transparent) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(50% 80% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(50% 80% at 50% 50%, #000 30%, transparent 80%);
  opacity: 0.5;
  pointer-events: none;
}
.fiche-cta-band h2 {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  letter-spacing: -0.03em;
  /* Pas de cap en ch : le typewriter alterne un sigle court et un nom
     complet beaucoup plus long, et un 18ch faisait sauter le bloc de
     plusieurs lignes à chaque bascule. On laisse le titre prendre la
     largeur dont il a besoin. */
  max-width: 100%;
  margin: 0 auto 1.125rem;
  text-wrap: balance;
}
.fiche-cta-band h2 em { font-family: var(--font-display); font-style: italic; color: var(--fiche-accent); font-weight: 400; }

/* ── Typewriter du CTA final ───────────────────────────────────────────
   Effet « quelqu'un tape au clavier » : frappe caractère par caractère,
   puis sélection façon CTRL+A avant l'effacement d'un coup. */
.fiche-tw { display: inline; white-space: pre-wrap; }
/* Sélecteur volontairement spécifique : le texte tapé doit rester en
   couleur d'accent quoi qu'il arrive (le thème parent recolore les
   titres). */
.fiche-cta-band h2 em.fiche-tw,
.fiche-cta-band h2 em.fiche-tw .fiche-tw__text {
  color: var(--fiche-accent, var(--color-accent));
}
.fiche-tw__text {
  border-radius: 0.125rem;
  /* Surbrillance CTRL+A : transparente au repos, elle apparaît juste
     avant la suppression. Le padding négatif évite le décalage du texte. */
  background-color: transparent;
  box-shadow: 0 0 0 0.125em transparent;
  transition: background-color 90ms linear, color 90ms linear, box-shadow 90ms linear;
}
.fiche-cta-band h2 em.fiche-tw.is-selected .fiche-tw__text {
  background-color: var(--fiche-accent);
  box-shadow: 0 0 0 0.125em var(--fiche-accent);
  color: var(--color-bg, #fff);
}
.fiche-tw__caret {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 0.95em;
  margin-left: 0.06em;
  vertical-align: -0.1em;
  background: var(--fiche-accent);
  /* Curseur plein pendant la frappe, clignotant à l'arrêt (classe is-idle). */
}
.fiche-tw.is-idle .fiche-tw__caret { animation: fiche-tw-blink 1.05s steps(1, end) infinite; }
@keyframes fiche-tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fiche-tw__caret { display: none; }
  .fiche-tw.is-idle .fiche-tw__caret { animation: none; }
}
.fiche-cta-band__sub {
  font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: 2.25rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.fiche-cta-band__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fiche-accent); flex-shrink: 0; }

/* ── Empilé : texte au-dessus, formulaire en dessous ─────────────
   Le band parent est déjà en text-align:center — on garde ce
   centrage, juste en colonne verticale. */
.fiche-cta-band__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 2.5rem auto 0;
}
.fiche-cta-band__lede {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 40ch;
  margin: 0 auto;
}
.fiche-cta-band__grid .grid-card {
  max-width: 600px;
  width: 100%;
}

/* ── Places financées (entre snapshot et description) ───────── */
.fiche-places-band {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 2rem;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .fiche-places-band { padding: 0; }
}
.fiche-places-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.25s;
}
.fiche-places-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}
.fiche-places-card__body {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fiche-places-card__num {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fiche-accent);
  line-height: 1;
}
.fiche-places-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.fiche-places-card__text strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ── Icône dans carte dispositif (section tarif) ──────────────── */
.fiche-fin-card__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 8px;
}

/* ── Info pratique fixe (adresse / horaires) ─────────────────── */
.fiche-mod-info {
  display: grid;
  gap: 2px;
  padding: 14px 20px;
  margin-bottom: 16px;
}
.fiche-cta-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.5rem; }


/* Note libre par session (champ stats_details du repeater) : seule celle de
   l onglet actif est visible. */
.fiche-success-notes { margin-top: 1.75rem; }
.fiche-success-note {
  display: none;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 70ch;
  margin: 0;
}
.fiche-success-note.is-active { display: block; }