/* ===========================================================
   Pylon-Monitor V3 Premium (2026-10-28) — habillage noir et or.
   Reprend les couleurs du boîtier (noir mat, logo doré) ; le reste
   du site garde son thème « plan d'atelier » clair.
   =========================================================== */
:root {
  --pro-ink: #0e0d0c;
  --pro-ink-2: #171512;
  --pro-ink-3: #211e19;
  --pro-line: rgba(214, 178, 106, .22);
  --pro-line-2: rgba(214, 178, 106, .45);
  --pro-gold: #d6b26a;
  --pro-gold-2: #f0d595;
  --pro-gold-3: #a8823d;
  --pro-cream: #f2ece0;
  --pro-mute: #b9b0a0;
}

/* ---------- Bandeau du haut ---------- */
.pro-bar {
  background: linear-gradient(90deg, #0e0d0c, #1d1a15 50%, #0e0d0c);
  border-bottom: 1px solid var(--pro-line-2);
  color: var(--pro-cream);
  font-size: .86rem;
}
.pro-bar-inner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; text-align: center; flex-wrap: wrap;
}
.pro-bar-star { color: var(--pro-gold); }
.pro-bar-text strong { color: var(--pro-gold-2); font-weight: 700; }
.pro-bar-link {
  color: var(--pro-ink) !important; background: linear-gradient(180deg, var(--pro-gold-2), var(--pro-gold));
  padding: 3px 12px; border-radius: 999px; font-weight: 700; text-decoration: none !important; white-space: nowrap;
}
.pro-bar-link:hover { filter: brightness(1.06); }

/* ---------- Bouton or ---------- */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--pro-gold-2) 0%, var(--pro-gold) 55%, var(--pro-gold-3) 100%);
  color: #1a1408 !important; border: 1px solid #8a6a2e;
  box-shadow: 0 10px 30px rgba(214, 178, 106, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
  font-weight: 800; text-decoration: none !important;
  transition: transform .2s var(--ease, ease), box-shadow .2s;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(214, 178, 106, .38), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-gold svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Section noire (accueil + page /v3) ---------- */
.pro-x {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 480px at 78% 30%, rgba(214, 178, 106, .16), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgba(214, 178, 106, .07), transparent 60%),
    linear-gradient(180deg, var(--pro-ink) 0%, var(--pro-ink-2) 100%);
  color: var(--pro-cream);
  padding: 84px 0 72px;
  border-top: 1px solid var(--pro-line);
  border-bottom: 1px solid var(--pro-line);
}
.pro-x::before { /* fines lignes de circuit en fond */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(214, 178, 106, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 178, 106, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.pro-x > .container { position: relative; }
.pro-x h1, .pro-x h2, .pro-x h3 { color: var(--pro-cream); }
.pro-x-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pro-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pro-gold); border: 1px solid var(--pro-line-2); border-radius: 999px; padding: 6px 8px 6px 14px;
}
.pro-tag {
  background: var(--pro-gold); color: var(--pro-ink); border-radius: 999px; padding: 2px 10px;
  font-weight: 700; letter-spacing: .08em;
}
.pro-x h2, .pro-x h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08;
  margin: 22px 0 18px; letter-spacing: -.01em;
}
.pro-gold {
  background: linear-gradient(180deg, var(--pro-gold-2), var(--pro-gold) 60%, var(--pro-gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pro-lead { color: var(--pro-mute); font-size: 1.08rem; line-height: 1.7; margin: 0 0 22px; max-width: 620px; }
.pro-chips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.pro-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--pro-line); border-radius: 10px;
  padding: 7px 12px; font-size: .88rem; color: var(--pro-cream);
}
.pro-chips svg { width: 17px; height: 17px; color: var(--pro-gold); }
.pro-countdown { display: flex; align-items: center; gap: 10px; color: var(--pro-mute); font-size: .92rem; margin: 6px 0 0; }
.pro-countdown strong { color: var(--pro-gold-2); }
.pro-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--pro-gold); box-shadow: 0 0 0 0 rgba(214, 178, 106, .6); animation: proPulse 2s infinite; }
@keyframes proPulse { 0% { box-shadow: 0 0 0 0 rgba(214, 178, 106, .55); } 70% { box-shadow: 0 0 0 10px rgba(214, 178, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(214, 178, 106, 0); } }
@media (prefers-reduced-motion: reduce) { .pro-pulse { animation: none; } }
.pro-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.pro-link { color: var(--pro-gold) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--pro-line-2); padding-bottom: 2px; }
.pro-link:hover { color: var(--pro-gold-2) !important; border-color: var(--pro-gold); }

.pro-x-visual { position: relative; }
.pro-photo-frame {
  position: relative; border-radius: 18px; padding: 10px;
  background: linear-gradient(160deg, rgba(214, 178, 106, .45), rgba(214, 178, 106, .05) 40%, rgba(214, 178, 106, .3));
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 178, 106, .15);
}
.pro-photo-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }
.pro-price-seal {
  position: absolute; right: -14px; top: -18px; width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, var(--pro-gold-2), var(--pro-gold) 55%, var(--pro-gold-3));
  color: #1a1408; font-weight: 900; font-size: 1.55rem; line-height: 1.05;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .4);
  border: 2px solid rgba(26, 20, 8, .25); transform: rotate(8deg);
}
.pro-price-seal small { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-bottom: 2px; }

/* ---------- Arguments ---------- */
.pro-args { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }  /* 15 raisons = 5 × 3, 6 en vitrine = 2 × 3 */
.pro-args.pro-args-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pro-arg {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid var(--pro-line); border-radius: 14px; padding: 22px 20px 20px;
  transition: border-color .25s, transform .25s var(--ease, ease);
}
.pro-arg:hover { border-color: var(--pro-line-2); transform: translateY(-2px); }
.pro-arg-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--pro-gold-2); background: rgba(214, 178, 106, .1); border: 1px solid var(--pro-line);
}
.pro-arg h3 { font-size: 1.02rem; margin: 0 0 8px; line-height: 1.35; }
.pro-arg p { color: var(--pro-mute); font-size: .9rem; line-height: 1.6; margin: 0; }
.pro-more { text-align: center; margin: 34px 0 0; }

/* ---------- Schéma intérieur ---------- */
.pro-inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.pro-inside-card { margin: 0; border-radius: 16px; padding: 18px; border: 1px solid var(--pro-line); background: rgba(255, 255, 255, .025); }
.pro-inside-card svg { display: block; width: 100%; height: auto; }
.pro-inside-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; text-align: center; }
.pro-inside-card figcaption strong { color: var(--pro-cream); }
.pro-inside-card figcaption span { color: var(--pro-mute); font-size: .9rem; }
.pro-inside-pro { border-color: var(--pro-line-2); box-shadow: 0 0 0 1px rgba(214, 178, 106, .12), 0 30px 60px rgba(0, 0, 0, .35); }
.ins-case { fill: #1b1916; stroke: #3b362d; stroke-width: 2; }
.ins-mod { fill: #2b2e33; stroke: #555b63; stroke-width: 1.5; }
.ins-wire { fill: none; stroke-width: 3; stroke-linecap: round; }
.ins-wire.w1 { stroke: #c0392b; } .ins-wire.w2 { stroke: #e0a526; } .ins-wire.w3 { stroke: #2f80c0; } .ins-wire.w4 { stroke: #3a9a5b; }
.ins-pcb { fill: #12301f; stroke: var(--pro-gold); stroke-width: 1.5; }
.ins-trace path { fill: none; stroke: var(--pro-gold); stroke-width: 1.6; opacity: .75; }
.ins-chip { fill: #0d0d0e; stroke: #4a4436; stroke-width: 1.2; }
.ins-screen { fill: #0b1620; stroke: var(--pro-gold-3); }
.ins-port { fill: #8e939a; stroke: #c7cbd0; stroke-width: 1; }
.ins-hole { fill: #0e0d0c; stroke: var(--pro-gold); stroke-width: 1.2; }
.ins-t { font: 600 12px/1 var(--font); fill: #d9dde2; text-anchor: middle; }
.ins-t-light { fill: var(--pro-gold-2); }
.ins-t-s { font-size: 10px; }
.ins-port + .ins-t { fill: #15181c; font-weight: 800; }

/* ---------- Tableau V3 / V2 ---------- */
.pro-cmp { margin-top: 30px; border: 1px solid var(--pro-line); border-radius: 16px; overflow: hidden; }
.pro-cmp-scroll { overflow-x: auto; }
.pro-cmp table { width: 100%; border-collapse: collapse; min-width: 520px; }
.pro-cmp th, .pro-cmp td { padding: 13px 18px; text-align: left; border-bottom: 1px solid rgba(214, 178, 106, .12); font-size: .93rem; }
.pro-cmp thead th { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pro-mute); background: rgba(255, 255, 255, .03); }
.pro-cmp thead th.pro-col { color: var(--pro-ink); background: linear-gradient(180deg, var(--pro-gold-2), var(--pro-gold)); }
.pro-cmp td { color: var(--pro-mute); }
.pro-cmp td.crit { color: var(--pro-cream); font-weight: 600; }
.pro-cmp td.pro-col { color: var(--pro-gold-2); font-weight: 700; background: rgba(214, 178, 106, .06); }
.pro-cmp tr:last-child td { border-bottom: 0; }

/* ---------- Étapes de précommande ---------- */
.pro-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: st; }
.pro-steps li { position: relative; border: 1px solid var(--pro-line); border-radius: 14px; padding: 20px; background: rgba(255, 255, 255, .025); }
.pro-steps li::before {
  counter-increment: st; content: counter(st);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin-bottom: 12px;
  background: var(--pro-gold); color: var(--pro-ink); font-weight: 800;
}
.pro-steps .when { display: block; font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pro-gold); }
.pro-steps strong { display: block; color: var(--pro-cream); margin: 4px 0 6px; }
.pro-steps p { color: var(--pro-mute); font-size: .88rem; margin: 0; line-height: 1.55; }

/* ---------- Contenu de la boîte ---------- */
.pro-box { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 30px; }
.pro-box img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--pro-line); }
.pro-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pro-box li { display: flex; gap: 12px; align-items: flex-start; color: var(--pro-cream); }
.pro-box li svg { width: 20px; height: 20px; color: var(--pro-gold); flex-shrink: 0; margin-top: 2px; }

/* ---------- FAQ ---------- */
.pro-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.pro-faq .qa { border: 1px solid var(--pro-line); border-radius: 14px; padding: 20px; background: rgba(255, 255, 255, .025); }
.pro-faq h3 { font-size: 1rem; margin: 0 0 8px; }
.pro-faq p { color: var(--pro-mute); margin: 0; font-size: .92rem; line-height: 1.6; }

.pro-section-h { text-align: center; max-width: 760px; margin: 0 auto; }
.pro-section-h h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 10px; }
.pro-section-h p { color: var(--pro-mute); margin: 0; }
.pro-x + .pro-x { border-top: 0; padding-top: 24px; }
.pro-final { text-align: center; }
.pro-final .pro-cta-row, .pro-final .pro-chips, .pro-final .pro-countdown { justify-content: center; }
.pro-final .pro-section-h { margin-bottom: 22px; }

/* ---------- Carte de prix « V3 » (grille claire) ---------- */
.pricing-grid.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; gap: 24px; }
.pricing-card-pro {
  background: linear-gradient(180deg, #16140f, #0e0d0c) !important; color: var(--pro-cream);
  border: 1.5px solid var(--pro-gold) !important;
  box-shadow: 0 30px 70px rgba(14, 13, 12, .35), 0 0 0 4px rgba(214, 178, 106, .12) !important;
}
.pricing-card-pro h3 { color: var(--pro-cream); }
.pricing-card-pro .price { color: var(--pro-cream); }
.pricing-card-pro .price .currency { color: var(--pro-gold); }
.pricing-card-pro .price .vat, .pricing-card-pro .ship-note { color: var(--pro-mute); }
.pricing-card-pro .ship-note a { color: var(--pro-gold); }
.pricing-card-pro .price-features li { color: var(--pro-cream); }
.pricing-card-pro .price-features li::before { color: var(--pro-gold); border-color: var(--pro-gold); }
.pricing-card-pro .pricing-card-img { border-color: var(--pro-line-2); }
.pricing-badge-pro { background: linear-gradient(180deg, var(--pro-gold-2), var(--pro-gold)) !important; color: #1a1408 !important; }
.pricing-card-pro .btn-gold { width: 100%; }

/* ---------- Accueil : héros ---------- */
.hero-pro-photo { position: relative; }
.hero-pro-photo .pro-price-seal { width: 92px; height: 92px; font-size: 1.35rem; right: -10px; top: -14px; }
.hero-pro-photo img { border-radius: 14px; box-shadow: 0 30px 70px rgba(14, 13, 12, .35); border: 1px solid #2b2720; }
.hero-pro-label {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; align-self: center;
  background: var(--pro-ink); color: var(--pro-cream); border: 1px solid var(--pro-line-2);
  border-radius: 999px; padding: 6px 14px; font-size: .84rem; text-decoration: none;
}
.hero-pro-label b { color: var(--pro-gold-2); }
.hero-models { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; max-width: 440px; margin-top: 14px; }
.hero-models .hero-lite-card-text { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero-models .hero-lite-card { margin-top: 0; max-width: none; padding: 8px 10px; gap: 10px; }
.hero-models .hero-lite-card img { width: 44px; height: 44px; }
.hero-models .hero-lite-card-price { font-size: .98rem; }

/* ---------- Tunnel de paiement ---------- */
.pro-checkout-note {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px;
  background: #16140f; color: var(--pro-cream); border: 1px solid var(--pro-gold); border-radius: 8px; padding: 14px 16px;
}
.pro-checkout-note svg { color: var(--pro-gold); flex-shrink: 0; margin-top: 1px; }
.pro-checkout-note p { margin: 0; font-size: .92rem; line-height: 1.55; }
.pro-checkout-note strong { color: var(--pro-gold-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pricing-grid.pricing-grid-3 { grid-template-columns: 1fr; max-width: 480px; }
  .pricing-grid.pricing-grid-3 .pricing-card-pro { order: -1; }
}
@media (max-width: 980px) {
  .pro-x-grid { grid-template-columns: 1fr; gap: 40px; }
  .pro-x-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .pro-args.pro-args-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* 6 = 3 × 2 ; les 15 restent en 3 colonnes jusqu'à 820 px */
  .pro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .pro-args { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pro-x { padding: 60px 0 52px; }
  .pro-inside, .pro-faq, .pro-box { grid-template-columns: 1fr; }
  .pro-box img { max-width: 320px; margin: 0 auto; }
  .pro-price-seal { right: 6px; top: -14px; width: 84px; height: 84px; font-size: 1.2rem; }
}
@media (max-width: 560px) {
  .pro-args, .pro-args.pro-args-6, .pro-steps { grid-template-columns: 1fr; }
  .pro-bar { font-size: .8rem; }
  .pro-cta-row .btn-gold { width: 100%; }
}

/* Carte de prix V3 : accroche + atouts mis en avant (2026-10-28) */
.pro-card-tagline { color: var(--pro-gold); font-size: .88rem; margin: -4px 0 14px; font-style: italic; }
.pro-card-highlights { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.pro-card-highlights li {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(214, 178, 106, .1); border: 1px solid var(--pro-line-2); border-radius: 10px;
  padding: 9px 12px; font-weight: 700; font-size: .92rem; color: var(--pro-gold-2);
}
.pro-card-highlights svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--pro-gold); }
.pricing-card-pro .price-features li { font-size: .9rem; }
.pricing-card-pro .price { margin: 12px 0; }
.pricing-card-pro .price-features { margin-top: 14px; }
.pricing-card-pro .price-features li { font-size: .88rem; line-height: 1.45; padding-top: 4px; padding-bottom: 4px; }
.pro-card-highlights li { padding: 7px 11px; font-size: .88rem; }
@media (max-width: 560px) {
  .hpl-sub { display: none; }
  .pro-bar-star { display: none; }
}