/* ═══════════════════════════════════════════════════════════════
   LA COMMANDE ET LES AVIS — maquette validée le 8 octobre 2026
   (apercu/commande-apercu.html). Chargée par index.html seulement,
   après styles.css.

   Tout est rangé sous #nav, #commander, #avis et #stick (seule
   exception : la marge du pied de page, plus bas) : la
   palette, la police et les remises à zéro ne débordent jamais sur
   le film d'ouverture ni sur le pied de page, qui gardent leur
   monde (Rubik, beige). Les couleurs de la maquette portent les
   mêmes noms que celles du site (--ink, --line…) : elles sont donc
   déclarées ici, sur ces quatre blocs, et pas sur :root.
   ═══════════════════════════════════════════════════════════════ */

#nav,#commander,#avis,#stick{
  --bg:#FAFAF8; --surface:#FFFFFF; --sunk:#F3F4F1; --line:#E6E6E1; --line-2:#D9D9D3;
  --ink:#0A0A0B; --ink-2:#3A3A40; --muted:#6B6B73;
  --blue:#033EDC; --blue-ink:#0231B0; --blue-soft:#EEF2FE; --blue-line:#C9D6FB;
  --star:#FBC535; --ok:#127A3E; --err:#B42318;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,10,11,.05),0 2px 8px rgba(10,10,11,.04);
  --sh-2:0 1px 2px rgba(10,10,11,.04),0 10px 30px -8px rgba(10,10,11,.12);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.55;
}

/* ── remises à zéro, comme la maquette (margin:0 partout) ── */
#nav *,#commander *,#avis *,#stick *{margin:0}
#nav :is(h2,h3),#commander :is(h2,h3),#avis :is(h2,h3){
  font-family:var(--font);font-weight:700;line-height:1.55;letter-spacing:normal;text-wrap:wrap;
}
#nav img,#commander img,#avis img{display:block;max-width:100%;height:auto}
#commander :is(button,input),#avis :is(button,input),#stick button{font:inherit;color:inherit}
#nav a,#commander a,#avis a{color:inherit}

#commander .wrap,#avis .wrap{max-width:1160px;margin:0 auto;padding:0 20px}
/* la barre du haut est fixe : un lien vers #commander ou #avis ne doit pas
   cacher le début de la section sous elle */
#commander,#avis{scroll-margin-top:32px}

/* ── boutons ── */
#nav .btn,#commander .btn,#stick .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  text-decoration:none;font-family:var(--font);font-weight:700;line-height:1.55;border-radius:var(--r-pill);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
#nav .btn--blue,#commander .btn--blue{background:var(--blue);color:#fff;padding:16px 22px;font-size:16px;box-shadow:0 8px 22px -8px rgba(3,62,220,.65)}
#nav .btn--blue:active,#commander .btn--blue:active{transform:scale(.97)}
#nav .btn:focus-visible,#commander .btn:focus-visible,#stick .btn:focus-visible{outline:3px solid var(--blue-line);outline-offset:2px}
#nav .btn svg,#commander .btn svg{width:16px;height:16px}
#nav .btn--sm{padding:12px 20px;font-size:14.5px}

/* ── typographie ── */
#commander .eyebrow,#avis .eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 12px 6px 10px;font-size:13px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--sh-1);transition:transform .25s ease,box-shadow .25s ease;
  animation:cmdFloatY 5.5s ease-in-out infinite;--amp:-3px;
}
#commander .eyebrow .stars{
  display:inline;letter-spacing:1px;font-size:12px;
  background:linear-gradient(90deg,#F2B10E,#FFE08A,#F2B10E,#FFE08A,#F2B10E);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:cmdSheen 3s linear infinite;
}
#commander .h2,#avis .h2{font-size:clamp(34px,5vw,54px);line-height:1.04;letter-spacing:-.035em;font-weight:800;margin-top:18px}
#commander .h2 em,#avis .h2 em{font-style:normal;color:var(--blue)}
#avis .h2 em.mark{
  padding:0 .08em;background-size:100% 100%;
  background-image:linear-gradient(180deg,transparent 62%,rgba(251,197,53,.55) 62%,rgba(251,197,53,.55) 92%,transparent 92%);
}
#commander .lead,#avis .lead{font-size:18px;line-height:1.55;color:var(--muted);margin-top:14px;max-width:560px}
#commander .small{font-size:13px;line-height:1.55;color:var(--muted)}
#commander .pill-y{
  display:inline-block;background:#FFF2C6;color:#6B4A00;font-weight:700;font-size:12.5px;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid #F6D978;
}

/* ═══════════════ LA BARRE DU HAUT ═══════════════
   Elle reste posée au-dessus du film (position fixe, comme avant) :
   une pastille blanche lisible sur le film comme sur la page. */
#nav{
  position:fixed;top:12px;left:0;right:0;z-index:60;margin:0 auto;max-width:1160px;padding:0 20px;
  background:none;border:0;backdrop-filter:none;
}
#nav .nav__in{
  display:flex;align-items:center;gap:16px;justify-content:flex-start;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 8px 8px 22px;box-shadow:var(--sh-1);
}
#nav .nav__logo{flex:none}
#nav .nav__logo img{height:26px;width:auto}
#nav .nav__links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:600;color:var(--ink-2)}
#nav .nav__links a{position:relative;text-decoration:none;color:var(--ink-2);text-shadow:none;padding:0;font-size:14.5px;font-weight:600}
#nav .nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
#nav .wa{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#E8F8EE;flex:none;transition:transform .2s}
#nav .wa svg{width:20px;height:20px}
@media (max-width:760px){
  #nav{padding:0 12px}
  #nav .nav__links{display:none}
  #nav .nav__in{padding-left:16px;gap:10px}
  #nav .nav__logo img{height:22px}
  #nav .btn{display:inline-flex;margin-left:auto}
  #nav .btn--sm{padding:10px 14px;font-size:14px;gap:6px}
}

/* ═══════════════ LA COMMANDE ═══════════════ */
#commander.shop{position:relative;overflow:clip;background:var(--bg);padding:72px 0 40px}
/* overflow:clip et pas hidden : hidden empêcherait le récapitulatif
   de rester collé à l'écran pendant le défilement. */
#commander.shop::before{
  content:"";position:absolute;inset:-200px -10% auto auto;width:720px;height:720px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,62,220,.13),rgba(3,62,220,0));
  animation:cmdDrift 18s ease-in-out infinite;
}
#commander.shop::after{
  content:"";position:absolute;left:-180px;top:380px;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(251,197,53,.16),rgba(251,197,53,0));
  animation:cmdDrift 22s ease-in-out infinite reverse;
}
#commander .wrap{position:relative;z-index:1}
#commander .shop__head{max-width:640px}

#commander .shop__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;margin-top:40px;align-items:start}
#commander .card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
#commander .blk{padding:26px}
#commander .blk + .blk{border-top:1px solid var(--line)}
#commander .blk__t{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:14px}

/* le produit */
#commander .prod{display:grid;grid-template-columns:112px 1fr;gap:20px;align-items:center}
#commander .prod__img{
  width:112px;height:112px;border-radius:var(--r-md);object-fit:cover;object-position:62% 66%;background:var(--sunk);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);animation:cmdFloatY 5s ease-in-out infinite;--amp:-4px;
}
#commander .prod h3{font-size:19px;letter-spacing:-.015em;line-height:1.25}
#commander .prod p{color:var(--muted);font-size:14.5px;margin-top:4px}
#commander .prod__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#commander .tag{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:var(--sunk);color:var(--ink-2);transition:background .2s,color .2s}
#commander .tag--blue{background:var(--blue-soft);color:var(--blue-ink)}

/* la quantité */
#commander .qty{display:flex;align-items:center;gap:10px;max-width:none}
#commander .step{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:transform .2s,background .2s,border-color .2s,color .2s;
}
#commander .step:active:not(:disabled){transform:scale(.94)}
#commander .step:disabled{opacity:.35;cursor:default}
#commander .qbox{display:flex;align-items:baseline;justify-content:center;gap:6px;min-width:150px}
#commander .qbox input{
  width:2.2ch;border:0;background:none;font-size:44px;font-weight:800;letter-spacing:-.03em;text-align:right;
  -moz-appearance:textfield;appearance:textfield;padding:0;color:var(--blue);font-variant-numeric:tabular-nums;
}
#commander .qbox input::-webkit-outer-spin-button,#commander .qbox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#commander .qbox input:focus{outline:none}
#commander .qbox:focus-within{box-shadow:0 2px 0 var(--blue)}
#commander .qbox input.pop{animation:cmdPop .3s cubic-bezier(.2,.8,.2,1)}
#commander .qbox span{color:var(--muted);font-weight:600}
#commander .chips{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;margin-top:0}
#commander .chipq{
  min-width:48px;height:38px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer;
  transition:transform .2s,background .2s,border-color .2s,color .2s,box-shadow .2s;
}
#commander .chipq[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 14px -6px rgba(3,62,220,.7)}
#commander .chipq[hidden]{display:none}

/* quantité ramenée au maximum (ajout : absent de la maquette) */
#commander .qty-max{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
#commander .qty-max[hidden]{display:none}
#commander .qty-max a{color:var(--blue);font-weight:700}

/* les paliers de prix : 5 cartes cliquables */
#commander .tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:22px}
#commander .tier{
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 12px 11px;background:var(--surface);cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  /* styles.css a déjà une .tier (ancien bloc de commande) : on la neutralise */
  display:block;position:relative;width:auto;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,background .25s,opacity .25s;
}
#commander .tier b{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
#commander .tier strong{display:block;font-size:20px;letter-spacing:-.02em;margin-top:2px}
#commander .tier small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
#commander .tier s{display:block;font-size:12px;color:var(--muted);text-decoration-thickness:1px}
#commander .tier:focus-visible{outline:3px solid var(--blue-line);outline-offset:2px}
#commander .tier.is-on{background:var(--blue);border-color:var(--blue);box-shadow:0 14px 28px -12px rgba(3,62,220,.6);transform:translateY(-2px)}
#commander .tier.is-on b,#commander .tier.is-on small,#commander .tier.is-on strong,#commander .tier.is-on s{color:#fff}
#commander .tier.is-on b{opacity:.85}
#commander .tier.is-off{opacity:.4;cursor:default}

#commander .nudge{
  margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-2);display:flex;gap:8px;align-items:center;
  padding:0;background:none;border:0;border-radius:0;animation:none;
}
#commander .nudge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
#commander .nudge[hidden]{display:none}
#commander .nudge strong{font-weight:700;color:var(--ink)}

/* ce qui est inclus */
#commander .incl ul{padding:0;list-style:none;display:grid;gap:12px}
#commander .incl li{
  display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;list-style:none;
  padding:8px;margin:-8px;border-radius:var(--r-md);transition:background .2s;
}
#commander .ck{width:28px;height:28px;border-radius:50%;background:var(--blue);display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#commander .ck svg{width:14px;height:14px;color:#fff}
#commander .incl strong{display:block;font-size:15.5px}
#commander .incl span{font-size:14px;color:var(--muted)}
#commander .incl span a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
#commander .incl em{font-style:normal;font-size:13px;font-weight:700;padding-top:4px;white-space:nowrap}
#commander .incl em .pill-y{color:#6B4A00}

/* la livraison : trois cases */
#commander .ship{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#commander .ship div{background:var(--sunk);border-radius:var(--r-sm);padding:10px 12px;transition:transform .2s,background .2s}
#commander .ship b{display:block;font-size:12.5px;color:var(--muted);font-weight:600}
#commander .ship strong{font-size:15px}
#commander .ship s{font-size:12px;color:var(--muted);margin-right:4px;font-weight:500}
#commander .ship__note{margin-top:10px}

/* le stock (ajout : absent de la maquette) — au-dessus de la carte */
#commander .reste{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:28px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--star);
  border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--sh-1);font-size:14.5px;
}
#commander .reste[hidden]{display:none}
#commander .reste b{font-weight:800;color:var(--ink)}
#commander .reste span{color:var(--muted)}
#commander .reste--bas{border-left-color:#C2412D}
#commander .reste--bas b{color:#9E3423}
#commander .reste + .shop__grid{margin-top:16px}

/* les prix d'avant (caché tant qu'ANCIENS vaut null côté serveur) */
#commander .baisse{margin-top:14px;font-size:14px;color:var(--ink-2)}
#commander .baisse[hidden]{display:none}

/* ── le récapitulatif ── */
#commander .sum{position:sticky;top:96px;border-color:var(--blue-line);box-shadow:0 22px 50px -22px rgba(3,62,220,.35)}
#commander .sum::before{
  content:"";display:block;height:6px;border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,var(--blue),#3D6BFF,var(--star),#3D6BFF,var(--blue));background-size:200% 100%;
  animation:cmdSheen 6s linear infinite;
}
#commander .sum__in{padding:26px}
#commander .sum h3{font-size:18px;letter-spacing:-.01em}
#commander .lines{margin-top:16px;display:grid;gap:12px;font-size:15px}
#commander .line{display:flex;justify-content:space-between;gap:12px}
#commander .line span{color:var(--ink-2)}
#commander .line strong{font-variant-numeric:tabular-nums;white-space:nowrap}
#commander .line s{color:var(--muted);font-weight:500;margin-right:4px}
#commander .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
#commander .tot span{font-weight:600}
#commander .tot strong{font-size:34px;letter-spacing:-.035em;font-weight:800;transition:color .3s;font-variant-numeric:tabular-nums}
#commander .tot strong.flash{animation:cmdFlash .5s ease}
#commander .eco{margin-top:8px;font-size:13.5px;color:var(--ok)}
#commander .eco[hidden]{display:none}
#commander .gain{
  margin-top:16px;border-radius:var(--r-md);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--blue) 0%,#2B5BF0 100%);box-shadow:0 10px 24px -12px rgba(3,62,220,.7);
}
#commander .gain span{font-size:13.5px;color:rgba(255,255,255,.85);line-height:1.35}
#commander .gain strong{font-size:22px;color:#fff;letter-spacing:-.02em;white-space:nowrap}
#commander .gain strong::after{content:" ★";color:var(--star);font-size:.7em;vertical-align:.25em;display:inline-block;animation:cmdTwinkle 2.6s ease-in-out infinite}
#commander .sum .btn--blue{width:100%;margin-top:18px}
#commander .btn--blue .arr{width:18px;height:18px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#commander .btn--shine{position:relative;overflow:hidden}
#commander .btn--shine::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease;
}
#commander #payBtn{animation:cmdBreathe 3.2s ease-in-out infinite}
/* erreur sous le bouton (ajout : absent de la maquette) */
#commander .pay-err{
  margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.45;
  background:#FEF3F2;border:1px solid #FECDCA;color:var(--err);
}
#commander .pay-err[hidden]{display:none}
#commander .trust{margin-top:16px;display:grid;gap:8px;font-size:13.5px;color:var(--ink-2)}
#commander .trust div{display:flex;gap:10px;align-items:center}
#commander .trust svg{width:16px;height:16px;color:var(--muted);flex:none}
#commander .sum__legal{border-top:1px solid var(--line);padding:14px 26px;font-size:12.5px;color:var(--muted)}

/* ── la barre collante, en bas sur téléphone ── */
#stick.stick{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);padding:8px 8px 8px 22px;
  display:none;align-items:center;gap:12px;box-shadow:0 12px 30px -8px rgba(0,0,0,.45);
  -webkit-backdrop-filter:none;backdrop-filter:none;animation:cmdStickIn .32s cubic-bezier(.2,.8,.2,1) both;
}
#stick b{display:block;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
#stick span{display:block;font-size:12.5px;opacity:.7}
#stick .btn{margin-left:auto;background:var(--blue);color:#fff;padding:12px 18px;font-size:15px}
#stick .btn:active{transform:scale(.97)}

/* ═══════════════ LES AVIS ═══════════════ */
#avis.avis{
  position:relative;overflow:clip;border:0;padding:88px 0 40px;
  background:linear-gradient(180deg,var(--bg) 0%,#EAF0FE 20%,#EEF2FE 80%,var(--bg) 100%);
}
#avis.avis::before,#avis.avis::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
#avis.avis::before{
  width:560px;height:560px;right:-160px;top:180px;
  background:radial-gradient(closest-side,rgba(3,62,220,.14),rgba(3,62,220,0));animation:cmdDrift 20s ease-in-out infinite;
}
#avis.avis::after{
  width:420px;height:420px;left:-120px;bottom:120px;
  background:radial-gradient(closest-side,rgba(251,197,53,.2),rgba(251,197,53,0));animation:cmdDrift 24s ease-in-out infinite reverse;
}
#avis .wrap{position:relative;z-index:1}
#avis .avis__head{text-align:center;max-width:680px;margin:0 auto}
#avis .avis__head .lead{margin-left:auto;margin-right:auto}

/* les deux photos qui flottent */
#avis .field{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:40px auto 0}
#avis .field figure{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-2);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;animation:cmdFloatY 6s ease-in-out infinite;
}
#avis .field figure:nth-child(1){transform:rotate(-1.5deg)}
#avis .field figure:nth-child(2){transform:rotate(1.5deg);animation-duration:7.5s;animation-delay:-2s;--amp:-11px}
#avis .field img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#avis .field figcaption{
  position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;font-weight:600;
}

/* le mur de messages */
#avis .wall{position:relative;margin-top:44px}
#avis .cols{display:block;columns:3 320px;column-gap:18px}
#avis .q{
  break-inside:avoid;background:var(--surface);border-radius:20px;padding:24px 24px 20px;margin-bottom:18px;
  box-shadow:var(--sh-2);border:1px solid rgba(10,10,11,.04);
}
#avis .q__top{display:flex;justify-content:space-between;align-items:center}
#avis .q__mark{font-size:44px;line-height:.6;font-weight:800;color:var(--star);height:22px;font-family:Georgia,serif;transition:transform .35s}
#avis .q__src{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;transition:transform .35s}
#avis .q__src svg{width:15px;height:15px}
#avis .src-wa{background:#25D366}
#avis .src-ig{background:radial-gradient(circle at 30% 110%,#FFD86B 0,#FA7E1E 30%,#D62976 60%,#962FBF 85%)}
#avis .src-fo{background:var(--blue)}
#avis .q p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink)}
#avis .q p + p{margin-top:10px}
#avis .q .ask{color:var(--muted);font-style:italic}
#avis .q__who{display:flex;gap:12px;align-items:center;margin-top:18px}
#avis .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none;transition:box-shadow .3s}
#avis .q__who b{display:block;font-size:14.5px}
#avis .q__who div span{display:block;font-size:13px;color:var(--muted)}

/* comment ces avis sont recueillis */
#avis .method{max-width:760px;margin:36px auto 0;font-size:13px;color:var(--muted);text-align:center}
#avis .method summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
#avis .method p{margin-top:8px;text-align:left;font-size:13px;line-height:1.55}

/* Le pied de page suit directement les avis : sans ça, sa marge
   haute laissait voir une bande beige entre les deux. */
body > footer{margin-top:0}

/* ═══════════════ ENTRÉES AU DÉFILEMENT ═══════════════
   Même déclencheur que le reste du site (assets/app.js pose .in),
   mais le mouvement de la maquette : 24 px, 0,7 s. Les cartes
   gardent en plus leurs propres transitions de survol. */
#commander .rv,#avis .rv{
  opacity:0;transform:none;translate:0 24px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1);
}
#commander .rv.in,#avis .rv.in{opacity:1;translate:0 0}
#commander .card.rv{transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
#avis .field.rv{transform:none}
#avis .q.rv{transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
#avis .cols .rv:nth-child(3n+2){transition-delay:.08s}
#avis .cols .rv:nth-child(3n){transition-delay:.16s}
#avis .cols .rv.done{transition-delay:0s}
/* une fois entrés, les messages flottent doucement (classe posée par app.js) */
#avis .q.fl{animation:cmdFloatY 7s ease-in-out infinite;--amp:-6px}
#avis .q.fl:nth-child(2){animation-duration:8.5s;animation-delay:-3s;--amp:-8px}
#avis .q.fl:nth-child(3){animation-duration:6.5s;animation-delay:-1.5s}
#avis .q.fl:nth-child(4){animation-duration:9s;animation-delay:-4s;--amp:-5px}
#avis .q.fl:nth-child(5){animation-duration:7.8s;animation-delay:-2.5s;--amp:-7px}

/* ═══════════════ LES MOUVEMENTS ═══════════════ */
@keyframes cmdFloatY{0%,100%{translate:0 0}50%{translate:0 var(--amp,-8px)}}
@keyframes cmdDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-40px,30px) scale(1.08)}66%{transform:translate(30px,-20px) scale(.95)}}
@keyframes cmdSheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes cmdTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(20deg)}}
@keyframes cmdBreathe{0%,100%{box-shadow:0 8px 22px -8px rgba(3,62,220,.55)}50%{box-shadow:0 14px 34px -8px rgba(3,62,220,.85)}}
@keyframes cmdPop{0%{transform:scale(.86)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes cmdFlash{0%{color:var(--blue)}100%{color:var(--ink)}}
@keyframes cmdStickIn{from{opacity:0;transform:translateY(120%)}to{opacity:1;transform:none}}

/* ═══════════════ LES SURVOLS ═══════════════
   Réservés aux écrans avec une vraie souris, comme dans styles.css :
   sur un téléphone, un toucher déclenche :hover et l'élément resterait
   soulevé ou coloré après le doigt (on croirait qu'il est choisi). */
@media (hover:hover) and (pointer:fine){
  #nav .btn--blue:hover,#commander .btn--blue:hover{background:var(--blue-ink);transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(3,62,220,.75)}
  #commander .eyebrow:hover,#avis .eyebrow:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
  #nav .nav__links a:hover{color:var(--ink)}
  #nav .nav__links a:hover::after{transform:scaleX(1)}
  #nav .wa:hover{transform:scale(1.1) rotate(-6deg)}
  #commander .card:hover{box-shadow:0 2px 4px rgba(3,62,220,.04),0 22px 50px -18px rgba(3,62,220,.28);border-color:var(--blue-line)}
  #commander .prod:hover .prod__img{transform:scale(1.06) rotate(-1.5deg)}
  #commander .tag:hover{background:var(--blue-soft);color:var(--blue-ink)}
  #commander .step:hover:not(:disabled){transform:scale(1.08);border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
  #commander .chipq:hover:not([aria-pressed=true]){transform:translateY(-2px);border-color:var(--blue);color:var(--blue)}
  #commander .tier:hover:not(.is-on):not(:disabled){transform:translateY(-4px);border-color:var(--blue-line);box-shadow:0 12px 24px -14px rgba(3,62,220,.45)}
  #commander .incl li:hover{background:var(--blue-soft)}
  #commander .incl li:hover .ck{transform:scale(1.12) rotate(-8deg)}
  #commander .ship div:hover{transform:translateY(-2px);background:var(--blue-soft)}
  #commander .btn--blue:hover .arr{transform:translateX(5px)}
  #commander .btn--shine:hover::after{left:120%}
  #commander #payBtn:hover{animation:none}
  #stick .btn:hover{background:var(--blue);border-color:transparent;transform:none;box-shadow:none}
  #avis .field figure:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 26px 50px -20px rgba(3,62,220,.45)}
  #avis .field figure:hover img{transform:scale(1.07)}
  #avis .q:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 28px 50px -22px rgba(3,62,220,.4);border-color:var(--blue-line)}
  #avis .q:nth-child(even):hover{transform:translateY(-6px) rotate(.4deg)}
  #avis .q:hover .q__mark{transform:scale(1.25) translateY(-2px)}
  #avis .q:hover .q__src{transform:rotate(-10deg) scale(1.1)}
  #avis .q:hover .av{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--star)}
}

/* ═══════════════ TAILLES D'ÉCRAN ═══════════════ */
@media (max-width:980px){
  #commander .shop__grid{grid-template-columns:minmax(0,1fr)}
  #commander .sum{position:static}
}
@media (max-width:760px){
  #commander.shop{padding-top:48px}
  #commander .blk{padding:20px}
  #commander .qty{flex-wrap:wrap}
  #commander .chips{margin-left:0;width:100%;flex-wrap:nowrap;gap:6px}
  #commander .chipq{flex:1 1 0;min-width:0;padding:0}
  #commander .tiers{grid-template-columns:repeat(3,1fr)}
  #commander .prod{grid-template-columns:84px 1fr}
  #commander .prod__img{width:84px;height:84px}
  #commander .incl li{grid-template-columns:28px 1fr}
  #commander .incl em{grid-column:2;padding-top:0}
  #avis .field{grid-template-columns:1fr}
  #stick.stick:not([hidden]){display:flex}
}

/* très petits téléphones (320 px) : la barre du haut doit tenir */
@media (max-width:360px){
  #nav .nav__logo img{height:20px}
  #nav .btn--sm svg{display:none}
}

/* ═══════════════ MOUVEMENT RÉDUIT : TOUT S'ARRÊTE ═══════════════ */
@media (prefers-reduced-motion:reduce){
  #nav *,#nav *::before,#nav *::after,
  #commander,#commander *,#commander::before,#commander::after,#commander *::before,#commander *::after,
  #avis,#avis *,#avis::before,#avis::after,#avis *::before,#avis *::after,
  #stick,#stick *{transition:none!important;animation:none!important}
  #commander .rv,#avis .rv{opacity:1;translate:none}
}