/* ============================================================
   landing.css — pages « Réparation … à Bruxelles »
   Feuille commune aux 5 pages d'atterrissage (2026-10-18).
   Même identité que la page d'accueil : Inter, bleu #0056d2,
   cyan, vert WhatsApp, et mode sombre automatique.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --blue: #0056d2; --blue-dk: #003a9b; --cyan: #00c2e0; --wa: #25d366;
  --bg: #ffffff; --bg-alt: #f4f6fb; --surface: #ffffff; --ink: #0d0f1a; --text: #3d4663;
  --muted: #6a7390; --line: #e4e9f2; --chip: #e9f1fd;
  --hero1: #003791; --hero2: #006fcd;
  --amber: #b97f10; --amber-bd: #ecd9ab; --amber-bg: #fdf6e4;
  --grey: var(--bg-alt); --dark: var(--ink);
  --radius: 14px; --shadow: 0 6px 28px rgba(13, 15, 26, .07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --bg-alt: #121823; --surface: #161d29; --ink: #e9edf5; --text: #b9c2d8;
    --muted: #8691ab; --line: #263047; --chip: #16243d;
    --hero1: #002a6e; --hero2: #004f96;
    --amber: #e3aa3c; --amber-bd: #5d4a1d; --amber-bg: #2a2212;
    --shadow: 0 6px 28px rgba(0, 0, 0, .35);
  }
}
body { font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
.container { max-width: 1140px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
h1, h2, h3, h4 { line-height: 1.22; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 800; margin-bottom: 14px; color: var(--ink); }
h3 { font-size: 1.2rem; font-weight: 700; margin: 24px 0 12px; color: var(--ink); }
p { margin-bottom: 14px; color: var(--text); max-width: 76ch; }
section.content { padding: clamp(52px, 7vw, 80px) 0; }
section.alt { background: var(--bg-alt); }

/* ── Thème Xbox : noir, blanc, vert (#107c10) ── */
.theme-xbox { --blue: #107c10; --blue-dk: #0b5d0b; --cyan: #5ebc3f; --chip: #e8f3e4; --hero1: #0b0d0b; --hero2: #107c10; }
.theme-xbox .hero::after { background: radial-gradient(circle, rgba(94, 188, 63, .30), transparent 70%); }
.theme-xbox .price-tier.is-express { background: linear-gradient(135deg, rgba(94, 188, 63, .15), rgba(16, 124, 16, .10)); }
.theme-xbox .badge-express { background: linear-gradient(135deg, #5ebc3f, #107c10); }
@media (prefers-color-scheme: dark) {
  .theme-xbox { --blue: #4caf35; --blue-dk: #3a8c28; --cyan: #7ed957; --chip: #142712; --hero1: #050705; --hero2: #0b5d0b; }
}

/* ── Thème Nintendo : rouge (#e60012), blanc, noir ── */
.theme-nintendo { --blue: #c7000f; --blue-dk: #9c000c; --cyan: #ff4554; --chip: #fdeaec; --hero1: #8f000b; --hero2: #e60012; }
.theme-nintendo .hero::after { background: radial-gradient(circle, rgba(255, 69, 84, .32), transparent 70%); }
.theme-nintendo .price-tier.is-express { background: linear-gradient(135deg, rgba(255, 69, 84, .13), rgba(199, 0, 15, .09)); }
.theme-nintendo .badge-express { background: linear-gradient(135deg, #ff4554, #c7000f); }
@media (prefers-color-scheme: dark) {
  .theme-nintendo { --blue: #ff5a67; --blue-dk: #e03340; --cyan: #ff8a94; --chip: #32141a; --hero1: #4a0108; --hero2: #a30010; }
}

/* ── Décor pixel-art rétro (thème Nintendo) ── */
.pixel-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pixel-field svg { position: absolute; shape-rendering: crispEdges; opacity: .32; animation: pxFloat 7s ease-in-out infinite; }
.pixel-field .px1 { top: 12%; left: 5%; width: 42px; animation-delay: 0s; }
.pixel-field .px2 { top: 64%; left: 10%; width: 30px; animation-delay: -2.4s; }
.pixel-field .px3 { top: 20%; right: 7%; width: 46px; animation-delay: -1.2s; }
.pixel-field .px4 { top: 70%; right: 12%; width: 34px; animation-delay: -4s; }
.pixel-field .px5 { top: 44%; left: 2.5%; width: 26px; animation-delay: -5.2s; }
.pixel-field .px6 { top: 40%; right: 2.5%; width: 28px; animation-delay: -3s; }
@keyframes pxFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.pixel-hearts { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.pixel-hearts svg { width: 22px; height: auto; shape-rendering: crispEdges; }
@media (max-width: 600px) { .pixel-field .px5, .pixel-field .px6 { display: none; } .pixel-field svg { opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .pixel-field svg { animation: none; } }

/* ── Vitrine de consoles dans le hero (illustrations maison) ── */
.hero-consoles { display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.hero-console { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 16px 18px 12px; display: grid; gap: 10px; justify-items: center; backdrop-filter: blur(4px); }
.hero-console svg { width: 190px; height: auto; display: block; }
.hero-console img { height: 150px; width: auto; max-width: 250px; object-fit: contain; display: block; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.hero-credit { margin-top: 12px; font-size: .68rem; color: rgba(255, 255, 255, .55); text-align: center; }
.hero-credit a { color: rgba(255, 255, 255, .72); }
.hero-console figcaption { font-size: .84rem; font-weight: 700; color: #fff; }
.hero-console figcaption small { display: block; font-weight: 500; font-size: .74rem; color: rgba(255, 255, 255, .75); text-align: center; }
@media (max-width: 600px) { .hero-console svg { width: 150px; } .hero-console img { height: 118px; max-width: 190px; } }

/* ── En-tête ── */
header { background: rgba(13, 15, 26, .96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); padding: 0; position: sticky; top: 0; z-index: 100; }
header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 62px; padding-block: 8px; }
.logo { font-weight: 800; font-size: 1rem; color: #fff; }
.logo span { color: var(--cyan); }
.header-tel { margin-left: auto; color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.header-cta { background: var(--wa); color: #fff; padding: 10px 20px; border-radius: 50px; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.header-cta:hover { background: #1ebd5a; }
.breadcrumb { background: var(--bg-alt); padding: 11px 0; font-size: .88rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.breadcrumb a { color: var(--blue); }
.breadcrumb span { margin: 0 8px; color: var(--muted); }

/* ── Hero ── */
.hero { background: linear-gradient(135deg, var(--hero1) 0%, var(--hero2) 100%); color: #fff; padding: clamp(56px, 7vw, 84px) 0; text-align: center; position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::after { right: -140px; top: -140px; width: 440px; height: 440px; background: radial-gradient(circle, rgba(0, 194, 224, .28), transparent 70%); }
.hero::before { left: -160px; bottom: -200px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255, 255, 255, .07), transparent 70%); }
.hero .container { position: relative; z-index: 1; }
.hero-trust { display: inline-flex; gap: 9px; align-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); padding: 8px 18px; border-radius: 50px; margin-bottom: 24px; font-weight: 600; font-size: .92rem; }
.hero-stars { color: #ffc107; letter-spacing: 2px; }
.hero h1 { font-size: clamp(1.85rem, 4.2vw, 2.8rem); font-weight: 800; line-height: 1.18; margin-bottom: 16px; }
.hero p.lead { font-size: 1.08rem; color: rgba(255, 255, 255, .92); max-width: 46rem; margin: 0 auto 28px; }
.hero p.lead strong { color: #fff; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 28px; border-radius: 50px; font-weight: 700; transition: transform .15s ease, background .15s ease; cursor: pointer; border: none; font-size: .95rem; }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 6px 20px rgba(37, 211, 102, .35); }
.btn-wa:hover { background: #1ebd5a; transform: translateY(-2px); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55); }
.btn-outline:hover { background: rgba(255, 255, 255, .1); }

/* ── Listes « pannes / pourquoi nous » : cartes sur 2 colonnes ── */
ul.checks { list-style: none; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
ul.checks li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px 14px 46px; font-size: .95rem; color: var(--text); min-width: 0; }
ul.checks li::before { content: "✓"; position: absolute; left: 14px; top: 13px; width: 22px; height: 22px; border-radius: 50%; background: rgba(37, 211, 102, .14); color: var(--wa); font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
ul.checks li strong { color: var(--ink); }

/* ── Tarifs ── */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 32px; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 20px; box-shadow: var(--shadow); transition: transform .18s ease; min-width: 0; }
.price-card:hover { transform: translateY(-4px); }
.price-card h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.price-card .price { font-size: 1.7rem; font-weight: 800; color: var(--blue); margin: 8px 0 10px; font-variant-numeric: tabular-nums; }
.price-card .price small { font-size: .9rem; color: var(--muted); font-weight: 500; }
.price-card .desc { font-size: .89rem; color: var(--muted); margin: 0; }
.price-tiers { display: flex; flex-direction: column; margin: 8px 0 12px; }
.price-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.price-tier:last-child { border-bottom: none; }
.price-tier .lbl { font-size: .9rem; color: var(--text); font-weight: 600; }
.price-tier .amt { font-size: 1.32rem; font-weight: 800; color: var(--blue); white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; }
.price-tier.is-express { margin-top: 4px; padding: 10px 12px; border-radius: 10px; border-bottom: none; background: linear-gradient(135deg, rgba(0, 194, 224, .13), rgba(0, 86, 210, .10)); }
.price-tier.is-express .amt { color: var(--cyan); }
.badge-express { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #fff; font-size: .66rem; font-weight: 800; padding: 4px 9px; border-radius: 50px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }

/* ── Modèles ── */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; margin-top: 26px; }
.model-chip { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 13px 8px; text-align: center; font-weight: 500; font-size: .8rem; color: var(--muted); min-width: 0; }
.model-chip strong { display: block; color: var(--ink); margin-bottom: 2px; font-size: .95rem; }

/* ── FAQ (dépliable) ── */
details.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; margin-bottom: 10px; max-width: 860px; }
details.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; font-weight: 700; font-size: 1rem; color: var(--ink); }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: '+'; color: var(--blue); font-size: 1.35rem; font-weight: 600; flex-shrink: 0; line-height: 1; }
details.faq-item[open] summary::after { content: '−'; }
details.faq-item p { padding-bottom: 16px; margin: 0; font-size: .95rem; }

/* ── Fin de page ── */
.cta-final { background: linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%); color: #fff; padding: clamp(48px, 6vw, 68px) 0; text-align: center; }
.cta-final h2 { color: #fff; }
.cta-final p { color: rgba(255, 255, 255, .95); font-size: 1.08rem; margin: 0 auto 24px; }
footer { background: #0d0f1a; color: #98a0b3; padding: 34px 0 110px; text-align: center; font-size: .9rem; }
footer a { color: #fff; }
footer .footer-links { margin-bottom: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
footer p { color: #98a0b3; margin: 0 auto; }

/* ── Barre mobile fixe ── */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(13, 15, 26, .96); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .1); }
.mobile-bar .btn { flex: 1; padding: 13px 10px; font-size: .92rem; }

/* ── Estimateur écran (page smartphone) ── */
.sg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 26px 24px; }
.sg-step { font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--blue); margin: 6px 0 8px; }
.sg-step.mt { margin-top: 18px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip { border: 1.5px solid var(--line); background: var(--surface); color: var(--text); border-radius: 50px; padding: 7px 15px; font-size: .86rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.sg-chip:hover { border-color: var(--blue); color: var(--blue); }
.sg-chip.active { background: linear-gradient(135deg, var(--blue), var(--cyan)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(0, 86, 210, .3); }
.sg-search { position: relative; margin-top: 6px; }
.sg-search input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px 14px 44px; font-size: 1rem; font-family: inherit; outline: none; transition: border .15s; color: var(--ink); background: var(--bg); }
.sg-search input:focus { border-color: var(--blue); }
.sg-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .45; font-size: 1.1rem; }
.sg-results { list-style: none; margin: 8px 0 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; display: none; background: var(--surface); }
.sg-results.show { display: block; }
.sg-results li { padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sg-results li:last-child { border-bottom: none; }
.sg-results li:hover { background: var(--bg-alt); }
.sg-rb { font-size: .72rem; font-weight: 700; color: #fff; background: var(--blue); padding: 2px 8px; border-radius: 50px; white-space: nowrap; }
.sg-rt { font-size: .74rem; color: var(--text); white-space: nowrap; }
.sg-empty { padding: 16px; color: var(--text); font-size: .9rem; text-align: center; }
.sg-panel { margin-top: 22px; display: none; }
.sg-panel.show { display: block; animation: sgfade .25s ease; }
@keyframes sgfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sg-phead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.sg-phead h3 { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 0; }
.sg-pb { font-size: .78rem; font-weight: 700; color: var(--blue); background: var(--chip); padding: 3px 10px; border-radius: 50px; }
.sg-pnote { font-size: .86rem; color: var(--text); margin-bottom: 14px; }
.sg-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.sg-tier { border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 16px 15px; position: relative; transition: transform .15s, box-shadow .15s; background: var(--surface); }
.sg-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sg-tq { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text); }
.sg-tp { font-size: 1.9rem; font-weight: 800; color: var(--blue); line-height: 1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.sg-tl { font-size: .8rem; color: var(--text); }
.sg-allin { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.sg-tier.original { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); background: linear-gradient(180deg, rgba(0, 194, 224, .06), transparent); }
.sg-badge { position: absolute; top: -9px; right: 12px; color: #fff; font-size: .64rem; font-weight: 800; padding: 3px 9px; border-radius: 50px; letter-spacing: .4px; text-transform: uppercase; }
.sg-tier.original .sg-badge { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.sg-tier.moyenne .sg-badge { background: #2fa84f; }
.sg-tier.basse { border-color: var(--amber-bd); background: var(--amber-bg); }
.sg-tier.basse .sg-tq, .sg-tier.basse .sg-tp { color: var(--amber); }
.sg-tier.basse .sg-badge { background: var(--amber); }
.sg-nb { margin-top: 16px; border: 1.5px solid var(--amber-bd); background: var(--amber-bg); border-radius: 12px; padding: 14px 16px; display: none; }
.sg-nb.show { display: block; }
.sg-nb b.h { color: var(--amber); display: block; margin-bottom: 5px; font-size: .92rem; }
.sg-nb p { font-size: .85rem; color: var(--amber); opacity: .85; margin: 0; }
.sg-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.sg-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 50px; font-weight: 700; font-size: .92rem; text-decoration: none; }
.sg-cta .wa { background: var(--wa); color: #fff; }
.sg-cta .call { background: var(--surface); color: var(--blue); border: 1.5px solid var(--blue); }
.sg-hint { font-size: .9rem; color: var(--text); text-align: center; padding: 22px 10px; display: block; }
.sg-foot { font-size: .75rem; color: var(--muted); margin-top: 14px; text-align: center; }

@media (max-width: 700px) {
  ul.checks { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: 48px 0; }
  section.content { padding: 46px 0; }
  .header-tel { display: none; }
  .mobile-bar { display: flex; }
  footer { padding-bottom: 130px; }
  .hero-btns .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }