/* =====================================================
   PAGE FORMATION (en plus de css/site.css et css/pages.css)
   Un seul bloc, comme le hero de l'accueil : le texte à gauche, la maquette « en préparation » à droite.
===================================================== */
.pf { display: flex; align-items: center; padding: 120px 0 80px; }
.pf .container { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; }
.pf h1 { margin-top: 20px; margin-bottom: 20px; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.pf .eyebrow { margin-bottom: 0; }
.pf .fil { margin-bottom: 14px; }

/* Pastille « pas encore ouverte » */
.statut {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 18px; border-radius: 980px;
  border: 1px solid rgba(255,161,74,.45); background: rgba(255,161,74,.1);
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #FFB877;
}
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFA14A; box-shadow: 0 0 10px #FFA14A; }

/* Les thèmes : une simple liste, sans cartes */
.pf-themes { display: grid; gap: 14px; margin-top: 28px; max-width: 540px; }
.pf-theme { display: flex; align-items: flex-start; gap: 14px; }
.pf-theme .as-i { flex: none; width: 40px; height: 40px; margin: 0; background: color-mix(in srgb, var(--ac) 14%, transparent); }
.pf-theme .as-i svg { width: 20px; height: 20px; stroke: var(--ac); }
.pf-theme p { color: var(--muted); font-size: .94rem; line-height: 1.45; }
.pf-theme strong { display: block; margin-bottom: 1px; font-family: var(--f-title); font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; color: #fff; }
.pf-theme a { color: #fff; border-bottom: 1px solid var(--ac); transition: color .2s; }
.pf-theme a:hover { color: var(--ac); }
.pf .actions { margin-top: 28px; }

.vis .vbar span { white-space: nowrap; }

/* Maquette de la plateforme : leçons verrouillées, barre de progression à zéro */
.pf-vis { min-height: 0; }
.fmt { position: relative; display: grid; gap: 12px; padding: 18px; }
.fmt-prog { display: grid; gap: 8px; padding-bottom: 4px; }
.fmt-barre { height: 10px; border-radius: 5px; background: var(--soft); }
.fmt-barre b { display: block; width: 4%; height: 100%; border-radius: 5px; background: var(--terra); }
.fmt-lecon { display: grid; grid-template-columns: 38px 1fr 46px; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--paper2); box-shadow: inset 0 0 0 1px var(--soft); }
.fmt-cadenas { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sand); }
.fmt-cadenas svg { width: 18px; height: 18px; stroke: var(--terra); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fmt-lignes { display: grid; gap: 8px; }
.fmt-lignes s { display: block; height: 8px; border-radius: 4px; background: #E3D9C6; text-decoration: none; }
.fmt-lignes s:first-child { width: 72%; background: #CFC3AB; }
.fmt-duree { height: 18px; border-radius: 9px; background: #E3D9C6; }
.fmt-tampon {
  position: absolute; right: 22px; top: 52%; padding: 8px 20px; border-radius: 980px; transform: rotate(-8deg);
  border: 2px solid var(--terra); background: rgba(255,253,248,.94); color: var(--terra);
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 14px 34px rgba(120,60,10,.22);
}
@media (prefers-reduced-motion: no-preference) {
  .fmt-lignes s, .fmt-duree { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); background-size: 220% 100%; animation: hsh 1.8s linear infinite; }
}

@media (max-width: 1000px) {
  .pf { padding: 110px 0 70px; }
  .pf .container { grid-template-columns: 1fr; gap: 44px; }
  .pf-vis { max-width: 520px; width: 100%; margin-inline: auto; }
}