/* ============================================================
   ZONE 100 — Feuille de style
   Direction : industriel / athlétique, dark, accent fluo.
   ============================================================ */

:root{
  --fluo:#E2FA0F;
  --fluo-dim:#a8d000;
  --black:#000000;
  --ink:#05060a;
  --panel:#0d0f13;
  --panel-2:#14171d;
  --line:#1f242c;
  --line-2:#2b323c;
  /* A11Y-03 / A11Y-05 : contour de composant lisible — 3,41:1 sur #0d0f13,
     au-dessus du seuil de 3:1 exige pour les elements d'interface. */
  --field-bd:#606874;
  --white:#ffffff;
  --gray:#8a9099;
  --gray-2:#7c828c;

  --font-display:'Saira Condensed','Arial Narrow',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;

  --wrap:1240px;
  --pad:clamp(1.1rem,4vw,2.4rem);
  --r:4px;

  --hazard:repeating-linear-gradient(-45deg,var(--fluo) 0 14px,var(--black) 14px 28px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* grain + faint radial glow */
  background-image:
    radial-gradient(1100px 600px at 82% -8%, rgba(226,250,15,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
b{font-weight:700}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--fluo);color:#000;padding:.6rem 1rem;font-weight:700}
.skip-link:focus{left:8px;top:8px}

:focus-visible{outline:3px solid var(--fluo);outline-offset:2px}

/* ---------- Typo helpers ---------- */
.fluo{color:var(--fluo)}
.eyebrow{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--fluo);margin:0 0 1.4rem;display:flex;align-items:center;gap:.7rem
}
.eyebrow i{color:var(--gray-2);font-style:normal}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  --bg:transparent;--fg:var(--white);--bd:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;line-height:1;
  padding:.95rem 1.5rem;border:1.5px solid var(--bd);border-radius:var(--r);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
  -webkit-tap-highlight-color:transparent;text-align:center
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:.6rem 1rem;font-size:.9rem}
.btn--lg{padding:1.15rem 1.6rem;font-size:1.18rem}
.btn--block{width:100%}
.btn--fluo{--bg:var(--fluo);--fg:#0a0c00;--bd:var(--fluo);box-shadow:0 0 0 rgba(226,250,15,0)}
.btn--fluo:hover{box-shadow:0 10px 34px -10px rgba(226,250,15,.55)}
.btn--ghost{--bg:transparent;--fg:var(--white);--bd:var(--line-2)}
.btn--ghost:hover{--bd:var(--fluo);--fg:var(--fluo)}
.btn--add{
  font-family:var(--font-mono);font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;
  font-size:.82rem;padding:.6rem .95rem;--bd:var(--line-2);white-space:nowrap;flex:none
}
.btn--add:hover{--bd:var(--fluo);--fg:var(--fluo)}
.btn--add.is-added{--bg:var(--fluo);--fg:#0a0c00;--bd:var(--fluo)}

/* ============================================================
   TICKER (barre d'annonce)
   ============================================================ */
.ticker{background:var(--fluo);color:#0a0c00;overflow:hidden;border-bottom:2px solid #000;position:relative;z-index:60}
.ticker__track{
  display:flex;align-items:center;gap:1.4rem;white-space:nowrap;width:max-content;
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem 0;animation:ticker 26s linear 2
}
.ticker__track i{opacity:.5}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;justify-content:center;flex-wrap:wrap;white-space:normal;width:100%}}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s,padding .2s}
.site-header.is-stuck{background:rgba(0,0,0,.9);border-bottom-color:var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.site-header.is-stuck .header__inner{padding-block:.6rem}

.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand__mark{height:24px;width:auto;display:block;flex:none}
.brand__word{width:198px;height:19px;display:block;flex:none;transition:filter .3s ease}
@media (max-width:480px){.brand__word{width:166px;height:16px}.header__actions .btn{display:none}}
/* Effet lumineux : le lettrage s'allume dès qu'on survole le logo */
.brand:hover .brand__word,.brand__word:hover{filter:drop-shadow(0 0 5px rgba(226,250,15,.5)) drop-shadow(0 0 14px rgba(226,250,15,.3))}

.nav{display:flex;gap:1.7rem}
.nav a{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);position:relative;padding:.2rem 0;transition:color .15s}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--fluo);transition:width .2s}
.nav a:hover{color:var(--white)}
.nav a:hover::after{width:100%}

.header__actions{display:flex;align-items:center;gap:.8rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--line-2);border-radius:var(--r);cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:var(--white);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;padding:6rem var(--pad) 2rem;flex-direction:column;gap:1.4rem;
    background:var(--ink);border-bottom:2px solid var(--fluo);
    transform:translateY(-102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:5;visibility:hidden
  }
  .nav.is-open{transform:translateY(0);visibility:visible}
  .nav a{font-size:1.1rem}
  .nav-toggle{display:inline-flex}
  @media (prefers-reduced-motion:reduce){.nav{transition:none}}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
.hero__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 0,#000,transparent 72%);
          mask-image:radial-gradient(120% 90% at 70% 0,#000,transparent 72%)}
.hero__watermark{position:absolute;right:-3%;top:44%;transform:translateY(-50%);width:min(64vw,44rem);height:min(36vw,25rem);pointer-events:none;user-select:none;z-index:0;
  filter:drop-shadow(0 0 22px rgba(226,250,15,.15));
  transition:transform .5s ease,filter .5s ease}
.hero__watermark svg{width:100%;height:100%;display:block;overflow:visible}
.hero__watermark path{fill:none;stroke:rgba(226,250,15,.22);stroke-width:4;stroke-linejoin:round;animation:wm-stroke 2.4s ease-in-out infinite}
@keyframes wm-stroke{0%,100%{stroke:rgba(226,250,15,.12)}50%{stroke:rgba(226,250,15,.5)}}
.hero:hover .hero__watermark{transform:translateY(-50%) scale(1.04);filter:drop-shadow(0 0 42px rgba(226,250,15,.4))}
@media (prefers-reduced-motion:reduce){.hero__watermark path{animation:none}}

.hero__inner{position:relative;z-index:2;max-width:1180px;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.hero__photo{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0c0e11;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .5s ease}
.hero__photo:hover img{transform:scale(1.05)}
.hero__photo-tag{position:absolute;bottom:0;left:0;right:0;padding:.8rem 1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(8,8,8,.92),transparent)}
.hero__photo-tag i{color:var(--fluo);font-style:normal;margin:0 .3rem}
@media (max-width:880px){.hero__inner{grid-template-columns:1fr}.hero__photo{display:none}}
@media (prefers-reduced-motion:reduce){.hero__photo img{transition:none}}
.hero__title{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.9rem,9vw,7rem);line-height:.92;letter-spacing:-.005em;margin:0 0 1.6rem;text-wrap:balance}
.hero__lead{font-size:clamp(1.05rem,2.2vw,1.3rem);color:#cfd3d9;max-width:60ch;margin:0 0 2.1rem}
.hero__lead b{color:var(--white)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.1rem}
.hero__reassure{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:0;padding:0}
.hero__reassure li{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);display:flex;align-items:center;gap:.55rem}
.hero__reassure li::before{content:"";width:7px;height:7px;background:var(--fluo);transform:rotate(45deg)}

.hero__stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(2.6rem,6vw,4rem);background:var(--line);border:1px solid var(--line)}
.stat{background:var(--ink);padding:1.5rem 1.4rem}
.stat__num{display:block;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;color:var(--fluo)}
.stat__num i{font-size:.55em;font-style:italic}
.stat__label{display:block;margin-top:.5rem;font-size:.86rem;color:var(--gray);max-width:24ch}
@media (max-width:680px){.hero__stats{grid-template-columns:1fr}}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px);animation:reveal .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * .09s + .05s)}
@keyframes reveal{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}}

/* ============================================================
   TRUST BAND
   ============================================================ */
.trust{border-bottom:1px solid var(--line);background:var(--ink)}
.trust__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line)}
.trust__item{background:var(--ink);padding:1.6rem 1.3rem}
.trust__item svg{width:30px;height:30px;fill:none;stroke:var(--fluo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.9rem}
.trust__item svg .tick{stroke:var(--fluo)}
.trust__item h3{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.15rem;margin:0 0 .35rem;letter-spacing:.01em}
.trust__item p{margin:0;font-size:.86rem;color:var(--gray)}
@media (max-width:1100px){.trust__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.trust__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.trust__grid{grid-template-columns:1fr}}

/* ============================================================
   SECTIONS (générique)
   ============================================================ */
.section{position:relative;padding-block:clamp(3.4rem,8vw,6rem);overflow:hidden}
.section--alt{background:var(--ink);border-block:1px solid var(--line)}
.section__head{max-width:760px;margin-bottom:clamp(2rem,4vw,3rem)}
.section__num{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3em;color:var(--fluo);display:inline-block;margin-bottom:.9rem}
.section__num::before{content:"— ";color:var(--gray-2)}
.section__title{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(2.1rem,5.5vw,4rem);line-height:.94;margin:0 0 1rem;letter-spacing:-.005em;text-wrap:balance}
.section__sub{font-size:1.02rem;color:var(--gray);max-width:62ch;margin:0}

/* ============================================================
   PACKS PAR ZONE
   ============================================================ */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.pack{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.5rem;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}
.pack:hover{transform:translateY(-4px);border-color:var(--line-2)}
.pack--feature{border-color:var(--fluo);background:linear-gradient(180deg,rgba(226,250,15,.06),var(--panel) 40%);box-shadow:0 24px 60px -34px rgba(226,250,15,.4)}
.pack__badge{position:absolute;top:-11px;left:1.5rem;background:var(--fluo);color:#0a0c00;font-family:var(--font-mono);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.32rem .7rem;border-radius:2px}
.pack__name{font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1;margin:0 0 .3rem}
.pack__tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fluo);margin:0}
.pack--feature .pack__top{margin-top:.4rem}
.pack__list{list-style:none;margin:1.4rem 0;padding:1.2rem 0;border-block:1px solid var(--line);display:grid;gap:.7rem;flex:1}
.pack__list li{display:flex;align-items:baseline;gap:.7rem;font-size:.98rem;color:#d7dbe0}
.pack__list b{font-family:var(--font-mono);color:var(--fluo);font-size:.9rem;min-width:1.9rem}
@media (max-width:900px){.packs{grid-template-columns:1fr}.pack--feature{order:-1}}

/* ============================================================
   CATALOGUE
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem}
.chip{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);background:var(--panel);border:1px solid var(--field-bd);border-radius:100px;padding:.5rem .95rem;cursor:pointer;transition:.15s}
.chip:hover{color:var(--white);border-color:var(--fluo)}
.chip.is-active{background:var(--fluo);color:#0a0c00;border-color:var(--fluo);font-weight:700}

.catalog{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.prod{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--line);transition:background .15s}
.prod:hover{background:linear-gradient(90deg,rgba(226,250,15,.04),transparent 60%)}
.prod.is-hidden{display:none}
.prod__photo{width:62px;height:62px;border-radius:9px;background:#f4f4f4;display:grid;place-items:center;overflow:hidden}
.prod__photo img{width:100%;height:100%;object-fit:contain;display:block}
.prod__photo--ph{background:var(--panel-2);border:1px solid var(--line-2)}
.prod__photo--ph svg{width:58%;height:58%;color:rgba(226,250,15,.55)}
.prod__id{min-width:0}
.prod__name{display:block;font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.32rem;line-height:1.05}
.prod__name em{font-style:italic;font-size:.62em;color:var(--fluo);letter-spacing:.04em}
.prod__spec{display:block;font-family:var(--font-mono);font-size:.75rem;color:var(--gray);margin-top:.3rem;line-height:1.5}
.prod__price{text-align:right;white-space:nowrap;line-height:1.1}
.prod__price i{display:block;font-family:var(--font-mono);font-style:normal;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2)}
.prod__price b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:1.5rem;color:var(--white)}
.prod__price small{font-size:.7rem;color:var(--gray);margin-left:.15rem}
.catalog__note{font-family:var(--font-mono);font-size:.76rem;color:var(--gray);margin-top:1.6rem;line-height:1.6;max-width:70ch}

@media (max-width:720px){
  .prod{grid-template-columns:auto 1fr auto;grid-template-areas:"photo id price" "photo add add";row-gap:1rem;column-gap:1rem}
  .prod__photo{grid-area:photo;align-self:center}
  .prod__id{grid-area:id}.prod__price{grid-area:price}
  .prod .btn--add{grid-area:add;width:100%;justify-content:center}
}

/* ============================================================
   CLÉ EN MAIN
   ============================================================ */
.keys{background:
  linear-gradient(180deg,rgba(226,250,15,.05),transparent 30%),var(--black);position:relative}
.keys .hero__grid{opacity:.25}
.keys .wrap{position:relative;z-index:2}
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.kit{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.6rem;display:flex;flex-direction:column;transition:transform .18s,border-color .18s}
.kit:hover{transform:translateY(-4px);border-color:var(--line-2)}
.kit--feature{border-color:var(--fluo);background:linear-gradient(180deg,rgba(226,250,15,.08),var(--panel) 45%);box-shadow:0 24px 60px -34px rgba(226,250,15,.45)}
.kit__badge{position:absolute;top:-11px;left:1.6rem;background:var(--fluo);color:#0a0c00;font-family:var(--font-mono);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.32rem .7rem;border-radius:2px}
.kit__code{font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:2.4rem;line-height:1;color:var(--white)}
.kit--feature .kit__code{color:var(--fluo)}
.kit__for{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin:.35rem 0 1.2rem}
.kit__price{margin:0 0 1.2rem;line-height:1.05}
.kit__price i{display:block;font-family:var(--font-mono);font-style:normal;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-2)}
.kit__price b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:2.2rem;color:var(--white)}
.kit__price small{font-size:.8rem;color:var(--gray);margin-left:.2rem}
.kit__list{list-style:none;margin:0 0 1.5rem;padding:1.2rem 0 0;border-top:1px solid var(--line);display:grid;gap:.6rem;flex:1}
.kit__list li{font-size:.92rem;color:#d7dbe0;padding-left:1.4rem;position:relative}
.kit__list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--fluo);transform:rotate(45deg)}
@media (max-width:900px){.kits{grid-template-columns:1fr}.kit--feature{order:-1}}

/* ============================================================
   STEPS
   ============================================================ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--black);padding:1.8rem 1.4rem;position:relative}
.section--alt .step{background:var(--ink)}
.step__n{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;color:var(--fluo)}
.step h3{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.3rem;margin:.7rem 0 .5rem;line-height:1}
.step p{margin:0;font-size:.9rem;color:var(--gray)}
.step::after{content:"";position:absolute;top:2.2rem;right:-1px;width:14px;height:2px;background:var(--fluo);opacity:.5}
.step:last-child::after{display:none}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step::after{display:none}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* ============================================================
   POURQUOI
   ============================================================ */
.why{background:var(--black)}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.why__card{border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.6rem;background:var(--panel);position:relative;overflow:hidden}
.why__card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--hazard);opacity:.9}
.why__k{font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--fluo);display:block;margin:.6rem 0 .8rem;line-height:1}
.why__card p{margin:0;color:#cfd3d9;font-size:.98rem}
@media (max-width:900px){.why__grid{grid-template-columns:1fr}}

/* ============================================================
   DEVIS (récap + formulaire)
   ============================================================ */
.devis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.6rem;align-items:start}
@media (max-width:940px){.devis{grid-template-columns:1fr}}

.recap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:sticky;top:88px}
@media (max-width:940px){.recap{position:static}}
.recap__title{font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.5rem;margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.recap__count{font-family:var(--font-mono);font-style:normal;font-size:.8rem;background:var(--fluo);color:#0a0c00;min-width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;padding:0 .4rem}
.recap__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.recap__row{display:grid;grid-template-columns:1fr auto;gap:.5rem .8rem;align-items:center;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.recap__name{font-weight:600;font-size:.92rem}
/* Sans JavaScript, ces commandes sont totalement inertes : mieux vaut ne pas
   les montrer que de laisser le visiteur cliquer dans le vide. Le marqueur .js
   est posé par un script inline en tête de page. */
html:not(.js) .js-add,
html:not(.js) .js-add-pack,
html:not(.js) .js-add-kit,
html:not(.js) .filters{display:none !important}
.noscript-note{background:rgba(226,250,15,.07);border-left:3px solid var(--fluo);padding:.9rem 1.1rem;margin:0 0 1.4rem;font-size:.9rem;line-height:1.55;color:var(--gray)}
.noscript-note a{color:var(--fluo);text-decoration:underline}

/* Pack ajouté : ligne de groupe, au-dessus des machines qu'il contient */
.recap__row--pack{border-left:3px solid var(--fluo);padding-left:.8rem;margin-bottom:.7rem}
.recap__row--pack .recap__name{text-transform:uppercase;letter-spacing:.04em}
/* Formule clé en main + machines : le total additionne les deux, on le signale */
.recap__warn{display:block;grid-template-columns:none;border-bottom:none;font-size:.82rem;line-height:1.5;color:var(--gray);background:rgba(226,250,15,.07);border-left:3px solid var(--fluo);padding:.7rem .9rem;margin-top:.8rem}
.recap__meta{font-family:var(--font-mono);font-size:.72rem;color:var(--gray)}
.recap__line{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:1.1rem;white-space:nowrap}
.recap__qty{display:inline-flex;align-items:center;gap:.5rem;margin-top:.35rem}
.recap__qty button{width:30px;height:30px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--white);border-radius:3px;cursor:pointer;font-size:1.05rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.recap__qty button:hover{border-color:var(--fluo);color:var(--fluo)}
.recap__qty span{font-family:var(--font-mono);font-size:.82rem;min-width:3.4rem;text-align:center}
/* Saisie directe de la quantité (turf au m², disques au kg) */
.recap__qty input.recap__qtyinput{width:4.8rem;padding:.34rem .3rem;border:1px solid var(--line-2);background:var(--panel-2);color:var(--white);border-radius:3px;font-family:var(--font-mono);font-size:.82rem;text-align:center}
.recap__qty input.recap__qtyinput:focus-visible{outline:2px solid var(--fluo);outline-offset:1px}
/* plus spécifique que « .recap__qty span » ci-dessus, qui imposerait 3.4rem */
.recap__qty span.recap__qtyunit{min-width:0;text-align:left;color:var(--gray)}
.recap__rm{background:none;border:none;color:var(--gray-2);cursor:pointer;font-family:var(--font-mono);font-size:.75rem;text-decoration:underline;padding:.35rem 0;margin-top:.15rem;justify-self:start}
.recap__empty a{color:var(--fluo);text-decoration:underline}
.recap__rm:hover{color:var(--fluo)}
.recap__empty{color:var(--gray);font-size:.9rem;margin:.4rem 0 0}
/* État vide constructif : la demande part très bien sans rien sélectionner, et
   les raccourcis qui existent déjà ailleurs (packs, formules) sont proposés SUR
   PLACE plutôt que par un lien qui fait quitter la page de conversion. */
.recap__empty-lead{color:var(--white);font-size:.95rem;line-height:1.55;margin:0 0 1rem}
.recap__empty-lead b{color:var(--fluo)}
.recap__empty-gets{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.45rem}
.recap__empty-gets li{position:relative;padding-left:1.1rem;font-family:var(--font-mono);font-size:.72rem;line-height:1.5;color:var(--gray)}
.recap__empty-gets li::before{content:"";position:absolute;left:0;top:.42em;width:.45rem;height:.45rem;background:var(--fluo)}
.recap__empty-alt{margin:1.1rem 0 0;font-size:.82rem;line-height:1.5}
.recap__shortcuts{border-top:1px solid var(--line);padding-top:1.1rem}
/* Sans JavaScript ces boutons sont inertes, comme .js-add-pack / .js-add-kit :
   on masque le bloc entier pour ne pas laisser un intertitre sans commandes.
   Écrite APRÈS la règle de base : les garde-fous jsdom n'appliquent la cascade
   qu'en ordre de déclaration, ni spécificité ni !important. */
html:not(.js) .recap__shortcuts{display:none !important}
.recap__shortcuts-h{margin:0 0 .8rem;font-size:.88rem;line-height:1.5;color:var(--white)}
.recap__shortcuts-k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-2);margin:.9rem 0 .45rem}
.recap__chips{display:grid;gap:.45rem}
.recap__chip{display:grid;gap:.15rem;justify-items:start;text-align:left;width:100%;padding:.6rem .75rem;background:var(--panel-2);color:var(--white);border:1px solid var(--field-bd);border-radius:3px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.recap__chip b{font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:1rem;line-height:1.1}
.recap__chip i{font-family:var(--font-mono);font-style:normal;font-size:.68rem;line-height:1.4;color:var(--gray)}
.recap__chip:hover{border-color:var(--fluo);color:var(--fluo)}
.recap__chip:hover i{color:var(--fluo)}
.recap__chip:focus-visible{outline:2px solid var(--fluo);outline-offset:2px}
.recap__shortcuts-note{font-family:var(--font-mono);font-size:.66rem;line-height:1.5;color:var(--gray-2);margin:.9rem 0 0}
.recap__foot{margin-top:1.3rem;padding-top:1.2rem;border-top:2px solid var(--line-2)}
.recap__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.recap__total span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.recap__total b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:2rem;color:var(--fluo)}
.recap__disclaimer{font-family:var(--font-mono);font-size:.68rem;color:var(--gray-2);margin:.5rem 0 0}

/* Formulaire */
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.6rem;display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.field label i{color:var(--gray-2);font-style:normal;text-transform:none;letter-spacing:0}
.field .req{color:var(--fluo)}
.field input,.field select,.field textarea{
  width:100%;background:var(--black);border:1px solid var(--field-bd);border-radius:var(--r);
  color:var(--white);font-family:var(--font-body);font-size:.98rem;padding:.8rem .9rem;transition:border-color .15s,box-shadow .15s
}
.field textarea{resize:vertical;min-height:96px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23E2FA0F' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.2rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--fluo);box-shadow:0 0 0 3px rgba(226,250,15,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--gray-2)}
.field__err{display:none;color:#ff6b57;font-size:.78rem;margin:0;font-family:var(--font-mono)}
.field.is-invalid input,.field.is-invalid select{border-color:#ff6b57}
.field.is-invalid .field__err{display:block}
.form__hint{font-size:.8rem;color:var(--gray);margin:0;line-height:1.6}
.form__hint a{color:var(--fluo);text-decoration:underline}

/* ============================================================
   FAQ
   ============================================================ */
.faq__list{border-top:1px solid var(--line);max-width:900px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:1.3rem 3rem 1.3rem 0;position:relative;font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1.25rem;line-height:1.15;transition:color .15s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--fluo)}
.qa summary::after{content:"+";position:absolute;right:0;top:1.05rem;font-family:var(--font-mono);font-style:normal;font-size:1.7rem;color:var(--fluo);transition:transform .2s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{margin:0 0 1.4rem;color:var(--gray);max-width:70ch;font-size:.98rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);border-top:2px solid var(--fluo)}
.footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:2rem;padding-block:3.2rem 2.4rem}
.footer__brand .brand{margin-bottom:1rem}
.footer__base{color:var(--gray);font-size:.86rem;max-width:34ch;margin:0}
.footer__col{display:flex;flex-direction:column;gap:.6rem}
.footer__col h2{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);margin:0 0 .3rem}
.footer__col span{color:var(--gray);font-size:.9rem}
/* A11Y-06 : sans soulignement, rien ne distinguait un lien d'un texte simple —
   la couleur seule ne suffit pas (WCAG 1.4.1). */
.footer__col a{color:var(--gray);font-size:.9rem;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(138,144,153,.45);transition:color .15s,text-decoration-color .15s}
.footer__col a:hover{text-decoration-color:var(--fluo)}
.footer__col a:hover{color:var(--fluo)}
.footer__col i{font-style:normal;color:var(--gray-2);font-size:.78rem}
.footer__cta{margin-top:.5rem;align-self:flex-start}
.footer__disclaimer{font-size:.76rem;color:var(--gray-2);line-height:1.55;margin:.4rem 0 0}
.footer__copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;padding-block:1.3rem;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;color:var(--gray-2);letter-spacing:.04em}
@media (max-width:900px){.footer__inner{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__inner{grid-template-columns:1fr}}

/* ============================================================
   BOUTON FLOTTANT + TOAST
   ============================================================ */
.fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:calc(1.2rem + env(safe-area-inset-bottom));z-index:70;
  display:inline-flex;align-items:center;gap:.6rem;background:var(--fluo);color:#0a0c00;border:none;border-radius:100px;
  padding:.9rem 1.2rem;cursor:pointer;font-family:var(--font-display);font-style:italic;font-weight:800;text-transform:uppercase;font-size:1.05rem;
  box-shadow:0 14px 40px -12px rgba(226,250,15,.6);animation:fabIn .3s cubic-bezier(.2,.7,.2,1)}
.fab:hover{transform:translateY(-2px)}
.fab__icon{height:15px;width:auto;flex:none;display:block}
.fab__count{background:#0a0c00;color:var(--fluo);font-family:var(--font-mono);font-style:normal;font-size:.78rem;min-width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:100px;padding:0 .35rem}
@keyframes fabIn{from{transform:translateY(20px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.fab.bump{animation:bump .3s ease}
@keyframes bump{0%,100%{transform:none}40%{transform:scale(1.08)}}

.toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(12px);
  z-index:80;background:var(--panel-2);border:1px solid var(--fluo);color:var(--white);
  padding:.75rem 1.2rem;border-radius:var(--r);font-size:.88rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:var(--fluo)}

@media (prefers-reduced-motion:reduce){
  .fab,.fab.bump,.toast{animation:none;transition:opacity .2s}
}

/* ============================================================
   L'ATTRIBUT hidden DOIT MASQUER — POUR DE BON
   ============================================================
   Mesuré en prod le 22/08 : la pastille « Ma demande » restait affichée
   panier vide. app.js posait bien $fab.hidden = true, mais la règle .fab
   ci-dessus (display:inline-flex) l'emportait sur la règle navigateur
   [hidden]{display:none} : l'attribut ne masquait rien. Le display mesuré
   était « flex » et non « inline-flex » parce que position:fixed blockifie.
   Règle GLOBALE, et pas .fab[hidden] : le piège se rejoue à chaque nouveau
   composant — img,svg{max-width:100%;display:block} en haut de ce fichier
   ferait déjà fuiter n'importe quelle image portée par hidden.
   Placée en FIN de feuille : !important la fait gagner où qu'elle soit dans
   un vrai navigateur, mais jsdom (les garde-fous de tools/tests) n'applique
   la cascade qu'en ordre de déclaration — ici elle passe donc après .fab,
   ce qui rend le garde-fou capable de voir la régression. */
[hidden]{display:none !important}