@charset "utf-8";
/* ─── Essai design du 26/09 : cas client en bandeau sur mobile (Romain : « là on voit rien sur quasi toutes les fiches ») ───
   Sur téléphone, la carte de l'écran 1 empilait logo, leviers et chiffre SUR la photo, réduite à une bande de 300 px :
   le visage disparaissait sous le texte. Ici, trois étages qui ne se marchent plus dessus :
     1. en-tête sombre : logo du client à gauche, leviers à droite ;
     2. la photo, entière, sans texte dessus ;
     3. un bandeau citron où les chiffres défilent (marquee, comme le mur de logos), puis la citation.
   Le balisage ne change pas : bandeau.js ajoute la classe .bd et construit le bandeau à partir du chiffre et du détail.
   Pour revenir en arrière : retirer bandeau.css et bandeau.js de index.html (branche essai-design). */
@media (max-width:959px){
  .cases .case-visual.bd{display:flex;flex-direction:column;min-height:0;background:#141414;justify-content:flex-start}
  .cases .case-visual.bd::after{display:none}
  .cases .case-visual.bd .case-head{position:static;order:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px 8px;min-height:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
  .cases .case-visual.bd .case-head img{height:28px;max-width:140px;margin:0;filter:brightness(0) invert(1);opacity:.96}
  .cases .case-visual.bd .case-ch{white-space:normal;text-align:right;font-size:10px;line-height:1.35;color:rgba(255,255,255,.62);max-width:48%;font-weight:400}
  .cases .case-visual.bd .case-photo{position:static;order:2;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 22%}
  .cases .case-visual.bd .case-body{display:none}
  .cases .case-visual.bd .case-band{order:3;position:relative;overflow:hidden;background:var(--lime);color:var(--ink,#0E0E0E);min-height:40px;display:flex;align-items:center}
  .case-band-track{display:flex;align-items:center;white-space:nowrap;flex:none;animation:bd-marquee 24s linear infinite}
  .case-band-half{display:inline-flex;align-items:center;flex:none}
  .case-band:active .case-band-track{animation-play-state:paused}
  .case-band-item{display:inline-flex;align-items:baseline;gap:7px;padding:10px 0 10px 16px}
  .case-band-item b{font-size:20px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
  .case-band-item span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
  .case-band-item::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(14,14,14,.35);margin-left:18px;align-self:center}
  @keyframes bd-marquee{to{transform:translateX(-50%)}}
  /* Sans les points (plus de six cas, app.js), les 40 px sous la citation ne servaient à rien : bloc plus court (Romain, 26/09). */
  .cases .case-visual.bd + .case-quote{border-top:0;padding:14px 16px 16px;gap:12px}
  .cases .case-visual.bd + .case-quote blockquote{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .cases .case-visual.bd + .case-quote figcaption img{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .case-band-track{animation:none;white-space:normal;flex-wrap:wrap}
  .case-band-half[aria-hidden="true"]{display:none}
}