/* ============================================================
   ProxyShop.shop — feuille de style unique
   ============================================================ */

:root{
  --ink: #0B0B10;
  --ink-2: #12121A;
  --ink-3: #1A1A25;
  --line: rgba(245,241,232,.12);
  --ivory: #F5F1E8;
  --muted: #A9A4B8;
  --holo: linear-gradient(120deg,#5CE1E6 0%,#B36BFF 38%,#FF6FB5 68%,#F7C948 100%);
  --holo-soft: linear-gradient(120deg,rgba(92,225,230,.16),rgba(179,107,255,.16),rgba(255,111,181,.16),rgba(247,201,72,.16));
  --w: #EFE8D4;
  --u: #7FB6E8;
  --b: #8A7BC8;
  --r: #E8674F;
  --g: #6FB98A;
  --c: #BFB9C9;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cinzel", "Cormorant Garamond", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(179,107,255,.16), transparent 60%),
    radial-gradient(800px 520px at 8% 4%, rgba(92,225,230,.12), transparent 60%),
    var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- langue ---------- */
html[data-lang="fr"] [lang="en"],
html:not([data-lang]) [lang="en"]{ display:none !important; }
html[data-lang="en"] [lang="fr"]{ display:none !important; }

/* ---------- typographie ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:.01em; }
h1{ font-size:clamp(2.2rem,5.2vw,3.9rem); }
h2{ font-size:clamp(1.65rem,3.4vw,2.5rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1.05em; color:var(--muted); }
a{ color:inherit; text-decoration:none; }
strong{ color:var(--ivory); font-weight:600; }
.wrap{ width:min(1180px,92vw); margin-inline:auto; }
.section{ padding:clamp(56px,8vw,104px) 0; }
.section-tight{ padding:clamp(40px,5vw,64px) 0; }
.center{ text-align:center; }
.lead{ font-size:1.1rem; max-width:65ch; }
.center .lead{ margin-inline:auto; }

.grad{
  background:var(--holo);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.eyebrow{
  display:inline-block; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
  padding-left:2px;
}
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.82em 1.5em; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--holo); color:#0B0B10; box-shadow:0 10px 30px rgba(179,107,255,.28);
}
.btn-primary:hover{ box-shadow:0 14px 38px rgba(255,111,181,.36); }
.btn-ghost{
  border-color:var(--line); color:var(--ivory); background:rgba(245,241,232,.04);
}
.btn-ghost:hover{ border-color:rgba(245,241,232,.34); background:rgba(245,241,232,.09); }
.btn-sm{ padding:.6em 1.1em; font-size:.86rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(11,11,16,.78);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:22px;
  padding:14px 0;
}
.brand{
  font-family:var(--serif); font-size:1.28rem; letter-spacing:.04em; color:var(--ivory);
  white-space:nowrap;
}
.brand span{
  background:var(--holo); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav a{
  padding:.5em .78em; border-radius:10px; font-size:.9rem; color:var(--muted);
  transition:color .16s, background .16s;
}
.nav a:hover{ color:var(--ivory); background:rgba(245,241,232,.06); }
.nav a.is-active{ color:var(--ivory); background:rgba(245,241,232,.09); }

.header-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.lang-switch{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
}
.lang-switch button{
  background:none; border:0; color:var(--muted); font-family:var(--sans);
  font-size:.78rem; font-weight:600; letter-spacing:.08em; padding:.44em .78em; cursor:pointer;
  transition:color .16s, background .16s;
}
.lang-switch button.is-active{ background:var(--ivory); color:var(--ink); }
.burger{
  display:none; background:none; border:1px solid var(--line); color:var(--ivory);
  border-radius:10px; font-size:1.15rem; padding:.3em .6em; cursor:pointer;
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(52px,7vw,96px) 0 clamp(48px,6vw,80px); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;
}
.hero h1{ margin-bottom:.35em; }
.hero p{ font-size:1.08rem; max-width:52ch; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 34px; }

.trust{
  display:flex; flex-wrap:wrap; gap:10px 26px; font-size:.85rem; color:var(--muted);
  padding-top:22px; border-top:1px solid var(--line);
}
.trust span{ display:inline-flex; align-items:center; gap:.5em; }
.trust span::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--holo);
  flex:none;
}

/* ---------- éventail de cartes ---------- */
.fan{ position:relative; height:clamp(300px,42vw,440px); }
.fan-card{
  position:absolute; top:50%; left:50%;
  width:clamp(140px,17vw,196px); aspect-ratio:63/88;
  border-radius:14px; padding:9px;
  background:linear-gradient(160deg,#20202C,#0F0F16);
  border:1px solid rgba(245,241,232,.16);
  box-shadow:var(--shadow);
  transform-origin:50% 92%;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s;
  overflow:hidden;
}
.fan-card::after{
  content:""; position:absolute; inset:0;
  background:var(--holo); opacity:.16; mix-blend-mode:overlay;
  pointer-events:none;
}
.fan-card .art{
  height:56%; border-radius:9px;
  background:var(--holo-soft), linear-gradient(150deg,#2A2440,#141422);
  border:1px solid rgba(245,241,232,.1);
  position:relative; overflow:hidden;
}
.fan-card .art::before{
  content:""; position:absolute; inset:-40% -60%;
  background:conic-gradient(from 0deg,#5CE1E6,#B36BFF,#FF6FB5,#F7C948,#5CE1E6);
  opacity:.22; animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.fan-card .txt{
  padding:9px 3px 0; font-family:var(--serif); font-size:.72rem; letter-spacing:.04em; color:var(--ivory);
}
.fan-card .bar{ height:5px; border-radius:3px; background:rgba(245,241,232,.16); margin-top:6px; }
.fan-card .bar.s{ width:62%; }
.fan-card:nth-child(1){ transform:translate(-50%,-50%) rotate(-19deg) translateX(-108px); filter:brightness(.82); }
.fan-card:nth-child(2){ transform:translate(-50%,-50%) rotate(-9deg) translateX(-56px); filter:brightness(.92); }
.fan-card:nth-child(3){ transform:translate(-50%,-50%) rotate(0deg) translateY(-10px); z-index:3; }
.fan-card:nth-child(4){ transform:translate(-50%,-50%) rotate(9deg) translateX(56px); filter:brightness(.92); }
.fan-card:nth-child(5){ transform:translate(-50%,-50%) rotate(19deg) translateX(108px); filter:brightness(.82); }
.fan:hover .fan-card:nth-child(1){ transform:translate(-50%,-50%) rotate(-25deg) translateX(-132px); }
.fan:hover .fan-card:nth-child(5){ transform:translate(-50%,-50%) rotate(25deg) translateX(132px); }
.fan:hover .fan-card:nth-child(3){ transform:translate(-50%,-50%) rotate(0deg) translateY(-22px); }

/* ---------- grilles & cartes ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.panel{
  background:linear-gradient(180deg,rgba(245,241,232,.055),rgba(245,241,232,.018));
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  transition:border-color .2s, transform .2s;
}
.panel:hover{ border-color:rgba(245,241,232,.26); transform:translateY(-3px); }
.panel h3{ margin-bottom:.35em; }
.panel p{ margin:0; font-size:.94rem; }
.icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--holo-soft); border:1px solid var(--line); margin-bottom:16px;
  font-size:1.05rem;
}

/* ---------- étapes ---------- */
.steps{ counter-reset:s; display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.step{ position:relative; padding-top:16px; border-top:2px solid var(--line); }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:var(--serif); font-size:.9rem; letter-spacing:.14em;
  color:var(--muted); display:block; margin-bottom:10px;
}
.step h3{ font-size:1.08rem; }
.step p{ font-size:.93rem; margin:0; }

/* ---------- carte produit ---------- */
.card-grid{ display:grid; gap:22px; grid-template-columns:repeat(4,1fr); }

.mtg{ perspective:1200px; }
.mtg-inner{
  position:relative; aspect-ratio:63/88; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.mtg:hover .mtg-inner{ transform:rotateY(180deg); }
.mtg-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:14px; padding:10px; overflow:hidden;
  background:linear-gradient(165deg,#242432,#101018);
  border:1px solid rgba(245,241,232,.16);
  box-shadow:0 14px 36px rgba(0,0,0,.42);
  display:flex; flex-direction:column;
}
.mtg-back{
  transform:rotateY(180deg);
  background:linear-gradient(165deg,#1A1A28,#0C0C14);
  border-color:rgba(245,241,232,.24);
}
.mtg-art{
  height:47%; border-radius:9px; position:relative; overflow:hidden;
  border:1px solid rgba(245,241,232,.1);
  background:linear-gradient(150deg,#2A2440,#12121E);
}
.mtg-art::before{
  content:""; position:absolute; inset:-45% -65%;
  background:conic-gradient(from 90deg,#5CE1E6,#B36BFF,#FF6FB5,#F7C948,#5CE1E6);
  opacity:.26; animation:spin 11s linear infinite;
}
.mtg[data-color="w"] .mtg-art::before{ background:conic-gradient(from 90deg,#EFE8D4,#C9BB92,#EFE8D4); }
.mtg[data-color="u"] .mtg-art::before{ background:conic-gradient(from 90deg,#7FB6E8,#3E6FA8,#7FB6E8); }
.mtg[data-color="b"] .mtg-art::before{ background:conic-gradient(from 90deg,#8A7BC8,#3D3050,#8A7BC8); }
.mtg[data-color="r"] .mtg-art::before{ background:conic-gradient(from 90deg,#E8674F,#8C2E22,#E8674F); }
.mtg[data-color="g"] .mtg-art::before{ background:conic-gradient(from 90deg,#6FB98A,#2E5C3E,#6FB98A); }
.mtg[data-color="c"] .mtg-art::before{ background:conic-gradient(from 90deg,#BFB9C9,#6A6675,#BFB9C9); }

.mtg-name{
  font-family:var(--serif); font-size:.8rem; letter-spacing:.02em; color:var(--ivory);
  padding:9px 2px 4px; display:flex; justify-content:space-between; gap:6px; align-items:baseline;
}
.mtg-type{ font-size:.6rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; padding:0 2px; }
.mtg-lines{ margin-top:auto; padding:8px 2px 0; display:grid; gap:4px; }
.mtg-lines i{ display:block; height:4px; border-radius:2px; background:rgba(245,241,232,.14); }
.mtg-lines i:nth-child(2){ width:88%; }
.mtg-lines i:nth-child(3){ width:72%; }
.mtg-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 2px 2px; margin-top:8px; border-top:1px solid rgba(245,241,232,.1);
  font-size:.72rem; color:var(--muted);
}
.mtg-price{ color:var(--ivory); font-weight:700; font-size:.86rem; }

.badge{
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:.32em .6em; border-radius:999px; background:var(--holo); color:#0B0B10;
}
.mtg-back .mtg-inner-back{ display:flex; flex-direction:column; height:100%; }
.mtg-back h4{ font-size:.82rem; margin-bottom:.5em; }
.mtg-back p{ font-size:.72rem; margin:0 0 .6em; line-height:1.45; }
.mtg-back .spec{ font-size:.68rem; color:var(--muted); display:flex; justify-content:space-between; border-bottom:1px solid rgba(245,241,232,.1); padding:.32em 0; }
.mtg-back .btn{ margin-top:auto; width:100%; }

/* ---------- filtres ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:30px; }
.chip{
  background:rgba(245,241,232,.05); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:.44em .95em; font-size:.83rem; font-family:var(--sans);
  cursor:pointer; transition:all .16s;
}
.chip:hover{ color:var(--ivory); border-color:rgba(245,241,232,.3); }
.chip.is-active{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); font-weight:600; }
.search{
  margin-left:auto; background:rgba(245,241,232,.05); border:1px solid var(--line);
  border-radius:999px; padding:.55em 1.1em; color:var(--ivory); font-family:var(--sans);
  font-size:.86rem; min-width:220px;
}
.search::placeholder{ color:var(--muted); }
.search:focus{ outline:none; border-color:rgba(245,241,232,.4); }
.empty{ color:var(--muted); padding:40px 0; text-align:center; grid-column:1/-1; }

/* ---------- tableau ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; }
th,td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line); }
th{ font-family:var(--serif); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:rgba(245,241,232,.035); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover{ background:rgba(245,241,232,.03); }
td strong{ font-size:1rem; }
.price-tag{ font-family:var(--serif); color:var(--ivory); font-size:1.02rem; }

/* ---------- accordéon ---------- */
.acc{ display:grid; gap:10px; }
.acc-item{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:rgba(245,241,232,.025); }
.acc-q{
  width:100%; text-align:left; background:none; border:0; color:var(--ivory);
  font-family:var(--sans); font-size:.98rem; font-weight:500; padding:18px 52px 18px 20px;
  cursor:pointer; position:relative;
}
.acc-q::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; color:var(--muted); transition:transform .25s;
}
.acc-item.open .acc-q::after{ content:"–"; }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.acc-a p{ padding:0 20px 20px; margin:0; font-size:.93rem; }
.acc-item.open .acc-a{ max-height:520px; }

/* ---------- formulaire ---------- */
.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  background:rgba(245,241,232,.05); border:1px solid var(--line); border-radius:10px;
  padding:.82em 1em; color:var(--ivory); font-family:var(--sans); font-size:.95rem;
  transition:border-color .16s, background .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:rgba(245,241,232,.44); background:rgba(245,241,232,.08);
}
.field textarea{ resize:vertical; min-height:130px; }
.field select option{ background:var(--ink-2); color:var(--ivory); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.check input{ margin-top:4px; accent-color:#B36BFF; width:16px; height:16px; flex:none; }
.form-note{ font-size:.8rem; color:var(--muted); }
.form-ok{
  display:none; padding:16px 18px; border-radius:12px; font-size:.92rem;
  background:rgba(111,185,138,.14); border:1px solid rgba(111,185,138,.42); color:#CBEFD8;
}
.form-ok.show{ display:block; }
.err{ color:#FF8A75; font-size:.8rem; display:none; }
.err.show{ display:block; }

/* ---------- avis ---------- */
.quote{ background:rgba(245,241,232,.04); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.quote p{ font-size:.95rem; color:var(--ivory); font-style:italic; }
.quote .who{ display:flex; align-items:center; gap:11px; margin-top:18px; font-size:.82rem; color:var(--muted); font-style:normal; }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--holo); opacity:.85; flex:none; }

/* ---------- CTA final ---------- */
.cta-band{
  border:1px solid var(--line); border-radius:24px; padding:clamp(34px,5vw,62px);
  background:var(--holo-soft), rgba(18,18,26,.75);
  text-align:center;
}
.cta-band h2{ margin-bottom:.4em; }
.cta-band p{ max-width:56ch; margin-inline:auto; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:56px 0 34px; margin-top:20px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:34px; }
.footer-grid h4{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:var(--sans); font-weight:600; margin-bottom:14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer-grid a{ font-size:.9rem; color:var(--muted); }
.footer-grid a:hover{ color:var(--ivory); }
.footer-about p{ font-size:.88rem; max-width:34ch; }
.legal-note{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted); line-height:1.7;
}
.legal-note strong{ color:var(--muted); }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; font-size:.78rem; color:var(--muted); }

/* ---------- bandeau légal haut de page ---------- */
.disclaimer{
  background:rgba(247,201,72,.1); border-bottom:1px solid rgba(247,201,72,.24);
  font-size:.78rem; color:#F0DFB4; text-align:center; padding:9px 16px;
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .card-grid{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .fan{ height:300px; order:-1; margin-bottom:10px; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:rgba(11,11,16,.98); border-bottom:1px solid var(--line);
    padding:12px 6vw 18px; margin:0; gap:2px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.7em .5em; }
  .burger{ display:block; }
  .header-right{ gap:8px; }
  .header-inner{ position:relative; }
  .steps{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .row-2{ grid-template-columns:1fr; }
  .search{ margin-left:0; width:100%; }
}
@media (max-width:520px){
  .card-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .grid-4{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .fan-card{ width:120px; }
  .btn{ width:100%; }
  .hero-actions .btn{ width:auto; flex:1; }
}


/* ligne mise en avant dans un tableau de tarifs */
tbody tr.row-hl{
  background:rgba(179,107,255,.09);
}
tbody tr.row-hl td{
  border-top:1px solid rgba(179,107,255,.28);
  border-bottom:1px solid rgba(179,107,255,.28);
}
tbody tr.row-hl td:first-child{ border-left:2px solid #B36BFF; }