/* Activation QR sécurisée — v1.0.8 */
.activation-page{padding-top:150px;min-height:100vh;background:radial-gradient(circle at 50% 8%,rgba(30,111,255,.16),transparent 34%),radial-gradient(circle at 80% 38%,rgba(152,62,255,.12),transparent 30%)}
.activation-page-container{max-width:980px}
.activation-intro{text-align:center;max-width:760px;margin:0 auto 28px}
.activation-intro h1{margin:8px 0 12px;font-size:clamp(2rem,5vw,3.5rem);line-height:1.06}
.activation-intro p{max-width:680px;margin:0 auto;color:var(--muted);font-size:1.05rem;line-height:1.75}
.activation-progress{display:flex;align-items:center;justify-content:center;max-width:650px;margin:0 auto 26px}
.activation-progress-item{display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap}
.activation-progress-item span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);font-weight:800}
.activation-progress-item strong{font-size:.88rem}
.activation-progress-item.active{color:#fff}
.activation-progress-item.active span{border-color:#2ea8ff;background:linear-gradient(135deg,#1568ff,#8b4bff);box-shadow:0 0 24px rgba(45,140,255,.4)}
.activation-progress-item.done{color:#68e5a4}
.activation-progress-item.done span{border-color:#43d88c;background:rgba(67,216,140,.14)}
.activation-progress-line{height:1px;flex:1;max-width:90px;margin:0 12px;background:rgba(255,255,255,.15)}
.activation-shell{max-width:720px;margin:0 auto;padding:clamp(24px,5vw,46px);border-color:rgba(77,153,255,.34);background:linear-gradient(145deg,rgba(13,22,55,.96),rgba(13,8,35,.96));box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 54px rgba(38,111,255,.09)}
.activation-step[hidden],.activation-message[hidden],.activation-form[hidden],.activation-auth-tabs[hidden],#qr-continue[hidden],.qr-recognized[hidden]{display:none!important}
.activation-step-heading{display:flex;align-items:center;gap:15px;margin-bottom:20px}
.activation-step-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:16px;border:1px solid rgba(55,174,255,.45);background:linear-gradient(145deg,rgba(21,113,255,.24),rgba(120,64,255,.18));color:#dff4ff;font-weight:900;letter-spacing:.03em;box-shadow:inset 0 0 20px rgba(66,152,255,.08)}
.activation-step-kicker{display:block;margin-bottom:4px;color:#66c7ff;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800}
.activation-step h2{margin:0;font-size:clamp(1.55rem,4vw,2.15rem)}
.activation-step-description{margin:-4px 0 22px;color:var(--muted);line-height:1.7}
.activation-message{margin:0 0 22px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,95,116,.36);background:rgba(255,68,95,.1);color:#ffdbe1;line-height:1.55}
.activation-message.success{border-color:rgba(75,222,143,.38);background:rgba(59,203,129,.1);color:#d8ffeb}
.qr-recognized{display:flex;gap:15px;align-items:flex-start;margin:0 0 22px;padding:18px;border-radius:17px;border:1px solid rgba(68,218,145,.38);background:linear-gradient(135deg,rgba(40,192,117,.13),rgba(31,120,255,.09))}
.qr-recognized-check{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#3bd383;color:#06110b;font-weight:1000;font-size:1.2rem;box-shadow:0 0 24px rgba(59,211,131,.25)}
.qr-recognized strong{display:block;color:#e7fff2;font-size:1.02rem}
.qr-recognized p{margin:5px 0 0;color:#b9d8c8;line-height:1.55}
.activation-form{display:grid;gap:11px}
.activation-form label{font-weight:750;color:#f2f6ff}
.activation-form input{width:100%;min-height:54px;padding:0 16px;border-radius:13px;border:1px solid rgba(135,166,225,.28);background:rgba(4,8,24,.72);color:#fff;font:inherit;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.activation-form input:focus{border-color:#3ebeff;box-shadow:0 0 0 4px rgba(42,169,255,.12);background:rgba(6,12,32,.92)}
.activation-form input::placeholder{color:#78849d}
.activation-form small{margin:-2px 0 8px;color:var(--muted);line-height:1.5}
.activation-form .btn{margin-top:8px;min-height:52px}
.activation-email-flow{max-width:600px;margin:18px auto 0}
.activation-email-flow .activation-form{padding:18px;border-radius:16px;border:1px solid rgba(119,151,213,.16);background:linear-gradient(180deg,rgba(8,15,36,.54),rgba(4,8,22,.34))}
.activation-email-state{display:flex;flex-direction:column;gap:4px;margin-bottom:4px;padding:11px 13px;border-radius:12px;background:rgba(70,187,255,.07);border:1px solid rgba(70,187,255,.14)}
.activation-email-state strong{font-size:.94rem;color:#eef8ff}
.activation-email-state span{font-size:.88rem;color:#91cde9;overflow-wrap:anywhere}
.activation-email-flow .activation-code-input{max-width:330px;margin-inline:auto}
.activation-email-flow .activation-otp-form label,.activation-email-flow .activation-otp-form small{text-align:center}
.activation-otp-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.activation-otp-actions .activation-text-button{margin-top:0}
#device-code,.activation-code-input{text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:1.2rem;font-weight:900}
.activation-code-input{font-size:1.45rem!important;letter-spacing:.28em!important}
.activation-text-button{display:block;margin:14px auto 0;padding:7px 9px;border:0;background:transparent;color:#87cfff;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(135,207,255,.35);text-underline-offset:4px}
.activation-text-button:hover,.activation-text-button:focus-visible{color:#fff}
.activation-back-button{margin-top:24px}
.activation-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:20px;padding:6px;border-radius:15px;background:rgba(3,7,21,.7);border:1px solid rgba(255,255,255,.08)}
.activation-auth-tab{min-height:44px;padding:8px 12px;border:0;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-weight:800;cursor:pointer}
.activation-auth-tab.active{background:linear-gradient(135deg,rgba(34,126,255,.28),rgba(121,64,255,.24));color:#fff;box-shadow:inset 0 0 0 1px rgba(81,165,255,.32)}
.field-optional{color:var(--muted);font-weight:500}
.activation-otp-note{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:6px;padding:12px 14px;border-radius:12px;background:rgba(65,200,134,.09);color:#d9ffea}
.activation-otp-note span{color:#9fd8bb;overflow-wrap:anywhere;text-align:right}
.activation-processing{text-align:center;padding:32px 0}
.activation-spinner{width:54px;height:54px;margin:0 auto 22px;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:#41bcff;animation:activation-spin .8s linear infinite}
@keyframes activation-spin{to{transform:rotate(360deg)}}
.activation-processing p{color:var(--muted)}
.activation-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.activation-plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-height:150px;padding:22px;border-radius:18px;border:1px solid rgba(117,157,225,.27);background:linear-gradient(145deg,rgba(21,35,74,.86),rgba(11,11,35,.92));color:#fff;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.activation-plan:hover,.activation-plan:focus-visible{transform:translateY(-3px) scale(1.015);border-color:#49baff;box-shadow:0 16px 38px rgba(0,0,0,.25),0 0 32px rgba(51,151,255,.22);filter:brightness(1.07);outline:none}
.activation-plan.featured{border-color:rgba(255,205,78,.48)}
.activation-plan span{font-weight:800}
.activation-plan strong{font-size:2rem;color:#ffd45a}
.activation-plan small{color:var(--muted)}
.activation-secure-note{margin:20px 0 0;color:var(--muted);font-size:.9rem;text-align:center}
.activation-result{text-align:center;padding:10px 0}
.activation-result-icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,#36da83,#23a76e);color:#04120a;font-size:2rem;font-weight:1000;box-shadow:0 0 42px rgba(51,215,132,.28)}
.activation-result-icon.pending{background:linear-gradient(135deg,#45bfff,#7867ff);color:#fff}
.activation-result h2{margin:6px 0 12px}
#success-title.is-already-active{color:#d8aa32;text-shadow:0 0 18px rgba(216,170,50,.28);transform-origin:center;animation:already-active-attention .8s ease-in-out 5}
@keyframes already-active-attention{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.activation-result>p{max-width:530px;margin:0 auto 22px;color:var(--muted);line-height:1.7}
.activation-order-reference{margin:0 auto 22px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);color:#dbe8ff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
.activation-tv-note{margin:20px 0}
.activation-help{max-width:1100px;margin:22px auto 0;padding:18px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);text-align:center}
.activation-help strong{color:#fff}
.activation-help p{margin:6px 0;color:var(--muted);line-height:1.55}
.activation-help a{color:#7dceff;font-weight:750}
@media (max-width:720px){.activation-page{padding-top:118px}.activation-progress-item strong{display:none}.activation-progress-line{margin:0 7px}.activation-shell{padding:24px 18px}.activation-plans{grid-template-columns:1fr}.activation-auth-tabs{grid-template-columns:1fr}.activation-otp-note{align-items:flex-start;flex-direction:column}.activation-otp-note span{text-align:left}.activation-step-heading{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.activation-spinner{animation-duration:1.6s}.activation-plan,.activation-path{transition:none}#success-title.is-already-active{animation:none}}

/* Séparation essai gratuit / paiement — v1.1.0 */
.activation-device-code-wrap{display:flex;align-items:stretch;width:100%;border:1px solid rgba(135,166,225,.28);border-radius:13px;background:rgba(4,8,24,.72);overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s}
.activation-device-code-wrap:focus-within{border-color:#3ebeff;box-shadow:0 0 0 4px rgba(42,169,255,.12);background:rgba(6,12,32,.92)}
.activation-device-code-prefix{display:flex;align-items:center;padding:0 0 0 16px;color:#fff;font-size:1.2rem;font-weight:900;letter-spacing:.16em;user-select:none}
.activation-device-code-wrap #device-code{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;padding-left:6px;text-align:left;text-transform:none;letter-spacing:.16em}
.activation-paths{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.activation-path{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-height:190px;padding:22px;border-radius:18px;border:1px solid rgba(117,157,225,.27);background:linear-gradient(145deg,rgba(21,35,74,.86),rgba(11,11,35,.92));color:#fff;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.activation-path:hover,.activation-path:focus-visible{transform:translateY(-3px) scale(1.015);border-color:#49baff;box-shadow:0 16px 38px rgba(0,0,0,.25),0 0 32px rgba(51,151,255,.22);filter:brightness(1.07);outline:none}
.activation-path-trial{border-color:rgba(70,224,143,.42);background:linear-gradient(145deg,rgba(19,68,57,.55),rgba(10,20,34,.94))}
.activation-path-paid{border-color:rgba(255,205,78,.42)}
.activation-path-badge{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:#bcd8ff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.activation-path-trial .activation-path-badge{color:#a8f7cb;background:rgba(58,209,132,.1)}
.activation-path strong{font-size:1.15rem}
.activation-path small{color:var(--muted);line-height:1.55}
.activation-path-action{margin-top:auto;color:#7fd1ff;font-weight:800}
.activation-path-trial .activation-path-action{color:#78e7aa}
@media (max-width:720px){.activation-paths{grid-template-columns:1fr}}

/* V1.2.8.0 — lisibilite des petits textes de la page d'activation */
.activation-progress-item strong{font-size:.96rem}
.activation-step-kicker{font-size:.82rem}
.activation-form small{font-size:.92rem}
.activation-plan small{font-size:.92rem;line-height:1.5}
.activation-secure-note{font-size:.98rem;line-height:1.55}
.activation-path-badge{font-size:.80rem}
.activation-path small{font-size:.92rem;line-height:1.6}


/* PAIEMENTS COMPACTS — V1.3.0 FINAL */
.activation-payment-preview-v130{margin-top:24px;padding:20px;border-radius:18px;border:1px solid rgba(122,95,190,.30);background:linear-gradient(150deg,rgba(32,23,52,.52),rgba(8,9,25,.72))}
.activation-payment-preview-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}
.activation-payment-preview-head>strong{font-size:1.04rem;color:#fff}
.activation-payment-preview-head>span{display:inline-flex;gap:5px;padding:6px 10px;border-radius:999px;border:1px solid rgba(158,111,234,.32);background:rgba(118,67,199,.10);color:#c7a4ff;font-size:.82rem;font-weight:800}
.activation-payment-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.activation-payment-mini-card{display:flex;min-width:0;min-height:92px;padding:10px;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:14px;border:1px solid rgba(138,105,205,.24);background:rgba(6,8,23,.55);text-align:center}
.activation-payment-mini-card-gold{border-color:rgba(231,189,115,.34)}
.activation-payment-mini-card img{display:block;max-width:92%;height:48px;object-fit:contain}
.activation-payment-mini-card span{font-size:.79rem;font-weight:800;color:#f3effa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.activation-payment-preview-v130>p{margin:14px 0 0;color:var(--muted);font-size:.86rem;line-height:1.5;text-align:center}
@media(max-width:720px){.activation-payment-preview-head{align-items:flex-start;flex-direction:column}.activation-payment-mini-grid{grid-template-columns:1fr}.activation-payment-mini-card{min-height:84px}.activation-payment-mini-card img{height:44px}}

/* V1.3.0 FINAL — titre activation sur une ligne sur écran desktop */
@media (min-width:960px){
  .activation-page-container{max-width:1180px}
  .activation-intro{max-width:1180px}
  .activation-intro h1{font-size:clamp(2.45rem,4vw,3.25rem);white-space:nowrap}
}
@media (min-width:1200px){
  .activation-intro p{max-width:1120px;white-space:nowrap}
}


/* V1.3.1 — moyens de paiement au bon endroit dans le parcours d’activation */
.activation-payment-preview-v131{margin-top:24px;padding:20px;border-radius:20px;border:1px solid rgba(126,91,205,.30);background:radial-gradient(circle at 50% 0,rgba(118,70,205,.12),transparent 42%),linear-gradient(150deg,rgba(30,22,51,.64),rgba(7,8,22,.82))}
.activation-payment-preview-v131 .activation-payment-preview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.activation-payment-preview-v131 .activation-payment-preview-head>div>strong{display:block;color:#fff;font-size:1.08rem}
.activation-payment-preview-v131 .activation-payment-preview-head>span{padding:6px 10px;border-radius:999px;border:1px solid rgba(154,109,229,.30);background:rgba(116,65,190,.10);color:#c8a8ff;font-size:.76rem;font-weight:850;white-space:nowrap}
.activation-payment-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.activation-payment-method-card{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:196px;padding:13px 10px 12px;border-radius:16px;border:1px solid rgba(139,103,207,.27);background:linear-gradient(155deg,rgba(26,20,45,.82),rgba(8,8,22,.92));text-align:center}
.activation-payment-method-card-gold{border-color:rgba(224,182,91,.38);background:linear-gradient(155deg,rgba(36,29,27,.82),rgba(10,9,18,.92))}
.activation-payment-logo-stage{display:grid;place-items:center;width:100%;height:78px;margin-bottom:7px}
.activation-payment-logo-stage img{display:block;max-width:90%;max-height:70px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.23))}
.activation-payment-method-card h3{margin:1px 0 7px;font-size:.95rem;line-height:1.2}
.activation-payment-soon{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid rgba(154,109,229,.30);background:rgba(116,65,190,.10);color:#c8a8ff;font-size:.7rem;font-weight:850}
.activation-payment-soon-gold{border-color:rgba(224,182,91,.30);background:rgba(204,158,55,.10);color:#f0c75f}
.activation-payment-method-card button{width:100%;min-height:34px;margin-top:auto;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:rgba(237,233,245,.45);font:inherit;font-size:.76rem;font-weight:800;cursor:not-allowed}
.activation-payment-preview-v131>p{margin:14px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5;text-align:center}

/* V1.7.9 — lisibilite renforcee de l'activation. */
.activation-step-kicker{font-size:.88rem}
.activation-step-description{font-size:1rem;line-height:1.72}
.activation-form small{font-size:.92rem;line-height:1.6}
.activation-path-badge{font-size:.82rem}
.activation-path-badge{font-size:.875rem;line-height:1.4}
.activation-path small{font-size:.94rem;line-height:1.65}
.activation-plan small{font-size:.96rem;line-height:1.6}
.activation-secure-note{font-size:1rem;line-height:1.62}
.activation-payment-preview-v130>p,
.activation-payment-preview-v131>p{font-size:.94rem;line-height:1.62}
.activation-payment-method-card h3{font-size:1.02rem}
.activation-payment-preview-head>span,
.activation-payment-preview-v131 .activation-payment-preview-head>span,
.activation-payment-soon{font-size:.88rem}
.activation-payment-mini-card span{font-size:.9rem}
.activation-payment-method-card button{min-height:40px;font-size:.9rem}
@media(max-width:720px){.activation-payment-preview-v131 .activation-payment-preview-head{align-items:flex-start;flex-direction:column}.activation-payment-method-grid{grid-template-columns:1fr}.activation-payment-method-card{min-height:170px}}

@media (max-width:720px){.activation-email-flow .activation-form{padding:15px}.activation-otp-actions{gap:10px}.activation-email-flow .activation-code-input{max-width:100%}}


/* V1.3.5 — paiement plus large sur desktop, sans modifier le mobile */
@media (min-width:900px){
  .activation-shell.activation-shell-payment-wide{max-width:1100px}
  .activation-help p{white-space:nowrap}
}
@media (max-width:899px){
  .activation-help p{white-space:normal}
}

/* V1.7.32 — Airtel et MTN Mobile Money pour les activations visiteur */
.activation-payment-available{display:inline-flex;padding:5px 8px;border-radius:999px;border:1px solid rgba(68,224,162,.42);background:rgba(34,184,126,.12);color:#9cf5cb;font-size:.78rem;font-weight:850}
.activation-payment-available-gold{border-color:rgba(255,202,73,.40);background:rgba(237,174,38,.12);color:#ffe290}
.activation-payment-method-card [data-visitor-payment-method]{cursor:pointer;color:#efffff;border-color:rgba(96,217,176,.44);background:linear-gradient(135deg,rgba(17,151,111,.72),rgba(12,112,91,.88));box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.activation-payment-method-card [data-visitor-payment-method]:hover,.activation-payment-method-card [data-visitor-payment-method]:focus-visible{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 11px 26px rgba(8,186,134,.22);outline:none}
.activation-payment-method-card.is-selected{border-color:#45dca5;box-shadow:0 0 0 1px rgba(69,220,165,.18),0 16px 34px rgba(0,0,0,.22)}
.activation-payment-method-card.is-selected [data-visitor-payment-method]{background:linear-gradient(135deg,#149c72,#0e755d)}
.activation-manual-payment-details{margin-top:22px;padding:22px;border-radius:20px;border:1px solid rgba(72,213,167,.42);background:radial-gradient(circle at 50% 0,rgba(35,205,145,.13),transparent 46%),linear-gradient(150deg,rgba(8,57,57,.72),rgba(6,14,32,.92));text-align:left}
.activation-manual-payment-details[hidden]{display:none!important}
.activation-manual-payment-details h3{margin:3px 0 8px;color:#fff;font-size:1.32rem}
.activation-manual-payment-details>p{margin:0;color:#bed8d5;line-height:1.6}
.activation-manual-payment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.activation-manual-payment-grid>div{min-width:0;padding:13px;border-radius:13px;border:1px solid rgba(134,204,194,.22);background:rgba(3,12,28,.46)}
.activation-manual-payment-grid span{display:block;margin-bottom:6px;color:#9fc6c0;font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.activation-manual-payment-grid strong,.activation-manual-payment-grid b{display:block;color:#fff;overflow-wrap:anywhere}
.activation-manual-payment-grid strong{font-size:1.02rem}.activation-manual-payment-grid b{margin-top:4px;color:#9ce6ca}
.activation-manual-payment-steps{display:grid;gap:9px;margin:0 0 18px;padding-left:21px;color:#d9f1ec;line-height:1.52}
.activation-manual-payment-steps li::marker{color:#78e9bd;font-weight:900}
.activation-whatsapp-button{width:100%;min-height:48px;margin-top:2px;color:#fff;background:linear-gradient(135deg,rgba(27,173,119,.90),rgba(16,129,100,.92));border-color:rgba(114,244,190,.55);box-shadow:0 12px 26px rgba(8,139,99,.20)}
.activation-whatsapp-button:hover,.activation-whatsapp-button:focus-visible{box-shadow:0 16px 32px rgba(8,155,110,.30);outline:none}
#change-mobile-payment-method{margin-top:12px}
.activation-payment-close{margin-top:12px}
@media(max-width:720px){.activation-manual-payment-grid{grid-template-columns:1fr}.activation-manual-payment-details{padding:18px}.activation-manual-payment-details h3{font-size:1.2rem}}