/* =============================================================
   Gouvernail Consulting — Styles spécifiques à la page d'accueil
   Tout est scopé via [data-page="home"], ce qui permet de charger
   ce fichier sans risque de fuite sur les autres pages. Chargé
   conditionnellement via le frontmatter `styles:` de index.html.

   Parti pris : aplats, filets fins, mouvements courts.
   - l'aiguille de la boussole oscille puis se cale au nord ;
   - les blocs [data-reveal] apparaissent en fondu au défilement ;
   - les filets des quatre points se tracent à leur apparition.
   Tout est piloté par scripts/home.js, qui n'arme les états cachés
   (classe .reveal-ready sur <html>) qu'une fois prêt : sans JS, ou si
   l'utilisateur préfère moins d'animations, tout est visible d'emblée.
   ============================================================= */

/* ===== HERO ===== */
[data-page="home"] .hero-v2 {
  position: relative;
  background: hsl(var(--navy));
  color: hsl(var(--white));
  padding: 5.5rem 0 6rem;
  border-bottom: 1px solid hsl(var(--white) / 0.08);
}
@media (max-width: 720px) {
  [data-page="home"] .hero-v2 { padding: 3.5rem 0 4rem; }
}

[data-page="home"] .hero-v2-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}
[data-page="home"] .hero-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 880px) {
  [data-page="home"] .hero-v2-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

[data-page="home"] .hero-title-v2 {
  font-family: var(--font-serif);
  font-size: var(--size-display-lg);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: hsl(var(--white));
  margin: 0;
  max-width: 12ch;
}
[data-page="home"] .hero-title-v2 .hero-ai {
  color: #8FA8FF;
}
[data-page="home"] .hero-title-v2 .hero-ai::after { content: none; }

/* Devise du cabinet, sous le slogan */
[data-page="home"] .hero-baseline {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  font-weight: 400;
  line-height: 1.35;
  color: hsl(var(--white) / 0.92);
  max-width: 30ch;
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid #8FA8FF;
}

[data-page="home"] .hero-subtitle-v2 {
  font-size: var(--size-base);
  color: hsl(var(--white) / 0.7);
  max-width: 44ch;
  margin: 1.25rem 0 0;
  line-height: var(--leading-normal);
}

[data-page="home"] .hero-actions-v2 {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  [data-page="home"] .hero-actions-v2 .btn { width: 100%; }
}

/* Boussole */
[data-page="home"] .compass-stage {
  /* La boussole porte le hero : elle occupe franchement sa colonne. */
  width: min(480px, 86vw);
  margin: 0 auto;
}
@media (max-width: 880px) {
  [data-page="home"] .compass-stage { width: min(360px, 82vw); }
}
[data-page="home"] .compass-stage > svg {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  display: block;
  overflow: visible;
}

/* Les dards. L'anneau ne porte aucun texte : seule la branche visée
   s'éclaire, et la légende sous la boussole la nomme. */
[data-page="home"] .cardinal-hotspot polygon {
  fill: hsl(var(--white) / 0.55);
  transition: fill var(--duration);
}
[data-page="home"] .cardinal-minor polygon { fill: hsl(var(--white) / 0.4); }
[data-page="home"] .cardinal-hotspot.is-active polygon { fill: hsl(var(--white)); }
[data-page="home"] .cardinal-hotspot:hover polygon,
[data-page="home"] .cardinal-hotspot:focus-visible polygon { fill: #8FA8FF; }
[data-page="home"] .cardinal-hotspot:focus-visible { outline: none; }

/* Pulsation d'appel : un halo lent sur la branche visée. Il ne tourne que
   là, jamais sur les cinq à la fois — sinon le dessin clignoterait. */
[data-page="home"] .dart-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}
[data-page="home"] .cardinal-hotspot.is-active .dart-pulse {
  animation: dart-pulse 2800ms var(--ease-out-quart) infinite;
}
@keyframes dart-pulse {
  0%   { opacity: 0.5; transform: scale(0.5); }
  65%  { opacity: 0;   transform: scale(1.45); }
  100% { opacity: 0;   transform: scale(1.45); }
}

/* Légende : le nom du domaine visé, et le lien qui y mène. Hauteur réservée
   pour que le hero ne tressaute pas quand le texte change. */
[data-page="home"] .compass-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.75rem auto 0;
  min-height: 3.2em;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: hsl(var(--white));
  text-decoration: none;
  transition: opacity 180ms var(--ease-out-quart),
              transform 180ms var(--ease-out-quart),
              color var(--duration);
}
[data-page="home"] .compass-caption.is-changing {
  opacity: 0;
  transform: translateY(6px);
}
[data-page="home"] .compass-caption-arrow {
  flex: none;
  opacity: 0.65;
  transition: transform var(--duration), opacity var(--duration);
}
[data-page="home"] .compass-caption:hover,
[data-page="home"] .compass-caption:focus-visible { color: #8FA8FF; }
[data-page="home"] .compass-caption:hover .compass-caption-arrow,
[data-page="home"] .compass-caption:focus-visible .compass-caption-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* ===== BOUSSOLE : aiguille =====
   L'aiguille n'est pas dans un lien : elle porte ses propres couleurs.
   Nord en blanc, sud en rouge de la charte.

   La rotation passe par le CSS et non par l'attribut transform, pour que la
   transition ci-dessous s'applique. Elle n'est armée qu'une fois l'oscillation
   d'arrivée terminée (classe posée par home.js) : sinon chaque image de
   l'oscillation serait elle-même transitionnée, et le mouvement deviendrait
   pâteux. ===== */
[data-page="home"] .needle-north { fill: hsl(var(--white) / 0.95); }
[data-page="home"] .needle-south { fill: #C8102E; }
[data-page="home"] .compass-needle-v2 {
  transform-box: view-box;
  transform-origin: 240px 240px;
}
[data-page="home"] .compass-ready .compass-needle-v2 {
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== CE QUE NOUS EXAMINONS ===== */
[data-page="home"] .pillars {
  padding: 5.5rem 0 5.5rem;
  background: hsl(var(--white));
}
[data-page="home"] .pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
@media (max-width: 1024px) {
  [data-page="home"] .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  [data-page="home"] .pillars-grid { grid-template-columns: 1fr; gap: 2rem; }
}
[data-page="home"] .pillar {
  position: relative;
  padding-top: 1.25rem;
  border-top: 2px solid hsl(var(--navy) / 0.12);
}
/* Le filet foncé, tracé par-dessus le filet clair */
[data-page="home"] .pillar::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 100%;
  height: 2px;
  background: hsl(var(--navy));
  transform-origin: left;
}
[data-page="home"] .pillar h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: hsl(var(--navy));
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
[data-page="home"] .pillar p {
  font-size: 0.95rem;
  line-height: var(--leading-relaxed);
  color: hsl(var(--slate));
  margin: 0;
}

/* ===== DOMAINES D'INTERVENTION ===== */
/* Le bandeau collant fait 81 px : sans cette marge, un saut d'ancre depuis le
   menu poserait le haut de la cible juste dessous, hors de vue. */
[data-page="home"] .expertises-section,
[data-page="home"] .expertise-tile {
  scroll-margin-top: 6rem;
}
[data-page="home"] .expertises-section {
  padding: 5.5rem 0 6rem;
  background: hsl(var(--mist));
  border-top: 1px solid hsl(var(--fog));
}
[data-page="home"] .expertises-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid hsl(var(--navy) / 0.2);
}
[data-page="home"] .expertise-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 3.5rem minmax(14rem, 22rem) 1fr auto;
  column-gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid hsl(var(--navy) / 0.2);
  text-decoration: none;
  color: inherit;
}
/* Fond blanc qui glisse sous la ligne au survol */
[data-page="home"] .expertise-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(var(--white));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--ease-out-quart);
}
[data-page="home"] .expertise-tile:hover::before,
[data-page="home"] .expertise-tile:focus-visible::before {
  transform: scaleX(1);
}
[data-page="home"] .expertise-num {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: hsl(var(--slate));
  font-variant-numeric: tabular-nums;
  transition: color var(--duration);
}
[data-page="home"] .expertise-tile:hover .expertise-num,
[data-page="home"] .expertise-tile:focus-visible .expertise-num {
  color: hsl(var(--electric));
}
[data-page="home"] .expertise-title {
  transition: color var(--duration);
}
[data-page="home"] .expertise-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--navy));
  margin: 0;
  line-height: 1.25;
}
[data-page="home"] .expertise-desc {
  font-size: 0.95rem;
  color: hsl(var(--slate));
  line-height: var(--leading-normal);
  margin: 0;
}
[data-page="home"] .expertise-cta {
  align-self: center;
  color: hsl(var(--navy));
  transition: transform var(--duration);
}
[data-page="home"] .expertise-tile:hover .expertise-title,
[data-page="home"] .expertise-tile:focus-visible .expertise-title {
  color: hsl(var(--electric));
}
[data-page="home"] .expertise-tile:hover .expertise-cta,
[data-page="home"] .expertise-tile:focus-visible .expertise-cta {
  color: hsl(var(--electric));
  transform: translateX(6px);
}
[data-page="home"] .expertise-tile:focus-visible { outline-offset: -2px; }
@media (max-width: 880px) {
  [data-page="home"] .expertise-tile {
    grid-template-columns: 2.5rem 1fr auto;
    row-gap: 0.4rem;
  }
  [data-page="home"] .expertise-num { grid-row: 1; }
  [data-page="home"] .expertise-title { grid-column: 2; grid-row: 1; }
  [data-page="home"] .expertise-desc { grid-column: 2; grid-row: 2; }
  [data-page="home"] .expertise-cta { grid-column: 3; grid-row: 1 / span 2; }
}

/* ===== TÉMOIGNAGES ===== */
[data-page="home"] .testimonials-section {
  padding: 5.5rem 0 6rem;
  background: hsl(var(--white));
}

/* Sur téléphone, la liste des domaines suit juste après : la boussole
   n'y apporterait qu'un dessin illisible. */
@media (max-width: 600px) {
  [data-page="home"] .compass-stage { display: none; }
}

/* ===== APPARITION AU DÉFILEMENT =====
   Les états cachés n'existent que sous .reveal-ready, posée par
   home.js : si le script ne tourne pas, rien n'est jamais masqué. */
.reveal-ready [data-page="home"] [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms var(--ease-out-quart),
              transform 650ms var(--ease-out-quart);
}
.reveal-ready [data-page="home"] [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
/* Le filet foncé des quatre points se trace après l'apparition du bloc */
.reveal-ready [data-page="home"] .pillar::before {
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out-quart);
  transition-delay: 200ms;
}
.reveal-ready [data-page="home"] .pillar.is-revealed::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-page="home"] .expertise-tile::before,
  [data-page="home"] .expertise-cta { transition: none; }
}

/* ===== BANDE BLEU NUIT : SECTION DES DOMAINES =====
   Contraste au milieu de la page. Le bloc contact qui suit passe en
   clair pour ne pas enchaîner trois zones sombres avec le pied de page. */
[data-page="home"] .expertises-section {
  background: hsl(var(--navy));
  border-top: 0;
}
[data-page="home"] .expertises-section .section-title { color: hsl(var(--white)); }
[data-page="home"] .expertises-section .section-intro { color: hsl(var(--white) / 0.72); }
[data-page="home"] .expertises-grid,
[data-page="home"] .expertise-tile { border-color: hsl(var(--white) / 0.18); }
[data-page="home"] .expertise-title,
[data-page="home"] .expertise-cta { color: hsl(var(--white)); }
[data-page="home"] .expertise-desc,
[data-page="home"] .expertise-num { color: hsl(var(--white) / 0.65); }
[data-page="home"] .expertise-tile::before { background: hsl(var(--white) / 0.06); }
[data-page="home"] .expertise-tile:hover .expertise-title,
[data-page="home"] .expertise-tile:focus-visible .expertise-title,
[data-page="home"] .expertise-tile:hover .expertise-cta,
[data-page="home"] .expertise-tile:focus-visible .expertise-cta,
[data-page="home"] .expertise-tile:hover .expertise-num,
[data-page="home"] .expertise-tile:focus-visible .expertise-num { color: #8FA8FF; }
[data-page="home"] .expertise-tile:focus-visible { outline-color: #8FA8FF; }

[data-page="home"] .cta {
  background: hsl(var(--mist));
  color: hsl(var(--ink));
  border-top: 1px solid hsl(var(--fog));
}
[data-page="home"] .cta .cta-title { color: hsl(var(--navy)); }
[data-page="home"] .cta .cta-body { color: hsl(var(--slate)); }
[data-page="home"] .cta .btn-outline-white {
  color: hsl(var(--navy));
  border-color: hsl(var(--navy) / 0.4);
}
[data-page="home"] .cta .btn-outline-white:hover {
  background: hsl(var(--navy));
  color: hsl(var(--white));
}