/* ============================================================================
   Cas clients — node 2868:11171.
   Visuel à gauche, lecture à droite. Toute la carte est un lien.
   ========================================================================= */


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

/* ── Chapeau ───────────────────────────────────────────────────────────── */
.cas-clients__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.cas-clients__intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-40);
}

.cas-clients__intro h2 {
  inline-size: 62.05%; /* 824 / 1328 */
}

.cas-clients__lead {
  inline-size: 320px;
  max-inline-size: 100%;
  color: var(--c-ink-2);
}

/* ── Colonne de gauche : le compteur ───────────────────────────────────
   Il reste en tête de la pile de cartes, à 168 du bord — le décalage que la
   maquette donne à la colonne des cartes. */
.cas-clients__corps {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--sp-16);
}

/* Épinglé : le repère reste en vis-à-vis du listing pendant toute sa lecture.
   `align-self: start` le réduit à son contenu ; sans lui la cellule s'étirerait
   sur toute la hauteur de la rangée et il n'y aurait rien à épingler. Sa zone
   de grille, elle, garde la hauteur de la pile de cartes : c'est la course dont
   il dispose. */
.cas-clients__compte {
  position: sticky;
  inset-block-start: var(--sp-96);
  align-self: start;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--c-ink-2);
}

/* L'étoile tourne au survol du listing.
   Elle suivait le défilement de la section auparavant : sa vitesse était donc
   celle du geste, et il suffisait de descendre un peu vite pour qu'elle
   s'emballe et devienne illisible. Au survol, l'allure est la sienne et ne
   dépend plus de rien — un tour en quatre secondes, assez lent pour qu'on
   suive une branche des yeux.

   L'animation tourne en permanence mais reste EN PAUSE : quand le pointeur
   s'en va, l'étoile s'arrête où elle en est au lieu de revenir d'un coup à
   zéro, et le survol suivant repart de cette position. C'est ce qui remplace
   une transition — on ne peut pas interpoler vers « la rotation courante »
   sans la lire, alors qu'une pause la garde d'elle-même.

   Plus rien n'est calculé en JavaScript : la boucle qui lisait la position de
   la section à chaque image a disparu avec le défilement. */
.cas-clients__croix {
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  animation: cas-etoile 4s linear infinite;
  animation-play-state: paused;
}

/* Le survol vaut pour toute la zone du listing, repère compris : l'étoile
   appartient à la lecture des cartes, pas au titre qui les précède. Le focus
   compte autant — les cartes sont des liens, et on peut les parcourir au
   clavier. */
.cas-clients__corps:hover .cas-clients__croix,
.cas-clients__corps:focus-within .cas-clients__croix {
  animation-play-state: running;
}

@keyframes cas-etoile {
  to {
    rotate: 360deg;
  }
}

.cas-clients__liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-96);
  list-style: none;
}

/* ── La carte ──────────────────────────────────────────────────────────
   Un seul lien : tout le bloc mène au cas client. La grille tient les deux
   colonnes, 656 pour le visuel et le reste pour la lecture. */
.cas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 656fr) minmax(0, 488fr);
  gap: var(--sp-16);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

/* Le fond de survol déborde de 8 px sur les quatre côtés plutôt que de rogner
   la carte : la maquette le montre en rembourrage, mais ce serait 16 px de
   contenu en moins au survol, donc un décalage à chaque passage de souris. */
.cas::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--sp-8));
  z-index: -1;
  border-radius: var(--r-card);
  background: rgb(var(--c-brown-rgb) / 0.04);
  opacity: 0;
  /* Le fond « se pose » : il part un peu plus petit et grossit jusqu'à ses
     8 px de débord en s'allumant. Seuls transform et opacity bougent. À la
     sortie il se retire plus vite qu'il n'est venu. */
  transform: scale(0.965);
  transition:
    opacity 220ms var(--e-out),
    transform 280ms var(--e-out);
}

.cas:hover::before,
.cas:focus-visible::before {
  opacity: 1;
  transform: none;
  transition:
    opacity 360ms var(--e-out),
    transform 560ms var(--e-out);
}

@media (prefers-reduced-motion: reduce) {
  .cas::before,
  .cas:hover::before,
  .cas:focus-visible::before {
    transform: none;
    transition-duration: 120ms;
  }
}

.cas:focus-visible {
  outline: 2px solid var(--c-brown);
  outline-offset: 10px;
}

/* ── Visuel ────────────────────────────────────────────────────────────── */
.cas__visuel {
  position: relative;
  margin: 0;
  aspect-ratio: 656 / 492;
  border-radius: var(--r-lg);
  overflow: clip;
  background: var(--c-cream-deep);
}

.cas__visuel img:not(.cas__apercu) {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* L'aperçu animé (vidéo, GIF ou WebP animé) est une fenêtre posée par-dessus la
   photo, jamais plein cadre : 400 × 240 dans le visuel de 656 × 492, à 128 du
   bord gauche et 126 du haut (maquette de Stellar). Invisible tant qu'il n'a
   pas de quoi jouer : si le fichier manque ou tarde, la photo reste seule. */
.cas__apercu {
  position: absolute;
  inset-inline-start: calc(128 / 656 * 100%);
  inset-block-start: calc(126 / 492 * 100%);
  inline-size: calc(400 / 656 * 100%);
  block-size: calc(240 / 492 * 100%);
  border-radius: var(--r-xs);
  box-shadow: 0 12px 32px rgb(42 36 35 / 0.25);
  object-fit: cover;
  object-position: top;
  opacity: 0;
  scale: 0.96;
  transition:
    opacity var(--d-enter) var(--e-out),
    scale var(--d-enter) var(--e-out);
}

.cas__apercu[data-prete] {
  opacity: 1;
  scale: 1;
}

.cas__tags {
  position: absolute;
  inset-block-start: var(--sp-8);
  inset-inline-start: var(--sp-8);
  display: flex;
  gap: var(--sp-6);
}

/* ── Colonne de lecture ────────────────────────────────────────────────
   `space-between` : l'identité en haut, le panneau collé en bas, quelle que
   soit la hauteur du texte. C'est ce qui aligne les trois panneaux. */
.cas__texte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-40);
}

.cas__entete {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding-block-start: var(--sp-8);
}

.cas__rang {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  padding: var(--sp-8);
  background: var(--c-label);
  color: var(--c-cream);
  text-transform: uppercase;
}

/* La barre oblique n'est qu'un séparateur : elle ne doit pas peser autant que
   les chiffres qu'elle sépare. */
.cas__rang span {
  opacity: 0.4;
}

.cas__nom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  color: var(--c-brown);
}

.cas__nom > * {
  text-box: trim-both cap alphabetic;
}

.cas__role {
  opacity: 0.2;
}

/* ── Panneau : statistique en orange, information en crème foncée ─────── */
.cas__panneau {
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  padding: var(--sp-24);
  border-radius: var(--r-lg);
  overflow: clip;
}

.cas__panneau[data-ton="stat"] {
  background: var(--c-orange);
  color: var(--c-cream);
}

.cas__panneau[data-ton="info"] {
  background: var(--c-cream-deep);
  color: var(--c-brown);
}

.cas__etiquette {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
}

/* L'étiquette reprend le libellé du chip mais pas son fond : chaque ton a le
   sien — orange foncé sur l'orange, gris sur le crème. */
.cas__panneau .chip__label {
  color: var(--c-cream);
}

.cas__panneau[data-ton="stat"] .chip__label {
  background: var(--c-orange-mid);
}

.cas__panneau[data-ton="info"] .chip__label {
  background: var(--c-grey);
}

.cas__mesure {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}

.cas__mesure-texte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cas__precision {
  /* 80 % dans les deux tons : la maquette nomme ce niveau « secondaire », mais
     lui donne ici 0.8 là où le bloc sombre utilise 0.6. Valeur du nœud. */
  opacity: 0.8;
}

/* Texte d'accompagnement sous la statistique : détaché de la mesure par un
   espace plus franc. */
.cas__detail {
  padding-block-start: var(--sp-16);
}

.cas__panneau[data-ton="stat"] .dot {
  background: var(--c-orange-mid);
}

.cas__panneau[data-ton="info"] .dot {
  background: var(--c-grey);
}

/* ── Repli ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cas-clients .shell {
    gap: var(--sp-40);
  }

  .cas-clients__intro {
    flex-direction: column;
    gap: var(--sp-24);
  }

  .cas-clients__intro h2 {
    inline-size: 100%;
  }

  .cas-clients__corps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-24);
  }

  /* En colonne unique le repère passe au-dessus du listing : l'épingler
     n'aurait plus de sens, il se collerait par-dessus les cartes. */
  .cas-clients__compte {
    position: static;
  }

  .cas-clients__liste {
    gap: var(--sp-56);
  }

  .cas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-24);
  }

  .cas__texte {
    gap: var(--sp-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cas::before,
  .cas__apercu {
    transition-duration: 120ms;
  }

  /* Une rotation sans fin est exactement ce dont on ne veut pas ici. */
  .cas-clients__croix {
    animation: none;
  }
}