/* ==========================================================================
   REFONTE ACCUEIL — page pilote (phase 3)
   Feuille additive, chargée après home.css. Toutes les règles sont scoppées
   à body.page-home : aucune autre page n'est affectée.
   Aucun contenu, lien ou attribut modifié : habillage uniquement.
   Dépend de refonte-tokens.css (variables --qds-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fond de page et rythme général
   -------------------------------------------------------------------------- */
body.page-home {
  background-color: var(--qds-ivoire);
}

/* Liseré identitaire brique/ambre au-dessus de la navigation */
body.page-home #navbar {
  border-top: 3px solid var(--qds-brique);
}

/* --------------------------------------------------------------------------
   2. Hero : chaleureux, trame cartographique, Repère du Nord
   -------------------------------------------------------------------------- */
body.page-home section.home-hero.section-gradient {
  position: relative;
  background:
    linear-gradient(var(--qds-ivoire) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 42, 64, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(28, 42, 64, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qds-chaux), var(--qds-ivoire));
  background-size: 100% 100%, 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%;
  background-blend-mode: normal;
  border-bottom: 1px solid var(--qds-ardoise-100);
}

/* Repère du Nord : balise décorative discrète en coin de hero (jamais sur
   les boutons, pas d'animation). Masqué en dessous de 1024 px pour que les
   accès fonctionnels priment sur mobile. */
body.page-home section.home-hero .home-hero__container::before {
  content: none;
}
@media (min-width: 1024px) {
  body.page-home section.home-hero .home-hero__container::before {
    content: "";
    position: absolute;
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    top: 0.25rem;
    width: 5.5rem;
    height: 5.5rem;
    background: url("../images/refonte/repere-du-nord-discret.svg") no-repeat center / contain;
    pointer-events: none;
  }
}

body.page-home .home-hero h1 {
  color: var(--qds-ardoise-900);
  letter-spacing: -0.015em;
}

/* Badge local : brique et pierre assumées */
body.page-home .hero-local-badge {
  border-color: rgba(165, 87, 69, 0.45);
  background: var(--qds-blanc);
  color: var(--qds-brique-profond);
  box-shadow: var(--qds-ombre-1);
}
body.page-home .hero-local-badge svg { color: var(--qds-brique); }

/* Surtitre orange -> ocre plus chaleureux, contraste AA conservé */
body.page-home .home-hero__copy > p.text-sm.uppercase {
  color: var(--qds-brique-profond) !important;
  letter-spacing: 0.09em;
}

/* CTA : formes du design system, couleur d'action conservée */
body.page-home .home-hero-cta .btn {
  border-radius: var(--qds-r-moyen);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body.page-home .home-hero-cta__secondary {
  background-color: var(--qds-blanc);
}

/* --------------------------------------------------------------------------
   3. « Par où commencer ? » : cartes façades, Repère du Nord en balise
   -------------------------------------------------------------------------- */
body.page-home .home-intentions {
  background: var(--qds-pierre);
  border-bottom: 1px solid var(--qds-ardoise-100);
  padding-top: 1.75rem;
  padding-bottom: 1.9rem;
}

/* Le repère oriente vers Formations / Ateliers / Coaching : petite balise
   au-dessus du titre, purement décorative. */
body.page-home .home-intentions h2::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.4rem;
  background: url("../images/refonte/repere-du-nord-brique.svg") no-repeat center / contain;
}
body.page-home .home-intentions h2 { color: var(--qds-ardoise-900); }

body.page-home .home-intention-card {
  background: 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-1);
  transition: box-shadow var(--qds-duree-moyenne) var(--qds-courbe),
              border-color var(--qds-duree-moyenne) var(--qds-courbe);
}
body.page-home .home-intention-card:hover {
  box-shadow: var(--qds-ombre-2);
  border-color: var(--qds-ardoise-200);
  border-top-color: var(--qds-brique);
}
body.page-home .home-intention-card h3 { color: var(--qds-ardoise-900); }
body.page-home .home-intention-card .btn {
  border-radius: var(--qds-r-moyen);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   4. Bandeau recherche
   -------------------------------------------------------------------------- */
body.page-home .home-search-band {
  background: var(--qds-ivoire);
  border-bottom: 1px solid var(--qds-ardoise-100);
}
body.page-home .home-search-form input[type="search"] {
  min-height: 44px;
  border: 1px solid var(--qds-ardoise-200);
  border-radius: var(--qds-r-moyen);
  background-color: var(--qds-blanc);
  transition: border-color var(--qds-duree-courte) var(--qds-courbe),
              box-shadow var(--qds-duree-courte) var(--qds-courbe);
}
body.page-home .home-search-form input[type="search"]:focus {
  border-color: var(--qds-action);
  box-shadow: 0 0 0 3px rgba(189, 50, 0, 0.15);
  outline: none;
}
body.page-home .home-search-form .btn {
  border-radius: var(--qds-r-moyen);
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   5. Formation phare : bandeau ardoise profond, filet Art déco
   -------------------------------------------------------------------------- */
body.page-home .home-formation-phare {
  background-color: var(--qds-ardoise-900) !important;
  position: relative;
}
body.page-home .home-formation-phare::before,
body.page-home .home-formation-phare::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--qds-ambre) 0, var(--qds-ambre) 1.25rem,
    transparent 1.25rem, transparent 2rem);
  opacity: 0.7;
}
body.page-home .home-formation-phare::before { top: 0.4rem; }
body.page-home .home-formation-phare::after { bottom: 0.4rem; }

/* Le bouton blanc inline garde sa couleur orange : lisible sur ardoise. */

/* --------------------------------------------------------------------------
   6. Logos clients et sections de contenu
   -------------------------------------------------------------------------- */
body.page-home .home-logos-section {
  background-color: var(--qds-blanc);
  border-top: 1px solid var(--qds-ardoise-100);
  border-bottom: 1px solid var(--qds-ardoise-100);
}

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

body.page-home section#qui-sommes-nous,
body.page-home section#notre-vision {
  background-color: var(--qds-ivoire) !important;
}

body.page-home section#avis-clients,
body.page-home section#nos-services,
body.page-home section#faq {
  background-color: var(--qds-chaux) !important;
}

body.page-home section#situations-intervention {
  background-color: var(--qds-ivoire) !important;
}

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

/* Cartes services (mêmes classes que intentions) */
body.page-home .home-nos-services__card {
  background: 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-1);
}
body.page-home .home-nos-services__card:hover { box-shadow: var(--qds-ombre-2); }
body.page-home .home-nos-services__title { color: var(--qds-ardoise-900); }

/* Accordéons existants : habillage plus doux (comportement inchangé) */
body.page-home details.rh-page-accordion {
  border: 1px solid var(--qds-ardoise-100);
  border-radius: var(--qds-r-grand);
  box-shadow: var(--qds-ombre-1);
}
body.page-home details.rh-page-accordion > summary.rh-page-accordion-summary {
  color: var(--qds-ardoise-900);
}
body.page-home details.rh-page-accordion > summary.rh-page-accordion-summary::before {
  border-right-color: var(--qds-brique);
  border-bottom-color: var(--qds-brique);
}
body.page-home details.rh-page-accordion[open] > summary.rh-page-accordion-summary {
  background: var(--qds-pierre);
  border-bottom-color: var(--qds-ardoise-100);
}

/* --------------------------------------------------------------------------
   7. FAQ et mosaïque de références
   -------------------------------------------------------------------------- */
body.page-home #faq .faq-item {
  border: 1px solid var(--qds-ardoise-100);
  border-left: 3px solid var(--qds-brique);
  box-shadow: var(--qds-ombre-1) !important;
  border-radius: var(--qds-r-moyen) !important;
}

body.page-home #references-mosaique {
  background-color: var(--qds-blanc);
  border-top: 1px solid var(--qds-ardoise-100);
}

/* --------------------------------------------------------------------------
   8. Pied de page : ardoise très profonde, silhouette lilloise discrète
   -------------------------------------------------------------------------- */
body.page-home footer.footer-lille-legal-test {
  background-color: var(--qds-ardoise-950);
  position: relative;
  border-top: 3px solid var(--qds-brique);
}
body.page-home footer.footer-lille-legal-test::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3.5rem;
  transform: translateY(-100%);
  background: url("../images/refonte/silhouette-lille-discrete.svg") repeat-x bottom / auto 100%;
  pointer-events: none;
}
body.page-home footer.footer-lille-legal-test h3 {
  color: var(--qds-ambre);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.page-home footer.footer-lille-legal-test a:hover {
  color: var(--qds-ambre);
}

/* --------------------------------------------------------------------------
   9. Accessibilité : focus visibles sur toute la page pilote
   -------------------------------------------------------------------------- */
body.page-home a:focus-visible,
body.page-home button:focus-visible,
body.page-home input:focus-visible,
body.page-home summary:focus-visible,
body.page-home label:focus-visible {
  outline: 3px solid var(--qds-action);
  outline-offset: 2px;
  border-radius: var(--qds-r-petit);
}
body.page-home footer a:focus-visible,
body.page-home .home-formation-phare a:focus-visible {
  outline-color: var(--qds-ambre);
}

/* --------------------------------------------------------------------------
   10. Animations réduites : aucun mouvement imposé
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.page-home * {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  body.page-home html { scroll-behavior: auto; }
}