/* ═══════════════════════════════════════════════════════════
   SOCIALS CINEMA — Style C DÉFERLANTE scroll-linked
   Cards qui CLAQUENT en 3D depuis les côtés alternés + marquee de logos
   Cards VIBRANTES (fond teinté couleur de marque). Décor echo-deep-bg visible.
   ═══════════════════════════════════════════════════════════ */

#s-socials .socials-cinema-inner{position:relative;z-index:2;width:100%;max-width:1080px;margin:0 auto;padding:60px 16px 80px;display:flex;flex-direction:column;align-items:center;text-align:center}

#s-socials .socials-cinema-inner .scd-label{font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.18em;color:#6680ff;text-transform:uppercase;margin-bottom:14px;padding:5px 10px;border:1px solid rgba(102,128,255,.32);border-radius:4px;background:rgba(102,128,255,.06)}
#s-socials .socials-cinema-inner .scd-title{font-family:'Bebas Neue','Anton',sans-serif;font-size:clamp(48px,9vw,108px);line-height:.9;letter-spacing:-.015em;margin-bottom:10px;background:linear-gradient(135deg,#fff 30%,#6680ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#s-socials .socials-cinema-inner .scd-sub{font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.16em;color:rgba(245,247,250,.62);text-transform:uppercase;margin-bottom:28px}
#s-socials .socials-cinema-inner .scd-progress{width:200px;height:3px;background:rgba(0,200,255,.12);border-radius:2px;overflow:hidden;margin-bottom:36px}
#s-socials .socials-cinema-inner .scd-progress__fill{height:100%;background:#00c8ff;box-shadow:0 0 8px #00c8ff;width:0;transition:width .2s linear}

/* Marquee de logos (auto-scroll en boucle, CSS pur) — 3 copies des chips → -33.34% = boucle sans couture */
#s-socials .socials-cinema-inner .scd-logobar{width:100%;max-width:1180px;overflow:hidden;margin:0 auto 30px;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
#s-socials .socials-cinema-inner .scd-logobar__track{display:flex;gap:14px;width:max-content;animation:scdMarquee 26s linear infinite}
#s-socials .socials-cinema-inner .scd-logobar:hover .scd-logobar__track{animation-play-state:paused}
@keyframes scdMarquee{to{transform:translateX(-33.34%)}}
#s-socials .socials-cinema-inner .scd-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(245,247,250,.86);border:1px solid color-mix(in srgb,var(--c,#6680ff) 42%,transparent);background:color-mix(in srgb,var(--c,#6680ff) 12%,rgba(8,16,28,.6))}
/* !important : écrase le width/height:100% inline posé par logoSvg() (nécessaire aux grandes
   cards, mais qui, sur une chip sans largeur fixe, fait rendre le SVG 0×0 à sa taille viewBox = géant). */
#s-socials .socials-cinema-inner .scd-chip img{width:18px!important;height:18px!important;flex-shrink:0;object-fit:contain;display:block}

/* Grille des 6 cards — perspective pour le claque 3D */
#s-socials .socials-cinema-inner .scd-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;perspective:1600px;perspective-origin:50% 40%}
@media(min-width:760px){#s-socials .socials-cinema-inner .scd-cards{grid-template-columns:repeat(3,1fr);gap:18px}}

#s-socials .socials-cinema-inner .scd-card{position:relative;background:transparent;border:1px solid rgba(0,200,255,.22);border-radius:14px;padding:22px 14px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:var(--t,0);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity}

/* Style C DÉFERLANTE — claque 3D depuis les côtés alternés, piloté par --t (déjà easé en JS → transform linéaire ici) */
/* impairs (1,3,5) viennent de gauche ; pairs (2,4,6) viennent de droite */
#s-socials .socials-cinema-inner .scd-card:nth-child(odd){transform:translateX(calc((1 - var(--t,0)) * -130px)) translateZ(calc((1 - var(--t,0)) * -220px)) rotateY(calc((1 - var(--t,0)) * 46deg))}
#s-socials .socials-cinema-inner .scd-card:nth-child(even){transform:translateX(calc((1 - var(--t,0)) * 130px)) translateZ(calc((1 - var(--t,0)) * -220px)) rotateY(calc((1 - var(--t,0)) * -46deg))}

/* Cards VIBRANTES — fond teinté à la couleur de marque (--c posée par le JS) */
#s-socials .socials-cinema-inner .scd-cards.is-vibrant .scd-card{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 34%,#0a1320),color-mix(in srgb,var(--c) 12%,#070e18));border-color:color-mix(in srgb,var(--c) 62%,transparent);box-shadow:0 16px 40px rgba(0,0,0,.5),inset 0 0 38px color-mix(in srgb,var(--c) 14%,transparent)}

#s-socials .socials-cinema-inner .scd-card__num{position:absolute;top:10px;left:12px;font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.14em;color:rgba(245,247,250,.34)}
#s-socials .socials-cinema-inner .scd-card__logo{width:clamp(64px,11vw,92px);height:clamp(64px,11vw,92px);margin:8px 0 14px;display:flex;align-items:center;justify-content:center}
#s-socials .socials-cinema-inner .scd-card__logo svg{width:100%;height:100%}
#s-socials .socials-cinema-inner .scd-card__name{font-family:'Bebas Neue','Anton',sans-serif;font-size:clamp(22px,3.4vw,30px);line-height:1;letter-spacing:.01em;margin-bottom:6px;font-variant-numeric:tabular-nums}
#s-socials .socials-cinema-inner .scd-card__handle{font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.1em;color:rgba(245,247,250,.62);text-transform:uppercase;margin-bottom:14px}
#s-socials .socials-cinema-inner .scd-card__stat{font-family:'Bebas Neue','Anton',sans-serif;font-size:clamp(28px,4.6vw,46px);line-height:.9;margin-bottom:14px;font-variant-numeric:tabular-nums}
#s-socials .socials-cinema-inner .scd-card__cta{display:inline-flex;align-items:center;gap:8px;font-family:'Bebas Neue','Anton',sans-serif;font-size:clamp(15px,2.6vw,22px);letter-spacing:.04em;padding:8px 18px 6px;border:2px solid currentColor;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s,color .2s,transform .25s,box-shadow .25s;text-decoration:none;line-height:1;font-weight:400}
#s-socials .socials-cinema-inner .scd-card__cta:hover{background:currentColor;color:#020912!important;transform:translateY(-2px) scale(1.05);box-shadow:0 12px 32px currentColor}
#s-socials .socials-cinema-inner .scd-card__cta::after{content:'→';font-size:.85em;transition:transform .25s}
/* Cible tactile ≥44px sur mobile (étape 3, Terry 2026-06-08) */
@media(max-width:768px){#s-socials .socials-cinema-inner .scd-card__cta{min-height:44px}}
#s-socials .socials-cinema-inner .scd-card__cta:hover::after{transform:translateX(4px)}

#s-socials .socials-cinema-inner .scd-status{margin-top:34px;font-family:'JetBrains Mono',monospace;font-size: 12px;letter-spacing:.18em;color:rgba(245,247,250,.34);text-transform:uppercase;min-height:14px}
#s-socials .socials-cinema-inner .scd-status__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#00c8ff;margin-right:6px;vertical-align:middle;animation:scdBlink 1.2s ease-in-out infinite}
@keyframes scdBlink{0%,100%{opacity:.35}50%{opacity:1}}

/* reduced-motion : fige le marquee (les cards sont posées à --t=1 par le JS) */
@media (prefers-reduced-motion: reduce){#s-socials .socials-cinema-inner .scd-logobar__track{animation:none}}

/* Cacher l'ancien contenu .section-inner mais garder le décor (fog + echo-deep-bg) */
#s-socials > .section-inner{display:none!important}