/* parts-hub-expertises-poles-matrix : ex-bloc <style> de hub-expertises-poles-matrix.php, source de vérité depuis le 09/09/2026 (plan poids-html-blueprint-light, lot 2). Tokens : var(--color-*) uniquement. */
/* === Hub Expertises — Matrice des 4 pôles avec serpentin SVG et L2 satellites === */
.hub-expertises-poles{position:relative;padding:clamp(80px,12vh,160px) 0;background:var(--color-beige);color:var(--color-bleu);overflow:hidden;width:100%}
.hub-expertises-poles__container{max-width:none;width:100%;margin:0;padding:0 clamp(32px,6vw,120px);position:relative;box-sizing:border-box}
.hub-expertises-poles__header{margin:0 auto clamp(48px,8vh,96px);text-align:center;max-width:780px}
/* Eyebrow + filet orange (ancre le H2 au grand numéro, cohérent avec le tour 1) */
.hub-expertises-poles__eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-orange);margin-bottom:16px}
.hub-expertises-poles__eyebrow::before{content:'';width:26px;height:2px;background:var(--color-orange);display:inline-block;flex-shrink:0}
.hub-expertises-poles__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.25rem);font-weight:var(--font-bold);line-height:1.06;letter-spacing:-.025em;margin:0;color:var(--color-bleu);max-width:20ch;margin-left:auto;margin-right:auto}

/* Wrap qui positionne le fil conducteur SVG en absolu derrière les cards */
.hub-expertises-poles__list-wrap{position:relative}
.hub-expertises-poles__trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:block;overflow:visible}
/* Fil déroulant lisible : guide pointillé navy (blueprint) + progress orange pleine.
   Le guide trace le parcours prévu, l'orange trace la progression au scroll. */
.hub-expertises-poles__trail-bg{fill:none;stroke:var(--color-bleu);stroke-width:1.5;stroke-dasharray:2 7;stroke-linecap:round;opacity:.22;stroke-linejoin:round}
.hub-expertises-poles__trail-fg{fill:none;stroke:var(--color-orange);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.hub-expertises-poles__nodes .node-pulse{fill:none;stroke:var(--color-orange);stroke-width:1;transform-origin:center;transform-box:fill-box;animation:kt-expert-pulse 4.5s ease-out infinite}
.hub-expertises-poles__nodes .node-pulse.n1{animation-delay:0s}
.hub-expertises-poles__nodes .node-pulse.n2{animation-delay:1.5s}
.hub-expertises-poles__nodes .node-pulse.n3{animation-delay:3s}
.hub-expertises-poles__nodes .node-outer{fill:var(--color-beige);stroke:var(--color-orange);stroke-width:1.75}
.hub-expertises-poles__nodes .node-core{fill:var(--color-orange)}
@keyframes kt-expert-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.hub-expertises-poles__nodes .node-pulse{animation:none;opacity:0}}

/* Liste des pôles L1 (cards 60% alternées) */
.hub-expertises-poles__list{list-style:none;padding:clamp(80px,10vh,140px) 0 0;margin:0;display:grid;grid-template-columns:1fr;gap:clamp(96px,12vh,160px);position:relative;z-index:1}
.hub-expertises-pole{position:relative;z-index:1}
.hub-expertises-pole__inner{display:grid;grid-template-columns:1fr;gap:24px;width:60%;position:relative}
.hub-expertises-pole:nth-child(odd) .hub-expertises-pole__inner{margin-left:0;margin-right:auto}
.hub-expertises-pole:nth-child(even) .hub-expertises-pole__inner{margin-left:auto;margin-right:0}

/* Trailhead : dot orange origine du fil (1ère card uniquement), halo chaud discret */
.hub-expertises-pole__link::before{content:'';position:absolute;top:-32px;width:14px;height:14px;border-radius:50%;background:var(--color-orange);border:3px solid var(--color-beige);z-index:2;box-shadow:0 0 0 1px color-mix(in srgb,var(--color-orange) 30%,transparent),0 0 0 7px color-mix(in srgb,var(--color-orange) 9%,transparent)}
.hub-expertises-pole:nth-child(odd) .hub-expertises-pole__link::before{right:-30px}
.hub-expertises-pole:nth-child(even) .hub-expertises-pole__link::before{left:-30px}
.hub-expertises-pole:nth-child(n+2) .hub-expertises-pole__link::before{display:none}

.hub-expertises-pole__link{display:grid;grid-template-columns:1fr;gap:0;text-decoration:none;color:inherit;position:relative}
/* Media = plaque photo surélevée (ombres noires en couches, bloom au survol) */
.hub-expertises-pole__media{position:relative;overflow:hidden;background:var(--color-bleu);border-radius:3px;aspect-ratio:var(--cards-aspect,16/9);box-shadow:0 26px 52px -24px rgba(0,0,0,.34),0 8px 18px -10px rgba(0,0,0,.18);transition:box-shadow .55s cubic-bezier(.16,.84,.44,1)}
.hub-expertises-pole__media :is(img,picture){display:block;width:100%;height:100%}
.hub-expertises-pole__media picture img{object-fit:cover;transition:transform 1.4s cubic-bezier(.16,.84,.44,1)}
.hub-expertises-pole__link:hover .hub-expertises-pole__media{box-shadow:0 38px 70px -26px rgba(0,0,0,.4),0 12px 24px -12px rgba(0,0,0,.22)}
.hub-expertises-pole__link:hover .hub-expertises-pole__media img{transform:scale(1.04)}
.hub-expertises-pole__image--placeholder{background:linear-gradient(135deg,var(--color-bleu-dark) 0%,var(--color-bleu) 100%);width:100%;height:100%;aspect-ratio:var(--cards-aspect,16/9)}

/* Chip code L1 sur la photo (haut-gauche) — identifier technique épuré */
.hub-expertises-pole__badge{position:absolute;top:14px;left:14px;padding:6px 11px;background:color-mix(in srgb,var(--color-white) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:2px;z-index:3;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;font-weight:600;color:var(--color-bleu);text-transform:uppercase;box-shadow:0 4px 14px -5px rgba(0,0,0,.28)}

/* Corps éditorial : grand numéro de pôle (orange, index du parcours) + titre + méta */
.hub-expertises-pole__body{padding:20px 4px 0}
.hub-expertises-pole__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.hub-expertises-pole__index{font-family:var(--font-display);font-size:clamp(1.9rem,2.8vw,2.6rem);font-weight:var(--font-bold);color:var(--color-orange);line-height:.9;letter-spacing:-.04em;flex-shrink:0;font-variant-numeric:tabular-nums}
.hub-expertises-pole__title{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2rem);font-weight:var(--font-bold);line-height:1.1;letter-spacing:-.02em;color:var(--color-bleu);margin:0}
.hub-expertises-pole__count{margin:10px 0 0;display:inline-flex;align-items:baseline;gap:7px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:color-mix(in srgb,var(--color-bleu) 60%,transparent)}
.hub-expertises-pole__count-num{font-family:var(--font-display);font-size:1.05rem;font-weight:var(--font-bold);color:var(--color-bleu);font-variant-numeric:tabular-nums}

/* CTA rond Kytom en overlay sur la photo, révélé au hover */
.hub-expertises-pole__cta-circle{position:absolute;top:50%;left:50%;width:64px;height:64px;border-radius:50%;background:var(--color-orange);border:none;display:inline-flex;align-items:center;justify-content:center;color:var(--color-white);opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .45s cubic-bezier(.16,.84,.44,1),transform .55s cubic-bezier(.16,.84,.44,1);pointer-events:none;z-index:3;box-shadow:0 12px 30px -8px rgba(242,126,51,.55)}
.hub-expertises-pole__cta-circle svg{width:20px;height:20px}
.hub-expertises-pole__media::after{content:'';position:absolute;inset:0;background:rgba(13,40,87,0);transition:background .45s cubic-bezier(.16,.84,.44,1);pointer-events:none;z-index:2}
.hub-expertises-pole__link:hover .hub-expertises-pole__media::after{background:rgba(13,40,87,.34)}
.hub-expertises-pole__link:hover .hub-expertises-pole__cta-circle{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Grille L2 = index éditorial : lignes à filets navy, accent orange au survol
   (barre gauche + flèche), remplace les étiquettes-tiles d'origine. */
.hub-expertises-pole__satellites{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:0}
.hub-expertises-l2{display:flex;align-items:center;gap:14px;padding:14px 4px;background:transparent;border:none;border-bottom:1px solid color-mix(in srgb,var(--color-bleu) 10%,transparent);text-decoration:none;color:inherit;position:relative;transition:padding-left .32s cubic-bezier(.16,.84,.44,1),border-color .3s ease}
.hub-expertises-l2::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--color-orange);transform:scaleY(0);transform-origin:center;transition:transform .35s cubic-bezier(.16,.84,.44,1)}
.hub-expertises-l2:hover{padding-left:12px;border-bottom-color:color-mix(in srgb,var(--color-orange) 45%,transparent)}
.hub-expertises-l2:hover::before{transform:scaleY(1)}
.hub-expertises-l2:focus-visible{outline:2px solid var(--color-orange);outline-offset:4px;border-radius:2px}
.hub-expertises-l2__index{display:flex;flex-direction:column;gap:3px;min-width:40px;flex-shrink:0}
.hub-expertises-l2__num{font-family:var(--font-display);font-size:1.1rem;font-weight:var(--font-bold);color:var(--color-bleu);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hub-expertises-l2__code{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;font-weight:600;color:var(--color-orange);text-transform:uppercase}
.hub-expertises-l2__title{margin:0;font-family:var(--font-body);font-size:.95rem;font-weight:var(--font-semibold);line-height:1.3;color:var(--color-bleu);flex:1}
.hub-expertises-l2__arrow{width:14px;height:14px;flex-shrink:0;color:var(--color-orange);opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s cubic-bezier(.16,.84,.44,1)}
.hub-expertises-l2:hover .hub-expertises-l2__arrow{opacity:1;transform:translateX(0)}

/* Micro-révélation OPACITY-ONLY (path-safe : aucun transform sur les medias →
   getBoundingClientRect inchangé, le calcul du serpentin reste exact). Cascade
   media → body → satellites. prefers-reduced-motion = révélé sans transition. */
.hub-expertises-poles .hub-reveal{opacity:0;transition:opacity .85s cubic-bezier(.16,.84,.44,1)}
.hub-expertises-poles .hub-reveal.is-inview{opacity:1}
.hub-expertises-poles__header.hub-reveal{transition-delay:0s}
.hub-expertises-pole__media.hub-reveal{transition-delay:.05s}
.hub-expertises-pole__body.hub-reveal{transition-delay:.16s}
.hub-expertises-pole__satellites.hub-reveal{transition-delay:.26s}
@media (prefers-reduced-motion:reduce){.hub-expertises-poles .hub-reveal{opacity:1!important;transition:none!important}}

@media (max-width:768px){
  .hub-expertises-poles{padding:clamp(48px,8vh,80px) 0}
  .hub-expertises-poles__list{gap:64px;padding-top:48px}
  .hub-expertises-poles__trail{display:none}
  .hub-expertises-pole__link::before{display:none}
  .hub-expertises-pole__inner,
  .hub-expertises-pole:nth-child(odd) .hub-expertises-pole__inner,
  .hub-expertises-pole:nth-child(even) .hub-expertises-pole__inner{width:100%;margin:0}
  .hub-expertises-pole__satellites{grid-template-columns:1fr;column-gap:0}
  .hub-expertises-pole__index{font-size:clamp(1.7rem,6vw,2.1rem)}
  .hub-expertises-pole__media{box-shadow:0 18px 36px -20px rgba(0,0,0,.3),0 6px 14px -8px rgba(0,0,0,.16)}
}