/* ============================================================
   TECO V2 — Fiche formation (audit conso #5, juin 2026)
   Gabarit pages/formation.php?f=slug : hero, programme, panneau infos.
   Réutilise framework-v2, page-cabinet (hero), page-tarifs (rows).
   ============================================================ */

/* ---- Layout deux colonnes ---- */
.ff-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 40px;
  align-items: start;
}
@media (min-width: 980px) {
  .ff-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
  .ff-aside { position: sticky; top: 96px; }
}

/* ---- Hero actions ---- */
.ff-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.ff-hero-resume {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.ff-hero-resume strong { color: var(--color-text-primary); }

/* ---- Bloc niveau du programme ---- */
.ff-niveau { padding: 26px 26px 18px; margin-bottom: 20px; }
.ff-niveau__nom {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.ff-niveau__objectif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}
.ff-modules {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ff-modules li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}
.ff-modules li:last-child { border-bottom: none; }
.ff-modules li svg {
  flex: none;
  margin-top: 5px;
  color: var(--color-rouge-teco);
}

/* ---- Panneau latéral ---- */
.ff-aside .trf-card { margin-bottom: 20px; }
.ff-aside__titre {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-rouge-teco);
  margin: 0 0 12px;
}
.ff-aside p.ff-aside__texte {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
.ff-aside .trf-list li { font-size: 0.88rem; }

/* ---- Fil d'ariane discret ---- */
.ff-breadcrumb {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.ff-breadcrumb a { color: var(--color-text-muted); }
.ff-breadcrumb a:hover { color: var(--color-rouge-teco); }

/* ---- Liens fiches sur academy/tarifs ---- */
.fiche-links {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin-top: 12px;
  line-height: 1.7;
}
/* Liens de contenu noyes dans le texte : rouge + souligne (correction UX 07/2026) */
.fiche-links a {
  color: var(--color-text-primary);
  font-style: italic;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-rouge-teco);
}
.fiche-links a:hover { text-decoration: none; }

/* ===== Réservation payante par formule (audit conso #4, juin 2026) ===== */
.ff-buy {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ff-buy:last-of-type { border-bottom: none; padding-bottom: 0; }
.ff-buy .trf-row { border-bottom: none; padding: 0 0 8px; }
.ff-buy-form { margin: 0; }
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.ff-buy-intro {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
}
.ff-buy-secure {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 12px;
}
.ff-buy-secure svg { flex: none; color: var(--color-rouge-teco); }

/* ── Achat equipe : selecteur de participants + total degressif ── */
.ff-qte-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.ff-qte-row label { display: flex; align-items: center; gap: 0.5rem; }
.ff-qte {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
}
.ff-qte-total { font-weight: 600; color: var(--color-text-primary); }
.ff-qte-total s { color: var(--color-text-muted); font-weight: 400; }
.ff-qte-total b { color: var(--color-rouge-teco, #E8000A); }
.ff-choix-row { margin: 0.5rem 0 0.2rem; font-size: 0.85rem; color: var(--color-text-secondary); }
.ff-choix-row label { display: flex; flex-direction: column; gap: 0.35rem; }
.ff-choix {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.85rem;
}
/* Le select module ne doit jamais imposer la largeur de sa plus longue
   option a la colonne (debordement mobile) */
.ff-choix-row label { min-width: 0; }
.ff-choix { min-width: 0; }

/* ── Menus deroulants natifs : popup lisible dans les deux themes.
   color-scheme pilote le rendu natif du menu (fond/contraste OS),
   option couvre les navigateurs qui stylent les options. ── */
html[data-theme="dark"] select { color-scheme: dark; }
html[data-theme="light"] select { color-scheme: light; }
html[data-theme="dark"] select option { background-color: #171a24; color: #e8eaf2; }
html[data-theme="light"] select option { background-color: #ffffff; color: #15171f; }

/* ── Fiche compacte : programme et panneau en sections depliables ── */
details.ff-niveau > summary,
details.ff-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
details.ff-niveau > summary::-webkit-details-marker,
details.ff-fold > summary::-webkit-details-marker { display: none; }
details.ff-niveau .ff-niveau__nom { margin: 0; }
details.ff-niveau[open] > summary { margin-bottom: 6px; }
details.ff-fold[open] > summary { margin-bottom: 10px; }
.ff-chevron { flex: none; color: var(--color-text-muted); transition: transform 180ms ease; }
details[open] > summary .ff-chevron { transform: rotate(180deg); }
details.ff-niveau:not([open]),
details.ff-fold:not([open]) { padding-bottom: 18px; }

/* ── Programme variante B (validee 21/07/2026) : conteneur unique,
   modules en rangees fines, points rouges discrets ── */
.ff-prog-groupe { padding: 0.35rem; border-radius: 14px; }
.ff-prog-groupe .ff-niveau {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
[data-theme="light"] .ff-prog-groupe .ff-niveau { border-bottom-color: rgba(0, 0, 0, 0.08); }
.ff-prog-groupe .ff-niveau:last-child { border-bottom: none; }
.ff-prog-groupe details.ff-niveau:not([open]) { padding-bottom: 0; }
.ff-prog-groupe details.ff-niveau[open] > summary { margin-bottom: 0; }
.ff-prog-groupe .ff-niveau__resume { padding: 0.85rem 0.75rem; border-radius: 10px; }
.ff-prog-groupe .ff-niveau__resume:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="light"] .ff-prog-groupe .ff-niveau__resume:hover { background: rgba(0, 0, 0, 0.04); }
.ff-prog-groupe .ff-niveau__nom { font-size: 0.92rem; font-weight: 600; }
.ff-prog-groupe .ff-niveau__objectif {
  font-family: inherit;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0 0.75rem 0.5rem;
}
.ff-prog-groupe .ff-modules { margin: 0 0.75rem 0.9rem; }
.ff-prog-groupe .ff-modules li {
  border-bottom: none;
  display: block;
  padding: 0.28rem 0 0.28rem 1rem;
  position: relative;
  font-size: 0.86rem;
  line-height: 1.45;
}
.ff-prog-groupe .ff-modules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-rouge-teco, #E8000A);
}

/* ── Ordre mobile coherent : infos de qualification (format, prerequis,
   pour qui) AVANT le bloc de paiement. Sur desktop (aside sticky),
   Reserver reste en tete de colonne. ── */
.ff-reserver { scroll-margin-top: 90px; }
@media (max-width: 979px) {
  .ff-aside { display: flex; flex-direction: column; }
  .ff-aside .ff-fold { order: 1; }
  .ff-aside .ff-reserver { order: 2; }
}

/* ── Infos (format, volume, prerequis, pour qui) sous le programme,
   colonne gauche ; l'aside ne garde que Reserver (sticky, 2 rangees) ── */
.ff-infos { display: grid; gap: 14px; margin-top: 4px; align-items: start; }
.ff-infos .trf-card { margin-bottom: 0; }
@media (min-width: 700px) {
  .ff-infos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .ff-programme { grid-column: 1; grid-row: 1; }
  .ff-infos     { grid-column: 1; grid-row: 2; }
  .ff-aside     { grid-column: 2; grid-row: 1 / span 2; }
}

/* ============================================================
   MODAL DE COMMANDE (Variante A) - scope .cmd-* (zero collision)
   Couleurs via tokens du site -> auto dark/light.
   ============================================================ */
.cmd-overlay{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:flex-start; justify-content:center;
  padding:5vh 1rem 2rem; overflow-y:auto;
  background:rgba(8,10,18,0.72); backdrop-filter:blur(3px);
}
.cmd-overlay.open{display:flex}
body.cmd-lock{overflow:hidden}

.cmd-modal{
  width:100%; max-width:460px; margin:auto;
  background:var(--color-bg-primary);
  border:1px solid var(--color-border-subtle); border-radius:1.1rem;
  box-shadow:0 24px 60px rgba(0,0,0,.45); overflow:hidden;
}
.cmd-head{padding:1.3rem 1.4rem 1rem; border-bottom:1px solid var(--color-border-subtle); position:relative}
.cmd-eyebrow{font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--color-rouge-teco); display:flex; align-items:center; gap:.4rem}
.cmd-eyebrow .cmd-dot{width:6px; height:6px; border-radius:50%; background:var(--color-rouge-teco); display:inline-block}
.cmd-title{font-weight:800; font-size:1.4rem; line-height:1.15; margin-top:.3rem; color:var(--color-text-primary)}
.cmd-sub{color:var(--color-text-muted); font-size:.82rem; margin-top:.35rem; max-width:44ch}
.cmd-x{position:absolute; top:1.1rem; right:1.1rem; width:32px; height:32px; border-radius:8px; border:1px solid var(--color-border-subtle); background:transparent; color:var(--color-text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center}
.cmd-x:hover{color:var(--color-text-primary)}
.cmd-body{padding:1.2rem 1.4rem}
.cmd-label{font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted); margin:0 0 .6rem; display:flex; align-items:center; justify-content:space-between}
.cmd-label .cmd-hint{font-weight:500; letter-spacing:0; text-transform:none; color:var(--color-text-muted); font-size:.72rem}

.cmd-opt{display:flex; align-items:flex-start; gap:.75rem; padding:.8rem .9rem; border:1px solid var(--color-border-subtle); border-radius:.7rem; margin-bottom:.55rem; cursor:pointer; transition:border-color .12s, background .12s; position:relative; text-align:left; width:100%; background:transparent; color:inherit; font-family:inherit}
.cmd-opt:hover{border-color:var(--color-rouge-teco)}
.cmd-opt.on{border-color:var(--color-rouge-teco); background:rgba(232,0,10,.07)}
.cmd-tick{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--color-border-subtle); flex:none; display:flex; align-items:center; justify-content:center; color:#fff; margin-top:.1rem}
.cmd-tick svg{opacity:0}
.cmd-opt.on .cmd-tick{background:var(--color-rouge-teco); border-color:var(--color-rouge-teco)}
.cmd-opt.on .cmd-tick svg{opacity:1}
.cmd-opt-main{flex:1; min-width:0}
.cmd-opt-name{font-weight:600; font-size:.92rem; line-height:1.25; color:var(--color-text-primary)}
.cmd-opt-tag{display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-rouge-teco); background:rgba(232,0,10,.11); padding:.12rem .4rem; border-radius:5px; margin-left:.35rem; vertical-align:middle}
.cmd-opt-tag.cmd-pre{color:#fff; background:var(--color-rouge-teco)}
.cmd-opt-tag.cmd-owned-tag{color:var(--color-text-muted); background:var(--color-bg-elevated)}
.cmd-opt.cmd-owned{opacity:.6; cursor:not-allowed}
.cmd-opt.cmd-owned:hover{border-color:var(--color-border-subtle)}
.cmd-opt.cmd-owned .cmd-opt-eur,.cmd-opt.cmd-owned .cmd-opt-fcfa{text-decoration:line-through; color:var(--color-text-muted)}
.cmd-opt-sub{font-size:.75rem; color:var(--color-text-muted); margin-top:.15rem; line-height:1.35}
.cmd-opt-price{text-align:right; flex:none; padding-left:.3rem}
.cmd-opt-eur{font-weight:700; font-size:.98rem; white-space:nowrap; color:var(--color-text-primary)}
.cmd-opt-fcfa{font-size:.7rem; color:var(--color-text-muted); white-space:nowrap}

.cmd-qty-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.2rem 0 .3rem; padding-top:1.1rem; border-top:1px dashed var(--color-border-subtle)}
.cmd-qty-lab{font-weight:600; font-size:.9rem; color:var(--color-text-primary)}
.cmd-qty-lab small{display:block; color:var(--color-text-muted); font-size:.73rem; font-weight:400; margin-top:.1rem}
.cmd-stepper{display:flex; align-items:center; border:1px solid var(--color-border-subtle); border-radius:.6rem; overflow:hidden; flex:none}
.cmd-stepper button{width:40px; height:40px; background:var(--color-bg-elevated); border:none; color:var(--color-text-primary); font-size:1.2rem; cursor:pointer; font-family:inherit}
.cmd-stepper button:disabled{opacity:.35; cursor:not-allowed}
.cmd-stepper span{min-width:44px; text-align:center; font-weight:700; font-size:1rem; color:var(--color-text-primary)}

.cmd-group-note{font-size:.77rem; color:var(--color-text-secondary); background:rgba(232,0,10,.06); border:1px solid rgba(232,0,10,.30); border-radius:.55rem; padding:.6rem .7rem; margin-top:.7rem; display:none; gap:.55rem; align-items:flex-start}
.cmd-group-note.show{display:flex}
.cmd-group-note svg{flex:none; margin-top:.05rem; color:var(--color-rouge-teco)}
.cmd-group-note b{color:var(--color-text-primary)}

.cmd-foot{padding:1rem 1.4rem 1.3rem; border-top:1px solid var(--color-border-subtle); background:var(--color-bg-elevated)}
.cmd-recap{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.83rem; color:var(--color-text-secondary); margin-bottom:.3rem}
.cmd-recap .cmd-muted{color:var(--color-text-muted)}
.cmd-recap s{color:var(--color-text-muted)}
.cmd-recap.cmd-total{margin:.5rem 0 .1rem; align-items:flex-end}
.cmd-recap.cmd-total .cmd-r-lab{color:var(--color-text-primary); font-weight:700; font-size:1rem}
.cmd-recap.cmd-total .cmd-r-val{font-weight:800; font-size:1.7rem; line-height:.95; color:var(--color-text-primary)}
.cmd-save-badge{display:inline-block; font-size:.68rem; font-weight:700; color:var(--color-success); background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.34); border-radius:6px; padding:.12rem .45rem}
.cmd-fcfa{text-align:right; color:var(--color-text-muted); font-size:.75rem; margin-bottom:.9rem}
.cmd-btn-pay{display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:var(--color-rouge-teco); color:#fff; border:none; border-radius:.6rem; padding:.95rem; font-family:inherit; font-weight:700; font-size:1rem; cursor:pointer; transition:background .12s}
.cmd-btn-pay:hover{background:var(--color-rouge-deep)}
.cmd-btn-pay:disabled{opacity:.5; cursor:not-allowed}
.cmd-pay-meta{display:flex; align-items:center; justify-content:center; gap:.4rem; text-align:center; font-size:.72rem; color:var(--color-text-muted); margin-top:.65rem}
.cmd-pay-meta b{color:var(--color-text-secondary)}
.cmd-login-note{text-align:center; font-size:.74rem; color:var(--color-text-muted); margin-top:.6rem}
.cmd-login-note a{color:var(--color-rouge-teco); text-decoration:underline}
.cmd-choix{display:none; width:100%; margin-top:.55rem; padding:.5rem .6rem; border:1px solid var(--color-border-subtle); border-radius:.5rem; background:var(--color-bg-elevated); color:var(--color-text-primary); font-family:inherit; font-size:.85rem; cursor:pointer}
.cmd-opt.on .cmd-choix{display:block}
.cmd-opt.cmd-need-choix{border-color:var(--color-error)}
.cmd-opt.cmd-need-choix .cmd-choix{border-color:var(--color-error)}
.ff-buy-list-guest{margin-top:1rem; display:flex; flex-direction:column; gap:.1rem}