/* partenaires-hub : ex-bloc <style> de partenaires-hub-blueprint-light.php, source de vérité depuis le 09/09/2026 (plan poids-html-blueprint-light, lot 2). Tokens : var(--color-*) uniquement. */
/* ═══════════════════════════════════════════════════════════════════
   COUCHE D'ÉLÉVATION VISUELLE — HUB PARTENAIRES (premium 2026-07)
   100 % scopée .partenaires-hub-detail : AUCUN effet sur les pages qui
   réutilisent le template leaf expertise, le serpentin partagé ou les
   parts (secteurs, partenaires-catégories, personas, single-*).
   Vocabulaire calqué sur le hub expertises (ancre sombre navy, typo
   display, grands numéros watermark, eyebrow + ligne orange, cartes
   raffinées, micro-révélation au scroll). Tokens KYTOM uniquement
   (var(--color-*), color-mix, ombres noires rgba(0,0,0,α)).
   Règle de scoping absolue : tout sélecteur est préfixé .partenaires-hub-detail.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO — ancre sombre navy garantie (lisible avec ou sans photo) ──
   Le .exp-hero natif n'a aucun background-color : sans image curée, le
   H1 blanc tombait sur fond clair = illisible. On garantit le navy comme
   le fait .hero-expertises-light sur le hub expertises. */
.partenaires-hub-detail .exp-hero {
  background-color: var(--color-bleu);
}
/* Halo chaud discret en haut-droite (sous le contenu) : réchauffe le navy,
   écho à .exp-authority::after du hub expertises. Toujours actif, avec ou
   sans photo, pour donner de la profondeur à l'ancre sombre. */
.partenaires-hub-detail .exp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 84% -8%,
              color-mix(in srgb, var(--color-orange) 16%, transparent),
              transparent 56%);
}
/* Scrim navy bas : garantit la lisibilité du H1 par-dessus n'importe quelle
   photo hero (renforce le dégradé .exp-hero-overlay natif). */
.partenaires-hub-detail .exp-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
              color-mix(in srgb, var(--color-bleu) 78%, transparent) 0%,
              transparent 100%);
}

/* Grand numéro watermark : compte des profils partenaires (donnée dérivée,
   jamais un contenu inventé). Ancre le « N profils » dès le hero, en écho
   au serpentin qui suit. */
.partenaires-hub-detail .exp-hero-watermark {
  position: absolute;
  top: clamp(40px, 9vh, 96px);
  right: clamp(20px, 5vw, 80px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(170px, 26vw, 380px);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: var(--color-white);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* H1 — typo display : grande, légère, très serrée. Le geste éditorial premium
   (poids 300 + grande taille) signe la page dès l'above-the-fold. */
.partenaires-hub-detail .exp-hero-title {
  font-weight: var(--font-light);
  font-size: clamp(48px, 7.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 1000px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.22);
}

/* Index de scroll — ligne fine + libellé, sobre. Désactivé si reduced-motion. */
.partenaires-hub-detail .exp-scroll-cue {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: color-mix(in srgb, var(--color-white) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}
.partenaires-hub-detail .exp-scroll-cue__line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--color-white), transparent);
  transform-origin: top;
  animation: ph-scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes ph-scroll-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.9; }
  50%      { transform: scaleY(0.5); opacity: 0.4; }
}

/* ── INTRO — bandeau éditorial centré, règle orange, respiration ── */
.partenaires-hub-detail .exp-intro--cluster {
  padding: clamp(88px, 13vh, 156px) clamp(24px, 5vw, 80px);
  background: var(--color-white);
}
.partenaires-hub-detail .exp-intro--cluster .exp-intro-container {
  max-width: 860px;
}
.partenaires-hub-detail .exp-intro--cluster .exp-intro-lead-wrap {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.partenaires-hub-detail .exp-intro--cluster .exp-intro-lead-wrap::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto clamp(28px, 4vh, 40px);
  background: var(--color-orange);
}
.partenaires-hub-detail .exp-intro--cluster .exp-intro-lead-wrap p,
.partenaires-hub-detail .exp-intro--cluster .exp-intro-lead {
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  line-height: 1.62;
  color: var(--color-bleu);
  text-align: center;
}
.partenaires-hub-detail .exp-intro--cluster .exp-intro-lead-wrap p strong {
  color: var(--color-bleu);
  font-weight: 700;
}

/* ── SERPENTIN DES 5 PROFILS — cœur de navigation, mis en valeur ──
   Le partial partagé reste intact : on ne fait qu'amplifier le header et
   numéroter les cartes, exclusivement sous .partenaires-hub-detail. */
.partenaires-hub-detail .hub-clusters-serpentine {
  padding: clamp(96px, 14vh, 184px) 0;
  /* Filet navy haut + bas : cadrent la section comme une « galerie » dédiée. */
  border-top: 1px solid color-mix(in srgb, var(--color-bleu) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-bleu) 8%, transparent);
}
.partenaires-hub-detail .hub-clusters-serpentine__header {
  margin-bottom: clamp(64px, 9vh, 128px);
}
.partenaires-hub-detail .hub-clusters-serpentine__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
}
.partenaires-hub-detail .hub-clusters-serpentine__eyebrow::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--color-orange);
  display: inline-block;
  flex-shrink: 0;
}
/* Titre display : grand, poids léger, très serré = geste éditorial premium. */
.partenaires-hub-detail .hub-clusters-serpentine__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

/* Numérotation architecturale 01..05 des cartes : grande trace bleue très
   pâle posée dans la goutière libre (côté opposé à la photo). Renforce
   l'identité « 5 profils partenaires » sans alourdir la carte. Opt-in
   (partial) + scope (CSS) => invisible hors hub partenaires. */
.partenaires-hub-detail .hub-cluster-card__index {
  position: absolute;
  top: clamp(-6px, -1vh, 8px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(90px, 11vw, 168px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--color-bleu);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.partenaires-hub-detail .hub-cluster-card:nth-child(odd)  .hub-cluster-card__index { right: clamp(8px, 3vw, 48px); }
.partenaires-hub-detail .hub-cluster-card:nth-child(even) .hub-cluster-card__index { left:  clamp(8px, 3vw, 48px); }

/* Cartes raffinées : ombrage noir sobre au survol (jamais teinté). */
.partenaires-hub-detail .hub-cluster-card__media {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
.partenaires-hub-detail .hub-cluster-card__link:hover .hub-cluster-card__media {
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.17);
}
.partenaires-hub-detail .hub-cluster-card__title { font-weight: 600; }

/* ── NARRATIVE HUB — ancre sombre navy (casse le ruban pâle) ──
   Miroir de la section 03 « Cadre de référence » du hub expertises :
   fond navy, texte blanc, numéros/orange qui brillent. S'applique aux
   blocs teasers (+ FAQ si présente dans texte_exp) — contenu existant,
   jamais inventé. Si la narrative ne rend pas (pas de texte), aucune
   effet : hero + footer navy bookendent déjà la page. */
.partenaires-hub-detail .exp-narrative--hub {
  position: relative;
  background: var(--color-bleu);
  color: var(--color-white);
  padding: clamp(96px, 12vw, 172px) 0;
  overflow: hidden;
}
.partenaires-hub-detail .exp-narrative--hub::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 85% at 82% -10%,
              color-mix(in srgb, var(--color-orange) 14%, transparent),
              transparent 58%);
}
.partenaires-hub-detail .exp-narrative--hub .exp-intro-container { position: relative; z-index: 1; }

/* Filets séparateurs des blocs : passent en blanc translucide. */
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block,
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-blocks {
  border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
}
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block::before { background: var(--color-orange); }
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-orange) 8%, transparent) 0%, transparent 70%);
}

/* Numéros + eyebrows orange : conservés, ils brillent sur navy. */
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-num { color: var(--color-orange); }
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-eyebrow {
  color: var(--color-orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--color-orange);
  display: inline-block;
  flex-shrink: 0;
}
/* Titres + corps : basculent en blanc / blanc translucide. */
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block-title { color: var(--color-white); }
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block-body p,
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block-body ol li,
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block-body ul li,
.partenaires-hub-detail .exp-narrative--hub .exp-faq-answer {
  color: color-mix(in srgb, var(--color-white) 78%, transparent);
}
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block-body ol li strong,
.partenaires-hub-detail .exp-narrative--hub .exp-faq-question {
  color: var(--color-white);
}
.partenaires-hub-detail .exp-narrative--hub .exp-cluster-block-body ol li + li {
  border-top-color: color-mix(in srgb, var(--color-white) 12%, transparent);
}

/* ── MICRO-RÉVÉLATION au scroll (sobres) ──
   Gated par .ph-reveal (posé par un script inline head) : sans JS, aucun
   contenu masqué (progressive enhancement, zéro FOUC). */
.ph-reveal .partenaires-hub-detail .ph-reveal-el {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}
.ph-reveal .partenaires-hub-detail .ph-reveal-el.is-inview {
  opacity: 1;
  transform: none;
}
/* Stagger discret sur les blocs narrative uniquement.
   NB : on ne transforme PAS les cartes du serpentin — un translateY
   décalerait le getBoundingClientRect() des .hub-cluster-card__media et
   ferait sauter la géométrie du fil SVG (effet « trait décalé »). Le
   serpentin a déjà sa propre animation (scrub du fil au scroll). */
.ph-reveal .partenaires-hub-detail .exp-cluster-block.ph-reveal-el:nth-child(2) { transition-delay: 0.10s; }
.ph-reveal .partenaires-hub-detail .exp-cluster-block.ph-reveal-el:nth-child(3) { transition-delay: 0.20s; }

/* ── RESPONSIVE 375 ── */
@media (max-width: 768px) {
  .partenaires-hub-detail .exp-hero-title { font-size: clamp(38px, 11vw, 56px); }
  .partenaires-hub-detail .exp-hero-watermark {
    top: clamp(20px, 5vh, 40px);
    right: clamp(12px, 4vw, 24px);
    font-size: clamp(120px, 38vw, 200px);
  }
  .partenaires-hub-detail .exp-scroll-cue { display: none; }
  .partenaires-hub-detail .exp-intro--cluster { padding: clamp(64px, 14vw, 96px) 20px; }
  .partenaires-hub-detail .hub-clusters-serpentine { padding: clamp(64px, 14vw, 96px) 0; }
  .partenaires-hub-detail .hub-clusters-serpentine__title { font-size: clamp(2rem, 8vw, 2.6rem); }
  /* Numérotation cartes : plus discrète en mobile, recentrée au-dessus de la carte. */
  .partenaires-hub-detail .hub-cluster-card__index {
    top: -0.6em;
    font-size: clamp(64px, 20vw, 96px);
  }
  .partenaires-hub-detail .hub-cluster-card:nth-child(odd)  .hub-cluster-card__index,
  .partenaires-hub-detail .hub-cluster-card:nth-child(even) .hub-cluster-card__index { left: 0; right: auto; }
  .partenaires-hub-detail .exp-narrative--hub { padding: clamp(64px, 14vw, 96px) 0; }
}

/* ── PREFERS-REDUCED-MOTION ──
   Coupe le pulse du scroll cue, fige la révélation (contenu visible),
   neutralise les lévitations au survol. */
@media (prefers-reduced-motion: reduce) {
  .partenaires-hub-detail .exp-scroll-cue__line { animation: none; }
  .ph-reveal .partenaires-hub-detail .ph-reveal-el,
  .partenaires-hub-detail .ph-reveal-el {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}