/* ============================================================================
   Bloc sombre — section « Secteurs ».
   Node Figma 2868:12456. La liste réagit au survol : une vague suit le
   pointeur de haut en bas, chaque titre s'éclaircit et se décale au passage.
   ========================================================================= */


.sectors {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}

/* ── Chapeau ───────────────────────────────────────────────────────────── */
.sectors__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-40);
}

.sectors__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  inline-size: 74.7%; /* 992 / 1328 */
}

.sectors__title {
  color: var(--c-cream);
}

/* Le chapeau est une boîte de 488 alignée à gauche de la colonne, sous le
   titre. Le `justify-end` de la maquette ne concerne que l'intérieur de cette
   boîte, pas son placement — je l'avais d'abord lu comme un alignement à
   droite de la colonne entière. */
.sectors__lede {
  inline-size: 30.5rem; /* 488 */
  max-inline-size: 100%;
  color: var(--c-ink-inv-2);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* ── Corps ─────────────────────────────────────────────────────────────── */
.sectors__body {
  display: flex;
  align-items: stretch;
  gap: var(--sp-16);
}

.sectors__card {
  /* Géométrie d'un cran de bande. Déclarée ICI, sur l'ancêtre commun : la
     fenêtre l'utilise autant que la bande, et une propriété posée sur la bande
     ne remonterait pas jusqu'à elle.

     Le cran est plus haut que la marque : sans cet écart les logos se
     toucheraient bord à bord pendant la course, et le passage se lirait comme
     un glissement continu au lieu d'un cran à l'autre. La substitution étant
     paresseuse, `--reel-cell` se recalcule tout seul là où la légende redéfinit
     ses deux termes. */
  --reel-logo: 9.5rem; /* 152 : la hauteur des marques dans la maquette */
  --reel-gap: 3rem; /* respiration de part et d'autre */
  --reel-cell: calc(var(--reel-logo) + var(--reel-gap));

  position: relative;
  flex: none;
  inline-size: 20rem; /* 320 */
  background: var(--c-brown-light);
  border-radius: var(--r-sm);
  overflow: clip;
}

/* Les marques sont empilées et ne changent que d'opacité : le passage d'un
   secteur à l'autre se fait en fondu, sans rien charger au vol. */
/* ── Le bandeau de logos ────────────────────────────────────────────────
   Les sept marques sont empilées en colonne et la carte n'en montre qu'une :
   passer de l'une à l'autre, c'est faire défiler la bande. Le mouvement porte
   donc l'information — on voit d'où l'on vient et où l'on va — là où un fondu
   croisé se contentait de substituer.

   Une seule variable commande les deux bandes, `--i`, l'indice du secteur sous
   la crête de la vague. */
.sectors__window {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 12rem;
  block-size: var(--reel-cell);
  overflow: clip;
}

.sectors__reel {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  /* La course accélère puis décélère : la bande démarre lentement, file, et
     se pose. C'est ce qui donne le geste, une translation linéaire glisserait
     sans caractère. */
  transform: translate3d(0, calc(var(--i, 0) * -1 * var(--reel-cell)), 0);
  transition: transform var(--d-acc) var(--e-inout);
}

.sectors__cell {
  flex: none;
  display: grid;
  place-items: center;
  block-size: var(--reel-cell);
}

.sectors__mark {
  /* Les sept marques ont des rapports différents : on cale la hauteur, la
     largeur suit. Une boîte carrée en écraserait certaines. */
  inline-size: auto;
  block-size: var(--reel-logo);
  max-inline-size: 100%;
}

/* ── Le nom du client ───────────────────────────────────────────────────
   Même mécanique, un cran à sa mesure : la ligne de texte. */
.sectors__caption {
  --reel-logo: 1.2em; /* l'interligne du style Label/Tag */
  --reel-gap: 0.9em;
  --reel-cell: calc(var(--reel-logo) + var(--reel-gap));

  position: absolute;
  inset-block-end: var(--sp-12);
  inset-inline-start: var(--sp-12);
  inline-size: calc(100% - 2 * var(--sp-12));
  block-size: var(--reel-cell);
  overflow: clip;
  color: var(--c-cream);
  opacity: 0.4;
  text-transform: uppercase;
}

.sectors__name {
  display: flex;
  align-items: center;
  block-size: var(--reel-cell);
  white-space: nowrap;
}


/* ── Liste ─────────────────────────────────────────────────────────────── */
.sectors__list {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Deux variables pilotent chaque ligne, posées par le script :
   `--w` est l'amplitude de la vague à cet endroit (0 → 1). Tout en découle,
   ce qui garantit que l'opacité et le décalage restent solidaires. */
.sectors__item {
  --w: 0;

  display: block;
  color: var(--c-cream);
  white-space: nowrap;
  opacity: calc(0.2 + 0.8 * var(--w));
  transform: translate3d(calc(var(--sectors-shift, 16px) * var(--w)), 0, 0);
  will-change: opacity, transform;
}

/* ── Repli ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .sectors__head {
    flex-direction: column;
    gap: var(--sp-32);
  }

  .sectors__intro {
    inline-size: 100%;
  }

  .sectors__item {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .sectors__body {
    flex-direction: column;
  }

  .sectors__card {
    inline-size: 100%;
    block-size: 14rem;
  }
}

/* En mouvement réduit, la vague ne se déplace plus : chaque ligne garde
   l'amplitude figée que le script lui a posée une fois pour toutes. */
@media (prefers-reduced-motion: reduce) {
  .sectors__item {
    transform: none;
    will-change: auto;
  }
}