/* ============================================================
   Nuage Bleu · fx.css · animations (V8, après tri de Martin).
   ?fx=labels affiche les numéros.
   ============================================================ */
.fx-badge { position: absolute; z-index: 60; top: 8px; left: 8px; padding: 4px 8px; border-radius: 6px; background: #ff3b30; color: #fff; font: 700 11px/1 'Bricolage Grotesque', sans-serif; letter-spacing: .02em; pointer-events: none; box-shadow: 0 2px 10px rgba(0,0,0,.6); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.fx-badge small { display: block; font-weight: 500; opacity: .9; margin-top: 3px; }

/* FX 3 · bordure lumineuse tournante (gardée), sans barre qui traverse */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.shine-ring { position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 0;
  background: conic-gradient(from var(--fxa), transparent 0 55%, #fff 70%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxspin 2.6s linear infinite; opacity: .9; }
@keyframes fxspin { to { --fxa: 360deg; } }
.btn { overflow: visible !important; }

/* Hero ordinateur : le showreel en plein cadre, rien d'autre */
@media (min-width: 961px) {
  .hero-pin { grid-template-columns: 1fr; align-content: end; padding: 0; }
  .hero-vid { position: absolute; inset: 0; display: block; perspective: none; z-index: 0; overflow: hidden; }
  .vid-frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transform: none !important; box-shadow: none; background: #000; }
  .vid-frame video { opacity: 1; will-change: transform; }
  .vid-frame::after { z-index: 3; background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 50%, transparent), transparent 26%, transparent 42%, color-mix(in srgb, var(--bg) 86%, transparent) 88%, color-mix(in srgb, var(--bg) 86%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 20%, transparent) 46%, transparent 66%); }
  /* le showreel se dissout dans le fond animé : aucun bord net sous le hero */
  .hero-vid { -webkit-mask-image: linear-gradient(180deg, #000 56%, rgba(0,0,0,.5) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 56%, rgba(0,0,0,.5) 82%, transparent 100%); }
  .vid-cap { position: absolute; right: var(--gut); bottom: 34px; z-index: 4; text-align: right; }
  .vid-sound { bottom: auto; top: 96px; right: var(--gut); z-index: 4; }
  .hero-txt { position: relative; z-index: 4; padding: 0 var(--gut) 132px; }
  .hero h1 { font-size: clamp(52px, 6.4vw, 108px); }
  .hero-txt h1 { text-shadow: 0 2px 26px color-mix(in srgb, var(--bg) 90%, transparent); }
  .scroll-hint { z-index: 4; }
}

/* La preuve : les chiffres du dernier lancement */
.proof { padding: clamp(70px, 11vh, 150px) var(--gut) clamp(60px, 9vh, 120px); }
.proof-tag { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--txt-3); margin-bottom: 22px; }
.proof-head h2 { max-width: 18ch; }
.proof-head p { margin-top: 24px; color: var(--txt-2); font-size: 18px; max-width: 54ch; }
.proof-grid { list-style: none; margin: clamp(46px, 7vh, 86px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
.proof-grid li { display: grid; align-content: start; gap: 8px; }
.proof-n { font-family: var(--font); font-variation-settings: 'opsz' 96; font-weight: 600; font-size: clamp(58px, 7.4vw, 128px); line-height: .92; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--txt); }
.proof-grid li:nth-child(2) .proof-n { color: var(--t1); }
.proof-grid span { font-size: clamp(16px, 1.4vw, 20px); color: var(--txt); font-weight: 500; }
.proof-grid i { font-style: normal; font-size: 14.5px; color: var(--txt-3); }
.proof-bar { position: relative; height: 4px; margin-top: 14px; border-radius: 3px; background: color-mix(in srgb, var(--txt) 12%, transparent); overflow: hidden; }
.proof-bar u { position: absolute; inset: 0; width: var(--v); border-radius: 3px; background: color-mix(in srgb, var(--txt) 52%, transparent); transform: scaleX(0); transform-origin: left; }
.proof-bar.hot u { background: var(--pop-grad, var(--pop)); }
.proof-kicker { margin-top: clamp(40px, 6vh, 74px); font-size: clamp(18px, 1.9vw, 26px); line-height: 1.35; font-weight: 500; letter-spacing: -.015em; color: var(--txt-2); max-width: 62ch; }
.proof-kicker::first-line { color: var(--txt); }

/* FX 22 · révélation en cercle */
.clip-reveal { clip-path: circle(75% at 50% 50%); }

/* FX 7 + 23 · scrub : bande de vignettes */
.scrub-pin { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 4vw, 70px); padding: 100px var(--gut) 60px; overflow: hidden; }
.scrub-txt p { margin-top: 22px; color: var(--txt-2); font-size: 18px; max-width: 46ch; }
.scrub-tc { margin-top: 30px; font-size: clamp(44px, 5vw, 84px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--txt); }
.scrub-strip { position: relative; margin-top: 22px; height: 64px; max-width: 560px; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line) inset; }
.scrub-strip i { position: absolute; left: 0; top: 0; height: 100%; width: 1350%; background: url('strip.jpg') 0 0 / auto 100% repeat-x; will-change: transform; opacity: .9; }
.scrub-strip::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 12px rgba(255,255,255,.9); }
.scrub-tl { position: relative; margin-top: 14px; height: 30px; max-width: 560px; }
.scrub-clips { display: flex; gap: 3px; height: 100%; }
.scrub-clips i { flex: 0 0 var(--w); border-radius: 5px; background: repeating-linear-gradient(-55deg, var(--clip-a) 0 5px, var(--clip-b) 5px 10px); }
.scrub-clips i.out { background: var(--pop-grad, var(--pop)); }
.scrub-ph { position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.8); }
.scrub-ph::before { content: ''; position: absolute; top: -6px; left: -6px; width: 14px; height: 14px; border-radius: 3px; background: #fff; transform: rotate(45deg); }
.scrub-stage { position: relative; width: min(100%, 380px); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; justify-self: center; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 60px 120px -40px var(--shadow); }
.scrub-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrub-frame { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.55); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }

/* FX 11 · flou d'apparition : rien à déclarer, géré en JS */

/* FX 12 · cylindre 3D, marges corrigées */
.gal-pin { height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: 100px 0 40px; overflow: hidden; }
.gal-head { position: relative; z-index: 2; padding: 0 var(--gut); }
.gal-head p { margin-top: 14px; color: var(--txt-2); font-size: 18px; }
.gal-scene { position: relative; z-index: 1; perspective: 1400px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; margin-top: 40px; }
.gal-scene:active { cursor: grabbing; }
.gal-ring { position: relative; width: 190px; height: 338px; transform-style: preserve-3d; will-change: transform; }
.gal-ring .fr { position: absolute; inset: 0; width: 190px; transition: none; backface-visibility: hidden; }

/* FX 24 · rail de cartes à glisser */
.deliv { padding: clamp(40px, 6vh, 80px) 0 clamp(50px, 8vh, 110px); overflow: hidden; }
.deliv-head { padding: 0 var(--gut); margin-bottom: 34px; }
.deliv-head p { margin-top: 18px; color: var(--txt-2); font-size: 18px; max-width: 52ch; }
.slider { cursor: grab; touch-action: pan-y; user-select: none; padding: 10px var(--gut); }
.slider:active { cursor: grabbing; }
.slider-track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.sc { position: relative; flex: 0 0 auto; width: 300px; padding: 22px; border-radius: 22px; background: linear-gradient(160deg, var(--card-a), var(--card-b)); box-shadow: 0 0 0 1px var(--line) inset; will-change: transform; transform-style: preserve-3d; }
.sc h3 { font-size: 24px; letter-spacing: -.025em; margin-top: 18px; }
.sc p { margin-top: 8px; color: var(--txt-2); font-size: 15px; }
.sc-n { position: absolute; top: 18px; right: 20px; font-size: 12px; font-weight: 700; color: var(--txt-3); }
.sc-vis { height: 170px; border-radius: 14px; background: var(--inset); box-shadow: 0 0 0 1px var(--line) inset; display: grid; place-items: center; overflow: hidden; }
.sc-vis .fr { width: 78px; }
.sc-vis .fr .cart { font-size: 9px; }
.ratio { position: absolute; border-radius: 6px; background: var(--inset); box-shadow: 0 0 0 1px color-mix(in srgb, var(--txt) 18%, transparent) inset; }
.ratio.r916 { width: 60px; height: 106px; background: linear-gradient(180deg, var(--teal), var(--forest)); transform: translateX(-70px) rotate(-6deg); }
.ratio.r11 { width: 84px; height: 84px; transform: translateY(6px); }
.ratio.r169 { width: 120px; height: 68px; transform: translate(60px, 24px) rotate(5deg); }
.hooks { display: grid; gap: 8px; width: 70%; }
.hooks i { display: block; padding: 8px 12px; border-radius: 8px; background: var(--inset); font-size: 12px; font-weight: 700; font-style: normal; }
.hooks i:nth-child(2) { background: var(--pop-grad, var(--pop)); color: var(--bg); transform: translateX(16px); }
.cartons { display: grid; gap: 6px; text-align: center; }
.cartons b { display: block; padding: 6px 12px; border-radius: 6px; background: color-mix(in srgb, var(--deep) 86%, transparent); color: #fff; font-size: 14px; }
.wave2 { display: flex; gap: 4px; align-items: center; }
.wave2 i { width: 5px; height: 24px; border-radius: 3px; background: var(--teal); animation: w2 1.4s ease-in-out infinite; }
.wave2 i:nth-child(3n) { height: 52px; animation-delay: .2s; } .wave2 i:nth-child(4n) { height: 36px; animation-delay: .5s; background: var(--cyan); } .wave2 i:nth-child(5n) { height: 60px; animation-delay: .7s; background: var(--pop); }
@keyframes w2 { 50% { transform: scaleY(.35); } }
.grade { position: relative; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; }
.grade i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--teal), #2b6558 60%, var(--deep)); }
.grade i:first-child { filter: saturate(.3) contrast(.8); }
.grade i:last-child { clip-path: inset(0 0 0 50%); }
.grade::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; }
.voices { display: flex; gap: -10px; }
.voices i { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--teal), var(--forest)); margin: 0 -8px; box-shadow: 0 0 0 3px #0d1b15; }
.voices i:nth-child(2) { background: var(--pop-grad, var(--pop)); }
.outro-bar { position: relative; width: 70%; height: 90px; border-radius: 10px; background: linear-gradient(180deg, var(--t4), var(--deep)); overflow: hidden; }
.outro-bar i { position: absolute; inset: -10% -40%; background: linear-gradient(100deg, transparent 30%, var(--pop) 45%, #fff 50%, var(--pop) 55%, transparent 70%); mix-blend-mode: screen; animation: ob 3s var(--ease) infinite; }
@keyframes ob { 0%, 30% { transform: translateX(-110%); } 70%, 100% { transform: translateX(110%); } }
.posters { display: flex; gap: 10px; }
.posters i { width: 42px; height: 66px; border-radius: 4px; background: linear-gradient(160deg, var(--t1), var(--deep)); }
.posters i:nth-child(2) { background: var(--pop-grad, var(--pop)); transform: translateY(-8px); }

/* FX 13 · cartes focus : la survolée grandit, les autres s'estompent */
.grid.has-focus .card:not(.is-focus) { filter: blur(3px) brightness(.55); transform: scale(.96); }
.grid .card { transition: transform .5s var(--ease), filter .5s var(--ease); }
.grid .card.is-focus { transform: scale(1.04); z-index: 2; }
.tools { position: relative; }
.tools::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(138,208,224,.12), transparent 60%); }
.tools:hover::before { opacity: 1; }
.tools > * { position: relative; z-index: 1; }

/* FX 25 · deck de cartes clients */
.clients { padding: clamp(40px, 6vh, 80px) var(--gut) clamp(70px, 10vh, 140px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
.clients-head p { margin-top: 20px; color: var(--txt-2); font-size: 18px; max-width: 46ch; }
.swap { position: relative; height: 420px; perspective: 1400px; cursor: pointer; justify-self: center; width: min(100%, 520px); }
.swap-card { position: absolute; left: 0; top: 0; width: 100%; display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 22px; border-radius: 24px; background: linear-gradient(160deg, var(--card-a), var(--card-b)); box-shadow: 0 0 0 1px var(--line) inset, 0 40px 80px -30px var(--shadow); transform-origin: 50% 100%; will-change: transform; }
.swap-card .fr { width: 120px; }
.swap-card .fr .cart { font-size: 10px; }
.swap-card h3 { font-size: 26px; letter-spacing: -.025em; }
.swap-card p { margin-top: 8px; color: var(--txt-2); font-size: 15px; }

/* FX 26 · nappes de couleur dans l'outro */
.mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 82%, transparent 100%); }
.mesh i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.mesh .m1 { width: 50vw; height: 50vw; left: -10vw; top: -10vw; background: radial-gradient(closest-side, var(--mesh-1), transparent); animation: m1 18s ease-in-out infinite alternate; }
.mesh .m2 { width: 40vw; height: 40vw; right: -8vw; top: 10%; background: radial-gradient(closest-side, var(--mesh-2), transparent); animation: m2 22s ease-in-out infinite alternate; }
.mesh .m3 { width: 45vw; height: 45vw; left: 30%; bottom: -20vw; background: radial-gradient(closest-side, var(--mesh-3), transparent); animation: m3 26s ease-in-out infinite alternate; }
.mesh .mm { width: 34vw; height: 34vw; left: 0; top: 0; margin: -17vw 0 0 -17vw; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); opacity: .5; }
@keyframes m1 { to { transform: translate(18vw, 14vh) scale(1.2); } }
@keyframes m2 { to { transform: translate(-14vw, 20vh) scale(.9); } }
@keyframes m3 { to { transform: translate(-16vw, -14vh) scale(1.15); } }
.outro .lamp { display: none; }
.outro-in, .outro footer { position: relative; z-index: 1; }
#confetti { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

/* Aucune couture entre les sections : les effets de fond débordent et se fondent */
.outro { margin-top: -10vh; padding-top: calc(clamp(100px, 16vh, 180px) + 10vh) !important; }


@media (max-width: 960px) {
  /* 🚨 pas d'épinglage sur mobile : la hauteur figée à 100vh comprimait la ligne
     de la grille (328 px pour une vidéo de 498) et, centrée, elle débordait sur
     le texte. La section se déroule normalement, la vidéo est scrubbée au passage. */
  .scrub-pin { grid-template-columns: 1fr; align-content: start; align-items: start;
    height: auto; padding: 90px var(--gut) 80px; gap: 20px; overflow: visible; }
  .scrub-stage { width: min(100%, 260px); }
  .scrub-tc { font-size: 40px; margin-top: 14px; }
  .scrub-strip { height: 48px; }
  .gal-pin { padding-top: 90px; }
  .gal-scene { margin-top: 70px; }
  .gal-ring, .gal-ring .fr { width: 140px; } .gal-ring { height: 249px; }
  .proof-grid { grid-template-columns: 1fr; gap: 34px; }
  .proof-grid li { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; }
  .proof-n { grid-row: span 2; font-size: clamp(52px, 17vw, 76px); }
  .proof-bar { grid-column: 1 / -1; }
  .sc { width: 250px; }
  .clients { grid-template-columns: 1fr; }
  .swap { height: 380px; }
  .swap-card { grid-template-columns: 90px 1fr; gap: 16px; padding: 18px; }
  .swap-card .fr { width: 90px; }
  .swap-card h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .shine-ring, .wave2 i, .outro-bar i, .mesh i { animation: none !important; }
}