/* ═══════════════════════════════════════════════
   ICONNECT HOTSPOT — SHARED STYLESHEET
   @COPYRIGHT 2025 · ICONNECT (IRTEEL CONNECT)
═══════════════════════════════════════════════ */
:root{
  /* iConnect — palette alignée sur les visuels publicitaires fournis
     (fond marine profond, accent cyan/bleu pour le WiFi/la marque,
     vert pour la fibre, or pour les prix). Ancien accent orange de
     iConnect remplacé par un or/ambre, seule variable à changer
     grâce aux custom properties CSS déjà en place (30 usages, 0
     couleur codée en dur ailleurs). */
  --navy:   #040d1c;
  --navy2:  #081528;
  --navy3:  #0c1f40;
  --orange: #ffb020;
  --orange2:#ffd54a;
  --amber:  #ffb347;
  --cyan:   #00d4ff;
  --cyan2:  #00a8cc;
  --green:  #00e676;
  --purple: #a855f7;
  --red:    #ff4444;
  --white:  #e8f4fd;
  --muted:  #6e9ab8;
  --card:   rgba(8,21,40,0.82);
  --card2:  rgba(12,31,64,0.72);
  --border: rgba(0,212,255,0.14);
  --border2:rgba(255,176,32,0.22);
  --glow-c: 0 0 28px rgba(0,212,255,0.2);
  --glow-o: 0 0 28px rgba(255,176,32,0.2);
  --r: 14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Exo 2',sans-serif;background:var(--navy);color:var(--white);min-height:100vh;overflow-x:hidden}

/* CANVAS BG */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* LAYOUT */
.page-wrap{position:relative;z-index:10;display:flex;flex-direction:column;min-height:100vh}
.main-content{flex:1}

/* NAV */
nav{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 22px;
  background:rgba(4,13,28,.93);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;gap:8px;
}
.nav-brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.nav-logo{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--amber));
  display:grid;place-items:center;
  font-family:'Orbitron',monospace;font-size:.66rem;font-weight:900;color:#fff;
  box-shadow:0 0 18px rgba(255,176,32,.5);position:relative;flex-shrink:0;
}
.nav-logo::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid rgba(255,176,32,.28);animation:spin-r 8s linear infinite}
@keyframes spin-r{to{transform:rotate(360deg)}}
.nav-title{font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;color:var(--white);letter-spacing:.5px}
.nav-title em{color:var(--orange);font-style:normal}
.nav-links{display:flex;gap:4px;flex-wrap:wrap}
.nav-btn{
  display:inline-block;text-decoration:none;
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font-family:'Exo 2',sans-serif;font-size:.72rem;
  padding:5px 12px;border-radius:30px;cursor:pointer;transition:all .2s;
}
.nav-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px rgba(0,212,255,.2)}
.nav-btn.an{border-color:var(--orange);color:var(--orange);background:rgba(255,176,32,.07)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-signal{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--muted)}
.signal-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pdot 1.8s infinite}
@keyframes pdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}

/* FOOTER */
footer{
  background:rgba(4,13,28,.93);border-top:1px solid var(--border);
  padding:13px 22px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;font-size:.7rem;color:var(--muted);
  position:relative;z-index:50;backdrop-filter:blur(14px);
}
footer a{color:var(--amber);text-decoration:none}
footer a:hover{text-decoration:underline}
.footer-wifi{display:flex;align-items:center;gap:6px;font-family:'Orbitron',monospace;font-size:.66rem;color:var(--cyan)}
.footer-copy{font-size:.65rem;color:rgba(255,255,255,.28);letter-spacing:.5px}

/* SECTION HEADER */
.section-wrap{max-width:1100px;margin:0 auto;padding:36px 18px 72px}
.section-hdr{text-align:center;margin-bottom:32px}
.section-tag{display:inline-block;font-size:.67rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);background:rgba(0,212,255,.07);border:1px solid var(--border);border-radius:20px;padding:5px 15px;margin-bottom:10px}
.section-title{font-family:'Orbitron',monospace;font-size:clamp(1.25rem,3vw,1.9rem);font-weight:900;margin-bottom:7px}
.section-title em{color:var(--orange);font-style:normal}
.section-desc{color:var(--muted);font-size:.86rem;max-width:480px;margin:0 auto;line-height:1.6}

/* BUTTONS */
.btn-prime{width:100%;padding:13px;border:none;border-radius:var(--r);background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-family:'Orbitron',monospace;font-size:.8rem;font-weight:700;letter-spacing:1.5px;cursor:pointer;transition:all .3s;box-shadow:0 8px 22px rgba(255,176,32,.28);text-transform:uppercase}
.btn-prime:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,176,32,.42)}.btn-prime:active{transform:translateY(0)}.btn-prime:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--r);background:transparent;color:var(--cyan);font-family:'Exo 2',sans-serif;font-size:.87rem;font-weight:600;cursor:pointer;transition:all .25s;text-decoration:none;display:block;text-align:center}
.btn-ghost:hover{background:rgba(0,212,255,.07);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,212,255,.18)}
.btn-link{display:inline-block;padding:8px 18px;border:1px solid var(--border);border-radius:30px;background:transparent;color:var(--muted);font-family:'Exo 2',sans-serif;font-size:.76rem;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-link:hover{border-color:var(--cyan);color:var(--cyan)}

/* INPUTS */
.inp-grp{position:relative;margin-bottom:15px}
.inp-grp label{display:block;font-size:.7rem;color:var(--muted);margin-bottom:6px;letter-spacing:.8px;text-transform:uppercase}
.inp-grp input,.inp-grp textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r);padding:12px 44px 12px 15px;color:var(--white);font-family:'Exo 2',sans-serif;font-size:.9rem;outline:none;transition:border-color .25s,box-shadow .25s}
.inp-grp input:focus,.inp-grp textarea:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,212,255,.16)}
.inp-grp input::placeholder,.inp-grp textarea::placeholder{color:rgba(255,255,255,.2)}
.inp-grp .ico{position:absolute;right:13px;bottom:12px;font-size:.95rem;opacity:.4}
.eye-btn{position:absolute;right:13px;bottom:12px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;transition:color .2s;padding:0}
.eye-btn:hover{color:var(--white)}
.inp-grp.err input{border-color:var(--red)}
.inp-err{font-size:.7rem;color:#f77;margin-top:3px;display:none}
.inp-grp.err .inp-err{display:block}
.inp-grp textarea{resize:vertical;min-height:88px;padding:12px 15px}

/* CARD */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;backdrop-filter:blur(20px)}

/* DIVIDER */
.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:.76rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* BADGE */
.badge{display:inline-block;padding:3px 8px;border-radius:5px;font-size:.63rem;font-weight:700}
.badge-unlim{background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.3);color:var(--amber)}
.badge-special{background:rgba(0,212,255,.09);border:1px solid rgba(0,212,255,.28);color:var(--cyan)}
.badge-perso{background:rgba(0,230,118,.09);border:1px solid rgba(0,230,118,.28);color:var(--green)}
.badge-orange{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.3);color:var(--orange)}

/* NB STRIP */
.nb-strip{margin-top:18px;background:rgba(0,212,255,.04);border:1px solid var(--border);border-radius:11px;padding:12px 16px;display:flex;align-items:flex-start;gap:10px}
.nb-strip .nbi{font-size:1rem;flex-shrink:0;margin-top:2px}
.nb-strip p{font-size:.76rem;color:var(--muted);line-height:1.7}
.nb-strip strong{color:var(--white)}

/* SPINNER / TOAST */
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;margin-right:6px;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
#toast{position:fixed;top:68px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:var(--r);font-size:.8rem;font-weight:600;z-index:9999;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(14px);white-space:nowrap}
#toast.show{opacity:1}
#toast.ok{background:rgba(0,230,118,.12);border:1px solid rgba(0,230,118,.38);color:var(--green)}
#toast.warn{background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.38);color:var(--amber)}
#toast.err{background:rgba(255,68,68,.12);border:1px solid rgba(255,68,68,.38);color:#f77}

/* FAB */
#fab{position:fixed;bottom:70px;right:18px;z-index:500;width:48px;height:48px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--cyan2),var(--cyan));color:#000;font-size:1.2rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,212,255,.38);transition:all .3s;display:grid;place-items:center}
#fab:hover{transform:scale(1.1);box-shadow:0 10px 26px rgba(0,212,255,.52)}
#fab-menu{position:fixed;bottom:128px;right:12px;z-index:499;background:var(--card2);border:1px solid var(--border);border-radius:13px;padding:10px;backdrop-filter:blur(18px);display:none;flex-direction:column;gap:6px;min-width:175px;box-shadow:var(--glow-c)}
#fab-menu.open{display:flex}
#fab-menu a{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:8px;color:var(--white);font-size:.8rem;text-decoration:none;transition:all .2s}
#fab-menu a:hover{background:rgba(0,212,255,.09);color:var(--cyan)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:none;place-items:center;padding:20px}
.modal-overlay.open{display:grid}
.modal-box{background:var(--navy2);border:1px solid var(--border);border-radius:19px;padding:28px;max-width:490px;width:100%;max-height:80vh;overflow-y:auto;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.modal-close{position:absolute;top:13px;right:13px;background:transparent;border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.9rem;display:grid;place-items:center;transition:all .2s}
.modal-close:hover{border-color:var(--orange);color:var(--orange)}
.modal-title{font-family:'Orbitron',monospace;font-size:.92rem;font-weight:700;color:var(--cyan);margin-bottom:16px;letter-spacing:1px}

/* PLAN CARD */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.plan-card{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:22px 18px;backdrop-filter:blur(18px);transition:all .3s;cursor:pointer;position:relative;overflow:hidden}
.plan-card:hover{border-color:var(--cyan);transform:translateY(-5px);box-shadow:0 18px 38px rgba(0,0,0,.4),var(--glow-c)}
.plan-card.pop{border-color:rgba(255,176,32,.45)}
.plan-card.pop::after{content:'POPULAIRE';position:absolute;top:12px;right:-26px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-size:.55rem;font-weight:800;letter-spacing:1.5px;padding:4px 34px;transform:rotate(45deg)}
.plan-card.special-card{border-color:rgba(255,179,71,.38)}
.plan-ref{font-family:'Orbitron',monospace;font-size:.62rem;color:var(--cyan);letter-spacing:2px;margin-bottom:8px;text-transform:uppercase}
.plan-data{font-family:'Orbitron',monospace;font-size:1.3rem;font-weight:900;color:var(--white);line-height:1;margin-bottom:3px}
.plan-data sub{font-size:.58rem;font-weight:400;color:var(--muted);font-family:'Exo 2',sans-serif}
.plan-val{font-size:.7rem;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.val-badge{display:inline-block;background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.24);border-radius:4px;padding:2px 7px;font-size:.6rem;color:var(--orange);font-weight:600}
.val-badge.v30{background:rgba(255,179,71,.1);border-color:rgba(255,179,71,.28);color:var(--amber)}
.val-badge.v1m{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.22);color:var(--cyan)}
.plan-price{font-family:'Orbitron',monospace;font-size:1.2rem;font-weight:900;color:var(--orange)}
.plan-price span{font-size:.57rem;color:var(--muted);font-family:'Exo 2',sans-serif;font-weight:400}
.plan-price.spe{color:var(--amber)}
.plan-note{font-size:.68rem;color:var(--muted);font-style:italic;margin-top:3px}
.plan-action{display:block;width:100%;margin-top:12px;padding:8px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--cyan);font-family:'Exo 2',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .25s;text-align:center;text-decoration:none}
.plan-action:hover{background:rgba(0,212,255,.09);border-color:var(--cyan)}
.plan-card.pop .plan-action{background:linear-gradient(135deg,var(--orange),var(--orange2));border-color:transparent;color:#fff}

/* INSTALL SECTION */
.install-section{margin-top:32px;background:var(--card2);border:1px solid var(--border2);border-radius:14px;padding:20px 24px}
.install-section h4{font-family:'Orbitron',monospace;font-size:.73rem;color:var(--orange);letter-spacing:1.5px;margin-bottom:14px;text-transform:uppercase}
.install-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.install-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center}
.install-price{font-family:'Orbitron',monospace;font-size:1rem;font-weight:900;color:var(--amber)}
.install-label{font-size:.68rem;color:var(--muted);margin-top:3px}
.install-val{font-size:.7rem;color:var(--cyan);margin-top:4px;font-weight:600}

/* TAB */
.tab-row{display:flex;justify-content:center;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.tab-btn{padding:8px 18px;border-radius:30px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Exo 2',sans-serif;font-size:.78rem;cursor:pointer;transition:all .25s;font-weight:500}
.tab-btn.active{background:linear-gradient(135deg,var(--orange),var(--orange2));border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(255,176,32,.3)}

/* ─── ZONES COULEUR RÉELLES (audit 2026-10-22, suite 3) ────────────────
   Les flyers marketing iConnect ne présentent pas un palette plat unique :
   chaque ligne de produit a sa propre identité visuelle — "WIFI ZONE" en
   bleu/cyan néon, "FIBRE FTTH / CLIENT CÂBLÉ" en vert néon, "ICONNECT IPTV"
   en violet/magenta néon, toutes sur fond navy sombre avec bordures glow.
   Appliqué ici aux 3 onglets de forfaits.blade.php — un onglet actif change
   de couleur de zone, les cartes de son contenu héritent du glow de zone.
   C'est la différence structurelle demandée ("thème complètement distinct
   et non pas seulement distinct en couleurs") : zone = famille de produit,
   pas juste une variable de couleur globale repeinte. */
:root{
  --zone-wifi:   #00d4ff;
  --zone-fibre:  #00ff8c;
  --zone-iptv:   #c644fc;
}
.tab-btn.zone-wifi.active{background:linear-gradient(135deg,var(--zone-wifi),#0094b3);box-shadow:0 0 18px rgba(0,212,255,.45),0 6px 16px rgba(0,0,0,.3);color:#021018}
.tab-btn.zone-fibre.active{background:linear-gradient(135deg,var(--zone-fibre),#00b35e);box-shadow:0 0 18px rgba(0,255,140,.45),0 6px 16px rgba(0,0,0,.3);color:#021008}
.tab-btn.zone-iptv.active{background:linear-gradient(135deg,var(--zone-iptv),#8a1fd4);box-shadow:0 0 18px rgba(198,68,252,.45),0 6px 16px rgba(0,0,0,.3);color:#fff}
.tab-btn.zone-wifi:not(.active):hover{border-color:var(--zone-wifi);color:var(--zone-wifi)}
.tab-btn.zone-fibre:not(.active):hover{border-color:var(--zone-fibre);color:var(--zone-fibre)}
.tab-btn.zone-iptv:not(.active):hover{border-color:var(--zone-iptv);color:var(--zone-iptv)}

.zone-grid-wifi .plan-card{border-left:3px solid var(--zone-wifi)}
.zone-grid-wifi .plan-card:hover{border-color:var(--zone-wifi);box-shadow:0 18px 38px rgba(0,0,0,.4),0 0 24px rgba(0,212,255,.22)}
.zone-grid-wifi .plan-ref,.zone-grid-wifi .plan-price{color:var(--zone-wifi)}

.zone-grid-fibre .plan-card{border-left:3px solid var(--zone-fibre);background:rgba(0,255,140,.025)}
.zone-grid-fibre .plan-card:hover{border-color:var(--zone-fibre);box-shadow:0 18px 38px rgba(0,0,0,.4),0 0 24px rgba(0,255,140,.22)}
.zone-grid-fibre .plan-ref,.zone-grid-fibre .plan-price{color:var(--zone-fibre)}
.zone-grid-fibre .btn-prime{background:linear-gradient(135deg,var(--zone-fibre),#00b35e);box-shadow:0 8px 22px rgba(0,255,140,.28)}

.zone-grid-iptv .plan-card{border-left:3px solid var(--zone-iptv);background:rgba(198,68,252,.03)}
.zone-grid-iptv .plan-card:hover{border-color:var(--zone-iptv);box-shadow:0 18px 38px rgba(0,0,0,.4),0 0 24px rgba(198,68,252,.25)}
.zone-grid-iptv .plan-ref,.zone-grid-iptv .plan-price{color:var(--zone-iptv)}
.zone-grid-iptv .btn-prime{background:linear-gradient(135deg,var(--zone-iptv),#8a1fd4);box-shadow:0 8px 22px rgba(198,68,252,.3)}

/* COUVERTURE & TECHNOLOGIE — 4 puces réelles (voir forfaits.blade.php) */
.coverage-section{margin-top:22px}
.coverage-section h4{font-family:'Orbitron',monospace;font-size:.85rem;color:var(--zone-fibre);margin-bottom:12px;letter-spacing:.5px}
.coverage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.coverage-item{background:rgba(0,255,140,.05);border:1px solid rgba(0,255,140,.2);border-radius:10px;padding:10px 14px;font-size:.78rem;color:#cdeede}

/* INSTALLATION & FRAIS — 5 postes réels distincts du standard/étendu générique */
.install-section h4{font-family:'Orbitron',monospace;font-size:.85rem;color:var(--orange);margin-bottom:12px;letter-spacing:.5px}

/* PACK CARDS */
.packs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.pack-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px 22px;backdrop-filter:blur(18px);transition:all .35s;position:relative;overflow:hidden}
.pack-card:hover{border-color:var(--orange);transform:translateY(-5px);box-shadow:0 22px 44px rgba(0,0,0,.4),var(--glow-o)}
.pack-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:0;transition:opacity .35s}
.pack-card:hover::before{opacity:1}
.pack-icon{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px}
.pi-blue{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.24)}
.pi-orange{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.24)}
.pi-amber{background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.24)}
.pack-ref{font-size:.61rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:5px}
.cr{color:var(--cyan)}.or{color:var(--orange)}.am{color:var(--amber)}
.pack-name{font-family:'Orbitron',monospace;font-size:.88rem;font-weight:700;color:var(--white);margin-bottom:8px}
.pack-desc{font-size:.79rem;color:var(--muted);line-height:1.65;margin-bottom:14px}
.pack-feats{list-style:none;margin-bottom:16px}
.pack-feats li{font-size:.77rem;color:var(--muted);padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:7px}
.pack-feats li::before{content:'✓';color:var(--cyan);font-weight:800;flex-shrink:0}
.pack-price-lbl{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.pack-price-val{font-family:'Orbitron',monospace;font-size:1rem;font-weight:900;color:var(--orange)}
.pack-cta{display:block;width:100%;text-align:center;padding:9px;border-radius:9px;border:1px solid var(--border);color:var(--white);font-family:'Exo 2',sans-serif;font-weight:600;font-size:.8rem;cursor:pointer;transition:all .25s;background:transparent;margin-top:12px;text-decoration:none}
.pack-cta:hover{background:linear-gradient(135deg,var(--orange),var(--orange2));border-color:transparent;box-shadow:0 8px 22px rgba(255,176,32,.3)}

/* CONTACT CARDS */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:22px}
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:18px 12px;backdrop-filter:blur(18px);text-align:center;transition:all .3s}
.contact-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--glow-c)}
.cc-icon{font-size:1.4rem;margin-bottom:8px}.cc-label{font-family:'Orbitron',monospace;font-size:.63rem;color:var(--cyan);letter-spacing:1px;margin-bottom:5px}
.cc-val{font-size:.86rem;color:var(--white);font-weight:600}.cc-sub{font-size:.66rem;color:var(--muted);margin-top:2px}

/* FAQ */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;transition:border-color .3s}
.faq-item:hover{border-color:rgba(0,212,255,.28)}
.faq-q{width:100%;background:transparent;border:none;color:var(--white);font-family:'Exo 2',sans-serif;font-size:.87rem;font-weight:600;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left;gap:10px}
.faq-q:hover{color:var(--cyan)}
.faq-arrow{font-size:.74rem;color:var(--muted);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--orange)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 20px;color:var(--muted);font-size:.82rem;line-height:1.7}
.faq-item.open .faq-a{max-height:300px;padding:0 20px 16px}

/* PAYMENT */
.pay-wrap{max-width:560px;margin:0 auto;padding:32px 18px 72px}
.order-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:16px;backdrop-filter:blur(20px)}
.box-title{font-family:'Orbitron',monospace;font-size:.7rem;color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:13px}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.85rem}
.order-row:last-child{border:none;font-weight:700;padding-top:11px}
.order-row .lbl{color:var(--muted)}.order-row .val{color:var(--white)}
.order-row.tot .val{color:var(--orange);font-family:'Orbitron',monospace}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.method-btn{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:12px 5px;cursor:pointer;text-align:center;transition:all .25s}
.method-btn:hover,.method-btn.sel{border-color:var(--orange);background:rgba(255,176,32,.08);box-shadow:0 0 12px rgba(255,176,32,.18)}
.method-ico{font-size:1.2rem;margin-bottom:3px}.method-lbl{font-size:.64rem;color:var(--muted);font-weight:500}
.method-btn.sel .method-lbl{color:var(--orange)}

/* ANIMATIONS */
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes ring-pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}
.au{animation:fadeUp .55s ease both}
.ad{animation:fadeDown .55s ease both}
.a1{animation-delay:.08s}.a2{animation-delay:.16s}.a3{animation-delay:.24s}.a4{animation-delay:.32s}.a5{animation-delay:.4s}

/* SCROLLBAR */
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}

@media(max-width:600px){
  nav{padding:9px 14px}.nav-links{display:none}
  .method-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr}
}


/* ===== Payment page layout cleanup ===== */
.pay-page-wrap{max-width:1240px!important;padding:24px 18px 72px;margin:0 auto}
.pay-shell{display:grid;grid-template-columns:minmax(320px,360px) minmax(0,1fr);gap:24px;align-items:start}
.pay-sidebar,.pay-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.pay-sidebar{position:static}
.pay-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.16);min-width:0;overflow:hidden}
.pay-card.tight{padding:18px}
.pay-card-title{font-family:'Orbitron',monospace;font-size:.82rem;font-weight:700;letter-spacing:1px;color:var(--white);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.summary-list{display:flex;flex-direction:column;gap:10px}
.summary-item{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.summary-item:last-child{border-bottom:none;padding-bottom:0}
.summary-item .k{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.summary-item .v{font-size:.9rem;color:var(--white);font-weight:600;text-align:right;overflow-wrap:anywhere}
.summary-item.total .v{font-family:'Orbitron',monospace;color:var(--orange);font-size:1.12rem}
.currency-row{display:flex;gap:8px;flex-wrap:wrap}
.currency-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:.74rem;cursor:pointer;transition:all .2s}
.currency-btn:hover,.currency-btn.sel{border-color:var(--cyan);color:var(--cyan);background:rgba(0,212,255,.07)}
.pay-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pay-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);font-size:.68rem;color:var(--muted)}
.gw-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.gw-tab{appearance:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--muted);padding:12px 14px;border-radius:14px;cursor:pointer;font:700 .78rem 'Exo 2',sans-serif;transition:all .2s ease;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.gw-tab:hover{border-color:rgba(255,176,32,.45);color:var(--white);background:rgba(255,255,255,.045)}
.gw-tab.sel{background:linear-gradient(180deg,rgba(255,176,32,.15),rgba(255,176,32,.06));border-color:var(--orange);color:var(--orange)}
.gw-section{display:none}
.gw-section.active{display:block}
.gw-section-title{font-family:'Orbitron',monospace;font-size:.7rem;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;margin:2px 0 12px;display:flex;align-items:center;gap:10px}
.gw-section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
.gw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.gw-grid.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.gw-btn{width:100%;min-width:0;min-height:110px;padding:16px 14px;box-sizing:border-box;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;cursor:pointer;text-align:left;transition:all .22s ease;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:6px;box-shadow:0 12px 28px rgba(0,0,0,.16);overflow:hidden}
.gw-btn:hover{border-color:rgba(255,176,32,.5);background:linear-gradient(180deg,rgba(255,176,32,.09),rgba(255,255,255,.03));transform:translateY(-2px)}
.gw-btn.sel{border-color:var(--orange);background:linear-gradient(180deg,rgba(255,176,32,.16),rgba(255,176,32,.07));box-shadow:0 16px 32px rgba(255,176,32,.12)}
.gw-btn.sel::after{content:'✓';position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:.75rem;color:#111;background:var(--orange);font-weight:900}
.gw-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:.72rem;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.18);margin-bottom:8px;flex:0 0 auto}
.logo-mtn{background:#ffcc00;color:#111}.logo-orange{background:#ff7900}.logo-mpesa{background:#0a8f3d}.logo-vodapay{background:#e60000}.logo-airtel{background:#d71920}.logo-moov{background:#0057b8}.logo-telecash{background:#00a3e0}.logo-tigo{background:#15396b}.logo-telebirr{background:#1da1f2}.logo-blue{background:#0066ff}.logo-glo{background:#75b52b}.logo-emoney{background:#6c5ce7}.logo-easypaisa{background:#0f7f6d}.logo-boost{background:#662d91}.logo-gcash{background:#0070ba}.logo-bkash{background:#e2136e}.logo-card{background:#111827}.logo-visa{background:#1434cb}.logo-mastercard{background:#eb001b}.logo-amex{background:#2e77bb}.logo-paypal{background:#003087}
.gw-icon{font-size:1.55rem;line-height:1;margin-bottom:10px}
.gw-label{font-size:.82rem;color:var(--white);font-weight:700;line-height:1.35;max-width:100%;overflow-wrap:anywhere}
.gw-sub{font-size:.68rem;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.gw-badge{display:inline-flex;align-items:center;font-size:.6rem;padding:4px 8px;border-radius:999px;margin-top:auto;font-weight:800;letter-spacing:.2px}
.badge-local{background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.24);color:var(--green)}
.badge-intl{background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.24);color:var(--cyan)}
.badge-card{background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.24);color:var(--orange)}
.gw-info{background:rgba(0,212,255,.05);border:1px solid var(--border);border-radius:10px;padding:12px 15px;margin-top:12px;font-size:.78rem;color:var(--muted);line-height:1.6;display:none}
.gw-info.show{display:block}
.gw-info strong{color:var(--white)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .inp-grp:last-child{grid-column:1/-1}
.action-stack{display:flex;flex-direction:column;gap:10px}
.pay-help{font-size:.76rem;color:var(--muted);line-height:1.6;margin-bottom:6px}
#stripe-card-wrap,#paypal-btn-wrap{display:none;margin-bottom:14px}
#stripe-card-element{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r);padding:14px 15px;transition:border-color .25s}
#stripe-card-element.focused{border-color:var(--cyan)}
#stripe-card-errors{color:#f77;font-size:.75rem;margin-top:6px}
.gw-iframe-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:14px}
.gw-iframe-wrap iframe{width:100%;height:480px;border:none;display:block}
.ussd-box{background:rgba(255,179,71,.05);border:1px solid rgba(255,179,71,.2);border-radius:11px;padding:16px;margin-top:14px}
.ussd-label{font-family:'Orbitron',monospace;font-size:.65rem;color:var(--amber);letter-spacing:1px;margin-bottom:8px}
.ussd-text{font-size:.83rem;color:var(--muted);line-height:1.7}
.ussd-text strong{color:var(--white)}
.cash-box{text-align:center;padding:22px 0}
.cash-amount{font-family:'Orbitron',monospace;font-size:1.6rem;font-weight:900;color:var(--orange)}
@media (max-width:1240px){.pay-page-wrap{max-width:1120px!important}.gw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1080px){.pay-shell{grid-template-columns:320px minmax(0,1fr)}.gw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.pay-page-wrap{max-width:560px!important}.pay-shell{grid-template-columns:1fr}.pay-sidebar{order:2}.pay-main{order:1}.gw-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.gw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pay-page-wrap{padding:24px 14px 64px}.pay-card,.pay-card.tight{padding:14px}.gw-tabs{gap:8px}.gw-tab{padding:10px 8px;border-radius:12px;font-size:.72rem}.gw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gw-btn{padding:12px 10px;min-height:96px}.gw-label{font-size:.72rem}.gw-sub{font-size:.62rem}.form-grid{grid-template-columns:1fr}}


/* ── Payment step visibility — only active step shown ── */
.pay-step{display:none}
.pay-step.active{display:block}

/* ── Payment verification polling block ── */
.poll-box{background:rgba(0,212,255,.04);border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;text-align:center}
.poll-icon{font-size:2rem;line-height:1}
.poll-label{display:flex;align-items:center;gap:8px;font-family:'Orbitron',monospace;font-size:.64rem;color:var(--cyan);letter-spacing:1.5px;text-transform:uppercase;flex-wrap:wrap;justify-content:center}
.poll-spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(0,212,255,.22);border-top-color:var(--cyan);border-radius:50%;animation:sp .7s linear infinite;flex-shrink:0}
.poll-timer{font-family:'Orbitron',monospace;font-size:1.1rem;font-weight:700;color:var(--white);letter-spacing:2px}

/* ── Formulaire adaptatif paiement ── */
.form-section{margin-top:14px}
.method-badge-row{display:flex;align-items:center;gap:9px;padding:10px 14px;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);border-radius:10px;margin-bottom:14px;font-size:.82rem}
.method-badge{font-size:1.3rem;line-height:1;flex-shrink:0}
.method-badge-label{font-weight:600;color:var(--cyan);letter-spacing:.5px}

/* Détection opérateur depuis téléphone */
.operator-detect-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.18);border-radius:8px;margin-top:6px;font-size:.79rem;color:#00ff88}
.op-detect-icon{font-size:1.1rem}
.op-detect-label{font-weight:600}

/* Stripe Elements */
.stripe-header{display:flex;align-items:center;gap:8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:9px}
.stripe-badge{background:rgba(99,91,255,.18);color:#9a8fff;border-radius:5px;padding:2px 8px;font-size:.65rem;letter-spacing:.5px;font-weight:700}
.stripe-element-wrap{background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.2);border-radius:10px;padding:13px 14px;transition:border-color .2s}
.stripe-element-wrap.focused{border-color:rgba(0,212,255,.55);box-shadow:0 0 0 2px rgba(0,212,255,.1)}
.stripe-errors{color:#ff6b6b;font-size:.78rem;margin-top:7px;min-height:18px}

/* PayPal section */
.paypal-section{text-align:center}
.paypal-header{font-size:.78rem;color:var(--muted);margin-bottom:12px;line-height:1.5}
#paypal-button-container{max-width:320px;margin:0 auto}

/* Redirection gateway */
.redirect-info{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.12);border-radius:10px}
.redirect-info-icon{font-size:1.6rem;flex-shrink:0;margin-top:2px}
.redirect-info-text{font-size:.82rem;color:var(--muted);line-height:1.6}

/* Cash preview */
.cash-preview{padding:14px 16px;background:rgba(255,176,32,.05);border:1px solid rgba(255,176,32,.2);border-radius:10px}
.cash-preview-icon{font-size:1.8rem;margin-bottom:8px;text-align:center}
.cash-preview-text{font-size:.8rem;color:var(--muted);line-height:1.7;margin-bottom:10px;text-align:center}
.cash-preview-contacts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* Logo image dans gw-btn */
.gw-logo-img{width:40px;height:40px;object-fit:contain;border-radius:8px}

/* full-width dans form-grid */
.form-grid .inp-grp.full-width{grid-column:1/-1}

/* Bouton pri caché (PayPal) */
#action-stack{margin-top:18px}