/* ==========================================================================
   REFONTE ATELIERS — déploiement par famille (phase 5B)
   Feuille additive. Deux scopes strictement séparés :
     - body.qds-ateliers-hub   : le hub « ateliers-de-management-lille.html »
     - body.qds-ateliers-fiche : les 11 fiches d'atelier (marquage « bom »
       exclusivement, partagé avec les familles Formations et Coaching)
   Aucun sélecteur nu (.bom-*, .qa-*, .card, etc.) : tout est préfixé par un
   scope de body, car ces classes de marquage sont aussi partagées par les
   familles Formations (déjà traitée) et Coaching (traitée dans le même lot,
   voir refonte-coaching.css) — cf. 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. HUB — body.qds-ateliers-hub (ateliers-de-management-lille.html)
   ========================================================================== */

body.qds-ateliers-hub {
  background-color: var(--qds-ivoire);
}

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

/* --- Section d'introduction : trame cartographique discrète --- */
body.qds-ateliers-hub #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-ateliers-hub #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 --- */
body.qds-ateliers-hub .section-title-local::after {
  background: var(--qds-brique);
  height: 3px;
  box-shadow: 84px 0 0 0 var(--qds-ambre);
}
body.qds-ateliers-hub .section-local-tone {
  background-color: var(--qds-pierre) !important;
}

/* --- Cartes d'atelier (liste .qa-card) : identité chaleureuse --- */
body.qds-ateliers-hub .qa-card {
  border: 1px solid var(--qds-ardoise-100);
  border-radius: var(--qds-r-grand);
  box-shadow: var(--qds-ombre-1);
  background-color: var(--qds-blanc);
}
body.qds-ateliers-hub .qa-h2 a {
  color: var(--qds-ardoise-900);
  letter-spacing: -0.01em;
}
body.qds-ateliers-hub .qa-figure {
  border-radius: var(--qds-r-grand);
  overflow: hidden;
}
body.qds-ateliers-hub .qa-btn {
  border-radius: var(--qds-r-moyen);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.qds-ateliers-hub .qa-btn--outline {
  border-color: var(--qds-brique);
  color: var(--qds-brique-profond);
}
body.qds-ateliers-hub .qa-btn--outline:hover {
  background-color: var(--qds-pierre);
}

/* --- Repères Qualiopi / statistiques ---
   Garde-fou : si un modal / bloc .stats sombre apparaît sur le hub,
   ne pas blanchir les cartes (même défaut que catalogue / méthode). */
body.qds-ateliers-hub .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-ateliers-hub .qualiopi-modal .stat-card,
body.qds-ateliers-hub .stats .stat-card,
body.qds-ateliers-hub .stats-qualiopi .stat-card {
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

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

/* --- Accordéon de réassurance (comportement inchangé) --- */
body.qds-ateliers-hub details.hub-rassurance-plie {
  border-color: var(--qds-ardoise-100) !important;
  border-radius: var(--qds-r-grand) !important;
}

/* --- Attributions de témoignages : contraste renforcé (motif déjà corrigé
   sur la fiche pilote Formations) --- */
body.qds-ateliers-hub .testimonial-author {
  color: var(--qds-ardoise-900);
}
body.qds-ateliers-hub .testimonial-meta {
  color: var(--qds-ardoise-700);
}

/* --- Pied de page --- */
body.qds-ateliers-hub footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950) !important;
  border-top: 3px solid var(--qds-brique);
}
body.qds-ateliers-hub 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-ateliers-hub a:focus-visible,
body.qds-ateliers-hub button:focus-visible,
body.qds-ateliers-hub summary:focus-visible,
body.qds-ateliers-hub input:focus-visible,
body.qds-ateliers-hub label:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-ateliers-hub footer.footer-lille-legal-test a:focus-visible {
  outline-color: var(--qds-ambre);
}

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

/* ==========================================================================
   2. FICHES D'ATELIER — body.qds-ateliers-fiche (11 fiches, marquage « bom »)
   ========================================================================== */

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

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

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

/* --- Hero : trame cartographique + Repère du Nord discret --- */
body.qds-ateliers-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-ateliers-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-ateliers-fiche .hero h1 {
  color: var(--qds-ardoise-900);
  letter-spacing: -0.015em;
}

/* --- Repères clés du hero --- */
body.qds-ateliers-fiche .bom-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 (durée / format / tarif / lieu) --- */
body.qds-ateliers-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-ateliers-fiche .bom-hero-decision-card dt {
  color: var(--qds-brique-profond);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
body.qds-ateliers-fiche .bom-hero-decision-card dd {
  color: var(--qds-ardoise-800);
}

/* --- Cartes « pour qui »/« pour vous si » : classe dédiée quand présente,
   et repli générique .card pour les fiches qui n'utilisent que ce marquage
   plus ancien (hétérogénéité déjà documentée dans la cartographie) --- */
body.qds-ateliers-fiche .hero-local-card,
body.qds-ateliers-fiche .bom-pour-vous-card,
body.qds-ateliers-fiche .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-ateliers-fiche .bom-pour-vous-card h3,
body.qds-ateliers-fiche .card h3 {
  color: var(--qds-brique-profond) !important;
}

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

/* --- Accordéons existants (comportement strictement inchangé).
   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 (même défaut que celui
   corrigé sur la famille Formations, cf. journal-refonte.md). --- */
body.qds-ateliers-fiche details.rh-page-accordion:not(.rh-page-accordion--orange):not(.rh-page-accordion--dark) {
  border: 1px solid var(--qds-ardoise-100);
  border-radius: var(--qds-r-grand);
  background: var(--qds-blanc);
  box-shadow: var(--qds-ombre-1);
}
body.qds-ateliers-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-ateliers-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);
}
body.qds-ateliers-fiche details.rh-page-accordion table {
  border-color: var(--qds-ardoise-100);
}
body.qds-ateliers-fiche details.rh-page-accordion th {
  color: var(--qds-brique-profond);
}

/* --- Modules du programme --- */
body.qds-ateliers-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);
}

/* --- FAQ --- */
body.qds-ateliers-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 --- */
body.qds-ateliers-fiche .hub-logos-confiance-wrap {
  border-color: var(--qds-ardoise-100) !important;
}

/* --- Attributions de témoignages --- */
body.qds-ateliers-fiche .testimonial-author {
  color: var(--qds-ardoise-900);
}
body.qds-ateliers-fiche .testimonial-meta {
  color: var(--qds-ardoise-700);
}

/* --- Boutons --- */
body.qds-ateliers-fiche .btn {
  border-radius: var(--qds-r-moyen);
}
body.qds-ateliers-fiche .bom-card-cta .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Pied de page --- */
body.qds-ateliers-fiche footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950) !important;
  border-top: 3px solid var(--qds-brique);
}
body.qds-ateliers-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-ateliers-fiche a:focus-visible,
body.qds-ateliers-fiche button:focus-visible,
body.qds-ateliers-fiche summary:focus-visible,
body.qds-ateliers-fiche input:focus-visible,
body.qds-ateliers-fiche label:focus-visible {
  outline: var(--qds-focus);
  outline-offset: var(--qds-focus-decalage);
}
body.qds-ateliers-fiche footer.footer-lille-legal-test a:focus-visible {
  outline-color: var(--qds-ambre);
}

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