/* FlashTech store page v2 — products page redesign (products.html + fr/produits.html only).
   Scoped under .fts so it never touches other pages. Keeps the hooks used by site.js and the
   inline cart script: data-pa-* attributes and .pa-qty-*, .pa-addcart-static, .pa-product-title-static,
   .pa-product-image-wrap-static, .pa-is-hidden-static.
   Breakpoints: phone ≤760px · tablet ≤1100px · desktop · large ≥1600px */

.fts,.fts-drawer,.fts-scrim{
  --fts-navy:#002366; --fts-navy-2:#14256f; --fts-deep:#061a4d;
  --fts-orange:#ff7f00; --fts-orange-hover:#ff9426; --fts-orange-ink:#b85600;
  --fts-ink:#0b1630; --fts-muted:#4f5b6f; --fts-line:#365195;
  --fts-ground:#ffffff; --fts-paper:#fff; --fts-soft:#edf2ff;
  --fts-slate:#1E293B; --fts-card-line:#E2E6EC; --fts-card-line-hover:#C5CCD6;
  --fts-font:var(--font-body,'Assistant','Inter',Arial,sans-serif);
}
.fts{background:var(--fts-ground); color:var(--fts-ink); font-family:var(--fts-font); font-size:17px; line-height:1.5}
.fts-drawer *{box-sizing:border-box}
.fts-drawer button{font:inherit;cursor:pointer}
.fts-drawer :focus-visible{outline:3px solid var(--fts-orange);outline-offset:2px}
.fts *{box-sizing:border-box}
.fts-wrap{max-width:1320px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.fts button,.fts input,.fts select{font:inherit}
.fts button{cursor:pointer}
.fts :focus-visible{outline:3px solid var(--fts-orange);outline-offset:2px}
.fts .pa-visually-hidden-static,.fts-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- hero ---------- */
.fts-hero{background:linear-gradient(180deg,var(--fts-navy) 0%,var(--fts-deep) 100%);color:#fff;overflow:hidden;position:relative}
.fts-hero::before{content:"";position:absolute;width:700px;height:700px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(255,127,0,.22),rgba(255,127,0,0) 65%);pointer-events:none}
.fts-hero .fts-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;padding-block:40px 44px;position:relative}
.fts-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--fts-orange)}
.fts-kicker::before{content:"";width:30px;height:3px;background:var(--fts-orange)}
.fts-hero-title{margin:12px 0 0;font-weight:900;font-size:clamp(32px,4.2vw,56px);line-height:1;letter-spacing:-.03em;text-wrap:balance}
.fts-hero-title em{font-style:normal;color:var(--fts-orange)}
.fts-lead{margin:14px 0 0;font-size:18px;color:#cdd7f7;max-width:46ch}
.fts-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.fts-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:6px;font-weight:800;font-size:17px;text-decoration:none;border:0;transition:transform .2s,background .2s,border-color .2s}
.fts-btn--or{background:var(--fts-orange);color:#111}
.fts-btn--or:hover{background:var(--fts-orange-hover);transform:translateY(-2px);color:#111}
.fts-btn--ghost{border:1.5px solid #5670bd;color:#fff;background:transparent}
.fts-btn--ghost:hover{border-color:#fff;color:#fff}
.fts-facts{display:flex;flex-wrap:wrap;gap:10px 24px;margin:22px 0 0;padding:0;list-style:none;font-weight:700;font-size:15px;color:#e6ebff}
.fts-facts li{display:flex;align-items:center;gap:8px}
.fts-facts svg{color:var(--fts-orange);flex-shrink:0}
.fts-stack{position:relative;height:330px;max-width:460px;width:100%;justify-self:end}
.fts-tile{position:absolute;background:#fff;border-radius:10px;box-shadow:0 26px 50px rgba(0,0,0,.35);overflow:hidden;animation:fts-drift 6s ease-in-out infinite}
.fts-tile img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}
.fts-tile span{position:absolute;left:10px;bottom:10px;background:var(--fts-navy);color:#fff;font-size:13px;font-weight:800;padding:5px 9px;border-radius:4px}
.fts-t1{width:200px;height:200px;left:16%;top:8%;z-index:3}
.fts-t2{width:140px;height:140px;right:0;top:0;animation-delay:-1.5s}
.fts-t3{width:140px;height:140px;left:0;bottom:0;animation-delay:-3s}
.fts-t4{width:150px;height:150px;right:6%;bottom:0;z-index:4;animation-delay:-4.5s}
@keyframes fts-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fts-hero .fts-wrap>*{animation:fts-in .8s cubic-bezier(.2,.7,.2,1) both}
.fts-hero .fts-wrap>:last-child{animation-delay:.15s}
@keyframes fts-in{from{transform:translateY(26px)}to{transform:none}}

/* ---------- categories ---------- */
.fts-cats{padding-block:56px 8px}
.fts-h2{margin:0 0 22px;font-weight:900;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--fts-navy)}
.fts-cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.fts-cat{display:flex;flex-direction:column;padding:0;background:var(--fts-paper);border:1.5px solid var(--fts-line);border-radius:8px;text-align:left;color:var(--fts-ink);overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.fts-cat:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(0,35,102,.12);border-color:var(--fts-navy-2)}
.fts-cat-img{position:relative;display:block;aspect-ratio:4/3;max-width:100%;background:#fff;overflow:hidden}
.fts-cat-img img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;transition:transform .45s ease}
.fts-cat:hover .fts-cat-img img{transform:scale(1.08)}
.fts-cat-img--mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:10px}
.fts-cat-img--mosaic img{position:static;width:100%;height:100%;min-height:0}
.fts-cat-txt{flex-grow:1;display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;background:var(--fts-navy);color:#fff;border-top:1.5px solid var(--fts-navy);transition:background .25s,color .25s}
.fts-cat strong{font-size:17px;font-weight:800;line-height:1.2}
.fts-cat small{font-size:14px;font-weight:700;color:#cdd7f7}
.fts-cat[aria-pressed="true"]{border-color:var(--fts-orange);box-shadow:0 0 0 2px var(--fts-orange)}
.fts-cat[aria-pressed="true"] .fts-cat-txt{background:var(--fts-orange);color:#111;border-top-color:var(--fts-orange)}
.fts-cat[aria-pressed="true"] small{color:#3a2200}

/* ---------- toolbar ---------- */
.fts-shop{padding-block:34px 72px;scroll-margin-top:110px}
.fts-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.fts-count{font-weight:700;color:#fff;background:var(--fts-navy);padding:8px 14px;border-radius:6px;margin-right:auto}
.fts-search{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;background:var(--fts-paper);border:1.5px solid var(--fts-line);border-radius:6px;min-width:0;flex:0 1 320px}
.fts-search input{border:0;outline:0;background:transparent;width:100%;min-width:0;color:var(--fts-ink);font-size:16px}
.fts-search:focus-within{border-color:var(--fts-navy)}
.fts-sort{display:flex;align-items:center;gap:6px;height:48px;padding:0 12px;background:var(--fts-paper);border:1.5px solid var(--fts-line);border-radius:6px;font-weight:700;color:var(--fts-navy);font-size:16px}
.fts-sort select{border:0;background:transparent;color:var(--fts-navy);font-weight:700}

/* ---------- product grid ---------- */
.fts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.fts .pa-is-hidden-static{display:none!important}
.fts-card{display:flex;flex-direction:column;background:var(--fts-paper);border:1.5px solid var(--fts-card-line);border-radius:8px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;animation:fts-pop .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes fts-pop{from{transform:translateY(18px) scale(.98)}to{transform:none}}
.fts-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(15,23,42,.14);border-color:var(--fts-card-line-hover)}
.fts-media{position:relative;display:block;aspect-ratio:1/1;max-width:100%;background:#fff;overflow:hidden}
.fts-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18px;transition:opacity .45s ease,transform .6s ease}
.fts-media .fts-alt{opacity:0;transform:scale(1.04)}
.fts-card:hover .fts-media--swap .fts-main{opacity:0;transform:scale(1.06)}
.fts-card:hover .fts-media--swap .fts-alt{opacity:1;transform:scale(1)}
.fts-card:hover .fts-media:not(.fts-media--swap) .fts-main{transform:scale(1.06)}
.fts-info{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;background:var(--fts-slate);color:#fff;border-top:1.5px solid var(--fts-slate);flex-grow:1}
.fts-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fts-price{font-size:26px;font-weight:900;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fts-best{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:#e56d00;padding:4px 9px;border-radius:4px;align-self:center}
.fts-title{margin:0;font-size:17px;line-height:1.3;font-weight:700}
.fts-title a{color:#fff;text-decoration:none}
.fts-title a:hover{color:#fff;text-decoration:underline}
.fts-feats{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fts-feats li{padding:3px 9px;background:var(--fts-soft);border-radius:4px;font-size:13px;font-weight:700;color:var(--fts-navy-2)}
.fts-buy{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.fts .fts-qty{display:flex;border:1.5px solid #fff;border-radius:6px;overflow:hidden;flex-shrink:0;background:#fff}
.fts .fts-qty button{width:34px;height:40px;border:0;border-radius:0;background:#fff;font-size:20px;font-weight:800;color:var(--fts-ink);padding:0}
.fts .fts-qty input{width:32px;height:40px;border:0;border-inline:1.5px solid #c9d2ec;border-radius:0;text-align:center;font-weight:800;font-size:15px;color:var(--fts-ink);background:#fff;padding:0;font-variant-numeric:tabular-nums}
.fts-add{flex-grow:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border:0;border-radius:6px;background:#e56d00;color:#fff;font-weight:800;font-size:15px;transition:background .2s,color .2s}
.fts-add::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2L21 8H6.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.2a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2L21 8H6.2'/%3E%3C/svg%3E") center/contain no-repeat}
.fts-add:hover{background:var(--fts-orange);color:#fff}
.fts-add.is-added{background:#0f7a35;color:#fff}
.fts-empty{grid-column:1/-1;padding:48px;text-align:center;background:var(--fts-paper);border:1.5px dashed var(--fts-line);border-radius:8px;color:var(--fts-muted);font-weight:600}

/* ---------- reassurance ---------- */
.fts-assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:64px}
.fts-assure>div{display:flex;gap:16px;align-items:center;padding:24px;background:var(--fts-paper);border:1.5px solid var(--fts-line);border-radius:8px}
.fts-assure svg{flex-shrink:0;color:var(--fts-orange)}
.fts-assure strong{display:block;color:var(--fts-navy);font-size:18px}
.fts-assure small{color:var(--fts-muted);font-size:15px}

/* ---------- mini-cart drawer (reads the existing flashtech_cart_v1 cart) ---------- */
.fts-scrim{position:fixed;inset:0;background:rgba(6,18,50,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:2147483000}
.fts-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;color:var(--fts-ink);z-index:2147483001;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s;display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;font-family:var(--fts-font)}
.fts-cart-open .fts-scrim{opacity:1;pointer-events:auto}
.fts-cart-open .fts-drawer{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fts-dh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fts-dh .fts-h2{margin:0;font-size:26px}
.fts-x{width:44px;height:44px;border:1.5px solid var(--fts-line);border-radius:6px;background:#fff;font-size:24px;line-height:1;color:var(--fts-ink)}
.fts-ship{margin:18px 0;padding:14px;background:var(--fts-soft);border-radius:8px;font-weight:700;font-size:15px;color:var(--fts-navy)}
.fts-meter{height:8px;border-radius:4px;background:#d5ddf3;margin-top:10px;overflow:hidden}
.fts-meter i{display:block;height:100%;width:0;background:var(--fts-orange);transition:width .5s ease}
.fts-lines{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px}
.fts-line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--fts-line)}
.fts-line img{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--fts-line);border-radius:6px}
.fts-line div{font-size:15px;font-weight:600;line-height:1.3;min-width:0}
.fts-line span{color:var(--fts-muted);font-weight:500}
.fts-line b{color:var(--fts-navy)}
.fts-total{display:flex;justify-content:space-between;font-size:22px;font-weight:900;color:var(--fts-navy);padding-block:16px}
.fts-drawer .fts-btn{width:100%}
.fts-drawer .fts-btn+.fts-btn{margin-top:10px}
.fts-btn--line{border:1.5px solid var(--fts-line);background:#fff;color:var(--fts-navy)}
.fts-btn--line:hover{border-color:var(--fts-navy);color:var(--fts-navy)}
body.fts-cart-open{overflow:hidden}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .fts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fts-cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fts-hero .fts-wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:20px;padding-block:32px 36px}
  .fts-stack{height:240px}
  .fts-t1{width:140px;height:140px;left:8%}.fts-t2{width:100px;height:100px}.fts-t3{width:100px;height:100px}.fts-t4{width:110px;height:110px;right:0}
  .fts-tile span{font-size:11px;padding:3px 6px;left:6px;bottom:6px}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  .fts{font-size:16px}
  /* hero: text, then the product images, buttons side by side */
  .fts-hero .fts-wrap{grid-template-columns:1fr;gap:18px;padding-block:26px 28px}
  .fts-hero-title{font-size:36px}
  .fts-lead{font-size:16px}
  .fts-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .fts-btn{min-height:48px;padding:0 10px;font-size:15px;text-align:center;line-height:1.2}
  .fts-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;font-size:12.5px;line-height:1.25;text-align:center}
  .fts-facts li{flex-direction:column;gap:6px}
  .fts-stack{display:block;height:230px;max-width:340px;width:100%;margin:0 auto;justify-self:center}
  .fts-t1{width:150px;height:150px;left:calc(50% - 75px);top:4px}
  .fts-t2{width:104px;height:104px;right:0;top:0}
  .fts-t3{width:104px;height:104px;left:0;bottom:0}
  .fts-t4{width:110px;height:110px;right:6px;bottom:0}
  .fts-tile span{font-size:11px;padding:3px 6px;left:6px;bottom:6px}
  .fts-tile img{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  /* categories: "Tous" full width, then a 2 x 2 grid */
  .fts-cats{padding-block:32px 0}
  .fts-h2{font-size:26px;margin-bottom:16px}
  .fts-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fts-cat:first-child{grid-column:1 / -1;flex-direction:row}
  .fts-cat:first-child .fts-cat-img{flex:0 0 52%;aspect-ratio:auto;min-height:118px}
  .fts-cat:first-child .fts-cat-txt{justify-content:center;border-top:0}
  .fts-cat-img img{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  .fts-cat-txt{padding:10px 12px 12px}
  .fts-cat strong{font-size:15px}
  .fts-cat small{font-size:13px}
  /* toolbar */
  .fts-shop{padding-block:26px 48px;scroll-margin-top:80px}
  .fts-bar{gap:10px}
  .fts-count{flex:1 1 100%;text-align:center}
  .fts-search{flex:1 1 100%}
  .fts-sort{flex:1 1 100%;justify-content:space-between}
  /* products: one per row, large */
  .fts-grid{grid-template-columns:1fr;gap:18px}
  .fts-media img{padding:22px}
  .fts-info{padding:16px 18px 18px}
  .fts-price{font-size:26px}
  .fts-title{font-size:17px}
  .fts-feats{display:none}
  .fts-assure{grid-template-columns:1fr;margin-top:40px}
}
/* ---------- large screens ---------- */
@media (min-width:1600px){
  .fts-wrap{max-width:1500px}
  .fts-grid{gap:28px}
  .fts-hero .fts-wrap{padding-block:48px 52px}
  .fts-stack{height:380px;max-width:520px}
  .fts-t1{width:230px;height:230px}.fts-t2{width:160px;height:160px}.fts-t3{width:160px;height:160px}.fts-t4{width:170px;height:170px}
}
@media (prefers-reduced-motion:reduce){
  .fts *,.fts-drawer,.fts-scrim{animation:none!important;transition:none!important}
}
/* ---------- phone + tablet v12: compact top so products show sooner ---------- */
@media (max-width:1100px){
  .fts-stack{display:none}
  .fts-hero .fts-wrap{grid-template-columns:1fr}
  .fts-hero .fts-wrap{padding-block:24px 26px}
  .fts-cats{padding-block:22px 0}
  .fts-cats .fts-h2{font-size:20px;margin-bottom:10px}
  .fts-cat-grid{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;margin-inline:-16px;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fts-cat-grid::-webkit-scrollbar{display:none}
  .fts-cat,.fts-cat:first-child{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;padding:4px 12px 4px 4px;min-height:44px;border-radius:8px;scroll-snap-align:start}
  .fts-cat:first-child{padding-left:14px;padding-right:14px}
  .fts-cat:hover{transform:none;box-shadow:none}
  .fts-cat-img,.fts-cat:first-child .fts-cat-img{flex:0 0 34px;width:34px;height:34px;min-height:0;aspect-ratio:auto;border-radius:6px}
  .fts-cat-img img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
  .fts-cat-img--mosaic,.fts-cat:first-child .fts-cat-img--mosaic{display:none}
  .fts-cat-txt,.fts-cat:first-child .fts-cat-txt{flex-direction:row;align-items:baseline;gap:6px;padding:0;background:none;color:var(--fts-navy);border:0;white-space:nowrap}
  .fts-cat strong{font-size:15px}
  .fts-cat small{display:none}
  .fts-cat[aria-pressed="true"]{background:var(--fts-navy);border-color:var(--fts-navy);box-shadow:none}
  .fts-cat[aria-pressed="true"] .fts-cat-txt,.fts-cat[aria-pressed="true"] small{color:#fff}
  .fts-shop{padding-block:18px 48px}
}
/* ---------- phone + tablet v12: no search, sort or count bar ---------- */
@media (max-width:1100px){
  .fts-search,.fts-sort,.fts-count{display:none}
}