/* Contribution mobile money — Dynamique Ted Belkas */
body{
    --pay-blue:#07539a;
    --pay-deep:#032f5d;
    --pay-sky:#0781d9;
    --pay-red:#d91f2a;
    --pay-yellow:#f4c542;
    --pay-ink:#0c1b2b;
    --pay-muted:#667688;
    --pay-line:#dce6ef;
    min-height:100vh!important;
    color:var(--pay-ink)!important;
    background:linear-gradient(180deg,rgba(236,244,250,.96),rgba(248,250,252,.98) 650px,#fff),url("../images/s6.jpg") center/cover fixed!important;
}
body::before{content:""!important;position:fixed!important;z-index:-1!important;inset:0!important;background:radial-gradient(circle at 5% 8%,rgba(7,129,217,.16),transparent 28rem),radial-gradient(circle at 95% 72%,rgba(244,197,66,.14),transparent 25rem)!important;pointer-events:none!important}
.payment-page{position:relative!important;z-index:1!important;width:min(1240px,calc(100% - 40px))!important;min-height:100vh!important;margin:0 auto!important;padding:18px 0 80px!important}

/* En-tête */
.payment-page>.topbar{
    position:relative!important;
    overflow:hidden!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:78px!important;
    margin:0 0 22px!important;
    padding:10px 11px 10px 14px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:20px!important;
    background:linear-gradient(110deg,rgba(3,47,93,.98),rgba(5,59,110,.97) 60%,rgba(3,38,73,.98))!important;
    box-shadow:0 20px 55px rgba(3,47,93,.22),inset 0 1px 0 rgba(255,255,255,.13)!important;
}
.payment-page>.topbar::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(var(--pay-red) 0 35%,var(--pay-yellow) 35% 68%,var(--pay-sky) 68%)}
.payment-page>.topbar::after{content:"";position:absolute;right:18%;top:-70px;width:210px;height:210px;border:38px solid rgba(255,255,255,.025);border-radius:50%}
.payment-page>.topbar .brand{position:relative;z-index:1;display:inline-flex!important;align-items:center!important;gap:12px!important;color:#fff!important}
.payment-page>.topbar .brand img{width:56px!important;height:56px!important;padding:2px!important;border:2px solid rgba(255,255,255,.92)!important;border-radius:13px!important;background:#fff!important;box-shadow:0 9px 24px rgba(0,0,0,.18)!important}
.payment-page>.topbar .brand strong{color:#fff!important;font-family:"Outfit",sans-serif!important;font-size:.94rem!important;letter-spacing:.025em!important;text-transform:uppercase!important}
.payment-page>.topbar .brand small{margin-top:4px!important;color:rgba(255,255,255,.58)!important;font-size:.64rem!important;letter-spacing:.07em!important;text-transform:uppercase!important}
.payment-page>.topbar .quick-nav{position:relative;z-index:2;display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:12px}
.payment-page>.topbar .quick-nav a{padding:10px 13px;color:rgba(255,255,255,.68);border-radius:9px;font-size:.76rem;font-weight:800;transition:.2s}
.payment-page>.topbar .quick-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.payment-page>.topbar .back-link{position:relative;z-index:1;display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:47px!important;padding:0 18px!important;color:#fff!important;border:0!important;border-radius:11px!important;background:linear-gradient(135deg,var(--pay-red),#b7111b)!important;box-shadow:0 10px 25px rgba(217,31,42,.25)!important;transition:.2s!important}
.payment-page>.topbar .back-link span{font-size:1.05rem;transition:transform .2s}
.payment-page>.topbar .back-link:hover{box-shadow:0 14px 32px rgba(217,31,42,.34)!important;transform:translateY(-2px)!important}
.payment-page>.topbar .back-link:hover span{transform:translateX(-3px)}

/* Grand bloc de paiement */
.payment-layout{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(470px,.78fr)!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.65)!important;border-radius:27px!important;background:#fff!important;box-shadow:0 34px 95px rgba(3,47,93,.18)!important}
.payment-hero{
    position:relative!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    min-height:780px!important;
    padding:56px 48px!important;
    color:#fff!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(90deg,rgba(2,24,48,.94),rgba(3,47,93,.68)),linear-gradient(0deg,rgba(2,24,48,.75),transparent 58%),url("../images/s6.jpg") center/cover no-repeat!important;
    box-shadow:none!important;
}
.payment-hero::before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:7px;background:linear-gradient(var(--pay-red) 0 34%,var(--pay-yellow) 34% 67%,var(--pay-sky) 67%)}
.payment-hero::after{content:"DTB"!important;position:absolute!important;right:-18px!important;bottom:-42px!important;inset:auto -18px -42px auto!important;height:auto!important;color:rgba(255,255,255,.04)!important;background:none!important;font-family:"Outfit",sans-serif!important;font-size:10rem!important;font-weight:800!important;line-height:1!important;letter-spacing:-.08em!important;transform:none!important}
.payment-hero>div{position:relative!important;z-index:1!important}
.payment-hero .eyebrow{margin:0 0 20px!important;color:var(--pay-yellow)!important;font-size:.7rem!important;letter-spacing:.18em!important}
.payment-hero h1{max-width:590px!important;margin:0!important;color:#fff!important;font-family:"Outfit",sans-serif!important;font-size:clamp(3.2rem,5.2vw,5.4rem)!important;font-weight:700!important;line-height:.94!important;letter-spacing:-.06em!important;text-wrap:balance!important}
.payment-hero .hero-text{max-width:540px!important;margin:26px 0 0!important;color:rgba(255,255,255,.7)!important;font-size:.98rem!important;line-height:1.7!important}
.operator-strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin-top:31px!important}
.operator-strip span{display:flex!important;align-items:center!important;gap:9px!important;padding:9px 11px!important;color:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:11px!important;background:rgba(255,255,255,.08)!important;backdrop-filter:blur(8px)!important;font-size:.72rem!important}
.operator-strip img{width:31px!important;height:31px!important;border-radius:8px!important;background:#fff!important;object-fit:contain!important}
.payment-badges{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:35px!important}
.payment-badges article{display:grid!important;grid-template-columns:110px 1fr!important;align-items:center!important;gap:12px!important;padding:13px 15px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:12px!important;background:rgba(255,255,255,.07)!important}
.payment-badges strong{color:#fff!important;font-size:.76rem!important}
.payment-badges span{margin:0!important;color:rgba(255,255,255,.58)!important;font-size:.72rem!important}

/* Formulaire */
.payment-form-card{position:relative!important;display:block!important;min-height:780px!important;padding:42px 38px!important;border:0!important;border-radius:0!important;background:rgba(255,255,255,.98)!important;box-shadow:none!important}
.payment-form-card::before{content:""!important;position:absolute!important;inset:0 0 auto!important;height:5px!important;background:linear-gradient(90deg,var(--pay-red),var(--pay-yellow),var(--pay-blue))!important}
.mobile-back-link{display:none!important}
.form-heading{margin-bottom:25px!important}
.form-heading .eyebrow{margin:0 0 8px!important;color:var(--pay-red)!important;font-size:.68rem!important}
.form-heading h2{margin:0 0 8px!important;color:var(--pay-ink)!important;font-family:"Outfit",sans-serif!important;font-size:clamp(2.1rem,3.5vw,3.2rem)!important;line-height:1!important;letter-spacing:-.045em!important}
.form-heading p{color:var(--pay-muted)!important;font-size:.82rem!important;line-height:1.55!important}
.money-logo-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-bottom:25px!important}
.money-logo-grid article{display:grid!important;justify-items:center!important;gap:7px!important;min-height:86px!important;padding:10px 5px!important;border:1px solid #dce6ee!important;border-radius:13px!important;background:#f7fafc!important;box-shadow:none!important}
.money-logo-grid img{width:43px!important;height:43px!important;border-radius:9px!important;object-fit:contain!important;background:#fff!important}
.money-logo-grid strong{color:#4b5d6f!important;font-size:.58rem!important;text-align:center!important}
.payment-form-card form{display:grid!important;gap:15px!important}
.payment-form-card label{display:grid!important;gap:8px!important;color:#293b4c!important;font-size:.73rem!important;font-weight:800!important;letter-spacing:.025em!important;transition:color .2s!important}
.payment-form-card label:focus-within{color:var(--pay-blue)!important}
.payment-form-card input,.payment-form-card select{width:100%!important;min-height:58px!important;padding:14px 16px!important;color:var(--pay-ink)!important;border:1px solid #cfdee9!important;border-radius:13px!important;background:#f8fafc!important;box-shadow:0 5px 16px rgba(3,47,93,.045),inset 0 1px 2px rgba(3,47,93,.02)!important;font:inherit!important;font-size:.9rem!important;transition:border-color .2s,box-shadow .2s,background .2s!important}
.payment-form-card input::placeholder{color:#9aa8b5!important;opacity:1!important}
.payment-form-card input:hover,.payment-form-card select:hover{border-color:#91b7d4!important;background:#fff!important;box-shadow:0 8px 22px rgba(3,47,93,.065)!important}
.payment-form-card input:focus,.payment-form-card select:focus{border-color:var(--pay-sky)!important;background:#fff!important;outline:0!important;box-shadow:0 0 0 4px rgba(7,129,217,.11),0 9px 24px rgba(3,47,93,.075)!important}
.payment-form-card select{appearance:none!important;-webkit-appearance:none!important;padding-right:46px!important;background-image:linear-gradient(45deg,transparent 50%,var(--pay-blue) 50%),linear-gradient(135deg,var(--pay-blue) 50%,transparent 50%),linear-gradient(to right,#dce6ee,#dce6ee)!important;background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%,calc(100% - 42px) 50%!important;background-size:6px 6px,6px 6px,1px 27px!important;background-repeat:no-repeat!important}

/* Champ téléphone international : espace réservé au drapeau et à l'indicatif. */
.payment-form-card .iti{position:relative!important;display:block!important;width:100%!important}
.payment-form-card .iti input[type="tel"]{width:100%!important;padding-right:16px!important;padding-left:116px!important;letter-spacing:.025em!important}
.payment-form-card .iti__country-container{z-index:4!important;left:0!important;right:auto!important;padding:5px!important}
.payment-form-card .iti__selected-country{min-width:101px!important;min-height:48px!important;padding:0 10px!important;border:0!important;border-right:1px solid #d7e3ec!important;border-radius:9px 0 0 9px!important;background:#edf4f9!important}
.payment-form-card .iti__selected-country:hover{background:#e4f0f8!important}
.payment-form-card .iti__selected-country-primary{gap:7px!important;padding:0!important}
.payment-form-card .iti__selected-dial-code{margin-left:7px!important;color:var(--pay-blue)!important;font-size:.82rem!important;font-weight:800!important}
.payment-form-card .iti__arrow{border-top-color:var(--pay-blue)!important}
.payment-form-card .iti__dropdown-content{z-index:20!important;overflow:hidden!important;border:1px solid #c8dbe9!important;border-radius:13px!important;background:#fff!important;box-shadow:0 22px 60px rgba(3,47,93,.2)!important}
.payment-form-card .iti__search-input{min-height:46px!important;margin:8px!important;width:calc(100% - 16px)!important;padding:10px 12px!important;border-radius:9px!important}
.payment-form-card .iti__country{padding:9px 12px!important;color:#26394c!important;font-size:.82rem!important}
.payment-form-card .iti__country.iti__highlight{background:#eaf4fb!important}
.payment-form-card .form-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}
.payment-form-card .submit-button{width:100%!important;min-height:58px!important;margin-top:2px!important;color:#fff!important;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,var(--pay-red),#b7111b)!important;box-shadow:0 14px 30px rgba(217,31,42,.23)!important;font-size:.86rem!important;transition:.2s!important}
.payment-form-card .submit-button:hover{box-shadow:0 18px 38px rgba(217,31,42,.31)!important;transform:translateY(-2px)!important}
.secure-note{display:flex!important;align-items:flex-start!important;gap:10px!important;margin-top:20px!important;padding:14px!important;color:var(--pay-blue)!important;border:1px solid #c8deed!important;border-left:4px solid var(--pay-blue)!important;border-radius:11px!important;background:#eef6fb!important;font-size:.75rem!important;line-height:1.55!important}
.secure-note span:first-child{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;color:#fff!important;border-radius:50%;background:var(--pay-blue)!important;font-size:.75rem!important}

@media(max-width:980px){
    .payment-page>.topbar .quick-nav{display:none}
    .payment-layout{grid-template-columns:1fr!important}
    .payment-hero{min-height:650px!important}
    .payment-form-card{min-height:0!important}
}
@media(max-width:720px){
    .payment-page{width:calc(100% - 20px)!important;min-height:100vh!important;padding:10px 0 60px!important}
    .payment-page>.topbar{display:flex!important;border-radius:14px!important}
    .payment-page>.topbar .brand img{width:48px!important;height:48px!important}
    .payment-page>.topbar .brand strong{font-size:.74rem!important}
    .payment-page>.topbar .brand small{display:none!important}
    .payment-page>.topbar .back-link{min-height:42px!important;padding-inline:12px!important;font-size:.72rem!important}
    .payment-layout{display:block!important;border-radius:20px!important}
    .payment-hero{display:block!important;min-height:560px!important;padding:45px 25px 120px!important;background-position:58% center!important}
    .payment-hero h1{font-size:3.45rem!important}
    .payment-badges{display:none!important}
    .operator-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .payment-form-card{width:100%!important;min-height:0!important;padding:30px 18px!important;border-radius:0!important;background:#fff!important}
    .form-heading{text-align:left!important}
    .form-heading .eyebrow{width:auto!important;margin:0 0 8px!important;padding:0!important;color:var(--pay-red)!important;background:transparent!important}
    .money-logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:none!important}
    .payment-form-card form{max-width:none!important}
    .payment-form-card .form-row{grid-template-columns:1fr!important}
    .secure-note{display:flex!important}
}
@media(max-width:420px){
    .payment-hero h1{font-size:3rem!important}
    .money-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){.payment-page *{animation:none!important;transition:none!important}}