/* SouvenirSportifs — direction artistique « Galerie ».
   Sobre et haut de gamme : fond ivoire, encre presque noire, serif d'exposition (Instrument Serif) et sans serif fin (Inter Tight).
   Les affiches sont montrées encadrées, au mur. Verre dépoli pour la navigation, la barre d'achat et les panneaux flottants.
   Mouvements lents et discrets au défilement, coupés si l'utilisateur préfère moins d'animations. */
:root{--paper:#FFFFFF;--paper2:#F2F4F8;--wall:#EEF1F6;--card:#FFFFFF;--ink:#0B0D12;--ink2:rgba(11,13,18,.62);--ink3:rgba(11,13,18,.4);
  --line:rgba(11,13,18,.1);--blue:#1F4FE0;--blue2:#E8EEFF;--olive:var(--blue);--red:var(--blue);--forest:var(--blue);
  --glass:rgba(255,255,255,.58);--glass-b:rgba(255,255,255,.7);--ease:cubic-bezier(.2,.7,.2,1);--r:10px;
  --fh:'Archivo','Inter Tight',system-ui,sans-serif;--fb:'Inter Tight',system-ui,sans-serif;--fh-w:800;--fh-st:118%;--fh-tt:none;--fh-ls:-.025em;--fh-lh:.95}
/* couples de polices (Réglages de l'atelier) */
html[data-font=galerie]{--fh:'Instrument Serif',Georgia,serif;--fh-w:400;--fh-st:100%;--fh-ls:-.01em;--fh-lh:1}
html[data-font=suisse]{--fh:'Inter Tight',system-ui,sans-serif;--fh-w:600;--fh-st:100%;--fh-ls:-.035em;--fh-lh:.98}
html[data-font=moderne]{--fh:'Manrope',system-ui,sans-serif;--fb:'Manrope',system-ui,sans-serif;--fh-w:800;--fh-st:100%;--fh-ls:-.03em}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);background:var(--paper);font:16.5px/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font-family:'Plex',ui-monospace,monospace;font-size:.92em}
h1,h2,h3{font-family:var(--fh);font-weight:var(--fh-w);font-stretch:var(--fh-st);margin:0;line-height:var(--fh-lh);letter-spacing:var(--fh-ls);text-transform:var(--fh-tt)}
h3{font-weight:min(var(--fh-w),700)}
h1 i,h2 i{color:var(--blue);font-style:normal}
html[data-font=galerie] h1 i,html[data-font=galerie] h2 i{font-style:italic}
.lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

/* navigation : verre dépoli, plus marqué une fois qu'on a défilé */
.nav{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:18px max(16px,calc((100% - 1200px)/2));
  background:transparent;transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease)}
body.scrolled .nav{padding-top:10px;padding-bottom:10px;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 1px 0 var(--line),inset 0 -1px 0 var(--glass-b)}
.links{display:flex;gap:4px}
.links a,.navr a{font-size:14px;text-decoration:none;padding:10px 12px;color:var(--ink2);border-radius:999px;transition:color .2s,background .2s}
.links a:hover,.navr a:hover{color:var(--ink);background:rgba(255,255,255,.5)}
.brand{font-family:var(--fh);font-weight:var(--fh-w);font-stretch:var(--fh-st);letter-spacing:var(--fh-ls);font-size:24px;line-height:1;text-decoration:none;white-space:nowrap}
.brand::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.32em;border-radius:50%;background:var(--blue);vertical-align:.02em;box-shadow:inset -3px -3px 6px rgba(0,0,0,.25)}
.navr{display:flex;justify-content:flex-end;gap:4px;align-items:center}
.cartbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;text-decoration:none;font-size:14px;
  background:rgba(255,255,255,.55);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cartbtn span{min-width:20px;height:20px;display:inline-grid;place-items:center;border-radius:10px;background:var(--blue);color:#fff;font-size:11px}
@media (max-width:820px){.links,.navr .ta{display:none}.nav{grid-template-columns:auto 1fr}.brand{font-size:26px}}

#banner{max-width:1200px;margin:0 auto;padding:0 16px}
.note{border:1px solid var(--line);padding:10px 14px;font-size:14px;background:rgba(255,255,255,.5);border-radius:var(--r)}
main{max-width:1200px;margin:0 auto;padding:16px 16px 60px;outline:none}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border:1px solid var(--ink);border-radius:999px;
  cursor:pointer;font-size:15.5px;font-weight:500;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn:active{transform:scale(.985)}
.btn-main,.btn-red{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 24px -10px rgba(31,79,224,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-main:hover,.btn-red:hover{background:#1840BC;transform:translateY(-1px)}
.btn-line{background:transparent}.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.borne{font-family:var(--fh);font-weight:var(--fh-w);font-stretch:var(--fh-st);font-size:20px;color:var(--blue);line-height:1}

/* cadres réalistes (au mur, sur les cartes, dans le panier) */
.hang{position:relative;display:block;padding:var(--fw,14px);text-decoration:none;box-shadow:0 2px 3px rgba(0,0,0,.18),0 26px 40px -14px rgba(0,0,0,.35);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.hang .mat{display:block;background:#fff;padding:calc(var(--fw,14px) * 1.6);box-shadow:inset 0 0 6px rgba(0,0,0,.18)}
.hang img,.hang .ph{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--paper2)}
.hang::after{content:"";position:absolute;inset:var(--fw,14px);pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.26),rgba(255,255,255,0) 38%)}
.f-noir{background:linear-gradient(145deg,#2b2b2b,#101010 55%,#262626)}
.f-chene{background:linear-gradient(145deg,#d9b788,#b08453 55%,#c99f6c)}
.f-blanc{background:linear-gradient(145deg,#fcfbf8,#e4e0d8)}
.hang.mini{--fw:7px}
a.hang:hover,.pcard:hover .hang{transform:translateY(-6px);box-shadow:0 2px 3px rgba(0,0,0,.18),0 40px 50px -18px rgba(0,0,0,.38)}

/* accueil : la pièce */
.room{position:relative;height:clamp(440px,62vw,680px);margin:4px 0 0;background:var(--wall);overflow:hidden;border-radius:var(--r);isolation:isolate}
.room::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%)}
.wall{position:absolute;left:0;right:0;top:7%;display:flex;justify-content:center;align-items:flex-start;gap:clamp(18px,4vw,60px);padding:0 6%}
.wall .hang{width:clamp(130px,19vw,240px);opacity:0;transform:translateY(18px);animation:hangin 1.1s var(--ease) forwards;animation-delay:var(--d)}
.wall .h1{width:clamp(110px,15vw,200px);margin-top:4%}
@keyframes hangin{to{opacity:1;transform:none}}
.console{position:absolute;left:22%;right:22%;bottom:18%;height:5%;background:linear-gradient(#7c5d40,#5f452f);box-shadow:0 18px 30px -12px rgba(0,0,0,.4)}
.console::after{content:"";position:absolute;left:3%;right:3%;top:100%;height:240%;background:linear-gradient(#6f5238,#5a412c)}
.floor{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(#C9C0B0,#BDB3A1)}
.room-cap{position:absolute;left:24px;bottom:12px;margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,20,20,.6)}
@supports (animation-timeline:view()){
  .wall{animation:drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes drift{to{transform:translateY(-14%)}}
}
@media (max-width:640px){.console{left:8%;right:8%}.wall{top:9%}.wall .h2{display:none}}

.intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:end;padding:64px 0 46px}
.intro h1{font-size:clamp(52px,7.6vw,100px);line-height:.95}
.intro .lead{margin:0 0 24px;font-size:18px;color:var(--ink2)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.intro{grid-template-columns:1fr;gap:20px;padding-top:40px}}

.facts-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:90px;font-size:14px;color:var(--ink2)}
.facts-strip div{padding:20px 0}
@media (max-width:860px){.facts-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 30px}
.sec-h h2{font-size:clamp(40px,5vw,60px)}
.sec-h p{margin:0;color:var(--ink2);max-width:420px;font-size:15px}
@media (max-width:700px){.sec-h{flex-direction:column;gap:8px}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:48px 30px;margin-bottom:100px}
.pcard{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.pcard .frame{aspect-ratio:4/5;background:var(--paper2);display:grid;place-items:center;padding:12% 16%;border-radius:var(--r);transition:background .5s var(--ease)}
.pcard:hover .frame{background:#E5E0D6}
.pcard .frame .hang{width:100%}
.pcard .ph{display:grid!important;place-items:center;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.pcard h3{font-size:26px;margin-top:8px}
.pcard .sub{font-size:14px;color:var(--ink2);margin:0}
.pcard .meta{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2)}
.pcard .meta b{font-weight:500;color:var(--ink)}

.custom-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px;align-items:center;background:var(--card);padding:clamp(28px,5vw,64px);margin-bottom:100px;border-radius:var(--r)}
.custom-band h2{font-size:clamp(36px,4.6vw,58px);margin:10px 0 18px}
.custom-band p{color:var(--ink2);max-width:520px;margin:0 0 26px}
.custom-band .solo{width:min(100%,280px);justify-self:center;--fw:12px}
@media (max-width:820px){.custom-band{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-bottom:90px}
.steps h3{font-size:30px;margin:12px 0 8px}.steps p{margin:0;color:var(--ink2);font-size:15px}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:26px}}

/* apparitions au défilement */
.rv,.pcard,.steps>div{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in,.pcard.in,.steps>div.in{opacity:1;transform:none}

/* fiche produit */
.pp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:56px;align-items:start;padding-top:10px}
@media (max-width:980px){.pp{grid-template-columns:1fr;gap:28px}}
.stage{position:sticky;top:84px;padding:clamp(26px,5vw,64px);background:var(--wall);display:grid;place-items:center;border-radius:var(--r);
  background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%)}
@media (max-width:980px){.stage{position:relative;top:0}}
.mock{position:relative;width:100%;max-width:520px;aspect-ratio:3/4;transition:padding .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.mock .viewport{position:absolute;inset:0;overflow:hidden;background:#EDE6D8;transition:inset .5s var(--ease)}
.mock iframe{position:absolute;left:0;top:0;width:900px;height:1200px;border:0;transform-origin:0 0;background:transparent}
.mock.s-poster,.mock.s-pdf{box-shadow:0 2px 3px rgba(0,0,0,.15),0 30px 46px -18px rgba(0,0,0,.4)}
.mock.s-framed{padding:4.2%;box-shadow:0 2px 3px rgba(0,0,0,.2),0 36px 56px -20px rgba(0,0,0,.45)}
.mock.s-framed .viewport{inset:4.2%;box-shadow:inset 0 0 10px rgba(0,0,0,.25)}
.mock.v-noir{background:linear-gradient(145deg,#2b2b2b,#101010 55%,#262626)}
.mock.v-blanc{background:linear-gradient(145deg,#fcfbf8,#e4e0d8)}
.mock.v-chene{background:linear-gradient(145deg,#d9b788,#b08453 55%,#c99f6c)}
.mock.s-canvas{box-shadow:8px 9px 0 -2px #c6bdab,0 34px 50px -24px rgba(0,0,0,.5)}
.mock.s-alu,.mock.s-acrylic{box-shadow:0 30px 50px -24px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.18)}
.mock.s-hanger::before,.mock.s-hanger::after{content:"";position:absolute;left:-2%;right:-2%;height:3.2%;background:linear-gradient(#c9a271,#a97f4e);border-radius:2px;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.mock.s-hanger::before{top:-1.6%}.mock.s-hanger::after{bottom:-1.6%}
.glare{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(118deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%);transition:opacity .5s}
.mock.s-framed .glare,.mock.s-acrylic .glare{opacity:1}
.veil{position:absolute;inset:0;display:grid;place-items:center;background:rgba(246,244,239,.4);opacity:0;transition:opacity .3s;pointer-events:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.veil.on{opacity:1}
.cfg{display:flex;flex-direction:column;gap:34px}
.cfg header h1{font-size:clamp(46px,5vw,66px)}
.cfg header .lbl{display:block;margin-bottom:12px}
.cfg header p{margin:14px 0 0;color:var(--ink2)}
.datasheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.datasheet small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.datasheet b{font-weight:500;font-size:18px}
.step{display:flex;flex-direction:column;gap:14px}
.step>.h{display:flex;align-items:baseline;gap:12px}
.step>.h h2{font-size:30px}
.step .lbl{margin-top:4px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tiles button{padding:8px;border:1px solid var(--line);background:var(--card);cursor:pointer;text-align:left;border-radius:var(--r);transition:border-color .25s,box-shadow .25s}
.tiles img,.tiles .ph{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--paper2)}
.tiles span{display:block;padding:8px 2px 2px;font-size:14px}
.tiles button[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.swatches button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;transition:transform .25s var(--ease)}
.swatches button:hover{transform:scale(1.08)}
.swatches button[aria-pressed=true]{outline:2px solid var(--blue);outline-offset:3px}
.swatches .pal{background:conic-gradient(var(--a) 0 50%,var(--b) 50% 75%,var(--c) 75% 100%)}
.swatches .tr{width:34px;height:34px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:46px;padding:9px 16px;border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:var(--r);text-align:left;font-size:14.5px;transition:all .25s var(--ease)}
.chips button small{display:block;font-size:12px;color:var(--ink2)}
.chips button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:#fff}
.chips button[aria-pressed=true] small{color:rgba(246,244,239,.72)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fields .wide{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.fld input{min-height:48px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font:16px var(--fb);color:var(--ink);text-transform:none;letter-spacing:0;transition:border-color .2s}
.fld input:focus{outline:none;border-color:var(--ink)}
@media (max-width:520px){.fields{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ink)}
.drop{border:1px dashed var(--ink3);padding:26px;text-align:center;background:var(--card);cursor:pointer;border-radius:var(--r)}
.drop.ok{border-style:solid;border-color:var(--olive)}
.buybar{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;
  background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6)}
.buybar .total{font-family:var(--fh);font-weight:var(--fh-w);font-stretch:var(--fh-st);font-size:40px;line-height:1}
.buybar .total small{display:block;font-family:var(--fb);font-weight:400;font-stretch:100%;font-size:13px;color:var(--ink2);margin-top:4px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:var(--r)}
.qty button{width:44px;height:44px;border:0;background:none;cursor:pointer;font-size:18px}.qty span{min-width:24px;text-align:center}

/* panier, merci, pages */
.panel{background:var(--card);padding:clamp(22px,4vw,48px);border-radius:var(--r)}
.page h1{font-size:clamp(44px,5vw,66px);margin-bottom:18px}
.cart-line{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-line img,.cart-line .ph{width:86px;aspect-ratio:3/4;object-fit:cover;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--line),0 10px 16px -8px rgba(0,0,0,.3);background:var(--paper2)}
.cart-line h3{font-size:24px}.cart-line p{margin:3px 0 0;font-size:14px;color:var(--ink2)}
.cart-line .rm{border:0;background:none;color:var(--ink2);cursor:pointer;text-decoration:underline;padding:10px}
.sum{display:grid;gap:6px;margin-top:20px;font-size:15.5px}.sum div{display:flex;justify-content:space-between}
.sum .tot{font-family:var(--fh);font-weight:var(--fh-w);font-size:30px;border-top:1px solid var(--ink);padding-top:12px;margin-top:6px}
.tl{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px}
.tl li{display:flex;gap:12px;align-items:center}
.tl i{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--ink);font-style:normal;font-size:12px;border-radius:50%}
.tl li.done i{background:var(--blue);border-color:var(--blue);color:#fff}.tl li.now i{background:var(--ink);color:#fff}
.foot{border-top:1px solid var(--line);margin-top:30px}
.footin{max-width:1200px;margin:0 auto;padding:40px 16px;display:flex;flex-wrap:wrap;gap:24px 60px;justify-content:space-between}
.footin .brand{font-size:28px}
.footin p{margin:8px 0 0;color:var(--ink2);max-width:380px;font-size:14.5px}
.fcols{display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.small{font-size:12px!important;color:var(--ink3)!important;flex-basis:100%;max-width:none!important}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:12px 20px;z-index:50;font-size:14.5px;border-radius:999px;
  background:rgba(20,20,20,.86);color:var(--paper);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-width:calc(100% - 24px)}
.skel{animation:sk 1.4s ease-in-out infinite;background:linear-gradient(90deg,var(--paper2),#F8F6F1,var(--paper2));background-size:200% 100%}
@keyframes sk{to{background-position:-200% 0}}

/* textile et objets : silhouette colorée + motif transparent par-dessus */
.mock.merch{aspect-ratio:1/1;background:transparent;box-shadow:none;padding:0}
.mock .garment{position:absolute;inset:4%;display:none}.mock.merch .garment{display:block}
.mock .garment svg{width:100%;height:100%;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18))}
.mock.merch .viewport{background:transparent;inset:auto;left:30.5%;top:23%;width:39%;height:52%}
.mock.merch.s-sweat .viewport{top:22%}
.mock.merch.s-tote .viewport{left:26%;top:36%;width:48%;height:53.3%}
.mock.merch.s-mug .viewport{left:14.5%;top:37%;width:61%;height:25%}
.mock.merch .glare{display:none}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.ck{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;min-height:46px;padding:4px 6px 4px 12px;border:1px solid var(--line);background:var(--card);border-radius:var(--r)}
.ckl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;cursor:pointer;min-height:38px}
.ckph{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink2);background:var(--paper2) center/cover no-repeat;border:1px dashed var(--ink3)}
.ckph svg{width:20px;height:20px}.ckph.on{border:2px solid var(--ink)}.ckph.on svg{display:none}.ckph.busy{opacity:.5}
.ckph:hover{color:var(--ink);border-color:var(--ink)}
.ckx{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);font-size:14px;line-height:1;cursor:pointer}
.ck input{width:20px;height:20px;accent-color:var(--ink)}.ck small{font-size:12.5px;color:var(--ink2)}
.ck:has(input:checked){border-color:var(--ink)}
.ckbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.ckbar b{font-family:var(--fh);font-size:26px;font-weight:var(--fh-w)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv,.pcard,.steps>div,.wall .hang{opacity:1!important;transform:none!important}}

/* ───── accueil v282 : en-tête « verre liquide » ───── */
.hero2{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;min-height:min(86vh,760px);padding:20px 0 40px}
.hero2 h1{font-size:clamp(46px,6.4vw,92px)}
.hero2 h1 i{white-space:nowrap}
.hero2 .lead{font-size:18.5px;color:var(--ink2);max-width:520px;margin:22px 0 28px}
.hero2 .kick{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13px;color:var(--blue);background:var(--blue2);margin-bottom:22px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:13.5px;color:var(--ink2)}
.trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:.15em}
.stage2{position:relative;height:100%;min-height:520px;display:grid;place-items:center;isolation:isolate}
.blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.55;animation:blob 16s ease-in-out infinite alternate}
.blob.b1{width:62%;aspect-ratio:1;background:#5B83FF;left:12%;top:8%}
.blob.b2{width:44%;aspect-ratio:1;background:#A9C0FF;right:0;bottom:6%;animation-duration:20s;animation-delay:-6s}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-5%) scale(1.08)}100%{transform:translate(-5%,4%) scale(.95)}}
.float{position:relative;width:min(78%,380px);transform:perspective(1200px) rotateY(var(--ry,-8deg)) rotateX(var(--rx,3deg)) translateY(var(--ty,0));transition:transform .8s var(--ease)}
.float .hang{--fw:14px}
.float .slides{position:relative;display:block}
.float .slides img{transition:opacity 1.1s var(--ease)}
.float .slides img+img{position:absolute;inset:0;opacity:0}
.float .slides img.on{opacity:1}
.chipg{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;font-size:13px;color:var(--ink2);
  background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 20px 40px -18px rgba(31,79,224,.35),inset 0 1px 0 rgba(255,255,255,.9);animation:bob 6s ease-in-out infinite}
.chipg b{color:var(--ink);font-size:16px;font-weight:600}
.chipg.c1{left:0;top:16%}.chipg.c2{right:2%;bottom:14%;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:900px){.hero2{grid-template-columns:1fr;min-height:0}.stage2{min-height:440px}.chipg.c1{left:2%}}
.facts-strip div{color:var(--ink2)}
.pcard .frame{background:var(--paper2)}
.pcard:hover .frame{background:var(--blue2)}
.custom-band{background:linear-gradient(135deg,#0B1A4A,#1F4FE0);color:#fff}
.custom-band p,.custom-band .lbl{color:rgba(255,255,255,.75)}
.custom-band h2 i{color:#A9C0FF}
.custom-band .btn-main{background:#fff;color:var(--blue);border-color:#fff}
.stage{background:var(--paper2);background-image:radial-gradient(90% 70% at 50% 0%,rgba(91,131,255,.18),rgba(255,255,255,0) 70%)}
.note{background:var(--blue2);border-color:transparent;color:#1C3A9E}

/* vrais visuels Gelato : la photo du produit par-dessus, l'aperçu personnalisé dans la zone d'impression */
.mock.real{padding:0!important;background:none!important;box-shadow:none!important}
.mock.real .viewport{position:absolute;box-shadow:none!important;background:#fff}
.mock.real.merch .viewport{background:transparent}
.mock.real .realimg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.mock.real .glare,.mock.real .garment{display:none}
.mock.real::before,.mock.real::after{display:none}
.mock.real.merch .realimg{z-index:0}.mock.real.merch .viewport{z-index:1;background:transparent!important}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--paper2);align-self:flex-start}
.seg:empty{display:none}
.seg button{border:0;background:none;padding:10px 18px;border-radius:999px;cursor:pointer;font-size:14.5px;color:var(--ink2);transition:all .3s var(--ease)}
.seg button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 4px 12px -6px rgba(11,13,18,.3)}
.cfg.merchmode [data-wallonly]{display:none}
.assure{list-style:none;margin:0;padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;border-radius:16px;background:var(--paper2)}
.assure li{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--ink2)}.assure b{color:var(--ink);font-size:14.5px;font-weight:600}
.assure b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:.1em}
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 90px}
.why>div{padding:24px;border-radius:18px;background:linear-gradient(160deg,#F5F7FF,#fff);border:1px solid rgba(31,79,224,.12);box-shadow:0 18px 40px -28px rgba(31,79,224,.45)}
.why h3{font-size:22px;margin:12px 0 6px}.why p{margin:0;font-size:14.5px;color:var(--ink2)}
@media (max-width:900px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:520px){.why,.assure{grid-template-columns:1fr}}
.mock.s-stl{aspect-ratio:3/4;background:#fff;box-shadow:0 30px 50px -28px rgba(11,13,18,.35);border-radius:14px;overflow:hidden}
.mock.s-stl .viewport,.mock.s-stl .glare{display:none}
.mock .stlimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.25);transform-origin:50% 30%}
.cfg.stlmode [data-no3d]{display:none}
.legal{max-width:860px}.legal h2{font-size:24px;margin:28px 0 8px}.legal p{color:var(--ink2);margin:0 0 10px}.legal mark{background:#FFF2B3;color:#6b5000;padding:0 4px;border-radius:4px}
.legal .lead{font-size:17px}
.enc{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;background:var(--paper2)}
.encl{display:grid;gap:6px}
.encrow{display:grid;grid-template-columns:auto 130px minmax(0,1fr);align-items:center;gap:10px;min-height:44px;padding:4px 10px;border-radius:10px;background:#fff;font-size:14px}
.encrow input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}.encrow small{color:var(--ink2)}
.encv{min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font:14px var(--fb)}
.encrow:has(input[type=checkbox]:not(:checked)) span,.encrow:has(input[type=checkbox]:not(:checked)) .encv{opacity:.4}
@media (max-width:520px){.encrow{grid-template-columns:auto 1fr}.encrow .encv,.encrow small{grid-column:1/-1}}

/* cadres dessinés par nous : moulure bois 2 cm à l'échelle (≈ 6 % de la largeur), chanfrein, plexi, ombre portée au mur */
.mock.s-framed{padding:2.8% 3.7%;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),inset 2px 2px 0 rgba(255,255,255,.18),inset -2px -2px 0 rgba(0,0,0,.25),
    0 2px 3px rgba(0,0,0,.22),0 22px 30px -14px rgba(0,0,0,.42),0 60px 80px -40px rgba(0,0,0,.35)}
.mock.s-framed .viewport{inset:2.8% 3.7%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 4px 5px 8px rgba(0,0,0,.28),inset -1px -1px 2px rgba(255,255,255,.15)}
.mock.s-framed::before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.25))}
.mock.s-framed.v-noir{background:#1b1b1d}
.mock.s-framed.v-blanc{background:#f3f1ec}
.mock.s-framed.v-chene{background:#c49a68 repeating-linear-gradient(92deg,rgba(120,80,40,.0) 0 7px,rgba(120,80,40,.18) 7px 8px,rgba(255,240,210,.08) 8px 13px)}
.mock.s-framed .glare{inset:2.8% 3.7%;background:linear-gradient(118deg,rgba(255,255,255,.18),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06))}

/* vues : 3D qui tourne et décor au mur */
.views{display:flex;justify-content:center;gap:4px;margin-top:18px;padding:4px;border-radius:999px;background:rgba(255,255,255,.6);justify-self:center;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.views:empty{display:none}
.views button{border:0;background:none;padding:9px 18px;border-radius:999px;cursor:pointer;font-size:14px;color:var(--ink2)}
.views button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 4px 12px -6px rgba(11,13,18,.3)}
.v3d{position:relative;width:100%;max-width:560px}.v3d canvas{display:block;width:100%;height:auto;aspect-ratio:1/1.15;cursor:grab;touch-action:none}
.v3d canvas:active{cursor:grabbing}.hint3d{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;color:var(--ink3)}
.room{width:100%}.rwrap{position:relative;width:100%;border-radius:12px;overflow:hidden;background:#ddd}
.rimg{display:block;width:100%;height:100%;object-fit:cover}
.rposter{position:absolute;transition:all .7s var(--ease);box-shadow:0 2px 3px rgba(0,0,0,.25),0 18px 30px -12px rgba(0,0,0,.45);background:#fff}
.rposter img{position:absolute;inset:var(--mould,0);width:calc(100% - 2 * var(--mould,0%));height:calc(100% - 2 * var(--mould,0%));object-fit:cover;display:block}
.rposter.framed.v-noir{background:#1b1b1d}.rposter.framed.v-blanc{background:#f1efea}.rposter.framed.v-chene{background:#c49a68}
.rposter.framed::after{content:"";position:absolute;inset:var(--mould);pointer-events:none;box-shadow:inset 1px 2px 4px rgba(0,0,0,.35);
  background:linear-gradient(118deg,rgba(255,255,255,.18),rgba(255,255,255,0) 35%)}
.rdecors{display:flex;gap:8px;margin-top:10px;justify-content:center}.rdecors button{width:64px;height:44px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none}
.rdecors button[aria-pressed=true]{border-color:var(--blue)}.rdecors img{width:100%;height:100%;object-fit:cover}
.rsize{text-align:center;font-size:13px;color:var(--ink2);margin:8px 0 0}

/* v288 : bandeau défilant, textile, configurateur, newsletter, réassurance */
.ticker{background:var(--ink);color:#fff;overflow:hidden;font-size:13px;letter-spacing:.02em;height:34px;display:flex;align-items:center}
.ticker .tkin{display:flex;width:max-content;animation:tk 38s linear infinite}
.ticker .tkin>div{display:flex}
.ticker span{padding:0 28px;white-space:nowrap;position:relative}
.ticker span::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--blue);transform:translateY(-50%)}
.ticker:hover .tkin{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker .tkin{animation:none}.ticker{overflow-x:auto}}
.teef{position:relative;width:100%;max-height:100%}
.teef .tbase{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.teef .tbase.svg svg{width:100%;height:100%}
.teef .tbase.top{z-index:2;pointer-events:none}
.teef .tprint{position:absolute;object-fit:contain;mix-blend-mode:multiply;z-index:1}
.pcard.tee .frame{padding:6%}
.tc-ph{display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:1;background:linear-gradient(135deg,#0B1A4A,#1F4FE0);color:#fff;border-radius:var(--r);text-align:center}
.tc-ph b{font-family:var(--fh);font-size:34px}.tc-ph span{font-size:13px;opacity:.8}
.more{text-align:center;margin-top:28px}
.xsell{display:inline-block;margin-top:14px;font-weight:600;color:var(--blue);text-decoration:none}
.xsell:hover{text-decoration:underline}
.packnote{margin:0 0 10px;padding:10px 14px;border-radius:var(--r);background:var(--blue2,#E8EEFF);font-size:15px}
.tc{padding-top:40px}.tc-h{max-width:760px}.tc-h h1{font-size:clamp(40px,6vw,76px);margin:10px 0 16px}
.drop.big{display:block;margin-top:26px;padding:40px 24px;text-align:center;font-size:18px}
.drop.big span{font-size:14px;color:var(--ink2)}
.tcgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tcard{position:relative;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit;padding:0}
.tcard .frame{padding:8%}
.tcard.pack .frame{background:linear-gradient(135deg,#E8EEFF,#fff);outline:2px solid var(--blue);outline-offset:-2px}
.tcard .badge{position:absolute;top:10px;left:10px;z-index:3;background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px}
.tcard s{color:var(--ink3)}
.packimg{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;width:100%}
.hang.f-none .mat{box-shadow:0 10px 20px -10px rgba(0,0,0,.35)}
.tcmore{color:var(--ink2);font-size:14.5px;margin-top:18px}.tcwait{color:var(--blue);font-size:14.5px}
.news{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;margin:20px 0 90px;padding:clamp(26px,4vw,52px);border-radius:var(--r);background:var(--paper2)}
.news h2{font-size:clamp(30px,3.6vw,46px);margin:8px 0 10px}.news p{color:var(--ink2);margin:0}
.nform{display:flex;gap:10px;flex-wrap:wrap}.nform input{flex:1 1 220px;min-height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);font:inherit;background:#fff}
.news .code{font-size:16px;color:var(--ink)}.news .code b{font-family:var(--fm,monospace);font-size:20px;color:var(--blue)}
@media (max-width:760px){.news{grid-template-columns:1fr;gap:20px}}
.paybadges{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--ink2)}
.paybadges .sec{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);margin-right:4px}
.paybadges .pb{border:1px solid var(--line);border-radius:6px;padding:3px 8px;background:#fff;font-weight:600;letter-spacing:.01em}
.fpay{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;opacity:.8;margin:6px 0}
.shipbar{margin:4px 0 10px}.shipbar p{margin:0 0 6px;font-size:15px}
.shipbar i{display:block;height:6px;border-radius:9px;background:var(--paper2);overflow:hidden;position:relative}
.shipbar i::after{content:"";position:absolute;inset:0;width:var(--p);background:var(--blue);border-radius:9px;transition:width .6s var(--ease)}
.upsell{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:16px;padding:16px 18px;border:1.5px dashed var(--blue);border-radius:var(--r)}
.upsell div{display:grid}.upsell span{font-size:14px;color:var(--ink2)}
.sum .disc{color:var(--blue);font-weight:600}
.codebox{display:flex;gap:14px;align-items:flex-end;margin-top:16px}.codebox .fld{max-width:260px}#codeMsg{font-size:14px;color:var(--ink2);padding-bottom:12px}
.assure.mini{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px}.assure.mini li{padding:0}
.rposter.real{box-shadow:none;background:none}
.rposter.real img{position:absolute;object-fit:cover}
.rposter.real .rframe{inset:0;width:100%;height:100%;object-fit:fill;z-index:2;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.pcard .tc-ph,.tc-ph{color:#fff!important;letter-spacing:0;text-transform:none;font-size:14px}
.tcgrid img:not([src]){visibility:hidden}.tcgrid .mat,.tcgrid .teef{background:linear-gradient(100deg,var(--paper2) 30%,#fff 50%,var(--paper2) 70%) 0 0/300% 100%;animation:sk 1.6s linear infinite}.tcgrid .teef{background:none;animation:none}@keyframes sk{to{background-position:-150% 0}}

/* v289 : menu mobile, vignettes textile centrées, ligne de marque */
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.nav.open .burger span:first-child{transform:translateY(4px) rotate(45deg)}.nav.open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.links .mob{display:none}
@media (max-width:820px){
  .nav{grid-template-columns:auto 1fr auto;gap:8px}
  .burger{display:flex}
  .brand{justify-self:start}
  .nav .links{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 6px);flex-direction:column;gap:2px;padding:10px;border-radius:18px;
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:0 20px 40px -18px rgba(11,13,18,.35);border:1px solid var(--line)}
  .nav.open .links{display:flex}
  .nav .links a{font-size:18px;padding:14px 16px;color:var(--ink)}
  .links .mob{display:block}
}
.pcard.tee .frame{display:flex;align-items:center;justify-content:center;padding:4%;overflow:hidden}
.teef.fit{flex:none;max-width:100%;max-height:100%}
@media (max-width:440px){.nav .brand{font-size:21px}.navr .cartbtn{padding:8px 6px}.burger{width:38px;padding:8px}}

/* v290 : pack avec la marque, upsell */
.packnote{display:grid;gap:10px}.packnote p{margin:0}
.packsz select,.upsz select{min-height:38px;border:1px solid var(--line);border-radius:10px;padding:0 8px;font:inherit;font-size:14px;background:#fff;margin-left:6px}
.upsell2{margin-top:22px;padding:18px;border:1.5px dashed var(--blue);border-radius:var(--r)}
.upsell2 h3{font-size:22px;margin:0 0 12px}.upsell2 h3 small{font-family:var(--fb);font-size:14px;color:var(--blue);font-weight:600}
.upgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}.upc .upsz{flex-direction:column}
.upc{display:grid;gap:6px;align-content:start}.upc .frame{aspect-ratio:1;background:var(--paper2);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:6%;overflow:hidden}
.upc .teef{width:100%}.upc span{font-size:13.5px;color:var(--ink2)}.upc .upsz{display:flex;gap:6px}.upc .upsz select{margin:0;flex:1}
.upc .btn{min-height:42px;font-size:15px}

/* v291 : chargement animé */
.ldr{display:grid;justify-items:center;gap:6px;margin:30px auto 10px;padding:26px 20px;max-width:560px;border-radius:var(--r);background:linear-gradient(135deg,#F4F7FF,#fff);border:1px solid var(--line);text-align:center}
.ldr svg{width:min(100%,340px);height:auto;overflow:visible}
.ldr-base{fill:none;stroke:#DDE4F5;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.ldr-line{fill:none;stroke:var(--blue);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ldr 3.2s ease-in-out infinite}
.ldr-dot{fill:#FF4A1C}
@keyframes ldr{0%{stroke-dashoffset:100}70%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.ldr-msg{margin:6px 0 0;font-weight:600;font-size:17px;min-height:1.5em}.ldr-msg.in{animation:ldrin .5s var(--ease)}
@keyframes ldrin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ldr-t{margin:0;font-size:13.5px;color:var(--ink2)}
.drop .ldr{margin:14px auto 0;padding:14px;background:none;border:0}
#tcOut.waiting .tcgrid{opacity:.45;pointer-events:none;filter:saturate(.6);transition:opacity .4s}
@media (prefers-reduced-motion:reduce){.ldr-line{animation:none;stroke-dashoffset:0}.ldr-dot{display:none}}
.stlnote{margin:14px 0 6px;padding:12px 14px;border-radius:var(--r);background:var(--paper2);font-size:15px;color:var(--ink2)}

/* v292 : pictos, textile foncé, vidéo, visuels commande */
.teef .tprint.dk{mix-blend-mode:screen}
.aico{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blue2,#E8EEFF);color:var(--blue);flex:none}
.aico svg{width:22px;height:22px}
.why .aico{width:52px;height:52px;border-radius:16px;margin-bottom:14px}.why .aico svg{width:28px;height:28px}
.assure li{display:flex;gap:12px;align-items:flex-start}.assure li div{display:grid}
.assure.mini li{align-items:center;gap:8px}.assure.mini .aico{width:28px;height:28px;border-radius:8px}.assure.mini .aico svg{width:16px;height:16px}
.assure.mini li::before{display:none}
.tcvid{width:100%;aspect-ratio:9/16;max-height:100%;object-fit:cover;border-radius:12px;background:#0B1A4A;display:grid;place-items:center;color:#fff}
.tcvid.ph b{font-size:46px}.tcvid.ph span{font-size:13px;opacity:.8}
.cart-line .lv{width:86px;aspect-ratio:3/4;display:grid;place-items:center;background:var(--paper2);border-radius:6px;overflow:hidden;position:relative}
.cart-line .lv.tee .teef{width:100%}
.cart-line .lv.vid img{width:100%;height:100%;object-fit:cover;box-shadow:none}.cart-line .lv.vid b{position:absolute;color:#fff;font-size:28px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.cart-line .lv img{box-shadow:none;background:none}
.cart-line .lv .teef img.tbase{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.cart-line .lv .teef img.tprint{aspect-ratio:auto;object-fit:contain}
@media (max-width:560px){.cart-line{grid-template-columns:72px minmax(0,1fr)}.cart-line>div:last-child{grid-column:2;text-align:left!important;display:flex;gap:12px;align-items:center}
  .cart-line img,.cart-line .ph,.cart-line .lv{width:72px}}

/* v293 : croquis instantané dans « Ta course » */
.skwrap{position:relative;display:block;width:100%;aspect-ratio:3/4}
.skwrap .sketch,.skwrap .real{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.skwrap .real{transition:opacity .8s var(--ease)}.skwrap .real.wait{opacity:0}
.teef .tprint.skpos{display:block;mix-blend-mode:normal}
.sketch .skl{stroke-dasharray:1;stroke-dashoffset:1;animation:skdraw 2.4s .2s ease-out forwards}
.sketch .skend{opacity:0;animation:skfade .4s 2.5s forwards}
.sketch .skp{transform-origin:0 1170px;transform:scaleY(0);animation:skup 1.4s .6s ease-out forwards}
@keyframes skdraw{to{stroke-dashoffset:0}}@keyframes skfade{to{opacity:1}}@keyframes skup{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.sketch .skl,.sketch .skp,.sketch .skend{animation:none;stroke-dashoffset:0;transform:none;opacity:1}}

/* v293 : catégories, courses, triathlon, finisher */
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:10px 0 70px}
.cats a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 10px;border-radius:var(--r);background:var(--paper2);text-decoration:none;color:var(--ink);transition:background .3s,transform .3s var(--ease)}
.cats a:hover{background:var(--blue2,#E8EEFF);transform:translateY(-3px)}
.cats i{width:44px;height:44px;color:var(--blue)}.cats i svg{width:100%;height:100%}.cats b{font-weight:600;font-size:15px;text-align:center}
@media (max-width:760px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cats a{padding:14px 6px}.cats i{width:34px;height:34px}.cats b{font-size:13px}}
.pcard .mat svg.rc,.mat svg.sketch.still{display:block;width:100%;height:auto}
.sketch.still .skl,.sketch.still .skp,.sketch.still .skend{animation:none;stroke-dashoffset:0;transform:none;opacity:1}
h3.grp{font-size:24px;margin:40px 0 16px;padding-top:18px;border-top:1px solid var(--line)}
.tri-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.triph{aspect-ratio:3/4;border:1.5px dashed var(--ink3);border-radius:12px;display:grid;place-items:end center;padding:10px;cursor:pointer;background:var(--paper2) center/cover no-repeat;font-size:13.5px;font-weight:600}
.triph.on{border-style:solid;border-color:var(--blue)}.triph.on span{background:rgba(255,255,255,.9);padding:2px 8px;border-radius:99px}.triph.busy{opacity:.5}
#fmts button small{display:block;font-size:11.5px;color:var(--ink2)}

/* v294 : aperçu vidéo en direct, débordements mobiles */
html{overflow-x:clip}
.pcard .frame>*{min-width:0;max-width:100%}
.tcgrid{grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.vprev{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:12px;background:#0B1A4A;--k:.25}
.vprev iframe{position:absolute;left:0;top:0;width:1080px;height:1920px;border:0;transform-origin:0 0;transform:scale(var(--k));pointer-events:none}
.vprev .vload{position:absolute;inset:auto 0 12px;text-align:center;color:#fff;font-size:13px;opacity:.85}
.drop .chg{color:var(--blue);font-weight:600;text-decoration:underline}
@media (max-width:600px){.chipg.c1{display:none}.chipg{transform:scale(.85);transform-origin:right bottom}}
.vprev iframe{width:100%!important;height:100%!important;transform:none!important}
.vsty{display:flex;gap:6px;margin-top:10px;justify-content:center}
.vsty span{padding:7px 12px;border-radius:99px;border:1px solid var(--line);font-size:13px;font-weight:600;background:#fff;cursor:pointer}
.vsty span[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.vpage .vprev.big{max-width:420px;margin:0 auto;border-radius:22px;box-shadow:0 30px 60px -30px rgba(11,13,18,.45)}

/* v296 : survol = autre variante, idées cadeaux */
.pcard.hov .frame{position:relative}
.pcard.tee.hov .alt1{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:4%;opacity:0;transition:opacity .45s var(--ease)}
.pcard.tee.hov .alt0{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.pcard .mat{position:relative}.pcard .mat .altimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
@media (hover:hover){.pcard.tee.hov:hover .alt1,.pcard.hov:hover .mat .altimg{opacity:1}}
.giftg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:90px}
.gift{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--r);background:linear-gradient(160deg,#F4F7FF,#fff);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.gift:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(31,79,224,.45)}
.gift i{width:42px;height:42px;color:var(--blue)}.gift i svg{width:100%;height:100%}.gift b{font-size:20px}.gift span{font-size:14.5px;color:var(--ink2)}
@media (max-width:760px){.giftg{grid-template-columns:1fr 1fr;gap:10px}.gift{padding:16px}.gift b{font-size:17px}}
.lifeg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:90px}
.lifeg a{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;text-decoration:none}
.lifeg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}.lifeg a:hover img{transform:scale(1.04)}
.lifeg span{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.88);color:var(--ink);font-size:13px;font-weight:600}
@media (max-width:760px){.lifeg{grid-template-columns:1fr 1fr;gap:8px}}
.lifev{display:grid;gap:12px}.lifev img{width:100%;border-radius:var(--r);display:block}.lifev figure{margin:0}.lifev figcaption{font-size:13px;color:var(--ink2);margin-top:6px}
.stars{color:#F2B705;letter-spacing:.06em}
.revg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:90px}.revg figure{margin:0;padding:20px;border-radius:var(--r);background:var(--paper2)}
.revg blockquote{margin:10px 0;font-size:15.5px}.revg figcaption{font-size:13px;color:var(--ink2)}
@media (max-width:760px){.revg{grid-template-columns:1fr}}
.revform{margin-top:26px;padding:20px;border-radius:var(--r);background:var(--paper2);display:grid;gap:10px}.revform h3{margin:0}.revform p{margin:0;color:var(--ink2)}
.rstars button{border:0;background:none;font-size:30px;color:#D7D9DF;cursor:pointer;padding:0 2px}.rstars button.on{color:#F2B705}
.revform textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit}

/* v297 : accueil en carrousel */
.hero3{padding:36px 0 50px}
.h3txt{max-width:760px;margin:0 auto 26px;text-align:center}
.h3txt h1{font-size:clamp(42px,7vw,96px);margin:12px 0 14px;line-height:.95}
.h3txt .lead{margin:0 auto 22px;max-width:620px}
.h3txt .ctas{justify-content:center}
.car{position:relative;margin:0 calc(-1 * max(16px,(100vw - 1200px)/2))}
.cartrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px max(16px,calc((100vw - 1200px)/2)) 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cartrack::-webkit-scrollbar{display:none}
.slide{flex:0 0 clamp(230px,26vw,320px);scroll-snap-align:start;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:12px}
.slide .sim{aspect-ratio:4/5;border-radius:22px;background:var(--paper2);display:flex;align-items:center;justify-content:center;padding:13% 15%;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.slide.tee .sim{padding:6%}.slide.tee .teef{width:92%}
.slide:hover .sim{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(11,13,18,.4)}
.slide .sim .hang{width:100%}
.stx{display:grid;gap:2px;padding:0 4px}.stx span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.stx b{font-family:var(--fh);font-weight:var(--fh-w);font-size:22px;line-height:1.1}.stx em{font-style:normal;font-size:14.5px;color:var(--blue);font-weight:600}
.vfake{width:100%;aspect-ratio:9/14;border-radius:16px;background:linear-gradient(160deg,#0B1A4A,#1F4FE0);color:#fff;display:grid;place-items:center;align-content:center;gap:10px;text-align:center}
.vfake b{font-size:44px}.vfake span{font-size:14px;padding:0 14px}
.carb{position:absolute;top:calc(50% - 60px);z-index:3;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:28px;line-height:1;cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.3)}
.carb.prev{left:max(10px,calc((100vw - 1200px)/2 - 24px))}.carb.next{right:max(10px,calc((100vw - 1200px)/2 - 24px))}
@media (max-width:760px){.carb{display:none}.slide{flex-basis:72vw}.hero3{padding-top:20px}}
.hero3 .trust{justify-content:center;margin-top:6px}

/* v298 : DA colorée (fonds pastel des couleurs de nos points) */
.pcard .frame,.slide .sim,.upc .frame{background:var(--tint,var(--paper2))!important;transition:background .4s,transform .5s var(--ease),box-shadow .5s}
.cats a{background:var(--tint,var(--paper2))}.cats i{color:var(--tink,var(--blue))}
.gift{background:var(--tint,#F4F7FF);border-color:transparent}.gift i{color:var(--tink,var(--blue))}
.pcard:hover .frame{filter:saturate(1.15)}
.custom-mini{display:grid;gap:4px;margin:36px 0 60px;padding:22px 24px;border-radius:var(--r);background:linear-gradient(135deg,#0B1A4A,#1F4FE0);color:#fff;text-decoration:none}
.custom-mini span{opacity:.85}
.nav .links a{white-space:nowrap}
@media (max-width:1100px) and (min-width:821px){.nav .links a{padding:10px 8px;font-size:13px}}
.why>div{border-radius:var(--r);padding:22px;background:#fff}
.news{background:linear-gradient(135deg,#FFE7DE,#FFF1CC)}
.revg figure:nth-child(3n+1){background:#E6ECFF}.revg figure:nth-child(3n+2){background:#E1F3E8}.revg figure:nth-child(3n){background:#FFE4F0}
.cats{grid-template-columns:repeat(6,minmax(0,1fr))}@media (max-width:760px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.facts-strip{display:none}

/* ───────── v299 : couleurs de la marque partout, éditeur de carte, carrousel, bandeau, popup, cartes cadeaux ───────── */
:root{--c-blue:#1F4FE0;--c-orange:#FF4A1C;--c-green:#2FA36B;--c-yellow:#F2B705;--c-pink:#E0468C;--c-violet:#6B5BD6;--c-sky:#2D8FD5}

/* bandeau défilant : un bloc de couleur par message */
.ticker{background:var(--ink);height:36px;font-size:13px;font-weight:500}
.ticker span{height:36px;display:flex;align-items:center;padding:0 22px;color:#fff;background:var(--k,var(--c-blue))}
.ticker span::after{display:none}
.ticker .k0{--k:var(--c-blue)}.ticker .k1{--k:var(--c-orange)}.ticker .k2{--k:var(--c-green)}.ticker .k3{--k:var(--c-yellow);color:#2A2100}
.ticker .k4{--k:var(--c-pink)}.ticker .k5{--k:var(--c-violet)}.ticker .k6{--k:var(--c-sky)}

/* réassurance : pastilles multicolores */
.trust span:nth-child(4n+1)::before{background:var(--c-blue)}.trust span:nth-child(4n+2)::before{background:var(--c-orange)}
.trust span:nth-child(4n+3)::before{background:var(--c-green)}.trust span:nth-child(4n+4)::before{background:var(--c-pink)}

/* carrousel : commandes sous les vignettes (plus rien par-dessus les produits) */
.carb{position:static;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;box-shadow:none;
  transition:transform .25s var(--ease),background .25s,opacity .25s;-webkit-backdrop-filter:none;backdrop-filter:none}
.carb svg{width:22px;height:22px}
.carb.prev{background:#FFE7DE;color:var(--c-orange)}.carb.next{background:var(--c-orange);color:#fff;box-shadow:0 12px 24px -12px rgba(255,74,28,.7)}
.carb:hover:not(:disabled){transform:scale(1.06)}.carb:disabled{opacity:.35;cursor:default}
.carctl{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1200px;margin:2px auto 0;padding:0 16px}
.cardots{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cardots i{width:8px;height:8px;border-radius:99px;background:var(--c);opacity:.28;transition:width .35s var(--ease),opacity .35s}
.cardots i.on{width:28px;opacity:1}
.carbtns{display:flex;gap:10px}
@media (max-width:760px){.carctl{justify-content:center}.carbtns{display:none}}

/* éditeur de carte */
.seg.orient button{display:inline-flex;align-items:center;gap:8px}
.seg.orient button:disabled{opacity:.35;cursor:not-allowed}
.oi{display:inline-block;border:2px solid currentColor;border-radius:3px}.oi.p{width:12px;height:16px}.oi.l{width:17px;height:12px}
.mstyles{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.mstyles button{padding:0;border:0;background:none;cursor:pointer;text-align:center;font-size:12.5px;color:var(--ink2);display:flex;flex-direction:column;gap:6px}
.mstyles button svg,.mstyles button img,.mstyles button .ph{width:100%;aspect-ratio:1;border-radius:14px;display:block;object-fit:cover;
  box-shadow:0 0 0 1px var(--line);transition:transform .25s var(--ease),box-shadow .25s}
.mstyles button{position:relative}
.mstyles button:hover svg,.mstyles button:hover img{transform:translateY(-2px)}
.mstyles button[aria-pressed=true] svg,.mstyles button[aria-pressed=true] img{box-shadow:0 0 0 3px var(--c-orange),0 10px 20px -12px rgba(255,74,28,.6)}
.mstyles button[aria-pressed=true]{color:var(--ink);font-weight:600}
.mstyles .satn{position:absolute;left:0;right:0;top:0;aspect-ratio:1;border-radius:14px;background:rgba(10,16,30,.45);pointer-events:none}
.step .lbl small{letter-spacing:0;text-transform:none;font-size:12px;color:var(--ink3)}
.twrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.twrow .lbl{margin:0}
.twrow input[type=range]{width:100%;accent-color:var(--c-orange);height:28px}
.twrow output{font-family:'Plex',monospace;font-size:14px;min-width:40px;text-align:right}
.chips.lines button{display:inline-flex;align-items:center;gap:10px}
.chips.lines svg{width:44px;height:10px}
.chips button[aria-pressed=true]{border-color:var(--ink);background:var(--ink)}
.swatches button[aria-pressed=true]{outline-color:var(--c-orange)}

/* aperçu paysage */
.mock.land{aspect-ratio:4/3;max-width:640px}
.mock.s-framed.land{padding:3.7% 2.8%}.mock.s-framed.land .viewport{inset:3.7% 2.8%}

/* popup newsletter */
dialog.nlp{border:0;padding:0;border-radius:24px;max-width:min(760px,calc(100vw - 32px));width:100%;overflow:hidden;display:grid;grid-template-columns:42% 1fr;
  box-shadow:0 40px 90px -30px rgba(11,13,18,.55);animation:nlpIn .45s var(--ease)}
dialog.nlp:not([open]){display:none}
dialog.nlp::backdrop{background:rgba(11,13,18,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes nlpIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.nlpv{background:linear-gradient(150deg,var(--c-orange),var(--c-pink) 55%,var(--c-violet));color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:36px;position:relative;overflow:hidden}
.nlpv::before{content:"";position:absolute;inset:-30%;background:repeating-radial-gradient(circle at 70% 30%,rgba(255,255,255,.16) 0 1.5px,transparent 1.5px 22px)}
.nlpv b{position:relative;font-family:'Archivo',var(--fh);font-weight:800;font-size:96px;line-height:.9;letter-spacing:-.04em}.nlpv b small{font-size:.5em}
.nlpv span{position:relative;font-size:17px;margin-top:8px}
.nlpf{position:relative;padding:34px 34px 30px;display:flex;flex-direction:column;gap:12px;background:#fff}
.nlpf h2{font-size:30px}.nlpf p{margin:0;color:var(--ink2);font-size:15px}
.nlpin{display:flex;gap:8px;flex-wrap:wrap}.nlpin input{flex:1;min-width:180px;min-height:52px;border:1px solid var(--line);border-radius:999px;padding:0 18px;font-size:16px}
.nlpin .btn{background:var(--c-orange);border-color:var(--c-orange);box-shadow:0 10px 24px -12px rgba(255,74,28,.7)}
.nlpx{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper2);font-size:24px;line-height:1;cursor:pointer}
.nlpok{font-size:16px!important;color:var(--ink)!important}.nlpok b{font-family:'Plex',monospace;color:var(--c-orange)}
.nlpm{color:var(--c-pink);min-height:1em}
@media (max-width:640px){dialog.nlp{grid-template-columns:1fr}.nlpv{padding:24px 26px;flex-direction:row;align-items:baseline;gap:12px}.nlpv b{font-size:64px}.nlpf{padding:26px 22px}}

/* cartes cadeaux */
.giftp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start;padding:40px 0 90px}
.gvis{position:sticky;top:96px;padding:clamp(24px,5vw,56px);border-radius:24px;background:radial-gradient(120% 90% at 20% 0%,#FFE7DE,#ECE8FF 60%,#E2F1FB)}
.gvis img{width:100%;border-radius:22px;box-shadow:0 40px 60px -30px rgba(31,79,224,.55);transform:rotate(-3deg);transition:transform .6s var(--ease)}
.gvis:hover img{transform:rotate(0)}
.gcfg{display:flex;flex-direction:column;gap:16px}.gcfg h1{font-size:clamp(40px,5vw,64px)}.gcfg .lead{margin:0;color:var(--ink2);font-size:17.5px}
.chips.amounts button{min-width:86px;font-size:18px;font-weight:600;text-align:center}
.gfacts{list-style:none;padding:0;margin:4px 0;display:grid;gap:8px}
.gfacts li{padding-left:28px;position:relative;font-size:15px}
.gfacts li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:var(--c-green);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 8.5l3 3 6-7" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/100% no-repeat}
.gfacts li:nth-child(2)::before{background:var(--c-blue)}.gfacts li:nth-child(3)::before{background:var(--c-pink)}
.gcode b{font-family:'Plex',monospace;color:var(--c-blue);margin-right:8px}
@media (max-width:900px){.giftp{grid-template-columns:1fr}.gvis{position:relative;top:0}}

/* petites corrections d'UX : rien ne déborde, rien ne passe par-dessus */
.pcard h3,.slide .stx b{overflow-wrap:anywhere}
.nav .links a{white-space:nowrap}
@media (max-width:1180px) and (min-width:821px){.nav .links a{padding:10px 7px;font-size:13px}}
.assure.mini b::before{display:none}
.cart-line .lv.gift{background:linear-gradient(150deg,#FFE7DE,#ECE8FF)}.cart-line .lv.gift img{width:92%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:6px}
.mstyles button img{object-position:50% 0}
.h3txt h1 i,.gcfg h1 i{background:linear-gradient(90deg,var(--c-blue),var(--c-violet) 45%,var(--c-pink) 75%,var(--c-orange));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.cfg details.about{border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:#fff}
.cfg details.about summary{cursor:pointer;font-weight:600}
.cfg details.about ul{margin:10px 0 6px;padding-left:18px;display:grid;gap:6px;font-size:14.5px;color:var(--ink2)}
.cfg details.about .src{font-size:12.5px;color:var(--ink3);margin:6px 0}
.cfg details.about a{font-size:14px;color:var(--c-blue)}
.mstyles .ph.sat{background:linear-gradient(135deg,#5d6b4a,#8a8f63 40%,#6f7f8f 70%,#c9c3b0)}
@media (max-width:560px){.mstyles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.mstyles button{font-size:11px}.mstyles button svg,.mstyles button img,.mstyles button .ph{border-radius:10px}}
.sum .hint2{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#E1F3E8;color:#14532D;font-size:14px;display:block}
.sum .hint2 a{color:inherit;font-weight:600}

/* v300 : carte encore en calcul, dit clairement dans l'aperçu */
.mapchip{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);
  padding:7px 12px;border-radius:999px;background:rgba(20,24,28,.82);color:#fff;font:600 12px/1.3 var(--sans,system-ui);box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none}
.mapchip[hidden]{display:none}
.mapchip i{width:10px;height:10px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mcspin .9s linear infinite}
@keyframes mcspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mapchip i{animation:none}}

/* v301 : t-shirts bien détachés du fond */
.pcard.tee .frame,.slide.tee .sim,.upc .frame{background:color-mix(in srgb,var(--tink,#1F4FE0) 30%,var(--tint,#E6ECFF))!important}
.pcard.tee .teef,.slide.tee .teef,.upc .teef{filter:drop-shadow(0 14px 20px rgba(0,0,0,.22))}
/* v301 : l'aperçu reste à l'écran */
@media (min-width:981px){
  .stage{top:calc(var(--navh,64px) + 12px);max-height:calc(100vh - var(--navh,64px) - 24px)}
  .stage .mock{width:min(100%,calc((100vh - var(--navh,64px) - 190px) * .75))}
  .stage .mock.land{width:min(100%,calc((100vh - var(--navh,64px) - 190px) * 1.333))}
}
.stsp{height:0}
@media (min-width:981px){.stsp{display:none}}
@media (max-width:980px){.stsp{margin-bottom:-28px}}
@media (max-width:980px){
  .stage.mini{position:fixed;z-index:25;top:var(--navh,60px);left:0;right:0;padding:8px 16px 10px;border-radius:0 0 18px 18px;cursor:pointer;
    background:color-mix(in srgb,var(--paper,#fff) 95%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 10px 24px rgba(0,0,0,.12);animation:stdrop .25s var(--ease,ease)}
  .stage.mini .mock{width:auto;height:min(27vh,240px);max-width:none;margin:0 auto}
  .stage.mini .mock.land{height:min(20vh,180px)}
  .stage.mini .views,.stage.mini .mapchip{display:none}
  .stage.mini::after{content:"Toucher pour agrandir";position:absolute;right:14px;bottom:8px;font:600 11px/1 var(--fb,system-ui);color:var(--ink2,#555);opacity:.8}
}
@keyframes stdrop{from{transform:translateY(-14px);opacity:.4}to{transform:none;opacity:1}}

/* v301 : prix barré (seulement pendant une vraie promo) */
.meta b s,.total s,.chips small s,small s{font-weight:500;opacity:.55;margin-right:4px;text-decoration-thickness:1.5px}
.total s{font-size:.55em}
.total .pbadge{display:inline-block;margin-left:10px;vertical-align:middle;padding:3px 9px;border-radius:999px;background:#E0263D;color:#fff;font:700 12px/1.4 var(--fb,system-ui);letter-spacing:.02em}
.custom-mini.top{margin:6px 0 34px;grid-template-columns:1fr auto;align-items:center}
.custom-mini.top b{grid-column:1}.custom-mini.top span{grid-column:1}
.custom-mini.top em{grid-column:2;grid-row:1/3;font-style:normal;font-weight:700;padding:10px 16px;border-radius:999px;background:#fff;color:#0B1A4A;white-space:nowrap}
@media (max-width:600px){.custom-mini.top{grid-template-columns:1fr}.custom-mini.top em{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}

/* bandeau d'accord (mesure publicitaire Meta) : refuser aussi simple qu'accepter */
.cbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;max-width:560px;margin:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.18);color:var(--ink,#1F2A2E);font-size:14px;line-height:1.4}
.cbar p{margin:0;flex:1 1 260px}.cbar div{display:flex;gap:8px}.cbar .btn{min-width:96px}
@media (prefers-color-scheme:dark){.cbar{background:rgba(30,32,36,.92);color:#f2f2f2}}

/* agrandir l'aperçu ou une photo */
.zbtn{justify-self:center;margin-top:10px;border:0;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink,#1F2A2E);
  font:inherit;font-size:14px;cursor:zoom-in;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.zbtn[hidden]{display:none}
html.zoomed{overflow:hidden}
.zoom{position:fixed;inset:0;z-index:90;background:rgba(20,22,26,.92);display:grid;grid-template-rows:1fr auto}
.zoom .zarea{position:relative;overflow:hidden;touch-action:none}
.zoom .zc{position:absolute;left:0;top:0;transform-origin:0 0}
.zoom .zc iframe{pointer-events:none}
.zoom .zc img{width:100%;height:100%;object-fit:contain;display:block}
.zoom .zshield{position:absolute;inset:0;cursor:grab}
.zoom .zbar{display:flex;justify-content:center;gap:8px;padding:12px}
.zoom .zbar button{min-width:52px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:16px;cursor:pointer}
.zoom .zbar button:hover{background:rgba(255,255,255,.26)}

/* v352 : photos en situation (accueil + survol des cartes) */
.lifes{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;margin-bottom:80px;scrollbar-width:thin}
.lifes a{position:relative;flex:0 0 clamp(220px,28vw,340px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;text-decoration:none}
.lifes img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}.lifes a:hover img{transform:scale(1.04)}
.lifes span{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.9);color:var(--ink);font-size:12.5px;line-height:1.35}
.lifes span b{display:block;font-size:13.5px}
.pcard.lifeh .frame{position:relative;overflow:hidden}
.pcard .lifeimg{position:absolute;inset:0;width:100%!important;height:100%;max-width:none!important;object-fit:cover;opacity:1;z-index:2;transition:opacity .5s var(--ease)}
@media (hover:hover){.pcard.lifeh:hover .lifeimg{opacity:0}}
.slide.life .sim{padding:0!important}.slide .sim img.fill{width:100%;height:100%;object-fit:cover;display:block}
.lifev{grid-template-columns:1fr 1fr}.lifev figure:first-child{grid-column:1/-1}
@media (max-width:760px){.lifes a{flex-basis:72vw}}

/* v355 : articles du blog sur l'accueil */
.blogg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.blogg a{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.blogg .bimg{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--paper2)}.blogg img{width:100%;height:100%;object-fit:cover;display:block}
.blogg b{font-size:18px;line-height:1.25}.blogg span:last-child{font-size:14px;color:var(--ink2)}
@media (max-width:760px){.blogg{grid-template-columns:1fr}}

/* v357 : animation « Ta course » (fichier déposé → tracé sur le relief → affiche) */
.gpxanim{position:relative;display:block;width:min(100%,320px);aspect-ratio:4/5;justify-self:center;text-decoration:none;color:#fff}
.gpxanim>*{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
.ga-drop{position:absolute;inset:8% 4%;border:2px dashed rgba(255,255,255,.55);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:22%!important;gap:6px;text-align:center;padding:16px;animation-name:gaDrop}
.ga-drop svg{width:42px;height:42px;opacity:.9}.ga-drop b{font-size:18px}.ga-drop span{font-size:13px;opacity:.75}
.ga-file{position:absolute;left:50%;top:30%;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:#fff;color:#0B1A4A;font-weight:600;font-size:14px;box-shadow:0 18px 30px -12px rgba(0,0,0,.45);animation-name:gaFile;transform:translate(-50%,-260%);opacity:0}
.ga-file i{font-style:normal;font-size:11px;font-weight:800;background:#E8452C;color:#fff;border-radius:6px;padding:6px 7px}
.ga-poster{position:absolute;inset:2% 6%;padding:10px;background:linear-gradient(135deg,#C9A271,#9C7547);border-radius:4px;box-shadow:0 30px 50px -24px rgba(0,0,0,.6);animation-name:gaPoster;opacity:0}
.ga-paper{width:100%;height:100%;background:#F4EFE4;padding:9% 9% 7%;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;color:#1B2326}
.ga-map{width:100%;flex:1;min-height:0;background:#EDE5D3;border-radius:2px}
.ga-topo ellipse{fill:none;stroke:#B9AA8B;stroke-width:.8;opacity:0;animation:gaFade 10s infinite}
.ga-route{fill:none;stroke:#D2452B;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:gaRoute 10s infinite cubic-bezier(.45,.1,.3,1)}
.ga-dot{fill:#D2452B;stroke:#F4EFE4;stroke-width:1.5;opacity:0;animation:gaDotA 10s infinite}.ga-dot.b{animation-name:gaDotB}
.ga-txt{display:flex;flex-direction:column;opacity:0;animation:gaTxt 10s infinite}.ga-txt b{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:17px;line-height:1.1}.ga-txt span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#6B6458}
.ga-prof{width:100%;height:28px;clip-path:inset(0 100% 0 0);animation:gaProf 10s infinite}.ga-prof path{fill:#D2452B;opacity:.75}
.ga-name{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:10px;border-top:1px solid #1B2326;padding-top:5px;opacity:0;animation:gaTxt2 10s infinite}
.ga-ok{position:absolute;left:50%;bottom:-4%;transform:translate(-50%,10px);white-space:nowrap;padding:8px 14px;border-radius:99px;background:#fff;color:#0B1A4A;font-size:13px;font-weight:700;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);opacity:0;animation-name:gaOk}
@keyframes gaDrop{0%,2%{opacity:0;transform:scale(.96)}6%,24%{opacity:1;transform:none}22%{border-color:#fff;background:rgba(255,255,255,.08)}30%,100%{opacity:0;transform:scale(1.04)}}
@keyframes gaFile{0%,6%{opacity:0;transform:translate(-50%,-260%) rotate(-6deg)}14%{opacity:1;transform:translate(-50%,-40%) rotate(3deg)}19%{opacity:1;transform:translate(-50%,-50%) rotate(0)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}30%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
@keyframes gaPoster{0%,27%{opacity:0;transform:scale(.92) translateY(10px)}34%,94%{opacity:1;transform:none}100%{opacity:0;transform:scale(.98)}}
@keyframes gaFade{0%,32%{opacity:0}42%,94%{opacity:1}100%{opacity:0}}
@keyframes gaRoute{0%,38%{stroke-dashoffset:1}62%,100%{stroke-dashoffset:0}}
@keyframes gaDotA{0%,38%{opacity:0}41%,96%{opacity:1}100%{opacity:0}}
@keyframes gaDotB{0%,61%{opacity:0}64%,96%{opacity:1}100%{opacity:0}}
@keyframes gaTxt{0%,64%{opacity:0;transform:translateY(6px)}70%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gaProf{0%,68%{clip-path:inset(0 100% 0 0)}80%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes gaTxt2{0%,78%{opacity:0}84%,96%{opacity:1}100%{opacity:0}}
@keyframes gaOk{0%,84%{opacity:0;transform:translate(-50%,10px)}88%,96%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.gpxanim *,.gpxanim>*{animation:none!important}.ga-drop,.ga-file{display:none}.ga-poster,.ga-topo ellipse,.ga-dot,.ga-txt,.ga-name,.ga-ok{opacity:1}.ga-route{stroke-dashoffset:0}.ga-prof{clip-path:none}}