/* =========================================================
   PAGES FORMATION — KARA DIGITAL
   Complète css/style.css (mêmes couleurs, police, boutons, en-tête).
   Ne modifie aucun style de la page d'accueil.
   ========================================================= */

/* Un élément marqué « hidden » reste toujours caché,
   même s'il a une mise en page (grid, flex) définie plus bas */
[hidden] { display: none !important; }

/* Lien actif du menu */
.nav a.nav__actif { color: var(--bleu); }

/* ---------- Bandeau ---------- */
.fo-hero {
  padding: 130px 0 50px;
  background: linear-gradient(160deg, var(--bleu-clair) 0%, var(--blanc) 80%);
}
.fo-hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: 12px; }
.fo-hero__lead { color: var(--texte-doux); font-size: 1.05rem; max-width: 640px; }

.fo-contenu { padding: 40px 0 70px; }

/* ---------- États : chargement / erreur / vide ---------- */
.fo-etat {
  text-align: center;
  padding: 50px 20px;
  color: var(--texte-doux);
  display: grid; gap: 16px; justify-items: center;
}
.fo-etat--erreur { color: #B3261E; }
.fo-chargement {
  width: 42px; height: 42px;
  border: 4px solid var(--bleu-clair);
  border-top-color: var(--bleu);
  border-radius: 50%;
  animation: fo-tourne 0.9s linear infinite;
}
@keyframes fo-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fo-chargement { animation: none; } }

/* ---------- Prix ---------- */
.fo-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 14px 0 18px; }
.fo-prix__ancien { color: var(--texte-doux); font-size: 1rem; white-space: nowrap; }
.fo-prix__promo { color: var(--bleu); font-size: 1.6rem; font-weight: 800; white-space: nowrap; }
.fo-prix__remise {
  background: var(--bleu); color: var(--blanc);
  font-size: .8rem; font-weight: 700;
  padding: 3px 10px; border-radius: 50px; white-space: nowrap;
}
.fo-prix--grand .fo-prix__promo { font-size: 2.2rem; }
.fo-prix--grand .fo-prix__ancien { font-size: 1.1rem; }

/* ---------- Vue 1 : catalogue ---------- */
.fo-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.fo-carte {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  transition: transform .3s;
}
.fo-carte:hover { transform: translateY(-4px); }
.fo-carte__image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--bleu-clair); }
.fo-carte__corps { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.fo-carte__tag { color: var(--bleu); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.fo-carte__titre { font-size: 1.3rem; margin: 6px 0 8px; }
.fo-carte__resume { color: var(--texte-doux); font-size: .95rem; }
.fo-carte__bouton { margin-top: auto; text-align: center; }

/* ---------- Vue 2 : fiche ---------- */
.fo-retour { display: inline-block; color: var(--bleu); font-weight: 600; margin-bottom: 22px; }
.fo-retour:hover { text-decoration: underline; }

/* Une seule colonne, dans cet ordre : média → tarif + bouton WhatsApp → détail */
.fo-fiche__grille { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; }
.fo-fiche__image {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
  background: var(--bleu-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 26px;
}
/* Vidéo de présentation (option « vidéo ») : lecteur 16:9 qui s'adapte à l'écran */
.fo-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0B1B33;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  margin-bottom: 26px;
}
.fo-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Bandeau du mode aperçu (administrateur) */
.fo-apercu {
  background: #FFF6E0;
  border: 2px dashed #F2A900;
  color: var(--texte);
  font-weight: 700;
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin-bottom: 22px;
}

.fo-bloc { margin-bottom: 30px; }
.fo-bloc h2 { font-size: 1.4rem; margin-bottom: 10px; }
.fo-bloc p { color: var(--texte-doux); }
.fo-bloc--objectif {
  background: var(--bleu-clair);
  border-left: 4px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 20px 22px;
}
.fo-bloc--objectif p { color: var(--texte); font-weight: 500; }
.fo-note { color: var(--texte-doux); font-size: .9rem; margin-bottom: 14px; }

/* Programme */
.fo-programme { list-style: none; display: grid; gap: 14px; counter-reset: none; }
.fo-module {
  background: var(--blanc);
  border: 1px solid #DCE6F5;
  border-radius: var(--rayon);
  padding: 18px 20px;
}
.fo-module__titre { font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.fo-module__num {
  background: var(--bleu); color: var(--blanc);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 50px;
}
.fo-lecons { list-style: none; display: grid; gap: 8px; }
.fo-lecons li {
  position: relative;
  padding-left: 26px;
  color: var(--texte);
  font-size: .95rem;
}
.fo-lecons li::before {     /* petit triangle « lecture » */
  content: "";
  position: absolute; left: 4px; top: .45em;
  border-left: 9px solid var(--bleu);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.fo-lecons__duree { color: var(--texte-doux); font-size: .85rem; margin-left: 8px; white-space: nowrap; }

/* Colonne de réservation */
.fo-reserver {
  margin-bottom: 30px;
  background: var(--blanc);
  border: 2px solid var(--bleu);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 24px;
}
.fo-reserver__label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texte-doux); }
.fo-reserver__info { color: var(--texte-doux); font-size: .9rem; margin-bottom: 14px; }
.fo-reserver__bouton { display: block; width: 100%; max-width: 420px; text-align: center; }
.fo-reserver__duree { margin: 14px 0 0; }
.fo-reserver__infos { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: .88rem; color: var(--texte-doux); }
.fo-reserver__infos li { padding-left: 24px; position: relative; }
.fo-reserver__infos li::before { content: "✓"; position: absolute; left: 0; color: var(--bleu); font-weight: 800; }

/* ---------- Comment s'inscrire ---------- */
.fo-etapes { background: var(--bleu-clair); padding: 60px 0 70px; }
.fo-etapes h2 { text-align: center; margin-bottom: 30px; }
.fo-etapes__liste { list-style: none; counter-reset: etape; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fo-etapes__liste li {
  counter-increment: etape;
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px 20px;
  display: grid; gap: 6px; align-content: start;
}
.fo-etapes__liste li::before {
  content: counter(etape);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bleu); color: var(--blanc); font-weight: 800;
}
.fo-etapes__liste span { color: var(--texte-doux); font-size: .92rem; }

/* ---------- Adaptation tablettes et téléphones ---------- */
@media (max-width: 960px) {
  .fo-etapes__liste { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .fo-hero { padding: 105px 0 36px; }
  .fo-contenu { padding: 28px 0 56px; }
}
@media (max-width: 560px) {
  .fo-etapes__liste { grid-template-columns: 1fr; }
  .fo-prix--grand .fo-prix__promo { font-size: 1.9rem; }
  .fo-reserver { padding: 20px; }
}