/* Portail client CodeTicket (achat de ticket WiFi) — léger, mobile d'abord, sans dépendance externe */
:root{--bg:#f1f5f9;--card:#fff;--text:#0f172a;--muted:#64748b;--light:#94a3b8;--border:#e2e8f0;--primary:#2563eb;--primary-soft:#dbeafe;--success:#059669;--success-soft:#d1fae5;--danger:#dc2626;--danger-soft:#fee2e2;--warning:#b45309;--warning-soft:#fef3c7;--shadow:0 10px 30px -12px rgba(15,23,42,.18)}
@media (prefers-color-scheme:dark){:root{--bg:#0b1120;--card:#111a2e;--text:#e2e8f0;--muted:#94a3b8;--light:#64748b;--border:#1e293b;--primary:#3b82f6;--primary-soft:rgba(59,130,246,.15);--success:#34d399;--success-soft:rgba(16,185,129,.15);--danger:#f87171;--danger-soft:rgba(239,68,68,.15);--warning:#fbbf24;--warning-soft:rgba(245,158,11,.15);--shadow:0 10px 30px -12px rgba(0,0,0,.6)}}
*{box-sizing:border-box}
html,body{margin:0}
body.cp{background:var(--bg);color:var(--text);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
.cp-main{max-width:460px;margin:0 auto;padding:0 16px 28px}
a{color:var(--primary)}
.cp-hero{margin:0 -16px 18px;padding:28px 20px 56px;text-align:center;color:#fff;border-radius:0 0 28px 28px;background:radial-gradient(400px 200px at 0 0,rgba(6,182,212,.5),transparent 60%),linear-gradient(145deg,#1e40af,#2563eb 55%,#0891b2)}
.cp-hero-ico{width:58px;height:58px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.cp-hero-ico svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.cp-hero h1{font:800 24px/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;margin:0}
.cp-hero p{margin:6px 0 0;color:rgba(255,255,255,.85);font-size:14px}
.cp-hero.is-success{background:radial-gradient(400px 200px at 100% 0,rgba(52,211,153,.45),transparent 60%),linear-gradient(145deg,#047857,#059669 55%,#0d9488)}
.cp-pull{margin-top:-48px}
.cp-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.cp-card+.cp-card{margin-top:12px}
.cp-title{font:700 13px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:22px 4px 10px}
.cp-steps{display:flex;justify-content:center;gap:6px;margin:0 0 4px;font-size:12px;color:rgba(255,255,255,.85)}
.cp-steps b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.25);font-size:11px;margin-right:4px}
.cp-pkg{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px solid var(--border);border-radius:16px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;box-shadow:var(--shadow)}
.cp-pkg+.cp-pkg{margin-top:10px}
.cp-pkg:hover{border-color:var(--primary);transform:translateY(-1px)}
.cp-pkg-ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
.cp-pkg-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cp-pkg-main{flex:1;min-width:0}
.cp-pkg-name{font-weight:700;font-size:15.5px}
.cp-pkg-desc{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-pkg-price{text-align:right;flex-shrink:0}
.cp-pkg-price b{display:block;font:800 18px/1.1 "Inter Tight",Inter,sans-serif;color:var(--text)}
.cp-pkg-price small{font-size:11px;color:var(--muted);font-weight:600}
.cp-pkg.is-out{opacity:.55;box-shadow:none;pointer-events:none}
.cp-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--danger-soft);color:var(--danger)}
.cp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 18px;border:0;border-radius:14px;background:var(--primary);color:#fff;font:700 16px/1 Inter,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px -10px var(--primary);transition:filter .15s,transform .15s}
.cp-btn:hover{filter:brightness(1.08)}
.cp-btn:active{transform:scale(.99)}
.cp-btn:disabled{opacity:.7;cursor:wait}
.cp-btn.is-loading::after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:cp-spin .7s linear infinite}
@keyframes cp-spin{to{transform:rotate(360deg)}}
.cp-btn.is-success{background:var(--success);box-shadow:0 10px 24px -10px var(--success)}
.cp-btn.is-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border);box-shadow:none}
.cp-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cp-label{display:block;font-weight:600;font-size:13.5px;margin:0 0 6px}
.cp-input{width:100%;height:52px;padding:0 14px;border:1.5px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);font:500 17px Inter,sans-serif}
.cp-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.cp-input.is-mono{font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.06em}
.cp-help{font-size:12.5px;color:var(--muted);margin:6px 2px 0}
.cp-field+.cp-field{margin-top:14px}
.cp-summary{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cp-summary b{font:800 22px/1 "Inter Tight",Inter,sans-serif}
.cp-alert{padding:12px 14px;border-radius:14px;font-size:14px;margin:14px 0}
.cp-alert.danger{background:var(--danger-soft);color:var(--danger)}
.cp-alert.warning{background:var(--warning-soft);color:var(--warning)}
.cp-alert.info{background:var(--primary-soft);color:var(--primary)}
.cp-ops{display:flex;justify-content:center;gap:8px;margin-top:14px}
.cp-ops img{width:34px;height:34px;border-radius:9px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.cp-code{border:1.5px dashed var(--primary);border-radius:16px;padding:16px;text-align:center;background:var(--primary-soft)}
.cp-code+.cp-code{margin-top:10px}
.cp-code-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cp-code-value{font:700 30px/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--text);margin:6px 0 12px;word-break:break-all;user-select:all}
.cp-code-value.is-small{font-size:22px;letter-spacing:.06em}
.cp-copy{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:0;border-radius:999px;background:var(--card);color:var(--primary);font:700 13.5px Inter,sans-serif;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.cp-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.cp-copy.is-done{color:var(--success)}
.cp-ref{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:13.5px;margin-top:12px}
.cp-ref b{font-family:"JetBrains Mono",monospace;font-size:14.5px}
.cp-ticket{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);text-decoration:none;color:inherit}
.cp-ticket+.cp-ticket{margin-top:8px}
.cp-ticket small{display:block;color:var(--muted);font-size:12px}
.cp-chev{margin-left:auto;color:var(--light)}
.cp-contact{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:14px;color:var(--muted)}
.cp-contact a{font-weight:700;text-decoration:none}
.cp-back{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.9);text-decoration:none;font-size:13.5px;font-weight:600;position:absolute;left:16px;top:16px}
.cp-hero{position:relative}
.cp-foot{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:28px;font-size:12.5px;color:var(--light)}
.cp-foot a{color:var(--muted);font-weight:600}
.cp-empty{text-align:center;color:var(--muted);padding:22px 10px}
.cp-pull{position:relative;z-index:1}
/* Paiement en ligne : attente / échec */
.cp-hero.is-wait{background:radial-gradient(400px 200px at 100% 0,rgba(251,191,36,.45),transparent 60%),linear-gradient(145deg,#b45309,#d97706 55%,#ea580c)}
.cp-hero.is-fail{background:radial-gradient(400px 200px at 100% 0,rgba(248,113,113,.4),transparent 60%),linear-gradient(145deg,#991b1b,#dc2626 60%,#e11d48)}
.cp-spin{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:cp-spin .8s linear infinite;margin:0 auto 10px}
.cp-wait{text-align:center;color:var(--muted);font-size:14px}
/* Achat direct (clic sur le forfait → page de paiement) */
button.cp-pkg{width:100%;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.cp-pkg-form+.cp-pkg-form,.cp-pkg-form+.cp-pkg,.cp-pkg+.cp-pkg-form{margin-top:10px}
.cp-pkg-form{margin:0}
button.cp-pkg[disabled]{opacity:.6;cursor:wait}
/* Page ticket : sauvegarde gratuite du code */
.cp-keep{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.cp-btn.is-soft{background:var(--card);color:var(--text);border:1.5px solid var(--border);box-shadow:none;font-size:14.5px;min-height:48px}
.cp-btn.is-wa{background:#25d366;color:#fff;box-shadow:none;font-size:14.5px;min-height:48px}
.cp-btn svg{width:18px;height:18px;flex:none}
.cp-shot{display:flex;gap:10px;align-items:center;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:14px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.cp-shot b{font-weight:700}
/* Mes tickets : code + connexion directe */
.cp-tk{border:1px solid var(--border);border-radius:14px;background:var(--card);overflow:hidden}
.cp-tk+.cp-tk{margin-top:10px}
.cp-tk .cp-ticket{border:0;border-radius:0}
.cp-tk-foot{display:flex;align-items:center;gap:10px;padding:0 14px 14px}
.cp-tk-code{flex:1;min-width:0;font:700 18px "JetBrains Mono",monospace;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tk-code small{display:block;font:500 11px Inter,sans-serif;color:var(--muted);letter-spacing:0}
.cp-tk-go{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;background:var(--primary);color:#fff;font:700 14px Inter,sans-serif;text-decoration:none;white-space:nowrap}
.cp-tk-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cp-old{margin-top:14px}
.cp-old summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;padding:6px 2px}
.cp-ticket.is-old{opacity:.7;margin-top:8px}
/* Page « Paiement réussi » : bouton principal « Se connecter au WiFi » */
.cp-connect{margin:16px 0 18px}
.cp-btn.is-connect{min-height:62px;font-size:18px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 14px 30px -12px #2563eb;position:relative;animation:cp-pulse 2s ease-out infinite}
.cp-btn.is-connect svg{width:22px;height:22px}
@keyframes cp-pulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.55),0 14px 30px -12px #2563eb}70%{box-shadow:0 0 0 14px rgba(37,99,235,0),0 14px 30px -12px #2563eb}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 14px 30px -12px #2563eb}}
@media (prefers-reduced-motion:reduce){.cp-btn.is-connect{animation:none}}
/* Achat : reprise du paiement / conseil fenêtre WiFi Android */
.cp-resume{display:block;text-decoration:none;margin-bottom:14px;padding:14px 16px;border-radius:16px;background:var(--success-soft,#dcfce7);border:1.5px solid var(--success,#16a34a);color:var(--text)}
.cp-resume b{display:block;font-size:15px;color:var(--success,#16a34a);margin-bottom:2px}
.cp-resume span{font-size:13.5px}
.cp-resume em{display:inline-block;margin-top:8px;font-style:normal;font-weight:700;background:var(--success,#16a34a);color:#fff;padding:8px 14px;border-radius:10px}
.cp-tip{font-size:12.5px;line-height:1.45;color:var(--muted);background:var(--card);border:1px dashed var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.cp-tip b{color:var(--text)}
.cp-resume-tip a{color:var(--primary);font-weight:700}
/* Fenêtre WiFi d'Android : inviter à payer dans le navigateur */
.cp-browser{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:14px 16px;border-radius:16px;background:var(--primary-soft);border:1.5px solid var(--primary);color:var(--text)}
.cp-browser b{font-size:15px;color:var(--primary)}
.cp-browser span{font-size:13.5px;line-height:1.45}
.cp-browser .cp-btn{min-height:48px;font-size:15.5px}
.cp-browser small{font-size:12px;line-height:1.45;color:var(--muted)}
/* Achat : reprise du paiement (retour depuis la fenêtre WiFi d'Android) */
.cp-resume-card{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:14px 16px;border-radius:16px;background:var(--success-soft);border:1.5px solid var(--success);color:var(--text)}
.cp-resume-card b{font-size:15px;color:var(--success)}
.cp-resume-card span{font-size:14px;font-weight:600}
.cp-resume-card form{margin:0}
.cp-resume-card .cp-btn{min-height:50px;font-size:16px}
.cp-resume-card small{font-size:12.5px;color:var(--muted);text-align:center}
.cp-resume-card small a{color:var(--primary);font-weight:700}

/* Tutoriel vidéo (bouton « Comment payer ? » + fenêtre) */
.cp-help-wrap{text-align:center;margin:-2px 0 12px}
.cp-help-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1.5px solid var(--border);border-radius:999px;background:var(--card);color:var(--primary);font:700 13.5px Inter,sans-serif;cursor:pointer}
.cp-help-btn:hover{border-color:var(--primary)}
.cp-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,23,.72)}
.cp-modal[hidden]{display:none}
.cp-modal-box{position:relative;width:100%;max-width:420px;background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.cp-modal-box h3{margin:2px 0 12px;font:800 18px Inter,sans-serif;color:var(--text);text-align:center}
.cp-modal-box video{width:100%;border-radius:14px;background:#000;display:block}
.cp-modal-x{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:var(--bg);color:var(--text);font-size:20px;line-height:1;cursor:pointer}