/* GNATEPE SHOP — paiement Mobile Money sur le site */
.gnv-pay{min-width:0;--r:#E3161B;--r2:#B30F13;--y:#FFC400;--ys:#FFF4CC;--k:#111;--t:#4A4A4A;--l:#E2E2E2;--g:#1A8A45;font-family:'Poppins',system-ui,-apple-system,sans-serif;color:var(--k);text-align:left;line-height:1.4}
.gnv-pay *,.gnv-pw *{box-sizing:border-box}
.gnv-pay-intro{font-size:.84rem;color:var(--t);margin:2px 0 14px}
.gnv-pay-f{margin:0 0 14px}
.gnv-pay-f[hidden],.gnv-pay-cardnote[hidden],.gnv-op[hidden]{display:none!important}
.gnv-pay label,.gnv-pay-lab{display:block;font-size:.84rem;font-weight:700;color:var(--k);margin:0 0 7px;line-height:1.3}
.gnv-pay select{width:100%;height:48px;border:1.5px solid #DADADA;border-radius:12px;background:#fff;padding:0 40px 0 14px;font:inherit;font-size:.95rem;color:var(--k);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.gnv-pay select:focus{outline:none;border-color:var(--k);box-shadow:0 0 0 3px rgba(255,196,0,.45)}

/* opérateurs */
.gnv-pay-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;min-width:0}
.gnv-pay .gnv-op{position:relative;display:flex;align-items:center;gap:10px;margin:0;min-height:58px;padding:9px 12px;border:1.5px solid #DADADA;border-radius:14px;background:#fff;cursor:pointer;font-size:.88rem;font-weight:700;color:var(--k);transition:border-color .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent}
.gnv-pay .gnv-op:hover{border-color:#9A9A9A}
.gnv-pay .gnv-op input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.gnv-pay .gnv-op.on{border-color:var(--k);background:#FFFBEA;box-shadow:3px 3px 0 var(--y)}
.gnv-pay .gnv-op:focus-within{outline:2px solid var(--k);outline-offset:2px}
.gnv-pay .gnv-op.on::after{content:"";position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--r) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px #fff}
.gnv-op-i{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:.72rem;font-weight:900;letter-spacing:-.02em;background:#F2F2F2;color:var(--k)}
.gnv-op[data-c=mtn] .gnv-op-i{background:#FFCB05;color:#111}
.gnv-op[data-c=moov] .gnv-op-i{background:#0B5CAB;color:#fff}
.gnv-op[data-c=yas] .gnv-op-i{background:#FFE01B;color:#1B1464}
.gnv-op[data-c=celtiis] .gnv-op-i{background:#6B2C91;color:#fff}
.gnv-op[data-c=orange] .gnv-op-i{background:#FF7900;color:#111}
.gnv-op[data-c=wave] .gnv-op-i{background:#1DC8F2;color:#0B2B4A}
.gnv-op[data-c=free] .gnv-op-i{background:#CD1E25;color:#fff}
.gnv-op[data-c=airtel] .gnv-op-i{background:#E40000;color:#fff}
.gnv-op[data-c=card] .gnv-op-i{background:var(--k);color:var(--y)}
.gnv-op-n{min-width:0;line-height:1.2;overflow-wrap:anywhere}
.gnv-op-n small{display:block;font-size:.7rem;font-weight:600;color:#7A7A7A;margin-top:2px}

/* numéro */
.gnv-tel{display:flex;align-items:stretch;height:50px;border:1.5px solid #DADADA;border-radius:12px;background:#fff;overflow:hidden}
.gnv-tel:focus-within{border-color:var(--k);box-shadow:0 0 0 3px rgba(255,196,0,.45)}
.gnv-tel.bad{border-color:var(--r);background:#FFF8F8}
.gnv-tel-cc{flex:none;display:flex;align-items:center;padding:0 12px;background:#F6F6F6;border-right:1.5px solid #E6E6E6;font-weight:800;font-size:.95rem;color:var(--k)}
.gnv-pay .gnv-tel input{flex:1;min-width:0;width:0;border:0!important;outline:0;box-shadow:none!important;background:transparent!important;height:100%!important;min-height:0!important;padding:0 14px!important;font:inherit;font-size:1.05rem!important;font-weight:700;letter-spacing:.04em;color:var(--k);border-radius:0!important}
.gnv-pay-hint{display:block;margin-top:6px;font-size:.76rem;color:#6B6B6B;line-height:1.4}
.gnv-pay-err{display:block;margin-top:6px;font-size:.78rem;font-weight:700;color:var(--r2)}
.gnv-pay-cardnote{font-size:.8rem;color:var(--t);background:#F6F6F6;border-radius:12px;padding:10px 12px;margin:0 0 6px}

/* intégration dans la page de commande GNATEPE (moyens de paiement en cartes) */
#gcoPage #payment ul.payment_methods > li{min-width:0}
#gcoPage #payment ul.payment_methods li .gnv-pay{margin:12px 0 2px;min-width:0}
#gcoPage #payment ul.payment_methods li .gnv-pay label.gnv-op{display:flex!important;font-size:.88rem!important;font-weight:700!important;margin:0!important}
#gcoPage #payment ul.payment_methods li .gnv-pay label.gnv-op[hidden]{display:none!important}
#gcoPage #payment ul.payment_methods li .gnv-pay label:not(.gnv-op){display:block!important;font-size:.84rem!important;font-weight:700!important;margin:0 0 7px!important}
@media (max-width:480px){
  .gnv-pay-ops,.gnv-pw-form .gnv-pay-ops{grid-template-columns:1fr}
  .gnv-pay .gnv-op{min-height:52px;padding:8px 12px}
  .gnv-op-n small{display:inline;margin:0 0 0 6px}
  .gnv-op-i{width:34px;height:34px}
}

/* ---------------------------------------------------------------- suivi du paiement */
.gnv-pw{--r:#E3161B;--r2:#B30F13;--y:#FFC400;--k:#111;--t:#4A4A4A;--g:#1A8A45;position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(17,17,17,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);font-family:'Poppins',system-ui,-apple-system,sans-serif;animation:gnv-fade .2s ease}
@keyframes gnv-fade{from{opacity:0}to{opacity:1}}
.gnv-pw-card,.gnv-pay-track .gnv-pw-card{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:22px;padding:26px 22px 20px;color:var(--k);text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28);line-height:1.45}
.gnv-pay-track{--r:#E3161B;--r2:#B30F13;--y:#FFC400;--k:#111;--t:#4A4A4A;--g:#1A8A45;font-family:'Poppins',system-ui,-apple-system,sans-serif;margin:0 0 22px}
.gnv-pay-track .gnv-pw-card{max-width:none;max-height:none;box-shadow:none;border:2px solid var(--k);box-shadow:5px 5px 0 var(--y)}
.gnv-pw-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:#F2F2F2;color:var(--k);font-size:1.1rem;line-height:1;cursor:pointer}
.gnv-pw-ic{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#FFF4CC;color:var(--k);position:relative}
.gnv-pw-ic svg{width:36px;height:36px}
.gnv-pw[data-e=attente] .gnv-pw-ic::before,.gnv-pay-track[data-e=attente] .gnv-pw-ic::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--y);animation:gnv-ring 1.6s ease-out infinite}
@keyframes gnv-ring{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.25);opacity:0}}
.gnv-pw-ic.ok{background:#E3F5EA;color:var(--g)}
.gnv-pw-ic.ko{background:#FDECEC;color:var(--r)}
.gnv-pw-ic.warn{background:#FFF4CC;color:#8A6100}
.gnv-pw h3{margin:0 0 8px;font-size:1.25rem;font-weight:900;letter-spacing:-.02em;line-height:1.25;color:var(--k)}
.gnv-pw-lead{margin:0 0 14px;font-size:.92rem;color:var(--t)}
.gnv-pw-lead b{color:var(--k);white-space:nowrap}
.gnv-pw-steps{list-style:none;margin:0 0 14px;padding:0;text-align:left;display:grid;gap:8px;counter-reset:s}
.gnv-pw-steps li{position:relative;padding:10px 12px 10px 46px;border-radius:12px;background:#F7F7F5;font-size:.86rem;line-height:1.35;counter-increment:s;margin:0}
.gnv-pw-steps li::before{content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--k);color:var(--y);font-weight:900;font-size:.78rem;display:grid;place-items:center}
.gnv-pw-wait{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 10px;font-size:.86rem;font-weight:700;color:var(--k)}
.gnv-pw-t{font-variant-numeric:tabular-nums;color:var(--r);min-width:3.2em;text-align:left}
.gnv-spin{width:18px;height:18px;border-radius:50%;border:3px solid #EDEDED;border-top-color:var(--r);animation:gnv-spin .8s linear infinite;flex:none}
@keyframes gnv-spin{to{transform:rotate(360deg)}}
.gnv-pw-help{font-size:.78rem;color:#6B6B6B;margin:0 0 14px}
.gnv-pw-msg{margin:0 0 12px;font-size:.84rem;font-weight:700;color:var(--r2)}
.gnv-pw-act{display:grid;gap:8px}
.gnv-pw-act button,.gnv-pw-act a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:999px;border:2px solid var(--k);background:#fff;color:var(--k)!important;font:inherit;font-weight:800;font-size:.92rem;cursor:pointer;text-decoration:none!important;padding:10px 16px;line-height:1.2}
.gnv-pw-act .p{background:var(--r);border-color:var(--r);color:#fff!important}
.gnv-pw-act .p:hover{background:var(--r2);border-color:var(--r2)}
.gnv-pw-act button[disabled]{opacity:.45;cursor:default}
.gnv-pw-act .lnk{border:0;min-height:36px;font-weight:700;font-size:.84rem;color:#6B6B6B!important;text-decoration:underline!important;text-underline-offset:3px}
.gnv-pw-form{text-align:left;margin:4px 0 12px}
.gnv-pw-form .gnv-pay-f{margin:0 0 12px}
.gnv-pw-form .gnv-pw-act{margin-top:4px}
.gnv-pw-form .gnv-pay-ops{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.gnv-pw-fee{display:block;margin-top:4px;font-size:.76rem;color:#7A7A7A}
.gnv-pw-act .lnk svg{flex:none}
.gnv-pay-track h3{margin:0 0 8px;font-size:1.2rem;font-weight:900;letter-spacing:-.02em;line-height:1.25;color:var(--k)}
.gnv-pay-track .gnv-pw-card{margin:0 auto;max-width:520px}
.gnv-pay-resume{--r:#E3161B;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 14px;border-radius:14px;background:#FFF4CC;border:1.5px solid #111;font-family:'Poppins',system-ui,sans-serif;font-size:.86rem;font-weight:700;color:#111}
.gnv-pay-resume button{border:0;border-radius:999px;background:var(--r);color:#fff;font:inherit;font-weight:800;font-size:.84rem;padding:9px 16px;cursor:pointer}
.gnv-pw-foot{margin-top:12px;font-size:.72rem;color:#9A9A9A;display:flex;align-items:center;justify-content:center;gap:6px}
.gnv-pay-ok{display:flex;gap:12px;align-items:center;margin:0 0 20px;padding:14px 16px;border-radius:16px;background:#E3F5EA;border:1.5px solid #9AD3AE;font-family:'Poppins',system-ui,sans-serif;font-size:.9rem;color:#111}
.gnv-pay-ok span{flex:none;width:34px;height:34px;border-radius:50%;background:#1A8A45;color:#fff;display:grid;place-items:center;font-weight:900}
.gnv-pay-ok b{display:block;font-size:1rem}
html.gnv-pw-open,html.gnv-pw-open body{overflow:hidden}
@media (max-width:480px){
  .gnv-pw{align-items:flex-end;padding:0}
  .gnv-pw .gnv-pw-card{max-width:none;border-radius:22px 22px 0 0;max-height:94vh;padding:24px 18px calc(18px + env(safe-area-inset-bottom));animation:gnv-up .25s ease}
  @keyframes gnv-up{from{transform:translateY(30px)}to{transform:none}}
  .gnv-pw h3{font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){.gnv-pw,.gnv-pw .gnv-pw-card,.gnv-spin,.gnv-pw-ic::before{animation:none!important}}
.gnv-pay-track .gnv-pw-lead{font-size:.92rem;margin:0 0 16px}
.gnv-pay-track .gnv-pw-act{max-width:380px;margin:0 auto}
.gnv-pay-track .gnv-pw-steps,.gnv-pay-track .gnv-pw-form{max-width:440px;margin-left:auto;margin-right:auto}