/* ── training-pathfinder.css ──────────────────────────────────────────
   Styles partagés pour le composant d'orientation Formation (FR/EN/IT).
   Toutes les classes sont préfixées "training-" pour éviter tout conflit
   avec les classes génériques du site (card, offer-grid, sit-list, etc.).
   Réutilise les tokens définis dans assets/css/main.css.
   ───────────────────────────────────────────────────────────────────── */

.training-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Section labels / pills ── */
.training-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:var(--s2); border:1px solid var(--br);
  font-family:var(--ffm); font-size:.68rem; color:var(--t2);
  letter-spacing:.02em;
}
.training-pill[data-state="declare"]{ color:var(--t2); border-color:var(--br); }
.training-pill[data-state="valider"]{ color:var(--amber-b); border-color:rgba(200,145,42,.4); background:var(--amber-g); }
.training-pill[data-state="consolider"]{ color:var(--blue-b); border-color:rgba(75,132,183,.4); background:var(--blue-d); }
.training-pill[data-state="apprendre"]{ color:var(--t3); border-color:var(--br); }
.training-pill[data-state="objectif"]{ color:var(--green-b); border-color:rgba(47,145,96,.4); background:var(--green-d); }

/* ── 4 intentions ── */
.training-intent-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px; margin-top:24px;
}
.training-intent-card{
  display:flex; flex-direction:column; gap:10px;
  padding:22px 20px; background:var(--raised); border:1px solid var(--br);
  border-radius:12px; text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease;
  min-height:44px;
}
.training-intent-card:hover,
.training-intent-card:focus-visible{ border-color:rgba(200,145,42,.4); transform:translateY(-2px); }
.training-intent-card h3{ font-family:var(--ffd); font-size:1.02rem; color:var(--t1); }
.training-intent-card p{ font-size:.86rem; color:var(--t2); line-height:1.65; margin:0; }
.training-intent-card .training-intent-cta{
  margin-top:auto; font-family:var(--ffm); font-size:.72rem; color:var(--amber-b);
}

/* ── Diagnostic ──
   Le formulaire exploite toute la largeur disponible (jamais de largeur fixe) :
   100% avec un plafond confortable en lecture, distinct du texte d'intro plus étroit. */
.training-diagnostic{
  width:100%; max-width:1120px; box-sizing:border-box;
  margin-top:36px; padding:26px; background:var(--panel);
  border:1px solid var(--br); border-radius:14px;
}
.training-diagnostic-progress{
  font-family:var(--ffm); font-size:.72rem; color:var(--t3);
  margin-bottom:16px; letter-spacing:.03em;
}
.training-question{ border:0; padding:0; margin:0; min-width:0; }
.training-question legend{
  font-family:var(--ffd); font-size:1.1rem; color:var(--t1);
  margin-bottom:16px; padding:0; max-width:760px; line-height:1.4;
}
.training-option-list{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;
  list-style:none; padding:0; margin:0;
}
.training-option{
  display:flex; align-items:flex-start; gap:12px; min-width:0;
  padding:14px 16px; min-height:44px;
  background:var(--s2); border:2px solid var(--br); border-radius:10px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.training-option:hover{ border-color:rgba(200,145,42,.35); }
.training-option input[type="radio"]{
  width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--amber);
}
.training-option input[type="radio"]:focus-visible{ outline:2px solid var(--amber-b); outline-offset:2px; }
/* État sélectionné piloté par JS (classe is-selected) — :has() sert seulement de
   rehaussement progressif pour les navigateurs qui le supportent, jamais le seul mécanisme. */
.training-option.is-selected,
.training-option:has(input:checked){
  border-color:var(--amber); background:var(--amber-g);
}
/* Le site applique un style global uppercase/monospace à <label> (labels de champ de formulaire) :
   on le réinitialise ici, ces labels portent des phrases complètes qui doivent rester lisibles. */
.training-option label{
  display:block; width:100%; min-width:0; font-family:var(--ffb); font-size:1rem; letter-spacing:normal;
  text-transform:none; color:inherit; margin-bottom:0; cursor:pointer;
}
.training-option span{ font-size:.92rem; color:var(--t2); line-height:1.5; overflow-wrap:anywhere; }
.training-option.is-selected span,
.training-option:has(input:checked) span{ color:var(--t1); }

@media (max-width:900px){
  .training-option-list{ grid-template-columns:1fr; }
}

.training-diagnostic-nav{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;
}
.training-diagnostic-nav button{
  font-family:var(--ffm); font-size:.76rem; min-height:44px; padding:0 18px;
  border-radius:8px; cursor:pointer; border:1px solid var(--br);
  background:transparent; color:var(--t2);
}
.training-diagnostic-nav button.training-btn-primary{
  background:var(--amber); border-color:var(--amber); color:#1a1204; font-weight:600;
}
.training-diagnostic-nav button.training-btn-primary:disabled{
  opacity:.4; cursor:not-allowed;
}
.training-diagnostic-nav button:not(.training-btn-primary):hover{ border-color:var(--t3); color:var(--t1); }
.training-diagnostic-nav button:focus-visible{ outline:2px solid var(--amber-b); outline-offset:2px; }

.training-question[hidden]{ display:none; }

/* ── Recommandation ──
   La carte occupe toute la largeur utile du conteneur (comme le diagnostic et le
   catalogue) ; seul le texte interne garde une largeur de lecture raisonnable via
   .training-recommendation-copy. */
.training-recommendation{
  width:100%; max-width:none; min-width:0; box-sizing:border-box;
  margin-top:36px; padding:26px; background:var(--raised);
  border:1px solid rgba(200,145,42,.35); border-radius:14px;
}
.training-recommendation[hidden]{ display:none; }
.training-recommendation-copy{ max-width:900px; }
.training-recommendation-label{
  font-family:var(--ffm); font-size:.68rem; color:var(--amber-b);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px;
}
.training-recommendation h3{ font-family:var(--ffd); font-size:1.3rem; color:var(--t1); margin-bottom:12px; }
.training-recommendation p{ font-size:.9rem; color:var(--t2); line-height:1.7; margin-bottom:10px; }
.training-recommendation-note{
  font-size:.82rem; color:var(--t3); border-top:1px solid var(--br);
  padding-top:12px; margin-top:14px;
}
.training-recommendation-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* ── Infographie / path map — six cartes d'étape, pas une frise compacte ── */
.training-path-map{ margin-top:28px; }
.training-path-map h4{ font-family:var(--ffd); font-size:.95rem; color:var(--t1); margin-bottom:14px; }
.training-path-steps{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;
  list-style:none; padding:0; margin:0;
}
@media (min-width:1500px){
  .training-path-steps{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .training-path-steps{ grid-template-columns:1fr; }
}
.training-path-step{
  min-width:0; display:flex; flex-direction:column; gap:8px;
  padding:18px 16px; font-size:.82rem; color:var(--t2); line-height:1.55;
  background:var(--panel); border:1px solid var(--br); border-radius:12px;
}
.training-path-step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--s2); border:2px solid var(--br);
  font-family:var(--ffm); font-size:.8rem; font-weight:700; color:var(--t2);
}
.training-path-step[data-state="declare"] .training-path-step-number,
.training-path-step[data-state="objectif"] .training-path-step-number{
  border-color:var(--amber); color:var(--amber-b);
}
.training-path-step-title{
  font-family:var(--ffd); font-size:.92rem; color:var(--t1); margin:0; font-weight:700;
}
.training-path-step-desc{ margin:0; color:var(--t2); }
.training-path-step-badge{ align-self:flex-start; margin-top:2px; }

.training-path-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
}
.training-path-summary{ margin-top:16px; }
.training-path-summary summary{
  font-family:var(--ffm); font-size:.72rem; color:var(--t3); cursor:pointer; min-height:44px; display:flex; align-items:center;
}
.training-path-summary ul{ margin-top:8px; padding-left:18px; }
.training-path-summary li{ font-size:.82rem; color:var(--t2); line-height:1.6; margin-bottom:4px; }

/* Animation d'entrée : désactivée par défaut, activée en JS uniquement au moment voulu */
.training-path-map[data-animate="true"] .training-path-step{
  opacity:0; transform:translateX(-8px);
  animation:training-step-in .4s ease forwards;
}
.training-path-map[data-animate="true"] .training-path-step:nth-child(1){ animation-delay:.02s; }
.training-path-map[data-animate="true"] .training-path-step:nth-child(2){ animation-delay:.08s; }
.training-path-map[data-animate="true"] .training-path-step:nth-child(3){ animation-delay:.14s; }
.training-path-map[data-animate="true"] .training-path-step:nth-child(4){ animation-delay:.20s; }
.training-path-map[data-animate="true"] .training-path-step:nth-child(5){ animation-delay:.26s; }
.training-path-map[data-animate="true"] .training-path-step:nth-child(6){ animation-delay:.32s; }
@keyframes training-step-in{ to{ opacity:1; transform:translateX(0); } }

@media (prefers-reduced-motion: reduce){
  .training-path-map[data-animate="true"] .training-path-step{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .training-intent-card{ transition:none; }
}

.training-noscript{
  margin-top:18px; padding:14px 18px; background:var(--s2);
  border:1px dashed var(--br); border-radius:10px; font-size:.82rem; color:var(--t2);
}
.training-noscript a{ color:var(--amber-b); }

/* ── 5 offres phares ── */
.training-flagship-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px; margin-top:24px;
}
.training-flagship-card{
  padding:20px; background:var(--raised); border:1px solid var(--br); border-radius:12px;
}
.training-flagship-card h3{ font-family:var(--ffd); font-size:1rem; color:var(--t1); margin-bottom:8px; }
.training-flagship-card p{ font-size:.85rem; color:var(--t2); line-height:1.65; margin:0 0 10px; }
.training-flagship-card ul{ margin:0 0 10px; padding-left:18px; }
.training-flagship-card li{ font-size:.82rem; color:var(--t2); line-height:1.6; }
.training-flagship-card .training-flagship-duration{
  font-family:var(--ffm); font-size:.68rem; color:var(--amber-b);
}

/* ── Catalogue complet ── */
.training-catalog-full{ margin-top:30px; }
.training-catalog-full > summary{
  list-style:none; cursor:pointer; min-height:44px;
  display:inline-flex; align-items:center; gap:8px;
  padding:0 22px; border-radius:8px; border:1px solid var(--amber);
  background:var(--amber); color:#1a1204; font-family:var(--ffm); font-size:.8rem; font-weight:600;
}
.training-catalog-full > summary::-webkit-details-marker{ display:none; }
.training-catalog-full > summary:focus-visible{ outline:2px solid var(--amber-b); outline-offset:3px; }
.training-catalog-full[open] > summary{ margin-bottom:22px; }

/* Barre d'outils : filtres rapides par domaine + compteur + bouton filtres avancés */
.training-catalog-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:14px;
}
.training-quickfilters{ display:flex; flex-wrap:wrap; gap:8px; }
.training-quickfilter{
  font-family:var(--ffm); font-size:.74rem; min-height:40px; padding:0 16px;
  border-radius:999px; border:1px solid var(--br); background:var(--s2); color:var(--t2);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.training-quickfilter:hover{ border-color:rgba(200,145,42,.4); color:var(--t1); }
.training-quickfilter:focus-visible{ outline:2px solid var(--amber-b); outline-offset:2px; }
.training-quickfilter.is-active{
  background:var(--amber); border-color:var(--amber); color:#1a1204; font-weight:600;
}

.training-catalog-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.training-results-count{
  font-family:var(--ffm); font-size:.72rem; color:var(--t3); margin:0; white-space:nowrap;
}
.training-more-filters-btn{
  font-family:var(--ffm); font-size:.76rem; min-height:44px; padding:0 18px;
  border-radius:8px; border:1px solid var(--br); background:transparent; color:var(--t2); cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.training-more-filters-btn:hover{ border-color:var(--t3); color:var(--t1); }
.training-more-filters-btn:focus-visible{ outline:2px solid var(--amber-b); outline-offset:2px; }
.training-more-filters-btn[aria-expanded="true"]{ border-color:var(--amber); color:var(--t1); }
.training-mf-short{ display:none; }
[data-mf-count]{ color:var(--amber-b); }

.training-active-filters{
  font-family:var(--ffm); font-size:.7rem; color:var(--amber-b); margin:0 0 14px;
}
.training-see-all-btn{
  font-family:var(--ffm); font-size:.76rem; min-height:44px; padding:0 18px; margin-bottom:18px;
  border-radius:8px; border:1px dashed var(--amber); background:var(--amber-g); color:var(--t1); cursor:pointer;
}
.training-see-all-btn:focus-visible{ outline:2px solid var(--amber-b); outline-offset:2px; }

/* Filtres avancés : repliés par défaut, activés par le bouton "Plus de filtres" */
.training-advanced-filters{
  margin-bottom:22px; padding:18px; background:var(--s2); border:1px solid var(--br); border-radius:10px;
}
.training-filters{
  display:flex; flex-wrap:wrap; gap:20px;
}
.training-filter-group{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.training-filter-group legend{
  font-family:var(--ffm); font-size:.66rem; color:var(--t3); text-transform:uppercase; letter-spacing:.05em; padding:0 0 4px;
}
.training-filter-option{
  display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--t2); min-height:36px;
  padding:4px 10px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.training-filter-option:hover{ background:var(--raised); }
.training-filter-option input{ accent-color:var(--amber); width:16px; height:16px; flex-shrink:0; }
/* État sélectionné piloté par JS (is-selected) — :has() en rehaussement seulement. */
.training-filter-option.is-selected,
.training-filter-option:has(input:checked){
  border-color:var(--amber); background:var(--amber-g); color:var(--t1); font-weight:600;
}
.training-advanced-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

.training-program-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:640px){
  .training-program-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1024px){
  .training-program-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.training-program-card{
  padding:20px; background:var(--raised); border:1px solid var(--br); border-radius:12px; min-width:0;
}
.training-program-card[hidden]{ display:none; }
.training-program-card h3{ font-family:var(--ffd); font-size:1.02rem; color:var(--t1); margin-bottom:6px; }
.training-program-card > p{ font-size:.85rem; color:var(--t2); line-height:1.6; margin-bottom:10px; }
.training-program-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.training-program-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.training-program-badge{
  display:inline-flex; font-family:var(--ffm); font-size:.64rem; padding:4px 10px; border-radius:999px;
  border:1px solid var(--br); letter-spacing:.02em;
}
.training-program-badge-primary{ color:#1a1204; background:var(--amber); border-color:var(--amber); font-weight:700; }
.training-program-badge-prerequisite{ color:var(--blue-b); background:var(--blue-d); border-color:rgba(75,132,183,.4); }
.training-program-badge-secondary{ color:var(--t2); background:var(--s2); border-color:var(--br); }
.training-program-variants{ display:flex; flex-direction:column; gap:8px; }
.training-variant{ background:var(--s2); border:1px solid var(--br); border-radius:8px; }
.training-variant > summary{
  cursor:pointer; padding:10px 14px; min-height:44px; display:flex; align-items:center;
  gap:8px; font-size:.82rem; color:var(--t1); font-family:var(--ffm);
}
.training-variant > summary::-webkit-details-marker{ display:none; }
.training-variant-body{ padding:0 14px 14px; font-size:.82rem; color:var(--t2); line-height:1.7; }
.training-variant-body dt{ font-family:var(--ffm); font-size:.68rem; color:var(--t3); margin-top:8px; text-transform:uppercase; letter-spacing:.03em; }
.training-variant-body dd{ margin:2px 0 0; }
.training-program-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* Mentoring Gumroad : offre complémentaire, visuellement distincte des 8 familles */
.training-mentoring-standalone{ margin-top:24px; }
.training-program-card-mentoring{
  border-style:dashed; border-color:var(--amber-b); background:var(--amber-g);
}
.training-program-card-mentoring > .training-pill{ margin-bottom:14px; }
.training-mentoring-facts{ display:flex; flex-wrap:wrap; gap:16px; margin:10px 0; }
.training-mentoring-facts dt{ font-family:var(--ffm); font-size:.64rem; color:var(--t3); text-transform:uppercase; letter-spacing:.03em; }
.training-mentoring-facts dd{ margin:2px 0 0; font-size:.85rem; color:var(--t1); font-weight:600; }
.training-mentoring-card{
  margin-top:18px; padding:16px 18px; background:var(--amber-g); border:1px dashed var(--amber-b); border-radius:10px;
}
/* Spécificité renforcée (.training-mentoring-card .training-mentoring-kicker) : le badge est un
   <p>, et .training-recommendation p (margin-bottom:10px) est plus spécifique qu'une classe seule
   et l'écraserait sinon quand la carte mentoring est affichée dans le panneau de recommandation. */
.training-mentoring-card .training-mentoring-kicker{
  display:inline-flex; font-family:var(--ffm); font-size:.64rem; color:var(--amber-b);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px;
}
.training-mentoring-card h4{ font-family:var(--ffd); font-size:.95rem; color:var(--t1); margin-bottom:6px; }
.training-mentoring-meta{ font-family:var(--ffm); font-size:.68rem; color:var(--t2); margin-bottom:8px; }
.training-mentoring-card p:not(.training-mentoring-meta):not(.training-mentoring-kicker){ font-size:.82rem; color:var(--t2); line-height:1.6; margin-bottom:12px; }

.training-flagship-secondary-cta{
  display:inline-block; margin-top:12px; font-family:var(--ffm); font-size:.72rem;
  color:var(--amber-b); text-decoration:none; border-bottom:1px dashed var(--amber-b);
}
.training-flagship-secondary-cta:hover{ color:var(--t1); }

/* ── Sur-mesure ──
   Même largeur générale que le mentoring et les autres blocs de la page. */
.training-tailored{
  width:100%; max-width:none; min-width:0; box-sizing:border-box;
  margin-top:24px; padding:24px; background:var(--panel);
  border:1px solid var(--br); border-radius:12px;
}
.training-tailored-copy{ max-width:900px; }
.training-tailored h3{ font-family:var(--ffd); font-size:1.05rem; color:var(--t1); margin-bottom:10px; }
.training-tailored p{ font-size:.87rem; color:var(--t2); line-height:1.7; margin-bottom:0; }

/* ── Financement (FR uniquement) ── */
.training-funding-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px; margin-top:20px;
}
.training-funding-item{
  padding:14px 16px; background:var(--s2); border:1px solid var(--br); border-radius:10px;
}
.training-funding-item strong{ display:block; color:var(--t1); font-size:.85rem; margin-bottom:4px; }
.training-funding-item p{ font-size:.78rem; color:var(--t3); margin:0; line-height:1.55; }
.training-funding-caution{
  margin-top:18px; font-size:.82rem; color:var(--t3); max-width:700px; line-height:1.7;
}

/* ── Responsive ── */
@media (max-width:640px){
  .training-diagnostic, .training-recommendation, .training-tailored{ padding:18px; }
  .training-filters{ flex-direction:column; gap:16px; }
  .training-diagnostic-nav{ flex-direction:column; align-items:stretch; }
  .training-diagnostic-nav button{ width:100%; }

  /* Le bouton "Plus de filtres" devient "Filtres (n)" sur mobile */
  .training-mf-full{ display:none; }
  .training-mf-short{ display:inline; }
  .training-catalog-toolbar{ flex-direction:column; align-items:stretch; }
  .training-catalog-meta{ justify-content:space-between; }
  .training-more-filters-btn{ width:100%; justify-content:center; }
  .training-quickfilters{ width:100%; }
  .training-advanced-actions{ flex-direction:column; }
  .training-advanced-actions .btn{ width:100%; text-align:center; }
}