/* ================================================================
   Bande logos clients — jeu monochrome normalisé
   ----------------------------------------------------------------
   Deux présentations partagent le même jeu de logos :
     .logo-band     : grille statique qui passe à la ligne
     .logo-marquee  : bandeau déroulant en boucle
   Chaque SVG est calibré dans une boîte de hauteur 100 ; --w porte
   la largeur de cette boîte, d'où se déduit la largeur d'affichage.
   Les SVG sont appliqués en masque : la couleur vient d'ici, pas
   des fichiers (un <img> n'hériterait pas de currentColor).

   Les mesures (--lb-h, --lb-gap, --lb-speed) sont des NOMBRES PURS,
   pas des longueurs : la durée de la boucle s'en déduit par calc(),
   donc changer la hauteur garde la vitesse de défilement constante.
   ================================================================ */

/* Les réglages sont posés sur :root, pas sur le composant : une variable
   déclarée sur .logo-marquee lui-même l'emporterait sur celle d'un
   conteneur de thème parent, et l'habillage n'aurait aucun effet. */
:root{
  --lb-h: 34;              /* hauteur des logos, en px */
  --lb-gap: 56;            /* espace entre deux logos, en px */
  --lb-speed: 38;          /* vitesse de défilement, en px/s */
  --lb-count: 15;             /* nombre de logos dans une copie */
  --lb-sum-w: 3435.1;        /* somme des largeurs de boîte */
  --lb-ink: #16243D;       /* teinte des logos */
  --lb-opacity: .62;
}

/* ---------- un logo ---------- */
.lb{
  flex:0 0 auto;
  height:calc(var(--lb-h) * 1px);
  width:calc(var(--lb-h) * var(--w) / 100 * 1px);
  background-color:var(--lb-ink);
  opacity:var(--lb-opacity);
  transition:opacity .25s ease;
  -webkit-mask:var(--src) center/contain no-repeat;
          mask:var(--src) center/contain no-repeat;
}

/* ---------- présentation statique ---------- */
.logo-band{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:calc(var(--lb-gap) * .5px) calc(var(--lb-gap) * 1px);
  padding:26px 40px;
}
.logo-band .lb:hover{ opacity:1; }

/* ---------- présentation déroulante ---------- */
.logo-marquee{
  position:relative;
  overflow:hidden;
  padding:26px 0;
  /* Fondu des deux bords. La largeur du fondu doit dépasser celle du PLUS LARGE
     logo, sinon celui-ci est entièrement masqué par le bord avant d'avoir fini
     de s'effacer : il paraît coupé net, pas fondu. À 7 % on avait 80 px de
     fondu pour un logo de 160 px — d'où l'impression de logos tranchés aux
     deux extrémités. 15 % laisse la marge nécessaire. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.logo-marquee__track{
  display:flex; align-items:center;
  width:max-content;
  /* une copie fait (somme des largeurs + un gap par logo) ; l'animation
     parcourt exactement cette distance, d'où une boucle sans saut. */
  animation:lb-scroll
    calc((var(--lb-sum-w) * var(--lb-h) / 100 + var(--lb-gap) * var(--lb-count))
         / var(--lb-speed) * 1s)
    linear infinite;
  will-change:transform;
}
/* marge par logo plutôt que gap flex : sinon la 2e copie n'est pas
   à exactement 50 % et la boucle saute d'un demi-espace. */
.logo-marquee__track .lb{ margin-right:calc(var(--lb-gap) * 1px); }

@keyframes lb-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.logo-marquee:hover .logo-marquee__track{ animation-play-state:paused; }
.logo-marquee:hover .lb{ opacity:calc(var(--lb-opacity) + .18); }

/* ---------- eyebrow ---------- */
.lb-eyebrow{
  display:block; text-align:center;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--lb-ink); opacity:.55; margin-bottom:18px;
}

/* ================= habillage DA Kokoro 2026 ================= */
.lb-theme-kokoro{
  --lb-ink:#000;
  --lb-opacity:.8;
  background:#EDEADD;                 /* Soft Canvas */
  /* Le haut est droit, le bas arrondi : la bande vient se poser SOUS le hero
     et s'y raccorde bord à bord. Arrondie aux quatre coins, elle décrochait
     du bloc au-dessus et laissait deux encoches visibles. */
  border-radius:0 0 32px 32px;
  padding:34px 0 38px;
}
.lb-theme-kokoro .lb-eyebrow{
  font-family:'Sen', system-ui, sans-serif;
  font-weight:500; opacity:.6;
}
.lb-theme-kokoro .logo-marquee{ padding:20px 0 6px; }

/* ============== habillage site actuel (glass) ============== */

/* ---------- adaptations ---------- */
@media (max-width:900px){ .logo-band, .logo-marquee{ --lb-h:28; --lb-gap:40; } }
@media (max-width:560px){ .logo-band, .logo-marquee{ --lb-h:24; --lb-gap:32; } }
@media (prefers-contrast: more){ .logo-band, .logo-marquee{ --lb-opacity:.92; } }

/* Mouvement réduit : le bandeau redevient une grille statique. */
@media (prefers-reduced-motion: reduce){
  .logo-marquee{ -webkit-mask-image:none; mask-image:none; }
  .logo-marquee__track{
    animation:none; width:auto;
    flex-wrap:wrap; justify-content:center;
    row-gap:calc(var(--lb-gap) * .5px);
  }
  .logo-marquee__track [aria-hidden="true"]{ display:none; }
}

/* ---------- un réglage par logo ---------- */
.lb--chateauform{ --w:470; --src:url(/assets/logos/mono/chateauform.svg); }
.lb--homebox{ --w:77.23; --src:url(/assets/logos/mono/homebox.svg); }
.lb--rousselet{ --w:120.55; --src:url(/assets/logos/mono/rousselet.svg); }
.lb--derbi{ --w:292.03; --src:url(/assets/logos/mono/derbi.svg); }
.lb--rebelle{ --w:177.95; --src:url(/assets/logos/mono/rebelle.svg); }
.lb--assemble{ --w:273.28; --src:url(/assets/logos/mono/assemble.svg); }
.lb--curiosity{ --w:180.6; --src:url(/assets/logos/mono/curiosity.svg); }
.lb--spendesk{ --w:273.03; --src:url(/assets/logos/mono/spendesk.svg); }
.lb--buro{ --w:181.28; --src:url(/assets/logos/mono/buro.svg); }
.lb--affective{ --w:265.86; --src:url(/assets/logos/mono/affective.svg); }
.lb--wba{ --w:204.33; --src:url(/assets/logos/mono/wba.svg); }
.lb--onemice{ --w:260.97; --src:url(/assets/logos/mono/onemice.svg); }
.lb--clinitex{ --w:205.24; --src:url(/assets/logos/mono/clinitex.svg); }
.lb--dynabuy{ --w:229.28; --src:url(/assets/logos/mono/dynabuy.svg); }
.lb--pilliot{ --w:223.47; --src:url(/assets/logos/mono/pilliot.svg); }