/* ════════════════════════════════════════
   CARCLIC.MA — iOS Light Design System
   ════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;}

/* ── VARIABLES ── */
:root{
  --bg:        #FFFFFF;
  --bg-1:      #F2F2F7;
  --bg-2:      #FFFFFF;
  --bg-3:      #E5E5EA;
  --bg-4:      #D1D1D6;
  --label:     #000000;
  --label-2:   rgba(0,0,0,.55);
  --label-3:   rgba(0,0,0,.42);
  --label-4:   rgba(0,0,0,.26);
  --sep:       rgba(0,0,0,.14);
  --sep-op:    #C6C6C8;
  --fill-1:    rgba(120,120,128,.20);
  --fill-2:    rgba(120,120,128,.12);
  --blue:      #007AFF;
  --blue-dim:  rgba(0,122,255,.10);
  --green:     #34C759;
  --red:       #FF3B30;
  --orange:    #FF9500;
  --surf:      #F2F2F7;
  --surf-card: #FFFFFF;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',sans-serif;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-pill:9999px;
  --sp:16px;--row-h:44px;--picker-h:264px;--nav-h:72px;
  --t-fast:150ms cubic-bezier(.4,0,.2,1);
  --t-std:280ms cubic-bezier(.4,0,.2,1);
  --t-nav:360ms cubic-bezier(.4,0,.2,1);
  --t-spring:420ms cubic-bezier(.34,1.3,.64,1);
}

/* ── SHELL ── */
html,body{margin:0;padding:0;overflow:hidden;font-family:var(--font);}

/*
  #app : dimensionné UNIQUEMENT par JavaScript (_sizeApp).
  Le CSS ne définit que le positionnement et l'overflow.
  Jamais de width/height ici → zéro risque de mauvais calcul CSS.
*/
#app{
  position:fixed;
  top:0;left:0;
  overflow:hidden;
  background:var(--bg);
}

/* Desktop (≥ 500 px) : fond gris + centrage — les dimensions restent en JS */
@media(min-width:500px){
  html,body{background:#C8C8CC;}
  body{
    display:flex;align-items:center;justify-content:center;
    width:100vw;height:100vh;
  }
  #app{
    position:relative;
    top:auto;left:auto;
    border-radius:44px;
    box-shadow:0 24px 80px rgba(0,0,0,.18);
  }
}

/* ── PAGES ── */
/*
  Navigation 100 % via display:none / @keyframes.
  Aucun transform persistant → impossible de rester bloqué.
*/
.page{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  background:var(--bg);
  overscroll-behavior:contain;
  /* Caché par défaut : visibility évite le reflow contrairement à display:none */
  visibility:hidden;
  pointer-events:none;
  will-change:transform;
}
.page::-webkit-scrollbar{display:none;}

/* Page active : visible, interactions actives */
.page.pg-active{
  visibility:visible;
  pointer-events:auto;
}

/* Animations GPU — aucun reflow, 60 fps */
@keyframes _slideR{
  from{transform:translateX(100%)}
  to  {transform:translateX(0)}
}
@keyframes _slideL{
  from{transform:translateX(-100%)}
  to  {transform:translateX(0)}
}
.page.pg-in-r{
  visibility:visible;pointer-events:auto;
  animation:_slideR 320ms cubic-bezier(.25,0,.2,1) both;
}
.page.pg-in-l{
  visibility:visible;pointer-events:auto;
  animation:_slideL 320ms cubic-bezier(.25,0,.2,1) both;
}

/* ── LOGO ── */
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;user-select:none;cursor:pointer;}
.logo img,.logo svg{width:48px;height:48px;flex-shrink:0;}
.logo-name{font-size:26px;font-weight:700;color:var(--label);letter-spacing:-.5px;}
.logo-name span{color:var(--blue);}

/* ══════════════════════════════════════
   PAGE 1 — VEHICLE PICKER
   ══════════════════════════════════════ */
#pg-vehicle{display:flex;flex-direction:column;min-height:100%;background:var(--bg);}

/* ── Header centré en haut ── */
.vh-header{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(36px,7vh,64px) var(--sp) 16px;
  text-align:center;
}

/* Tagline sous le logo */
.vh-tagline{
  text-align:center;
  font-size:13px; font-weight:500;
  color:var(--label-3);
  letter-spacing:-.1px;
  margin-top:6px;
  line-height:1.4;
}

/* ── Mobile uniquement : icône C avec cercle + texte visible ── */
@media(max-width:499px){
  .vh-header{padding:clamp(28px,6vh,52px) var(--sp) 12px;}
  .logo img,.logo svg{
    width:52px;height:52px;
    background:var(--bg-2);
    border-radius:50%;
    box-shadow:0 4px 20px rgba(0,0,0,.13);
    padding:4px;
  }
}

/* ── Mobile : nav transparente, produits visibles dessous ── */
@media(max-width:1023px){
  .bottom-nav{
    background:transparent !important;
    border-top:none !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    pointer-events:none;
  }
  .nav-logo-platform{
    pointer-events:auto;
    box-shadow:0 4px 24px rgba(0,0,0,.18);
  }
  #pg-products{
    position:relative;
  }
  .prod-scroll{
    padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Zone picker : prend l'espace central ── */
.vh-picker-zone {
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
}

/* ── Zone recherche : ancrée en bas ── */
.vh-bottom-search {
  padding-bottom:env(safe-area-inset-bottom, 8px);
}

/* Conteneur picker avec fond légèrement détaché */
.vh-picker-wrap{
  margin:12px var(--sp) 0;
  background:var(--bg-1);
  border-radius:18px;
  border:.5px solid var(--sep);
  /* PAS de overflow:hidden — il bloque le scroll des colonnes pcol */
}
.vh-picker-wrap .picker-outer{
  padding:0; /* les colonnes restent inset via les pcol internes */
}
.vh-picker-wrap .picker-sel-band{
  left:6px; right:6px; border-radius:10px;
}
.vh-picker-wrap .picker-outer::before,
.vh-picker-wrap .picker-outer::after{
  left:0; right:0;
}
.vh-picker-wrap .picker-fade-t,
.vh-picker-wrap .picker-fade-b{
  left:0; right:0;
  background:unset;
}
.vh-picker-wrap .picker-fade-t{background:linear-gradient(to bottom,var(--bg-1) 0%,var(--bg-1) 14%,transparent 100%);}
.vh-picker-wrap .picker-fade-b{background:linear-gradient(to top,var(--bg-1) 0%,var(--bg-1) 14%,transparent 100%);}
.vh-picker-wrap .col-labels{padding:10px var(--sp) 2px;background:var(--bg-1);}

.sep-line{height:.5px;background:var(--sep);margin:0 var(--sp);}

.col-labels{display:flex;padding:8px 8px 0;}
.col-labels span{
  flex:1;text-align:center;
  font-size:10px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  color:rgba(0,0,0,.70);
}

/* ── DRUM PICKER ── */
.picker-outer{
  position:relative;padding:0 var(--sp);display:flex;
  height:var(--picker-h);flex:0 0 var(--picker-h);
}

/* Bande de sélection — frosted-glass subtil style iOS */
.picker-sel-band{
  position:absolute; left:8px; right:8px;
  top:calc(50% - var(--row-h)/2);
  height:var(--row-h);
  background:rgba(118,118,128,.10);
  border-radius:11px;
  pointer-events:none;
  z-index:1;
}

/* Fade masks — gradient long pour la transition 3D cylinder */
.picker-fade-t,.picker-fade-b{
  position:absolute;left:0;right:0;
  z-index:4;pointer-events:none;
}
.picker-fade-t{top:0;height:48%;background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 18%,transparent 100%);}
.picker-fade-b{bottom:0;height:48%;background:linear-gradient(to top,var(--bg) 0%,var(--bg) 18%,transparent 100%);}

.pcol{
  flex:1;height:var(--picker-h);
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  position:relative;z-index:2;
}
.pcol::-webkit-scrollbar{display:none;}
.pcol-inner{padding:calc(var(--picker-h)/2 - var(--row-h)/2) 0;}

.pitem{
  height:var(--row-h);
  display:flex;align-items:center;justify-content:center;
  cursor:default;user-select:none;
  padding:0 6px;
  will-change:transform,opacity;
}
.pitem-label{
  font-size:13px;font-weight:400;
  color:rgba(0,0,0,.22);letter-spacing:-.1px;
  transition:color .14s,font-weight .14s,font-size .14s,letter-spacing .14s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;text-align:center;line-height:1.25;
}
.pitem.is-sel .pitem-label{
  color:#000;font-weight:700;font-size:24px;letter-spacing:-.6px;
  overflow:visible;
}
.pitem.is-near .pitem-label{
  color:rgba(0,0,0,.40);font-size:14px;font-weight:400;letter-spacing:-.2px;
}

@keyframes ticker {
  0%,15%   { transform:translateX(0); }
  45%,55%  { transform:translateX(var(--tk,0)); }
  85%,100% { transform:translateX(0); }
}
.pitem.is-sel .pitem-label.ticker {
  display:inline-block;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  animation:ticker 3.2s ease-in-out infinite;
}

/* Logo de marque — scale GPU pour netteté max, transitions ultrasmooth */
.pitem-logo{
  width:auto; height:34px; max-width:82%;
  object-fit:contain;
  transform:scale(.58); transform-origin:center;
  transition:transform .18s cubic-bezier(.25,.46,.45,.94), filter .18s ease;
  filter:grayscale(1) opacity(.35);
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.pitem.is-sel  .pitem-logo{transform:scale(1);    filter:none;}
.pitem.is-near .pitem-logo{transform:scale(.72);  filter:grayscale(.3) opacity(.80);}

.col-div{ display:none; }

/* ── Trust signals ── */
.vh-trust{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:10px;
  font-size:11px;font-weight:500;color:var(--label-3);
}
.vh-trust span{display:flex;align-items:center;gap:3px;}
.vh-trust svg{flex-shrink:0;stroke:var(--label-3);}
.vh-trust-dot{width:3px;height:3px;border-radius:50%;background:var(--bg-4);display:inline-block;}

/* ── SEARCH BUTTON ── */
.search-wrap{padding:12px var(--sp) 4px;}
.btn-search{
  width:100%;height:52px;
  background:var(--blue);border:none;border-radius:var(--r-pill);
  color:#fff;font-size:16px;font-weight:600;letter-spacing:-.2px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:opacity var(--t-fast),transform var(--t-fast);
  position:relative;overflow:hidden;
  box-shadow:0 4px 18px rgba(0,122,255,.28);
}
.btn-search:active{transform:scale(.97);opacity:.85;}
.btn-search .spinner{
  display:none;width:20px;height:20px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
.btn-search.loading .btn-label,.btn-search.loading .btn-icon{display:none;}
.btn-search.loading .spinner{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Spacer pushes CTA to bottom */
.vh-spacer{flex:1; max-height:32px;}

/* Contact CTA */
.vh-contact-cta {
  padding:6px var(--sp) max(20px, env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center; gap:0;
}
.vh-contact-sep {
  color:var(--bg-4);
  font-size:13px;
  padding:0 6px;
  user-select:none;
}
.vh-contact-btn {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; color:var(--label-3);
  font-size:12.5px; font-weight:500;
  text-decoration:none;
  padding:7px 12px; border-radius:20px;
  border:none;
  transition:background .15s,color .15s;
  cursor:pointer;
}
.vh-contact-btn svg { flex-shrink:0; }
.vh-contact-btn:active { background:var(--fill-2); }
.vh-contact-wa { color:#25D366; }
.vh-contact-wa svg { fill:#25D366; stroke:none; }

/* ══════════════════════════════════════
   PAGE 2 — PRODUCTS
   ══════════════════════════════════════ */
#pg-products{
  display:flex;flex-direction:column;
  background:var(--bg);width:100%;
  overflow:hidden; /* le scroll est géré par .prod-scroll */
}
/* Zone scrollable — tout le contenu sauf la nav */
.prod-scroll{
  flex:1;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.prod-scroll::-webkit-scrollbar{display:none;}

.prod-head{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:10px var(--sp);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:.5px solid var(--sep);
}
.prod-head.is-top{border-bottom-color:transparent;}

/* Photo véhicule dans le header — déborde vers le label en dessous */
.prod-head{overflow:visible;}
.prod-veh-thumb{
  width:210px;
  height:96px;
  display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:-32px;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  position:relative;z-index:1;
}
.prod-veh-thumb img{
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  transform-origin:center bottom;
}
/* --- keyframes --- */
@keyframes _vehRevImg{
  0%   {transform:translateX(0) scale(1);}
  5%   {transform:translateX(-4px) scale(1.01);}
  11%  {transform:translateX(4px) scale(1.03);}
  17%  {transform:translateX(-3px) scale(1.01);}
  22%  {transform:translateX(0) scale(1);}
  57%  {transform:translateX(0) scale(1.19);}
  72%  {transform:translateX(0) scale(1.01);}
  84%  {transform:translateX(0) scale(1.07);}
  100% {transform:translateX(0) scale(1);}
}
@keyframes _vehRevGlow{
  0%,20%{opacity:0;transform:scale(0.3);}
  50%   {opacity:1;transform:scale(2);}
  80%   {opacity:0.25;transform:scale(3.5);}
  100%  {opacity:0;transform:scale(5);}
}
@keyframes _vehRevBurst{
  0%,22%{opacity:0;transform:scale(0.2) rotate(0deg);}
  50%   {opacity:0.9;transform:scale(1) rotate(14deg);}
  75%   {opacity:0.28;transform:scale(1.8) rotate(27deg);}
  100%  {opacity:0;transform:scale(2.6) rotate(42deg);}
}
.prod-veh-thumb.veh-revving img{animation:_vehRevImg 1.42s cubic-bezier(.25,.46,.45,.94) forwards;}
/* Ground glow — créé uniquement au tap, pas à l'ouverture */
.prod-veh-thumb.veh-revving::before{
  content:'';
  position:absolute;
  bottom:6px;left:50%;
  width:180px;height:50px;
  margin-left:-90px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,155,15,0.75) 0%,rgba(255,75,0,0.28) 45%,transparent 75%);
  filter:blur(12px);
  pointer-events:none;
  z-index:-1;
  animation:_vehRevGlow 1.42s ease-out forwards;
}
/* Starburst rays — créé uniquement au tap */
.prod-veh-thumb.veh-revving::after{
  content:'';
  position:absolute;
  bottom:-18px;left:50%;
  width:260px;height:260px;
  margin-left:-130px;
  border-radius:50%;
  background:repeating-conic-gradient(rgba(255,200,55,0.16) 0deg 2.5deg,transparent 2.5deg 9deg);
  pointer-events:none;
  z-index:-1;
  animation:_vehRevBurst 1.42s ease-out forwards;
}
.veh-logo-brand{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
}
.veh-logo-brand svg{width:100%;height:100%;}

.icon-btn{
  width:36px;height:36px;border-radius:var(--r-pill);
  background:var(--fill-2);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--t-fast);color:var(--label);
}
.icon-btn:active{background:var(--fill-1);}

.cart-btn{position:relative;}
.cart-count{
  position:absolute;top:-3px;right:-3px;
  min-width:17px;height:17px;
  background:var(--red);border-radius:var(--r-pill);
  font-size:10px;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  border:1.5px solid var(--bg);
}
.cart-count:empty{display:none!important;}

.veh-label{
  font-size:13px;font-weight:500;color:var(--label-2);
  text-align:center;padding:20px 0 2px;letter-spacing:-.1px;
  display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
}
.veh-total-badge{
  display:inline-flex;align-items:center;
  background:rgba(0,122,255,.1);color:var(--blue);
  font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:20px;
  letter-spacing:-.1px;white-space:nowrap;
}

/* ── MANUAL SEARCH BAR ── */
.msearch-wrap{padding:5px var(--sp) 2px;}
.msearch-box{
  display:flex;align-items:center;gap:8px;
  background:var(--bg-1);border-radius:12px;
  padding:0 12px;height:44px;
  border:.5px solid var(--sep);
}
.msearch-icon{color:var(--label-3);flex-shrink:0;}
.msearch-input{
  flex:1;border:none;background:transparent;outline:none;
  font-size:13.5px;color:var(--label);
  caret-color:var(--blue);
}
.msearch-input::placeholder{color:var(--label-4);}
.msearch-clear{
  width:22px;height:22px;border:none;background:var(--bg-3);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--label-3);flex-shrink:0;padding:0;
}
.msearch-clear:active{background:var(--bg-4);}

/* ── Scan button ─────────────────────────── */
.msearch-row{display:flex;align-items:center;gap:6px;}
.msearch-row .msearch-box{flex:1;}
.scan-btn{
  width:44px;height:44px;flex-shrink:0;
  background:var(--blue);border:none;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;
  transition:opacity .15s,transform .1s;
}
.scan-btn:active{opacity:.75;transform:scale(.93);}

/* ── Mic button — Apple design ───────────── */
.mic-btn{
  width:44px;height:44px;flex-shrink:0;
  border:none;border-radius:50%;
  background:rgba(120,120,128,.14);
  box-shadow:inset 0 0 0 1px rgba(120,120,128,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--label-2);cursor:pointer;
  position:relative;overflow:visible;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1),background .2s ease,color .2s ease,box-shadow .2s ease;
}
.mic-btn:active{transform:scale(.86);}
/* Recording state */
.mic-btn.mic-active{
  background:linear-gradient(145deg,#FF5A50,#D9251A);
  box-shadow:0 4px 16px rgba(255,59,48,.38),inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff;
}
/* Siri-style ripple rings */
.mic-btn.mic-active::before,
.mic-btn.mic-active::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(255,59,48,.2);
  animation:mic-ripple 1.7s cubic-bezier(0,.5,.5,1) infinite;
  pointer-events:none;
}
.mic-btn.mic-active::after{animation-delay:.65s;}
@keyframes mic-ripple{
  0%  {transform:scale(1);opacity:.8;}
  100%{transform:scale(2.5);opacity:0;}
}

/* ── Photo overlay ───────────────────────── */
.photo-overlay{
  position:fixed;inset:0;z-index:9100;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:24px;
}
.photo-overlay video{
  width:100%;max-width:360px;border-radius:16px;
  object-fit:cover;aspect-ratio:4/3;background:#000;
}
.photo-overlay-btns{display:flex;gap:12px;}
.photo-overlay-btns button{
  padding:12px 24px;border:none;border-radius:12px;
  font-size:15px;font-weight:600;cursor:pointer;
}
.photo-capture-btn{background:var(--orange);color:#fff;}
.photo-cancel-btn{background:var(--bg-3);color:var(--label);}
.photo-analyzing{
  color:#fff;font-size:15px;font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.photo-analyzing::before{
  content:'';display:block;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  animation:spin .7s linear infinite;
}

/* ── Scan overlay ────────────────────────── */
.scan-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.scan-modal{
  background:var(--bg-1);border-radius:20px;
  padding:36px 28px 24px;width:260px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.scan-spinner{
  width:44px;height:44px;
  border:3px solid var(--sep);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:scanSpin .8s linear infinite;
}
@keyframes scanSpin{to{transform:rotate(360deg);}}
.scan-msg{
  font-size:14px;color:var(--label);font-weight:500;
  line-height:1.45;margin:0;white-space:pre-line;
}
.scan-cancel-btn{
  font-size:13px;color:var(--blue);
  background:none;border:none;cursor:pointer;
  padding:4px 16px;border-radius:8px;
  transition:background .12s;
}
.scan-cancel-btn:active{background:var(--bg-3);}

/* ══════════════════════════════════════
   CATÉGORIES — CARROUSEL DARK PREMIUM
   ══════════════════════════════════════ */

.cat-wrap{
  background:var(--bg);
  position:relative;
  flex-shrink:0;
  overflow:hidden;
  padding:6px 0 0;
}

/* Rail scrollable */
.cat-rail{
  display:flex;
  overflow-x:scroll;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:2px 0 6px;
  gap:0;
}
.cat-rail::-webkit-scrollbar{display:none;}

/* Carte */
.cat-card{
  flex-shrink:0;
  width:120px;
  display:flex;flex-direction:column;align-items:center;
  gap:0;cursor:pointer;
  scroll-snap-align:center;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1);
  transform-origin:center center;
}

/* Boîte image */
.cat-card-img{
  width:72px;height:72px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:var(--bg-1,#F2F2F7);
  transition:width .4s cubic-bezier(.34,1.3,.64,1),
             height .4s cubic-bezier(.34,1.3,.64,1),
             border-radius .4s,
             background .3s,
             box-shadow .4s;
}

/* Photo */
.cat-card-img img{
  width:100%;height:100%;
  object-fit:contain;
  padding:8px;
  display:block;
  transform:scale(1);
  transition:transform .4s cubic-bezier(.34,1.3,.64,1);
}

/* Fallback icon */
.cat-card-ico{
  position:absolute;inset:0;
  display:none;align-items:center;justify-content:center;
}
.cat-card-img.no-img .cat-card-ico{display:flex;}
.cat-card-img.no-img img{display:none;}
.cat-card-ico svg{width:38px;height:38px;stroke:var(--label-3);}

/* ── ACTIVE : agrandie, mise en valeur, parfaitement centrée ── */
.cat-card.cc-active{
  z-index:2;
}
.cat-card.cc-active .cat-card-img{
  width:88px;height:88px;
  border-radius:22px;
  background:rgba(0,122,255,.52);
  box-shadow:0 10px 36px rgba(0,122,255,.32), 0 2px 8px rgba(0,122,255,.18);
}
.cat-card.cc-active .cat-card-img img{
  transform:scale(1.15);
  filter:brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.cat-card.cc-active .cat-card-img.no-img .cat-card-ico svg{stroke:#fff;}

/* Nom sous la carte — invisible par défaut, visible uniquement sur la carte active */
.cat-card-name{
  margin-top:6px;margin-bottom:2px;
  font-size:10px;font-weight:500;
  letter-spacing:.1px;text-transform:uppercase;
  text-align:center;white-space:nowrap;
  opacity:0;
  transition:opacity .25s;
}
.cat-card.cc-active .cat-card-name{
  opacity:1;
  color:var(--blue);
  font-weight:700;
}

/* Indicateur dots */
.scroll-dots{
  display:flex;justify-content:center;align-items:center;
  gap:4px;padding:4px 0 6px;
  background:var(--bg);
}
.scroll-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--fill-1);
  transition:all .3s cubic-bezier(.25,0,.2,1);
}
.scroll-dot.on{width:20px;border-radius:3px;background:var(--blue);}

/* ══════════════════════════════════════
   GRILLE PRODUITS — STYLE PREMIUM
   ══════════════════════════════════════ */
.prod-section{
  background:#fff;
  padding:8px 10px 32px;
  width:100%;
}
.prod-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;width:100%;
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

.pcard{
  background:#fff;
  border-radius:18px;
  overflow:hidden;cursor:pointer;
  position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 2px 14px rgba(0,0,0,.09),0 0 0 .5px rgba(0,0,0,.05);
  transition:transform .18s,box-shadow .18s;
  animation:cardIn .32s cubic-bezier(.4,0,.2,1) both;
}
.pcard:active{transform:scale(.96);box-shadow:0 4px 18px rgba(0,0,0,.12);}
.pcard:nth-child(1){animation-delay:.03s;}.pcard:nth-child(2){animation-delay:.06s;}
.pcard:nth-child(3){animation-delay:.09s;}.pcard:nth-child(4){animation-delay:.12s;}
.pcard:nth-child(5){animation-delay:.15s;}.pcard:nth-child(6){animation-delay:.18s;}

/* Image */
.pcard-img{
  width:100%;aspect-ratio:1/1;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
  border-bottom:3px solid var(--blue);
}
.pcard-img img{
  width:90%;height:90%;
  object-fit:contain;object-position:center;
  transition:transform .3s;
  mix-blend-mode:multiply;
}
.pcard:active .pcard-img img{transform:scale(1.06);}
.pcard-img-fallback{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:#F2F2F7;
}
.pcard-img-fallback svg{width:100%;max-height:72px;}

/* Wrapper paire inséparable : occupe toute la ligne, flex en interne */
.pcard-pair{
  grid-column:1/-1;
  display:flex;gap:12px;
}
.pcard-pair .pcard{flex:1;min-width:0;}

/* Bouton panier sur la card */
/* ── Keyframes Apple-style ── */
@keyframes _spring{
  0%  {transform:scale(1)}
  22% {transform:scale(.68)}
  55% {transform:scale(1.22)}
  78% {transform:scale(.96)}
  100%{transform:scale(1)}
}
@keyframes _checkDraw{
  from{stroke-dashoffset:22;opacity:0}
  15% {opacity:1}
  to  {stroke-dashoffset:0;opacity:1}
}
@keyframes _badgePop{
  0%  {transform:scale(1)}
  38% {transform:scale(1.6)}
  65% {transform:scale(.86)}
  100%{transform:scale(1)}
}
@keyframes _cmdPulse{
  0%,100%{box-shadow:0 4px 14px rgba(0,100,255,.38)}
  50%    {box-shadow:0 2px 28px rgba(0,100,255,.75),0 0 0 5px rgba(0,100,255,.15)}
}

.pcard-cart-btn{
  position:absolute;top:8px;right:8px;
  width:32px;height:32px;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 6px rgba(0,0,0,.12);
  border-radius:10px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;z-index:2;
  transition:background .18s;
  backdrop-filter:blur(6px);
}
.pcard-cart-btn.spring{animation:_spring .42s cubic-bezier(.36,.07,.19,.97) forwards;}
.pcard-cart-btn svg{width:15px;height:15px;stroke:#1C1C1E;}
.pcard-cart-btn.added{background:#34C759;}
.pcard-cart-btn.added svg{stroke:#fff;}
.pcard-cart-btn .chk{stroke-dasharray:22;stroke-dashoffset:22;animation:_checkDraw .32s .06s ease forwards;}
#cart-count.pop,.pc-cart-count.pop{animation:_badgePop .38s cubic-bezier(.36,.07,.19,.97);}
.pcard-order-btn.pulse{animation:_cmdPulse .28s ease;}

/* Infos */
.pcard-info{padding:11px 11px 13px;display:flex;flex-direction:column;flex:1;}
.pcard-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:5px;}
.pcard-badge{
  display:inline-block;font-size:10px;font-weight:500;
  color:#636366;background:#F2F2F7;
  padding:2px 8px;border-radius:20px;
  letter-spacing:-.1px;
}

/* Année : tinte bleue au lieu du noir brutal */
.pcard-year-badge{
  display:inline-block;font-size:10px;font-weight:700;
  color:var(--blue);background:rgba(0,122,255,.1);
  padding:3px 9px;border-radius:20px;
  letter-spacing:.1px;
}

/* Côté (AVANT DROITE…) : puce propre au lieu du marqueur brouillon */
.pcard-side,.hi-mark{
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:800;letter-spacing:.5px;
  color:#1C1C1E;
  background:transparent;
  border:none;
  padding:1px 5px 1.5px;
  border-radius:5px;
  text-transform:uppercase;
  white-space:nowrap;
  margin-left:5px;
  vertical-align:middle;
  position:relative;isolation:isolate;
}
.pcard-side::before,.hi-mark::before{
  content:'';
  position:absolute;
  inset:0px -1px 0px -1px;
  background:rgba(120,210,120,.42);
  border-radius:2px 4px 3px 2px;
  filter:url(#rough-marker);
  z-index:-1;
}

.pcard-origin{
  display:inline-block;font-size:9.5px;font-weight:600;
  color:var(--orange);background:rgba(255,149,0,.1);
  padding:2px 8px;border-radius:20px;
}

/* Nom produit */
.pcard-name{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;
  font-size:14px;font-weight:800;color:#1C1C1E;line-height:1.25;
  margin-bottom:3px;text-transform:uppercase;letter-spacing:-.2px;
}

/* Véhicule */
.pcard-veh{
  font-size:11px;font-weight:500;color:#8E8E93;
  margin-bottom:5px;line-height:1.3;
}

.pcard-meta-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:2px;}

/* Séparateur fin + prix + bouton — toujours ancré en bas */
.pcard-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;margin-top:auto;padding-top:8px;
  border-top:.5px solid rgba(0,0,0,.07);
}
.pcard-price{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;line-height:1;
  font-size:clamp(17px,5.5vw,22px);font-weight:900;
  color:var(--blue);letter-spacing:-.8px;
  white-space:nowrap;
}
.pcard-price span{
  font-size:9px;font-weight:600;
  opacity:.5;letter-spacing:.6px;
  margin-top:1px;text-transform:uppercase;
}
.pcard-phase-badge{
  display:inline-block;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:20px;letter-spacing:.1px;
}
.pcard-phase-badge.ph1{background:rgba(255,149,0,.14);color:#9A5000;}
.pcard-phase-badge.ph2{background:rgba(88,86,214,.12);color:#3634A3;}
.pcard-order-btn{
  flex-shrink:0;
  background:linear-gradient(130deg,#1a8cff,#0062D5);
  color:#fff;font-size:12px;font-weight:700;
  padding:9px 17px;border-radius:24px;
  border:none;cursor:pointer;
  font-family:var(--font);
  transition:opacity .15s,transform .12s;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,100,255,.38);
  letter-spacing:.1px;
}
.pcard-order-btn:active{opacity:.85;transform:scale(.95);}
.pcard-badge-cat{color:var(--orange);background:rgba(255,149,0,.1);}
.pcard-add-btn{display:none;}

/* ── BOTTOM NAV (3 items) ── */
.bottom-nav{
  flex-shrink:0;
  height:var(--nav-h);
  background:rgba(242,242,247,.93);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:.5px solid var(--sep);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;
  z-index:50;overflow:visible;position:relative;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;padding:2px 0;
}

/* Logo carclic.ma — barre couvre exactement 50% du cercle */
.nav-logo-home{gap:4px;padding-bottom:0;}
.nav-logo-platform{
  width:56px;height:56px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 -2px 14px rgba(0,0,0,.10), 0 0 0 7px rgba(242,242,247,.93);
  display:flex;align-items:center;justify-content:center;
  margin-top:-14px; /* 28px above bar, 28px inside bar = 50% */
  transition:transform var(--t-spring);
  position:relative;
}
.nav-logo-platform::before{display:none;}
.nav-logo-home:active .nav-logo-platform{transform:scale(.88);}
.nav-logo-img{
  width:40px;height:40px;
  object-fit:contain;
}
.nav-logo-lbl{
  font-size:11px;font-weight:700;
  color:#1C1C1E;
  letter-spacing:-.3px;
  line-height:1;
}
.nav-logo-lbl span{color:#007AFF;}

.nav-label{
  font-size:10px;font-weight:600;
  color:var(--label-3);
  letter-spacing:.2px;
  line-height:1;
  margin-top:2px;
  user-select:none;
}

/* ══════════════════════════════════════
   PAGE 3 — CHECKOUT
   ══════════════════════════════════════ */
#pg-checkout{background:var(--bg-1);padding-bottom:40px;}

.ck-header{
  padding:52px var(--sp) 24px;
  display:flex;align-items:center;justify-content:center;
  position:relative;background:var(--bg);
}
.ck-back{position:absolute;left:var(--sp);}

.stepper{
  display:flex;align-items:flex-start;
  padding:0 var(--sp) 24px;
  background:var(--bg);border-bottom:.5px solid var(--sep);margin-bottom:20px;
}
.step-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;}
.step-item:not(:last-child)::after{
  content:'';position:absolute;
  top:15px;left:calc(50% + 15px);right:calc(-50% + 15px);
  height:.5px;background:var(--sep);transition:background var(--t-std);
}
.step-item.done::after{background:var(--blue);}
.step-circle{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--sep);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--label-3);
  position:relative;z-index:1;
  transition:border-color var(--t-std),color var(--t-std);
}
.step-item.done .step-circle{border-color:var(--blue);}
.step-item.active .step-circle{border-color:var(--blue);color:var(--blue);}
.step-lbl{
  font-size:9.5px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--label-3);
  text-align:center;transition:color var(--t-std);
}
.step-item.active .step-lbl{color:var(--blue);}

.ck-body{padding:0 var(--sp);}
.ck-section-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.ck-ico{
  width:44px;height:44px;border-radius:12px;
  background:var(--blue-dim);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ck-title{font-size:17px;font-weight:700;color:var(--label);margin-bottom:2px;}
.ck-sub{font-size:13px;color:var(--label-2);line-height:1.4;}

/* Floating label inputs */
.f-field{position:relative;margin-bottom:10px;}
.f-input{
  width:100%;height:56px;
  background:var(--bg);border:1.5px solid var(--sep);
  border-radius:var(--r-lg);
  padding:18px 16px 6px 48px;
  font-size:15px;color:var(--label);
  outline:none;transition:border-color var(--t-std),box-shadow var(--t-std);
  caret-color:var(--blue);
}
.f-input::placeholder{color:transparent;}
.f-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim);}
.f-input:focus+.f-label,.f-input:not(:placeholder-shown)+.f-label{
  transform:translateY(-9px);font-size:10.5px;letter-spacing:.2px;color:var(--blue);
}
.f-label{
  position:absolute;left:48px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--label-3);pointer-events:none;
  transition:transform .2s cubic-bezier(.4,0,.2,1),font-size .2s,color .2s;
}
.f-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;}
.f-badge{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:600;color:var(--red);
}

.btn-buy{
  width:100%;height:56px;margin-top:20px;
  background:var(--blue);border:none;border-radius:var(--r-pill);
  color:#fff;font-size:16px;font-weight:600;letter-spacing:-.2px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;transition:opacity var(--t-fast),transform var(--t-fast);
}
.btn-buy:active{opacity:.85;transform:scale(.98);}
.secure-note{
  display:flex;align-items:center;justify-content:center;
  gap:6px;margin-top:12px;font-size:12px;color:var(--label-3);
}

/* ══════════════════════════════════════
   PAGE 4 — CONTACT (redesign)
   ══════════════════════════════════════ */
#pg-contact{background:#f5f5f7;padding-bottom:48px;}

/* Header */
.ct-header{
  padding:52px var(--sp) 14px;
  display:flex;align-items:center;justify-content:center;
  position:relative;background:#f5f5f7;
}
.ct-back{position:absolute;left:var(--sp);}
.ct-header-title{font-size:16px;font-weight:700;color:var(--label);letter-spacing:-.3px;}

/* Hero */
.ct-hero{padding:4px 20px 22px;text-align:center;}
.ct-hero-badge{
  display:inline-block;background:rgba(0,122,255,.1);color:var(--blue);
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;margin-bottom:12px;
}
.ct-hero-h1{
  font-size:28px;font-weight:800;color:var(--label);
  letter-spacing:-.8px;line-height:1.2;margin:0 0 10px;
}
.ct-hero-sub{font-size:14px;color:var(--label-2);line-height:1.55;margin:0;}

/* Actions rapides */
.ct-quick{display:flex;gap:10px;padding:0 16px 20px;}
.ct-quick-btn{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:13px 14px;border-radius:16px;text-decoration:none;
  transition:opacity .15s,transform .15s;
}
.ct-quick-btn:active{opacity:.8;transform:scale(.97);}
.ct-quick-call{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.06);}
.ct-quick-wa{background:#25D366;box-shadow:0 2px 8px rgba(37,211,102,.35);}
.ct-qb-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ct-quick-call .ct-qb-ico{background:rgba(0,122,255,.1);color:var(--blue);}
.ct-quick-wa  .ct-qb-ico{background:rgba(255,255,255,.25);color:#fff;}
.ct-qb-txt{display:flex;flex-direction:column;gap:1px;}
.ct-qb-top{font-size:12px;font-weight:700;line-height:1;}
.ct-qb-bot{font-size:10.5px;line-height:1;opacity:.7;}
.ct-quick-call .ct-qb-top,.ct-quick-call .ct-qb-bot{color:var(--label);}
.ct-quick-wa  .ct-qb-top,.ct-quick-wa  .ct-qb-bot{color:#fff;}

/* Séparateur */
.ct-divider{
  display:flex;align-items:center;gap:10px;
  padding:0 20px 18px;
}
.ct-divider::before,.ct-divider::after{
  content:'';flex:1;height:1px;background:rgba(0,0,0,.1);
}
.ct-divider span{font-size:11.5px;color:var(--label-3);font-weight:500;white-space:nowrap;}

/* Formulaire */
.ct-form{padding:0 16px;}
.cf-field{margin-bottom:12px;}
.cf-row{display:flex;gap:10px;}
.cf-row .cf-field{flex:1;min-width:0;}
.cf-label{
  display:block;font-size:12px;font-weight:600;
  color:var(--label-2);margin-bottom:6px;letter-spacing:-.1px;
}
.cf-input-wrap{position:relative;display:flex;align-items:center;}
.cf-ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--label-3);pointer-events:none;flex-shrink:0;
}
.cf-caret{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--label-3);pointer-events:none;
}
.cf-input{
  width:100%;height:46px;
  background:#fff;border:1.5px solid transparent;
  border-radius:12px;
  padding:0 14px 0 38px;
  font-size:14.5px;color:var(--label);font-family:var(--font);
  outline:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.07);
  transition:border-color .18s,box-shadow .18s;
}
.cf-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,122,255,.12);
}
.cf-input::placeholder{color:#b0b0b5;}
.cf-select{appearance:none;cursor:pointer;padding-right:32px;}
.cf-ta-wrap{align-items:flex-start;}
.cf-ta-wrap .cf-ico{top:14px;transform:none;}
.cf-textarea{
  height:auto;min-height:88px;padding-top:13px;padding-bottom:13px;
  resize:none;line-height:1.5;
}
.cf-textarea::placeholder{color:#b0b0b5;}

/* Photo attachments */
.cf-msg-box{
  border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 0 0 .5px rgba(0,0,0,.07);
  transition:box-shadow .18s;
}
.cf-msg-box:focus-within{box-shadow:0 0 0 1.5px var(--blue),0 0 0 4px rgba(0,122,255,.12);}
.cf-msg-box .cf-input{box-shadow:none!important;border-color:transparent!important;}
.cf-photo-bar{
  display:flex;align-items:center;gap:8px;
  background:#fff;border-top:1px solid rgba(0,0,0,.07);
  padding:8px 10px;
}
.cf-photo-thumbs{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;}
.cf-photo-thumbs::-webkit-scrollbar{display:none;}
.cf-photo-thumb{
  position:relative;flex-shrink:0;
  width:44px;height:44px;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.cf-photo-thumb img{width:100%;height:100%;object-fit:cover;}
.cf-photo-thumb-del{
  position:absolute;top:2px;right:2px;
  width:16px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.6);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:9px;line-height:1;padding:0;
}
.cf-photo-add{
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  background:rgba(0,122,255,.08);border:1px dashed rgba(0,122,255,.3);
  color:var(--blue);font-size:12px;font-weight:600;font-family:var(--font);
  padding:6px 11px;border-radius:8px;cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.cf-photo-add:active{background:rgba(0,122,255,.14);}

/* Bouton */
.btn-send{
  width:100%;height:52px;margin-top:8px;
  background:var(--blue);border:none;border-radius:14px;
  color:#fff;font-size:15.5px;font-weight:700;font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;letter-spacing:-.2px;
  box-shadow:0 4px 16px rgba(0,122,255,.35);
  transition:opacity .15s,transform .15s,box-shadow .15s;
}
.btn-send:active{opacity:.88;transform:scale(.98);box-shadow:0 2px 8px rgba(0,122,255,.2);}
.btn-send .spinner{display:none;}
.btn-send.loading .btn-label,.btn-send.loading .btn-icon{display:none;}
.btn-send.loading .spinner{display:block;}

/* Compat old classes */
.f-field{position:relative;margin-bottom:10px;}
.f-input{width:100%;height:56px;background:var(--bg);border:1.5px solid var(--sep);border-radius:var(--r-lg);padding:18px 16px 6px 48px;font-size:15px;color:var(--label);outline:none;transition:border-color var(--t-std),box-shadow var(--t-std);caret-color:var(--blue);}
.f-input::placeholder{color:transparent;}
.f-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim);}
.f-input:focus+.f-label,.f-input:not(:placeholder-shown)+.f-label{transform:translateY(-9px);font-size:10.5px;letter-spacing:.2px;color:var(--blue);}
.f-label{position:absolute;left:48px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--label-3);pointer-events:none;transition:transform .2s cubic-bezier(.4,0,.2,1),font-size .2s,color .2s;}
.f-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;}
.f-select{width:100%;height:56px;background:var(--bg);border:1.5px solid var(--sep);border-radius:var(--r-lg);padding:18px 16px 6px 48px;font-size:15px;color:var(--label);outline:none;appearance:none;transition:border-color var(--t-std),box-shadow var(--t-std);}
.f-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim);}
.f-select-wrap{position:relative;margin-bottom:10px;}
.f-textarea{width:100%;min-height:100px;background:var(--bg);border:1.5px solid var(--sep);border-radius:var(--r-lg);padding:16px 16px 6px 48px;font-size:15px;color:var(--label);outline:none;resize:none;transition:border-color var(--t-std),box-shadow var(--t-std);caret-color:var(--blue);}
.f-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim);}
.ta-icon{position:absolute;left:14px;top:16px;pointer-events:none;}

/* ══════════════════════════════════════
   MODALS / DRAWERS
   ══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:9100;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--t-std);
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-sheet{
  background:var(--bg);border-radius:24px 24px 0 0;
  padding:12px 24px 40px;
  width:100%;max-width:430px;
  transform:translateY(100%);transition:transform var(--t-spring);
  max-height:80dvh;overflow-y:auto;
}
.modal-overlay.open .modal-sheet{transform:translateY(0);}
.modal-pill{width:36px;height:4px;background:var(--bg-3);border-radius:2px;margin:0 auto 24px;}
.modal-icon{
  width:64px;height:64px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;animation:pop var(--t-spring) both;
}
@keyframes pop{0%{transform:scale(0) rotate(-15deg);}70%{transform:scale(1.15) rotate(3deg);}100%{transform:scale(1) rotate(0);}}
.modal-title{font-size:20px;font-weight:700;color:var(--label);text-align:center;margin-bottom:8px;letter-spacing:-.3px;}
.modal-sub{font-size:14px;color:var(--label-2);text-align:center;line-height:1.55;margin-bottom:28px;}
.modal-btn{
  width:100%;height:52px;background:var(--blue);border:none;border-radius:var(--r-pill);
  color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:opacity var(--t-fast);
}
.modal-btn:active{opacity:.8;}

.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.drawer-title{font-size:18px;font-weight:700;color:var(--label);}
.drawer-count{font-size:13px;color:var(--label-3);}
.drawer-list{min-height:60px;max-height:42dvh;overflow-y:auto;}
.drawer-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:.5px solid var(--sep);
}
.drawer-item:last-child{border-bottom:none;}
.drawer-thumb{
  width:52px;height:52px;border-radius:10px;
  background:var(--bg-1);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;overflow:hidden;
}
.drawer-thumb img{width:100%;height:100%;object-fit:cover;}
.drawer-item-info{flex:1;min-width:0;}
.drawer-item-name{font-size:13px;font-weight:600;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px;}
.drawer-side-badge{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.3px;padding:2px 6px;border-radius:20px;}
.drawer-side-badge.right{background:rgba(0,122,255,.12);color:var(--blue);}
.drawer-side-badge.left{background:rgba(52,199,89,.12);color:#34C759;}
.drawer-item-veh{font-size:11px;color:var(--label-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.drawer-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.drawer-item-price{font-size:13px;font-weight:700;color:var(--blue);}
.drawer-item-remove{
  width:22px;height:22px;border:none;border-radius:50%;
  background:var(--fill-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--label-3);
}
/* Cart drawer total + order button */
.drawer-total-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0 4px;border-top:.5px solid var(--sep);margin-top:4px;
}
.drawer-total-label{font-size:14px;color:var(--label-2);}
.drawer-total-amount{font-size:18px;font-weight:800;color:var(--blue);}
.drawer-order-btn{
  width:100%;height:52px;border:none;border-radius:var(--r-pill);
  background:var(--blue);color:white;
  font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;margin-top:12px;
  transition:opacity var(--t-fast);
}
.drawer-order-btn:active{opacity:.82;}
.modal-btn-ghost{
  width:100%;height:44px;border:none;border-radius:var(--r-pill);
  background:var(--fill-2);color:var(--label-2);
  font-size:14px;font-weight:500;cursor:pointer;margin-top:10px;
  transition:background var(--t-fast);
}
.modal-btn-ghost:active{background:var(--fill-1);}
/* Checkout items list */
.ck-items-list{padding:0 var(--sp) 4px;}
.ck-item{
  display:flex;gap:14px;align-items:center;
  padding:12px 0;border-bottom:.5px solid var(--sep);
}
.ck-item:last-child{border-bottom:none;}
.ck-item-img{
  width:70px;height:70px;border-radius:12px;
  background:var(--bg-1);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.ck-item-img img{width:100%;height:100%;object-fit:cover;}
.ck-item-img-fb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.ck-item-img-fb svg{width:44px;height:44px;}
.ck-item-info{flex:1;min-width:0;}
.ck-item-name{font-size:13px;font-weight:600;color:var(--label);margin-bottom:3px;line-height:1.3;}
.ck-item-veh{font-size:11px;color:var(--label-3);margin-bottom:5px;}
.ck-item-price{font-size:17px;font-weight:800;color:var(--blue);}
.ck-total-row{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 var(--sp) 16px;
  padding:12px 14px;border-radius:12px;
  background:var(--blue-dim);
}
.ck-total-label{font-size:14px;font-weight:600;color:var(--blue);}
.ck-total-amount{font-size:20px;font-weight:800;color:var(--blue);}
/* Home search divider */
.home-search-divider{
  display:flex;align-items:center;gap:10px;
  padding:8px var(--sp) 6px;
  order:10;
}
.home-search-divider::before,.home-search-divider::after{
  content:'';flex:1;height:.5px;background:var(--sep);
}
.home-search-divider span{
  font-size:11px;color:var(--label-3);white-space:nowrap;font-weight:500;
  letter-spacing:.3px;
}
.drawer-empty{
  text-align:center;padding:36px 0;color:var(--label-3);
}
.drawer-empty svg{display:block;margin:0 auto 12px;opacity:.4;}
.drawer-empty p{font-size:14px;font-weight:500;}

/* ── SKELETON ── */
.skeleton{
  background:linear-gradient(90deg,#EBEBEF 0%,#F5F5F9 50%,#EBEBEF 100%);
  background-size:200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;border-radius:8px;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.result-count{
  font-size:12px;color:var(--label-3);font-weight:500;
  text-align:right;padding:0 4px 8px;letter-spacing:-.1px;
}

/* ── UTILITIES ── */
.ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.28);
  width:4px;height:4px;margin:-2px 0 0 -2px;
  transform:scale(0);animation:ripple .65s ease-out forwards;pointer-events:none;
}
@keyframes ripple{to{transform:scale(80);opacity:0;}}

@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}80%{transform:translateX(4px);}
}

/* ══════════════════════════════════════
   PRODUCT DETAIL SHEET
   ══════════════════════════════════════ */
.pd-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,0);
  display:flex;align-items:flex-end;justify-content:center;
  transition:background .35s ease;
}
.pd-overlay.is-open{background:rgba(0,0,0,.45);}

.pd-sheet{
  width:100%;max-width:430px;
  max-height:92dvh;
  background:var(--bg);
  border-radius:24px 24px 0 0;
  overflow:hidden;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 48px rgba(0,0,0,.18);
}
.pd-sheet.is-open{transform:translateY(0);}

/* ── Gallery ── */
.pd-gallery{
  position:relative;
  background:#fff;
  flex-shrink:0;
  overflow:hidden;
  height:280px;
}
.pd-track-wrap{
  width:100%;height:100%;overflow:hidden;
}
.pd-track{
  display:flex;
  width:100%;height:100%;
  will-change:transform;
}
.pd-slide{
  flex:0 0 100%;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;
}
.pd-slide img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  padding:12px;box-sizing:border-box;
}
.pd-no-photo{font-size:52px;opacity:.18;}
.pd-photo-dots{
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:5px;
  pointer-events:none;
}
.pd-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,.25);
  transition:all .2s;pointer-events:all;cursor:pointer;
}
.pd-dot.on{width:16px;border-radius:4px;background:var(--blue);}
.pd-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--label);
  transition:opacity .2s,transform .15s;
  box-shadow:0 1px 6px rgba(0,0,0,.12);
}
.pd-arrow-l{left:10px;}
.pd-arrow-r{right:10px;}
.pd-close{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(0,0,0,.38);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:white;
}

/* ── Zoom photo fullscreen ── */
#img-zoom-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,0);
  display:flex;align-items:center;justify-content:center;
  transition:background .28s ease;
  cursor:zoom-out;
}
#img-zoom-overlay.is-open{background:rgba(0,0,0,.9);}
#img-zoom-img{
  max-width:96vw;max-height:88dvh;
  object-fit:contain;
  border-radius:4px;
  transform:scale(.82);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.3,.64,1),opacity .26s;
  mix-blend-mode:normal;
  pointer-events:none;
}
#img-zoom-overlay.is-open #img-zoom-img{
  transform:scale(1);opacity:1;
}
.img-zoom-close{
  position:absolute;top:18px;right:18px;
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.15);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;
}
/* Icône zoom sur la galerie produit */
.pd-zoom-hint{
  position:absolute;bottom:12px;right:12px;
  width:28px;height:28px;border-radius:8px;
  background:rgba(0,0,0,.32);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  opacity:.85;
}
.pd-zoom-hint svg{stroke:#fff;}

/* ── Info ── */
/* Banner photo voiture auto-associée */
.pd-car-banner{
  background:#fff;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  position:relative;
  padding-top:6px;
}
.pd-car-back{
  position:absolute; top:14px; left:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.06); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pd-car-img{
  width:82%;
  max-height:190px;
  object-fit:contain;
  object-position:center;
  padding:20px 0 8px;
}
.pd-car-label{
  padding:4px 16px 18px;
  text-align:center;
  color:#3A3A3C;
  font-size:14px;
  font-weight:600;
  letter-spacing:.1px;
}

.pd-info{
  padding:16px 18px 32px;
  overflow-y:auto;flex:1;
}
.pd-name{
  font-size:15px;font-weight:700;color:var(--label);
  line-height:1.35;margin-bottom:5px;
}
.pd-veh{
  font-size:12px;color:var(--label-3);margin-bottom:12px;
}
.pd-price{
  font-size:26px;font-weight:800;color:var(--blue);
  letter-spacing:-.5px;margin-bottom:16px;
}
.pd-actions{display:flex;flex-direction:column;gap:10px;}
.pd-add-btn{
  width:100%;height:50px;border:none;border-radius:14px;cursor:pointer;
  background:var(--green);color:white;
  font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background var(--t-std),transform var(--t-spring);
}
.pd-add-btn:active{transform:scale(.96);}
.pd-order-btn{
  width:100%;height:48px;border:none;border-radius:14px;cursor:pointer;
  background:var(--blue);color:white;
  font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background var(--t-std),transform var(--t-spring);
}
.pd-order-btn:active{transform:scale(.96);}

/* ══════════════════════════════════════
   INSTANT SEARCH SUGGESTIONS DROPDOWN
   ══════════════════════════════════════ */
.search-suggestions{
  position:absolute;
  top:calc(100% + 6px);
  left:8px;right:8px;
  background:var(--bg);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.16),0 0 0 .5px var(--sep);
  z-index:500;
  overflow:hidden;
  max-height:65dvh;
  overflow-y:auto;
  scrollbar-width:none;
}
.search-suggestions::-webkit-scrollbar{display:none;}

.sugg-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:.5px solid var(--sep);
  cursor:pointer;
  transition:background var(--t-fast);
}
.sugg-item:last-child{border-bottom:none;}
.sugg-item:active,.sugg-item:hover{background:var(--bg-1);}

.sugg-thumb{
  width:52px;height:52px;border-radius:10px;
  background:var(--bg-1);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sugg-thumb img{width:100%;height:100%;object-fit:cover;}

.sugg-info{flex:1;min-width:0;}
.sugg-name{
  font-size:13px;font-weight:500;color:var(--label);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:3px;
}
.sugg-price{font-size:14px;font-weight:800;color:var(--blue);}


/* Bouton panier dans suggestions — même style que pcard-cart-btn */
.sugg-cart-btn{
  width:32px;height:32px;flex-shrink:0;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 6px rgba(0,0,0,.12);
  border-radius:10px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .18s,transform .15s;
}
.sugg-cart-btn svg{width:15px;height:15px;stroke:#1C1C1E;}
.sugg-cart-btn:active{transform:scale(.88);}
.sugg-cart-btn.spring{animation:_spring .42s cubic-bezier(.36,.07,.19,.97) forwards;}
.sugg-cart-btn.added{background:#34C759;}
.sugg-cart-btn.added svg{stroke:#fff;}
.sugg-cart-btn .chk{stroke-dasharray:22;stroke-dashoffset:22;animation:_checkDraw .32s .06s ease forwards;}

/* ══════════════════════════════════════
   SEARCH LIST MODE (full results)
   ══════════════════════════════════════ */
.prod-grid.search-list-mode{
  display:flex;flex-direction:column;
  gap:0;
  padding:0;
}
.search-list-item{
  display:flex;align-items:center;gap:14px;
  padding:12px var(--sp);
  border-bottom:.5px solid var(--sep);
  cursor:pointer;
  transition:background var(--t-fast);
  background:var(--bg);
}
.search-list-item:last-child{border-bottom:none;}
.search-list-item:active{background:var(--bg-1);}

.sli-thumb{
  width:72px;height:72px;border-radius:12px;
  background:var(--bg-1);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sli-thumb img{width:100%;height:100%;object-fit:cover;}

.sli-info{flex:1;min-width:0;}
.sli-name{
  font-size:13.5px;font-weight:600;color:var(--label);
  line-height:1.35;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sli-veh{font-size:11px;color:var(--label-3);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sli-price{font-size:16px;font-weight:800;color:var(--blue);}
.sli-arrow{color:var(--label-4);flex-shrink:0;}
.sli-cart-btn{
  width:34px;height:34px;flex-shrink:0;
  background:rgba(0,0,0,.05);
  border-radius:10px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .15s;
}
.sli-cart-btn svg{width:15px;height:15px;stroke:#1C1C1E;}
.sli-cart-btn:active{transform:scale(.88);}
.sli-cart-btn.added{background:#34C759;}
.sli-cart-btn.added svg{stroke:#fff;}

/* ═══════════════════════════════════════════════════════════
   PC E-COMMERCE LAYOUT (≥ 1024 px)
   ═══════════════════════════════════════════════════════════ */

#pc-view,#pc-checkout-overlay,#pc-contact-overlay{display:none;}

#pc-view{
  flex-direction:column;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',sans-serif;
  background:#ffffff;color:#1d1d1f;
}

@media(min-width:1024px){
  /* Supprimer les GPU layers inutiles des pages mobiles */
  .page{will-change:auto;}
  html{
    height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;
    background:#ffffff!important;display:block!important;width:auto!important;
    align-items:unset!important;justify-content:unset!important;
  }
  body{
    overflow:visible!important;background:#ffffff!important;
    display:block!important;height:auto!important;width:auto!important;
    align-items:unset!important;justify-content:unset!important;
  }
  #app{display:none!important;}
  #pc-view{display:flex!important;}

  /* ─── HEADER ─── */
  .pc-head{
    position:fixed;top:0;left:0;right:0;z-index:200;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
    background:rgba(255,255,255,.97);
    padding:0 32px;height:56px;
    border-bottom:1px solid rgba(0,0,0,.1);
    box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.07);
  }
  .pc-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;}
  .pc-logo img{width:30px;height:30px;border-radius:7px;}
  .pc-logo-name{font-size:18px;font-weight:700;color:#1d1d1f;letter-spacing:-.5px;}
  .pc-logo-name span{color:#0071e3;}

  .pc-head-search{width:100%;max-width:580px;margin:0 auto;position:relative;}
  .pc-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(0,0,0,.4);pointer-events:none;}
  .pc-search-clear-btn{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:rgba(0,0,0,.4);
    display:flex;align-items:center;padding:2px;
  }
  .pc-search-clear-btn:hover{color:#1d1d1f;}
  #pc-search-input{
    width:100%;height:40px;background:rgba(0,0,0,.06);border:none;border-radius:20px;
    padding:0 36px 0 42px;font-size:15px;color:#1d1d1f;outline:none;
    transition:background .2s,box-shadow .2s;
    font-family:inherit;
  }
  #pc-search-input::placeholder{color:rgba(0,0,0,.4);}
  #pc-search-input:focus{background:rgba(0,0,0,.04);box-shadow:0 0 0 4px rgba(0,113,227,.22);}

  .pc-head-actions{display:flex;align-items:center;gap:8px;justify-self:end;}

  .pc-contact-head-btn{
    display:flex;align-items:center;gap:6px;
    background:rgba(0,0,0,.06);color:#1d1d1f;
    border:none;border-radius:980px;padding:0 16px;height:34px;
    font-size:13px;font-weight:500;cursor:pointer;
    font-family:inherit;transition:background .15s;
  }
  .pc-contact-head-btn:hover{background:rgba(0,0,0,.1);}

  .pc-wa-btn{
    display:flex;align-items:center;gap:6px;
    background:rgba(52,199,89,.12);color:#1e7d34;
    border:none;border-radius:980px;padding:0 16px;height:34px;
    font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;
    font-family:inherit;transition:background .15s;
  }
  .pc-wa-btn:hover{background:rgba(52,199,89,.2);}

  .pc-cart-btn{
    display:flex;align-items:center;gap:8px;
    background:#0071e3;color:#fff;
    border:none;border-radius:980px;padding:0 20px;height:34px;
    font-size:13px;font-weight:500;cursor:pointer;
    font-family:inherit;transition:background .15s;flex-shrink:0;
  }
  .pc-cart-btn:hover{background:#0077ed;}
  .pc-cart-badge{
    background:rgba(255,255,255,.22);border-radius:9999px;
    min-width:20px;height:20px;padding:0 5px;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;
  }

  /* ─── BODY ─── */
  .pc-body{
    display:flex;align-items:flex-start;
    max-width:1440px;margin:0 auto;
    padding:80px 48px 100px;width:100%;
    box-sizing:border-box;
  }

  /* ─── SIDEBAR ─── */
  .pc-sidebar{
    position:fixed;
    top:76px;
    left:max(32px,calc((100vw - 1440px)/2 + 32px));
    width:240px;
    height:calc(100vh - 84px);
    overflow-y:auto;scrollbar-width:none;
    z-index:10;
  }
  .pc-sidebar::-webkit-scrollbar{display:none;}

  .pc-filter-section{
    background:#f5f5f7;border-radius:16px;
    padding:10px;margin-bottom:5px;
    border:1px solid rgba(0,0,0,.08);
  }
  .pc-filter-title{
    display:flex;align-items:center;gap:6px;
    font-size:9.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:#0071e3;
    margin-bottom:6px;padding:0 2px;
  }

  .pc-veh-section .pc-filter-title{margin-bottom:8px;}
  .pc-veh-selects{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;}
  .pc-veh-field{display:flex;flex-direction:column;gap:2px;}
  .pc-veh-label{font-size:10px;font-weight:500;color:rgba(0,0,0,.45);padding:0 2px;}
  .pc-veh-select{
    height:30px;border:1.5px solid rgba(0,0,0,.12);border-radius:9px;
    padding:0 8px;font-size:12px;color:#1d1d1f;
    background:#ffffff;outline:none;cursor:pointer;width:100%;
    font-family:inherit;transition:border-color .15s,box-shadow .15s;
  }
  .pc-veh-select:focus{border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.15);}
  .pc-veh-select:disabled{opacity:.35;cursor:default;}
  .pc-veh-apply{
    width:100%;height:30px;
    background:#0071e3;color:#fff;border:none;border-radius:980px;
    font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:center;gap:6px;
    transition:background .15s;margin-bottom:5px;
  }
  .pc-veh-apply:disabled{opacity:.35;cursor:default;}
  .pc-veh-apply:not(:disabled):hover{background:#0077ed;}
  .pc-veh-clear{
    width:100%;height:26px;background:none;
    border:1.5px solid rgba(0,0,0,.1);border-radius:980px;
    font-size:11px;color:rgba(0,0,0,.45);cursor:pointer;font-family:inherit;
    transition:border-color .15s,color .15s;
  }
  .pc-veh-clear:hover{border-color:#ff3b30;color:#ff3b30;}

  .pc-filter-item{
    display:flex;align-items:center;gap:7px;width:100%;
    padding:3px 8px;border-radius:8px;
    font-size:12px;color:#1d1d1f;
    border:none;background:transparent;font-family:inherit;
    text-align:left;cursor:pointer;
    transition:background .12s;line-height:1.3;
  }
  .pc-filter-item:hover{background:rgba(0,0,0,.07);}
  .pc-filter-item.active{
    background:linear-gradient(135deg,rgba(0,113,227,.16),rgba(0,153,255,.09));
    color:#0071e3;font-weight:600;
  }
  .pc-filter-count{
    margin-left:auto;font-size:10px;
    color:rgba(0,0,0,.35);font-weight:500;flex-shrink:0;
    background:rgba(0,0,0,.08);border-radius:20px;padding:1px 6px;
  }
  .pc-filter-item.active .pc-filter-count{
    background:rgba(0,113,227,.15);color:#0071e3;
  }

  #pc-brand-filters{
    max-height:210px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,.15) transparent;
  }
  #pc-brand-filters::-webkit-scrollbar{width:3px;}
  #pc-brand-filters::-webkit-scrollbar-track{background:transparent;}
  #pc-brand-filters::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:99px;}
  #pc-brand-filters::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28);}

  .pc-sidebar-contact{
    background:#f5f5f7;border-radius:14px;
    padding:10px;font-size:12px;color:rgba(0,0,0,.55);line-height:1.4;
    border:1px solid rgba(0,0,0,.08);
  }
  .pc-sidebar-contact p{margin-bottom:8px;}
  .pc-sidebar-wa{
    display:flex;align-items:center;gap:6px;
    background:rgba(52,199,89,.1);color:#1e7d34;
    border-radius:10px;padding:7px 10px;margin-bottom:6px;
    font-size:12px;font-weight:500;text-decoration:none;
    transition:background .15s;
  }
  .pc-sidebar-wa:hover{background:rgba(52,199,89,.18);}
  .pc-sidebar-contact-btn{
    width:100%;height:30px;background:rgba(0,0,0,.05);
    border:none;border-radius:980px;font-family:inherit;
    display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:12px;font-weight:500;color:#1d1d1f;cursor:pointer;
    transition:background .15s;
  }
  .pc-sidebar-contact-btn:hover{background:rgba(0,0,0,.1);}

  /* ─── MAIN ─── */
  .pc-main{flex:1;min-width:0;margin-left:268px;}

  .pc-result-bar{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:24px;
  }
  .pc-result-count{font-size:14px;color:rgba(0,0,0,.5);font-weight:500;letter-spacing:-.1px;}

  .pc-sort-wrap select{
    height:34px;border:1.5px solid rgba(0,0,0,.1);
    border-radius:980px;padding:0 14px;
    font-size:13px;color:#1d1d1f;background:#fff;font-family:inherit;
    outline:none;cursor:pointer;transition:border-color .15s;
  }
  .pc-sort-wrap select:focus{border-color:#0071e3;}

  .pc-filters-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .pc-filter-chip{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(0,113,227,.1);color:#0071e3;
    border:none;border-radius:9999px;font-family:inherit;
    padding:5px 14px 5px 16px;font-size:13px;font-weight:500;
    cursor:pointer;transition:background .15s;
  }
  .pc-filter-chip:hover{background:rgba(0,113,227,.18);}
  .pc-filter-chip span{font-size:15px;font-weight:400;line-height:1;opacity:.6;}
  .pc-reset-all-btn{
    background:rgba(255,59,48,.08);color:#ff3b30;
    border:none;border-radius:9999px;font-family:inherit;
    padding:5px 16px;font-size:13px;font-weight:500;
    cursor:pointer;transition:background .15s;
  }
  .pc-reset-all-btn:hover{background:rgba(255,59,48,.16);}

  /* ─── GRILLE PRODUITS ─── */
  .pc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;row-gap:0;}
  #pc-grid .pcard-pair{display:contents;}
  .pc-carousel .pcard-pair{display:flex!important;gap:12px;flex-shrink:0;}

  /* ─── EN-TÊTE GROUPE ─── */
  .pc-group-header{
    grid-column:1/-1;
    display:flex;align-items:center;gap:20px;
    padding:32px 4px 10px;
  }
  .pc-group-header:first-child{padding-top:8px;}
  .pc-carousel-wrap+.pc-group-header{
    border-top:1px solid rgba(0,0,0,.08);
    padding-top:40px;margin-top:8px;
  }
  .pc-group-car-wrap{
    flex-shrink:0;
  }
  .pc-group-car-photo{
    height:110px;width:auto;max-width:220px;
    object-fit:contain;display:block;
  }
  .pc-group-text{display:block;min-width:0;}
  .pc-group-brand{
    display:inline;font-size:26px;font-weight:800;
    letter-spacing:-.8px;color:#1d1d1f;
  }
  .pc-group-model{
    display:inline;margin-left:8px;
    font-size:20px;font-weight:300;letter-spacing:-.3px;color:rgba(0,0,0,.45);
  }
  .pc-group-years{
    display:block;width:fit-content;
    font-size:11px;font-weight:600;color:#0071e3;
    background:rgba(0,113,227,.09);border-radius:980px;
    padding:3px 11px;margin-top:6px;letter-spacing:.01em;
  }
  .pc-group-count{
    margin-left:auto;flex-shrink:0;
    font-size:12px;font-weight:600;color:#0071e3;
    background:rgba(0,113,227,.1);border-radius:980px;
    padding:5px 16px;
  }

  /* ─── CAROUSEL ROW ─── */
  .pc-carousel-wrap{grid-column:1/-1;position:relative;padding:6px 0 28px;}
  .pc-carousel{
    display:flex;gap:16px;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:6px 4px 12px;
    cursor:grab;
  }
  .pc-carousel.grabbing{cursor:grabbing;}
  .pc-carousel::-webkit-scrollbar{display:none;}
  .pc-carousel .pcard{
    min-width:248px;max-width:248px;
    flex-shrink:0;
    background:#fff;border-radius:22px;overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    border:1px solid rgba(0,0,0,.09);
    transition:transform .28s cubic-bezier(.25,1,.5,1),box-shadow .28s,border-color .28s;
    cursor:pointer;margin:0;display:flex;flex-direction:column;
  }
  .pc-carousel .pcard-pair{}
  .pc-carousel .pcard:hover{
    transform:translateY(-6px) scale(1.01);
    box-shadow:0 16px 40px rgba(0,0,0,.12);
    border-color:rgba(0,113,227,.25);
  }
  .pc-carousel .pcard .pcard-img{
    border-bottom:1px solid rgba(0,0,0,.06);aspect-ratio:4/3;
    background:#f5f5f7;
  }
  /* Cartes PC : style identique au mobile */
  .pc-carousel .pcard .pcard-veh{display:none;}
  .pc-carousel .pcard .pcard-meta-row{display:none;}
  .pc-carousel .pcard .pcard-img{
    border-bottom:3px solid var(--blue);
    aspect-ratio:1/1;
    background:#fff;
  }
  .pc-carousel .pcard .pcard-info{display:flex;flex-direction:column;flex:1;padding:14px 14px 16px;}
  .pc-carousel .pcard .pcard-badges{margin-bottom:5px;}
  .pc-carousel .pcard .pcard-name{
    font-size:15px;font-weight:800;color:#1C1C1E;
    text-transform:uppercase;letter-spacing:-.3px;
    display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;
    line-height:1.25;margin-bottom:5px;
  }
  .pc-carousel .pcard .pcard-bottom{
    margin-top:auto;padding-top:8px;
    border-top:.5px solid rgba(0,0,0,.07);
    display:flex;align-items:center;justify-content:space-between;gap:6px;
  }
  .pc-carousel .pcard .pcard-price{
    font-size:21px;font-weight:900;letter-spacing:-1px;
    color:var(--blue);
    display:flex;flex-direction:column;align-items:flex-start;line-height:1;
  }
  .pc-carousel .pcard .pcard-price span{font-size:9px;font-weight:600;opacity:.5;letter-spacing:.6px;margin-top:1px;text-transform:uppercase;}
  .pc-carousel .pcard .pcard-order-btn{
    padding:9px 17px;font-size:12px;font-weight:700;border-radius:24px;
    background:linear-gradient(130deg,#1a8cff,#0062D5);
    color:#fff;border:none;
    box-shadow:0 4px 14px rgba(0,100,255,.38);
    white-space:nowrap;letter-spacing:.1px;
  }

  .pc-carousel-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;
    background:#fff;border:1px solid rgba(0,0,0,.1);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;z-index:2;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    transition:box-shadow .2s,transform .2s,border-color .2s;color:#1d1d1f;
  }
  .pc-carousel-btn:hover{
    box-shadow:0 6px 24px rgba(0,0,0,.15);
    border-color:rgba(0,113,227,.3);
    transform:translateY(-50%) scale(1.08);
  }
  .pc-carousel-btn-prev{left:-20px;}
  .pc-carousel-btn-next{right:-20px;}

  #pc-grid>.pcard,#pc-grid>.pcard-pair>.pcard{
    background:#fff;border-radius:20px;overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
    border:1px solid rgba(0,0,0,.09);
    transition:transform .22s,box-shadow .22s,border-color .22s;cursor:pointer;margin:8px;
  }
  #pc-grid>.pcard:hover,#pc-grid>.pcard-pair>.pcard:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 36px rgba(0,0,0,.12);
    border-color:rgba(0,113,227,.25);
  }

  .pc-empty{grid-column:1/-1;text-align:center;padding:80px 0;color:rgba(0,0,0,.35);}
  .pc-empty svg{display:block;margin:0 auto 20px;opacity:.35;}
  .pc-empty-title{font-size:17px;font-weight:600;color:#1d1d1f;margin-bottom:8px;}
  .pc-empty-sub{font-size:14px;color:rgba(0,0,0,.45);}

  .pc-footer{
    position:fixed;bottom:20px;left:50%;
    transform:translateX(-50%) translateY(80px);
    opacity:0;pointer-events:none;
    z-index:190;
    background:rgba(255,255,255,.96);
    border-radius:980px;
    padding:0 20px;height:36px;
    box-shadow:0 8px 32px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.07);
    transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s;
    margin-top:0;border-top:none;
  }
  .pc-footer.visible{
    transform:translateX(-50%) translateY(0);
    opacity:1;pointer-events:auto;
  }
  .pc-footer-inner{
    display:flex;align-items:center;justify-content:center;gap:10px;
    height:100%;white-space:nowrap;
    font-size:12px;color:rgba(0,0,0,.45);
  }
  .pc-footer-logo{font-size:13px;font-weight:700;color:#1d1d1f;}
  .pc-footer-logo span{color:#0071e3;}
  .pc-footer-sep{color:rgba(0,0,0,.2);}
  .pc-footer-inner a{color:#0071e3;text-decoration:none;font-weight:500;}
  .pc-footer-inner a:hover{color:#0077ed;}

  /* ─── MICRO-INTERACTIONS PC ─── */
  .pc-carousel .pcard{animation:_card-in .34s cubic-bezier(.25,1,.5,1) both;}
  #pc-grid.filter-in,.mob-grid-fadein{animation:_grid-fade .22s ease;}
  .pc-cart-btn.cart-glow{animation:_cart-glow .62s ease;}
  .pc-filter-item.tapped,.cat-card.tapped{animation:_filter-tap .18s cubic-bezier(.36,.07,.19,.97);}

  /* ─── FICHE PRODUIT (pd-sheet) sur PC : modal centré ─── */
  .pd-overlay{
    align-items:center;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .pd-sheet{
    max-width:480px;
    max-height:88dvh;
    border-radius:24px;
    transform:scale(.92) translateY(16px);
    transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .28s;
    opacity:0;
    box-shadow:0 32px 80px rgba(0,0,0,.24);
  }
  .pd-sheet.is-open{
    transform:scale(1) translateY(0);
    opacity:1;
  }
  .pd-gallery{height:320px;}
  .pd-info{padding:20px 22px 36px;}
  .pd-name{font-size:16px;}
  .pd-price{font-size:28px;}
  .pd-add-btn,.pd-order-btn{height:52px;font-size:15px;border-radius:16px;}

  /* ─── PANIER (modal-overlay / modal-sheet) sur PC : même traitement que pd-sheet ─── */
  .modal-overlay{
    align-items:center;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .modal-sheet{
    max-width:480px;
    border-radius:24px;
    transform:scale(.92) translateY(16px);
    transition:transform .38s cubic-bezier(.32,.72,0,1),opacity .28s;
    opacity:0;
    box-shadow:0 32px 80px rgba(0,0,0,.24);
  }
  .modal-overlay.open .modal-sheet{
    transform:scale(1) translateY(0);
    opacity:1;
  }
}

/* ─── MICRO-INTERACTIONS (mobile + PC) ─── */
@keyframes _card-in{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes _grid-fade{from{opacity:0;}to{opacity:1;}}
@keyframes _cart-glow{0%,100%{box-shadow:0 0 0 0 rgba(0,113,227,0);}45%{box-shadow:0 0 0 10px rgba(0,113,227,.22),0 0 0 20px rgba(0,113,227,.08);}}
@keyframes _filter-tap{0%,100%{transform:scale(1);}45%{transform:scale(.91);}}
.pcard.card-in{animation:_card-in .34s cubic-bezier(.25,1,.5,1) both;}
.pc-fly-dot{position:fixed;width:10px;height:10px;background:#0071e3;border-radius:50%;pointer-events:none;z-index:99999;}
.cart-btn.cart-glow{animation:_cart-glow .62s ease;}
.cat-card.tapped{animation:_filter-tap .18s cubic-bezier(.36,.07,.19,.97);}

/* ─── PC MODALS (checkout + contact) ─── */
.pc-ov{
  position:fixed;inset:0;z-index:9200;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s;
  padding:20px;
}
.pc-ov.is-open{opacity:1;}

.pc-ov-panel{
  background:#fff;border-radius:22px;
  width:100%;max-height:90vh;overflow-y:auto;scrollbar-width:none;
  transform:translateY(24px);transition:transform .25s cubic-bezier(.34,1.2,.64,1);
  box-shadow:0 24px 64px rgba(0,0,0,.22);
}
.pc-ov.is-open .pc-ov-panel{transform:translateY(0);}
.pc-ov-panel::-webkit-scrollbar{display:none;}

.pc-ck-panel{max-width:600px;}
.pc-ct-panel{max-width:640px;}

.pc-ov-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px 16px;border-bottom:1px solid var(--sep);
  position:sticky;top:0;background:#fff;z-index:1;border-radius:22px 22px 0 0;
}
.pc-ov-title{
  display:flex;align-items:center;gap:10px;
  font-size:17px;font-weight:700;color:var(--label);margin:0;
}
.pc-ov-close{
  width:32px;height:32px;border-radius:50%;
  border:none;background:var(--fill-2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--label-2);
  transition:background .15s;flex-shrink:0;
}
.pc-ov-close:hover{background:var(--fill-1);}

/* Checkout items */
.pc-ck-items{padding:16px 24px 0;max-height:32vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.pc-ck-item{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--sep);
}
.pc-ck-item:last-child{border-bottom:none;}
.pc-ck-item-thumb{
  width:56px;height:56px;border-radius:12px;
  background:var(--bg-1);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.pc-ck-item-thumb img{width:100%;height:100%;object-fit:cover;}
.pc-ck-item-thumb svg{width:36px;height:36px;}
.pc-ck-item-info{flex:1;min-width:0;}
.pc-ck-item-name{font-size:14px;font-weight:600;color:var(--label);line-height:1.35;margin-bottom:2px;}
.pc-ck-item-veh{font-size:12px;color:var(--label-3);}
.pc-ck-item-price{font-size:15px;font-weight:800;color:var(--blue);flex-shrink:0;}

.pc-ck-total{
  margin:10px 24px 0;padding:12px 16px;
  background:var(--bg-1);border-radius:12px;
  font-size:15px;font-weight:700;color:var(--label);
  display:flex;justify-content:space-between;align-items:center;
}
.pc-ck-total span:last-child{color:var(--blue);}

.pc-ov-sep{
  display:flex;align-items:center;gap:10px;
  margin:16px 24px 0;font-size:12px;color:var(--label-3);
}
.pc-ov-sep::before,.pc-ov-sep::after{content:'';flex:1;height:1px;background:var(--sep);}

/* Formulaire commun */
.pc-ck-form,.pc-ct-form{padding:14px 24px 24px;}
.pc-ck-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.pc-ck-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.pc-ck-field:last-of-type{margin-bottom:0;}
.pc-ck-label{font-size:12px;font-weight:600;color:var(--label-2);}
.pc-req{color:var(--red);}
.pc-ck-input{
  height:42px;border:1.5px solid var(--sep-op);border-radius:10px;
  padding:0 14px;font-size:14px;color:var(--label);
  background:#fff;outline:none;
  font-family:var(--font);
  transition:border-color .15s,box-shadow .15s;width:100%;box-sizing:border-box;
}
.pc-ck-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,122,255,.12);}
.pc-ck-ta{height:auto;padding:12px 14px;resize:vertical;min-height:80px;}
.pc-ck-submit{
  width:100%;height:50px;margin-top:18px;
  background:var(--blue);color:#fff;border:none;border-radius:14px;
  font-size:15px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .15s;
}
.pc-ck-submit:hover{opacity:.88;}
.pc-ck-secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:12px;font-size:12px;color:var(--label-3);
}

/* Contact modal quick buttons */
.pc-ct-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 24px 0;}
.pc-ct-qbtn{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  text-decoration:none;transition:background .15s;
}
.pc-ct-call{background:rgba(0,122,255,.1);color:var(--blue);}
.pc-ct-call:hover{background:rgba(0,122,255,.18);}
.pc-ct-wa{background:rgba(37,211,102,.1);color:#1a9c47;}
.pc-ct-wa:hover{background:rgba(37,211,102,.18);}
.pc-ct-qbtn div{display:flex;flex-direction:column;}
.pc-ct-qbtn div span{font-size:13px;font-weight:700;}
.pc-ct-qbtn div small{font-size:11px;opacity:.7;}

/* ══ INFO / À PROPOS ══ */
.info-trigger{position:absolute;top:16px;right:14px;width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--label-3);-webkit-tap-highlight-color:transparent;transition:background .15s;}
.info-trigger:active{background:rgba(0,0,0,.12);}
.info-handle{width:36px;height:4px;background:var(--bg-3);border-radius:2px;margin:12px auto 0;flex-shrink:0;}
.info-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.info-scroll::-webkit-scrollbar{display:none;}
.info-hero{display:flex;flex-direction:column;align-items:center;padding:24px 24px 20px;text-align:center;}
.info-hero img{width:52px;height:52px;margin-bottom:12px;}
.info-hero h2{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--label);margin:0 0 6px;}
.info-hero h2 span{color:var(--blue);}
.info-hero p{font-size:13px;color:var(--label-3);margin:0;line-height:1.5;}
.info-stats{display:flex;gap:1px;background:var(--sep);margin:0 20px 20px;border-radius:14px;overflow:hidden;}
.info-stat{flex:1;background:var(--bg);text-align:center;padding:13px 6px;}
.info-stat strong{display:block;font-size:16px;font-weight:700;color:var(--blue);letter-spacing:-.3px;}
.info-stat small{display:block;font-size:11px;color:var(--label-3);margin-top:2px;}
.info-about-text{padding:0 20px 18px;font-size:14px;color:var(--label-2);line-height:1.65;}
.info-sep{height:1px;background:var(--bg-1);margin:0 20px 16px;}
.info-faq-label{padding:0 20px 10px;font-size:11px;font-weight:600;color:var(--label-3);text-transform:uppercase;letter-spacing:.6px;}
.faq-item{border-top:1px solid var(--bg-1);}
.faq-item:last-child{border-bottom:1px solid var(--bg-1);}
.faq-q{width:100%;background:none;border:none;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;font-size:14px;font-weight:500;color:var(--label);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s;}
.faq-q:active{background:var(--bg-1);}
.faq-chevron{flex-shrink:0;color:var(--label-3);transition:transform .32s cubic-bezier(.25,0,.2,1);}
.faq-item.open .faq-chevron{transform:rotate(180deg);}
.faq-a{overflow:hidden;max-height:0;transition:max-height .38s cubic-bezier(.25,0,.2,1);}
.faq-item.open .faq-a{max-height:260px;}
.faq-a p{margin:0;padding:0 20px 16px;font-size:13px;color:var(--label-2);line-height:1.65;}
.info-close-row{padding:14px 20px 28px;flex-shrink:0;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.25,0,.2,1);}
.info-close-row.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.info-close-btn{width:100%;padding:14px;border:none;border-radius:12px;background:var(--bg-1);color:var(--label);font-size:15px;font-weight:500;cursor:pointer;transition:background .12s;}
.info-close-btn:active{background:var(--bg-3);}
@media(min-width:1024px){
  .info-trigger{display:none;}
  #info-sheet{max-width:560px;}
  .pc-info-btn{height:36px;padding:0 14px;border:none;border-radius:10px;background:rgba(0,0,0,.06);color:var(--label-2);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;}
  .pc-info-btn:hover{background:rgba(0,0,0,.10);}
}