/* ==========================================================================
   REFONTE FORMATIONS — déploiement par famille (phase 5A)
   Feuille additive. Deux scopes strictement séparés :
     - body.qds-formations-catalogue : le hub « formations-en-management-lille.html »
     - body.qds-formations-fiche     : les 11 fiches de formation autres que le pilote
   Le pilote (boite-a-outils-du-manager-lille.html, body.qds-fiche-pilote) garde
   refonte-fiche.css tel que validé en phase 4 et n'est pas modifié ici.
   Aucun sélecteur nu (.bom-*, .fiche-*, .formation-card, etc.) : tout est préfixé
   par un scope de body, car ces classes de marquage sont aussi partagées par les
   familles Ateliers et Coaching (non traitées à ce stade — voir
   docs/refonte/cartographie-modeles-pages.md, §3/§5/§6).
   Aucun contenu, lien, accordéon, formulaire ou attribut modifié : habillage
   visuel uniquement. Dépend de refonte-tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. CATALOGUE — body.qds-formations-catalogue
      (formations-en-management-lille.html)
   ========================================================================== */

body.qds-formations-catalogue {
  background-color: var(--qds-ivoire);
}

body.qds-formations-catalogue #navbar {
  border-top: 3px solid var(--qds-brique);
}

/* --- Section d'introduction : trame cartographique discrète --- */
body.qds-formations-catalogue #introduction.section-gradient {
  background:
    linear-gradient(90deg, rgba(28, 42, 64, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(28, 42, 64, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qds-chaux), var(--qds-ivoire));
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%;
  border-bottom: 1px solid var(--qds-ardoise-100);
  position: relative;
}
@media (min-width: 1024px) {
  body.qds-formations-catalogue #introduction.section-gradient::before {
    content: "";
    position: absolute;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    top: 0.75rem;
    width: 4rem;
    height: 4rem;
    background: url("../images/refonte/repere-du-nord-discret.svg") no-repeat center / contain;
    pointer-events: none;
  }
}

/* --- Titres de section (trait brique + point ambre) --- */
body.qds-formations-catalogue .section-title-local::after {
  background: var(--qds-brique);
  height: 3px;
  box-shadow: 84px 0 0 0 var(--qds-ambre);
}

body.qds-formations-catalogue .section-local-tone {
  background-color: var(--qds-pierre) !important;
}

/* --- Cartes de formation : identité chaleureuse, hiérarchie claire --- */
body.qds-formations-catalogue .formation-card {
  border-color: var(--qds-ardoise-100);
  border-radius: var(--qds-r-grand);
  box-shadow: var(--qds-ombre-1);
}
body.qds-formations-catalogue .formation-card:hover {
  box-shadow: var(--qds-ombre-2);
}
body.qds-formations-catalogue .formation-card h3 {
  letter-spacing: -0.01em;
}
body.qds-formations-catalogue .formation-meta-categorie {
  color: var(--qds-brique-profond);
  letter-spacing: 0.02em;
}
body.qds-formations-catalogue .formation-actions .btn {
  border-radius: var(--qds-r-moyen);
  min-height: 44px;
  min-width: 44px;
  padding: 0.65rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.qds-formations-catalogue .formation-image img {
  border-radius: var(--qds-r-grand);
}

/* --- Repères Qualiopi (cartes-chiffres) ---
   Ne pas blanchir les .stat-card du modal / blocs sombres
   (texte .stat-value en #fff → illisible sur fond blanc). */
body.qds-formations-catalogue .stat-card {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-radius: var(--qds-r-moyen);
  box-shadow: var(--qds-ombre-1);
}
body.qds-formations-catalogue .qualiopi-modal .stat-card,
body.qds-formations-catalogue .stats .stat-card,
body.qds-formations-catalogue .stats-qualiopi .stat-card {
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- Bandeau logos clients : filet discret --- */
body.qds-formations-catalogue .hub-logos-confiance-wrap {
  border-color: var(--qds-ardoise-100) !important;
}

/* --- Accordéons de comparatif (repère + / − déjà accessible) --- */
body.qds-formations-catalogue details.hub-lecture-rapide-wrap,
body.qds-formations-catalogue details.hub-hero-reponses-rapides,
body.qds-formations-catalogue details.hub-rassurance-plie {
  border-color: var(--qds-ardoise-100) !important;
  border-radius: var(--qds-r-grand) !important;
}

/* --- Pied de page : cohérent avec l'accueil et la fiche pilote --- */
body.qds-formations-catalogue footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950) !important;
  border-top: 3px solid var(--qds-brique);
}
body.qds-formations-catalogue footer.footer-lille-legal-test h3 {
  color: var(--qds-ambre);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Focus visibles --- */
body.qds-formations-catalogue a:focus-visible,
body.qds-formations-catalogue button:focus-visible,
body.qds-formations-catalogue summary:focus-visible,
body.qds-formations-catalogue input:focus-visible,
body.qds-formations-catalogue label:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-formations-catalogue footer.footer-lille-legal-test a:focus-visible {
  outline-color: var(--qds-ambre);
}

/* --- Animations réduites --- */
@media (prefers-reduced-motion: reduce) {
  body.qds-formations-catalogue .formation-card,
  body.qds-formations-catalogue .formation-card:hover {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* ==========================================================================
   2. FICHES DE FORMATION — body.qds-formations-fiche
      (11 fiches, hors pilote : les deux variantes de marquage « bom » et
      « fiche » sont couvertes ; voir cartographie §3)
   ========================================================================== */

body.qds-formations-fiche {
  background-color: var(--qds-ivoire);
}

body.qds-formations-fiche #navbar {
  border-top: 3px solid var(--qds-brique);
}

/* --- Fil d'Ariane --- */
body.qds-formations-fiche nav.breadcrumb-nav::before {
  background: rgba(250, 247, 242, 0.98);
  border-bottom: 1px solid var(--qds-ardoise-100);
}
body.qds-formations-fiche nav.breadcrumb-nav a {
  color: var(--qds-brique-profond);
}

/* --- Hero : trame cartographique + Repère du Nord discret ---
   Compatible avec les deux marquages de hero (bom-hero-top-visual /
   fiche-hero-top), qui reposent tous deux sur .hero comme conteneur. */
body.qds-formations-fiche .hero {
  background:
    linear-gradient(90deg, rgba(28, 42, 64, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(28, 42, 64, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qds-chaux), var(--qds-ivoire));
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%;
  border-bottom: 1px solid var(--qds-ardoise-100);
  position: relative;
}
@media (min-width: 1024px) {
  body.qds-formations-fiche .hero::before {
    content: "";
    position: absolute;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    top: 0.75rem;
    width: 4rem;
    height: 4rem;
    background: url("../images/refonte/repere-du-nord-discret.svg") no-repeat center / contain;
    pointer-events: none;
  }
}
body.qds-formations-fiche .hero h1 {
  color: var(--qds-ardoise-900);
  letter-spacing: -0.015em;
}

/* --- Repères clés du hero (liste de preuves), variantes bom/fiche --- */
body.qds-formations-fiche .bom-hero-proofs li,
body.qds-formations-fiche .fiche-hero-proofs li {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-left: 3px solid var(--qds-ambre);
  box-shadow: var(--qds-ombre-1);
}

/* --- Carte de décision (variante bom uniquement : formation-manager-coach-lille) ---
   Regroupe durée / format / tarif / dates : ne doit jamais être masquée par le
   Repère du Nord ni par un autre élément décoratif. */
body.qds-formations-fiche .bom-hero-decision-card {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-top: 4px solid var(--qds-brique);
  border-radius: var(--qds-r-grand);
  box-shadow: var(--qds-ombre-2);
}
body.qds-formations-fiche .bom-hero-decision-card dt {
  color: var(--qds-brique-profond);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
body.qds-formations-fiche .bom-hero-decision-card dd {
  color: var(--qds-ardoise-800);
}

/* --- Cartes « pour vous si » et cartes locales, variantes bom/fiche ---
   .hero-local-card est le socle commun aux deux marquages. */
body.qds-formations-fiche .hero-local-card {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-top: 3px solid var(--qds-brique);
  box-shadow: var(--qds-ombre-1);
}
body.qds-formations-fiche .bom-pour-vous-card h3,
body.qds-formations-fiche .fiche-pour-vous-card h3 {
  color: var(--qds-brique-profond) !important;
}

/* --- Visuel latéral du hero (variante fiche) --- */
body.qds-formations-fiche .fiche-hero-aside-img {
  border-radius: var(--qds-r-grand);
  box-shadow: var(--qds-ombre-2);
}

/* --- Titres de section --- */
body.qds-formations-fiche .section-title-local::after {
  background: var(--qds-brique);
  height: 3px;
  box-shadow: 84px 0 0 0 var(--qds-ambre);
}

/* --- Accordéons existants (comportement strictement inchangé) --- */
body.qds-formations-fiche details.rh-page-accordion {
  border: 1px solid var(--qds-ardoise-100);
  border-radius: var(--qds-r-grand);
  background: var(--qds-blanc);
  box-shadow: var(--qds-ombre-1);
}
/* Variantes --orange et --dark exclues : elles définissent déjà leur propre
   contraste (texte blanc sur fond de couleur) dans formation-fiche-shared.css ;
   les reprendre ici rendrait le texte illisible (constat : titre « Programme
   détaillé de la formation », cf. journal-refonte.md). */
body.qds-formations-fiche details.rh-page-accordion:not(.rh-page-accordion--orange):not(.rh-page-accordion--dark) > summary.rh-page-accordion-summary {
  color: var(--qds-ardoise-900);
}
body.qds-formations-fiche details.rh-page-accordion:not(.rh-page-accordion--orange):not(.rh-page-accordion--dark)[open] > summary.rh-page-accordion-summary {
  background: var(--qds-pierre);
}

/* Tableau tarifs/modalités : lisibilité renforcée (bordures + alternance) */
body.qds-formations-fiche details.rh-page-accordion table {
  border-color: var(--qds-ardoise-100);
}
body.qds-formations-fiche details.rh-page-accordion th {
  color: var(--qds-brique-profond);
}

/* --- Modules du programme --- */
body.qds-formations-fiche .programme-module {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-left: 3px solid var(--qds-ambre);
  border-radius: var(--qds-r-moyen);
}

/* --- Sections locales et FAQ --- */
body.qds-formations-fiche .section-local-tone {
  background-color: var(--qds-pierre) !important;
}
body.qds-formations-fiche details.faq-item {
  background-color: var(--qds-blanc);
  border: 1px solid var(--qds-ardoise-100);
  border-left: 3px solid var(--qds-brique);
  border-radius: var(--qds-r-moyen);
}

/* --- Bandeau logos clients : filet discret --- */
body.qds-formations-fiche .hub-logos-confiance-wrap {
  border-color: var(--qds-ardoise-100) !important;
}

/* --- Boutons : formes du design system, couleurs de conversion conservées --- */
body.qds-formations-fiche .btn {
  border-radius: var(--qds-r-moyen);
}
body.qds-formations-fiche .bom-card-cta .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Pied de page --- */
body.qds-formations-fiche footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950) !important;
  border-top: 3px solid var(--qds-brique);
}
body.qds-formations-fiche footer.footer-lille-legal-test h3 {
  color: var(--qds-ambre);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Focus visibles --- */
body.qds-formations-fiche a:focus-visible,
body.qds-formations-fiche button:focus-visible,
body.qds-formations-fiche summary:focus-visible,
body.qds-formations-fiche input:focus-visible,
body.qds-formations-fiche label:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-formations-fiche footer.footer-lille-legal-test a:focus-visible {
  outline-color: var(--qds-ambre);
}

/* --- Animations réduites --- */
@media (prefers-reduced-motion: reduce) {
  body.qds-formations-fiche * {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}