/* SH2P : French Digital Arcade. Surcouche de claud.css (palette déjà remappée). */
:root{--sh-blue:#2457FF;--sh-blue-h:#3C6BFF;--sh-sky:#6EA8FF;--sh-red:#F04452;--sh-snow:#F5F7FF;--sh-night:#080D1B}

/* ---------- Éléments pleins : bleu France, texte blanc ---------- */
.cl-btn,.wp-block-button__link,.wp-element-button,.button,button.single_add_to_cart_button,.wc-block-components-button,.cl-skip{background:var(--sh-blue);color:#fff}
.cl-btn:hover,.wp-block-button__link:hover,.wp-element-button:hover,.button:hover,.wc-block-components-button:hover{background:var(--sh-blue-h);color:#fff;box-shadow:0 0 0 1px rgba(110,168,255,.55),0 10px 28px rgba(36,87,255,.38)}
.cl-btn.cl-btn--ghost,.is-style-outline .wp-block-button__link{background:transparent;color:var(--c-t);border-color:var(--c-b)}
.cl-btn.cl-btn--ghost:hover,.is-style-outline .wp-block-button__link:hover{background:var(--c-card);border-color:var(--c-b-h);color:var(--c-t);box-shadow:none}
.cl-btn.cl-btn--coral{background:var(--sh-red);color:var(--c-coral-ink)}
.cl-steps li::before{background:var(--sh-blue);color:#fff}
.woocommerce-tabs .tabs li.active a{background:var(--sh-blue);color:#fff}
.cl-btn::after,.wp-element-button::after,.wp-block-button__link::after,.button::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%)}

/* ---------- Logo caddie ---------- */
.cl-logo svg.cl-logo__mark{width:46px;height:37px;border-radius:0;background:none;box-shadow:none;overflow:visible;transition:transform .3s var(--ease)}
.cl-logo:hover svg.cl-logo__mark{transform:translateX(3px);box-shadow:none}
.cl-logo .sh-w{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.cl-logo:hover .sh-w{transform:rotate(360deg)}
.cl-logo .sh-sp{transition:transform .3s var(--ease)}
.cl-logo:hover .sh-sp{transform:translateX(-3px)}
.cl-logo{letter-spacing:-.03em;gap:8px}
.cl-logo--mono svg *{fill:currentColor;stroke:currentColor}

/* ---------- Hero : arcade française ---------- */
.cl-hero{background:radial-gradient(760px 480px at 78% 4%,rgba(36,87,255,.3),transparent 62%),radial-gradient(520px 360px at 2% 100%,rgba(240,68,82,.12),transparent 62%),var(--c-bg)}
.cl-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#2457FF 22%,#F5F7FF 52%,#F04452 80%,transparent);opacity:.85;pointer-events:none}
.cl-hero h1{font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:1;max-width:11ch}
.cl-cta{margin-top:20px}
.cl-stage{min-height:520px;perspective:1100px}
.cl-sx{position:absolute;translate:calc(var(--mx,0)*var(--d,0)*1px) calc(var(--my,0)*var(--d,0)*1px);transition:translate .4s ease-out}
.cl-halo{inset:0 0 14%;border-radius:50%;background:radial-gradient(closest-side,rgba(36,87,255,.5),rgba(36,87,255,.12) 60%,transparent 76%);animation:cl-pulse 7s ease-in-out infinite}
.cl-floor{left:-8%;right:-8%;bottom:-3%;height:44%;transform-origin:50% 100%;transform:perspective(420px) rotateX(63deg);background:linear-gradient(rgba(110,168,255,.4) 1px,transparent 1px) 0 0/100% 30px,linear-gradient(90deg,rgba(110,168,255,.4) 1px,transparent 1px) 0 0/52px 100%;-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.cl-streaks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cl-streaks path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:cl-draw 1.3s .2s var(--ease) forwards}
.cl-streaks .s1{stroke:#2457FF;stroke-width:9}
.cl-streaks .s2{stroke:#F5F7FF;stroke-width:3.5;animation-delay:.32s}
.cl-streaks .s3{stroke:#F04452;stroke-width:6;animation-delay:.44s}
.cl-bigcart{left:8%;top:3%;width:80%;z-index:2;cursor:pointer}
.cl-bigcart__svg{display:block;width:100%;height:auto;color:#F5F7FF;overflow:visible;filter:drop-shadow(0 18px 30px rgba(36,87,255,.45));animation:cl-bob 5.5s ease-in-out infinite}
.cl-shadow{position:absolute;left:14%;right:14%;bottom:-7%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.cl-bigcart .sh-w{transform-box:fill-box;transform-origin:center}
.cl-bigcart.is-ding .cl-bigcart__svg{animation:cl-ding .65s var(--ease)}
.cl-bigcart.is-ding .sh-w{animation:cl-spin .65s var(--ease)}
@keyframes cl-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1.2deg)}}
@keyframes cl-ding{30%{transform:translateY(-26px) scale(1.04)}60%{transform:translateY(2px) scale(.99)}}
.cl-glw{z-index:1;color:var(--sh-sky)}
.cl-gl{display:block;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;animation:cl-float 7s ease-in-out infinite alternate}
.cl-glw--a{left:2%;top:6%;color:var(--sh-sky)}
.cl-glw--b{right:2%;top:46%;color:var(--sh-red)}
.cl-glw--b .cl-gl{animation-delay:-2s}
.cl-glw--c{left:38%;bottom:4%;color:var(--sh-snow)}
.cl-glw--c .cl-gl{animation-delay:-4s}
.cl-glw--d{right:34%;top:-2%;color:var(--sh-sky)}
.cl-glw--d .cl-gl{animation-delay:-5s}
@keyframes cl-float{to{transform:translateY(-14px) rotate(10deg)}}

/* vraies offres autour du caddie, dans les coins pour laisser le caddie visible */
.cl-fan__card{width:min(172px,31%);translate:calc(var(--mx,0)*var(--d,24)*1px) calc(var(--my,0)*var(--d,24)*1px);transition:transform .35s var(--ease),border-color .25s,box-shadow .3s,translate .4s ease-out;background:linear-gradient(180deg,var(--c-card-h),var(--c-card));padding:8px 8px 12px}
.cl-fan__title{font-size:.86rem}
.cl-fan__card--1{--d:28;left:-5%;top:60%;transform:rotateY(14deg) rotate(-5deg);z-index:3}
.cl-fan__card--2{--d:36;left:auto;right:-5%;top:-3%;transform:rotateY(-12deg) rotate(4deg);z-index:4}
.cl-fan__card--3{--d:20;right:6%;top:66%;transform:rotate(-2deg);z-index:3}
.cl-fan__card--1:hover{transform:rotate(-2deg) translateY(-8px) scale(1.03)}
.cl-fan__card--2:hover{transform:rotate(1deg) translateY(-8px) scale(1.03)}
.cl-fan__card--3:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
.cl-fan__card:active{transform:scale(.98)}
.cl-fan__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.12) 50%,transparent 62%);transform:translateX(-110%);transition:transform .7s var(--ease)}
.cl-fan__card:hover::after{transform:translateX(110%)}
.cl-fan__card{overflow:hidden}
@media(max-width:900px){.cl-stage{min-height:440px}.cl-hero h1{max-width:none}}
@media(max-width:520px){
  .cl-stage{min-height:380px}
  .cl-bigcart{left:8%;width:84%;top:0}
  .cl-fan__card{width:46%}
  .cl-fan__card--1{left:-3%;top:58%}
  .cl-fan__card--2{right:-3%;top:44%}
  .cl-fan__card--3{display:none}
  .cl-glw--c,.cl-glw--d{display:none}
}

/* ---------- Intro : caddie, traînées, nom, rideau ---------- */
html.cl-intro::before,html.cl-intro::after,html.cl-intro body::before{content:none!important;display:none!important;animation:none!important}
.cl-ov{display:none}
html.cl-intro .cl-ov{display:grid;place-items:center;position:fixed;inset:0;z-index:9999;pointer-events:none;background:radial-gradient(520px 320px at 50% 50%,rgba(36,87,255,.3),transparent 70%),var(--sh-night);animation:cl-curtain .3s .5s cubic-bezier(.7,0,.2,1) forwards}
html.cl-intro .cl-ov::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(90deg,#2457FF 0 33.3%,#F5F7FF 33.3% 66.6%,#F04452 66.6%)}
.cl-ov__st{position:absolute;left:0;top:50%;width:100%;height:120px;margin-top:-60px;overflow:visible}
.cl-ov__st path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:cl-draw .45s .05s var(--ease) forwards}
.cl-ov__st .s1{stroke:#2457FF;stroke-width:6}.cl-ov__st .s2{stroke:#F5F7FF;stroke-width:2.5;animation-delay:.12s}.cl-ov__st .s3{stroke:#F04452;stroke-width:4;animation-delay:.2s}
.cl-ov__logo{position:relative;display:flex;align-items:center;gap:16px;padding:18px 28px;border-radius:24px;background:var(--sh-night);animation:cl-pop .42s .08s var(--ease) backwards}
.cl-ov__cart{width:92px;height:auto;color:#F5F7FF;overflow:visible}
.cl-ov__logo span{font:800 clamp(2.4rem,7vw,3.6rem)/1 var(--f-head);letter-spacing:-.04em;color:var(--c-t)}
@keyframes cl-pop{from{opacity:0;transform:scale(.7) rotate(-6deg)}}
@keyframes cl-curtain{to{transform:translateY(-102%);visibility:hidden}}
@media(prefers-reduced-motion:no-preference){
  html.cl-intro .cl-hero h1{animation-delay:.5s}html.cl-intro .cl-hero__lead{animation-delay:.58s}html.cl-intro .cl-herosearch{animation-delay:.66s}html.cl-intro .cl-chips{animation-delay:.74s}html.cl-intro .cl-cta{animation-delay:.82s}
  html.cl-intro .cl-fan__card--1{animation-delay:.6s}html.cl-intro .cl-fan__card--2{animation-delay:.72s}html.cl-intro .cl-fan__card--3{animation-delay:.84s}
  html.cl-intro .cl-streaks path{animation-delay:.6s}html.cl-intro .cl-streaks .s2{animation-delay:.72s}html.cl-intro .cl-streaks .s3{animation-delay:.84s}
}

/* ---------- Rythme de défilement : une apparition différente par type de bloc ---------- */
.cl-rv.cl-rv--wipe.is-in{animation:cl-wipein .9s var(--ease) var(--d,0ms) backwards}
.cl-rv.cl-rv--left.is-in{animation:cl-leftin .6s var(--ease) var(--d,0ms) backwards}
.cl-rv.cl-rv--scale.is-in{animation:cl-scalein .6s var(--ease) var(--d,0ms) backwards}
@keyframes cl-wipein{from{opacity:0;clip-path:inset(0 100% 0 0 round 32px)}to{opacity:1;clip-path:inset(0 0 0 0 round 32px)}}
@keyframes cl-leftin{from{opacity:0;transform:translateX(-28px)}}
@keyframes cl-scalein{from{opacity:0;transform:scale(.9) translateY(12px)}}

/* Le caddie du hero recule légèrement quand on descend (CSS pur, navigateurs compatibles) */
@supports (animation-timeline:scroll()){
  .cl-stage{animation:cl-away linear both;animation-timeline:scroll(root);animation-range:0 520px}
  @keyframes cl-away{to{transform:translateY(-34px) scale(.95);opacity:.55}}
}

/* ---------- Cartes : reflet au survol et réaction au clic ---------- */
.wc-block-product::after,ul.products li.product::after,.cl-cat::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);transform:translateX(-110%);transition:transform .7s var(--ease)}
.wc-block-product:hover::after,ul.products li.product:hover::after,.cl-cat:hover::before{transform:translateX(110%)}
.wc-block-product:active,.cl-cat:active,.cl-game:active .cl-game__art{transform:scale(.985)}
.cl-cat{background:linear-gradient(180deg,var(--c-card),rgba(15,23,41,.8))}

/* ---------- Filets tricolores discrets, panneau promo ---------- */
.cl-footer{position:relative}
.cl-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#2457FF 22%,#F5F7FF 52%,#F04452 80%,transparent);opacity:.8}
.cl-panel{background:radial-gradient(520px 260px at 100% 0%,rgba(240,68,82,.18),transparent 70%),linear-gradient(135deg,rgba(36,87,255,.2),rgba(15,23,41,.96) 58%),var(--c-s1);border-color:rgba(110,168,255,.28)}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .cl-streaks path,.cl-ov__st path{stroke-dashoffset:0}
  .cl-sx{translate:none}
  .cl-stage{animation:none}
}