/* ENDURIA — Sous-hero : Tools (rayures + marquee) + Benef (flickering grid + stats).
   Remplace l'ancienne .proof (BRIEF_SECTION_SOUS_HERO).
   Marquee garde ses styles d'origine plus bas dans ce fichier — on ne change pas son comportement. */

/* ============ SECTION TOOLS — label centré, puis marquee + rayures sur UNE MÊME LIGNE ============
   Label sorti au-dessus (dans une flex column). Les stripes sont dans .tools__row
   avec le marquee → elles ne couvrent QUE la hauteur de la bande de logos, plus le label. */
.tools {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2vh, 1.2rem);
}
.tools__row {
  width: 100%;
  display: grid;
  /* 3 colonnes : rayures gauche | marquee (largeur contrainte) | rayures droite */
  grid-template-columns: 1fr min(680px, 92vw) 1fr;
  align-items: stretch;
}

/* Striped Pattern — repeating-linear-gradient en diagonale -45°. Couleur via --line-2
   → s'adapte dark/light automatiquement. Hauteur = hauteur du marquee (align-items:
   stretch sur .tools__row) → plus de débordement sur le label. */
.tools__stripe {
  align-self: stretch;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    var(--line-2) 5px 6px
  );
}
/* Fade vers le centre : opaque au bord écran, transparent vers le centre. */
.tools__stripe--left {
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 100%);
}
.tools__stripe--right {
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 100%);
}

/* Le .marquee est directement dans .tools__row (colonne du milieu). min-width:0
   sur le marquee est déjà géré dans son propre bloc plus bas. */

/* Label : Geist Regular 16, gris secondaire, centré. Sorti au-dessus des stripes. */
.tools__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--fog);
  text-align: center;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 38ch;
  padding-inline: clamp(0.5rem, 2vw, 1rem);
}

@media (max-width: 768px) {
  .tools { padding-inline: 4vw; }
  .tools__row { grid-template-columns: 1fr; }
  .tools__stripe { display: none; }
  .tools__label { font-size: 0.95rem; }
}

/* ============ SECTION BENEF — 4 stats sur flickering grid en filigrane ============ */
.benef {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vh, 4rem);
}
.benef__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Mask vertical : on adoucit les bords haut/bas pour intégrer aux sections voisines. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.benef__inner {
  position: relative; /* au-dessus du canvas */
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
  /* justify-items: center → chaque bloc .benef__stat est centré horizontalement
     dans sa cellule (1fr large). Résultat : marges symétriques entre les 4 blocs,
     ensemble parfaitement équilibré dans le container. */
  justify-items: center;
}
.benef__stat {
  text-align: left;
}
.benef__stat .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
}
.benef__stat .lab {
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--fog);
  max-width: 22ch;
}
@media (max-width: 768px) {
  .benef { padding-inline: 4vw; }
  .benef__inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
  .benef__stat .lab { max-width: 100%; } /* override 22ch — peut couper en 2-col étroit */
}
@media (max-width: 480px) {
  /* Très petit : 1 colonne, centré pour respiration */
  .benef__inner { grid-template-columns: 1fr; gap: 1.1rem; }
  .benef__stat { text-align: center; }
  .benef__stat .lab { margin-inline: auto; }
}

/* ============ Marquee (inchangé — réutilisé par .tools) ============ */
.marquee {
  overflow: hidden;
  width: 100%;
  min-width: 0; /* bloque l'expansion par .marquee__track (width: max-content) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-primary);
  transition: color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.marquee__item svg { width: 20px; height: 20px; flex-shrink: 0; }
.marquee__item img { height: 22px; width: auto; flex-shrink: 0; display: block; }
/* Klaviyo : logo officiel noir → invisible sur fond dark. On le force en blanc en dark
   (data-theme par défaut = pas d'attribut). En light il reste noir natif. */
.marquee__item img[src*="klaviyo"] { filter: brightness(0) invert(1); }
[data-theme="light"] .marquee__item img[src*="klaviyo"] { filter: none; }
.marquee__item:hover { color: var(--text-primary); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}