/* ============================================================================= PSALITY FUNNEL — variante "funnel" du plugin big5. TOUT est scopé sous #psality-funnel : n'affecte que cette page, et rien d'extérieur ne peut le casser (ni Divi ni l'ancien CSS du plugin). ============================================================================= */ /* Variables aussi au niveau racine : les modales HiPay sont déplacées dans (hors #psality-funnel) et doivent continuer d'y accéder. */ :root{ --bg:#100e26; --bg2:#171438; --o:#8B7CFF; --c:#2FD3B5; --e:#FF9E4D; --a:#FF6FA0; --n:#6E8BFF; --cta:#FF8A3D; --pay:#43a58a; --ink:#F4F2FF; --ink-soft:#B7B4D8; --ink-faint:#9a97b8; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.07); --stroke:rgba(255,255,255,.10); --stroke-2:rgba(255,255,255,.18); --ok:#3ad29a; --no:#ff6a5a; } #psality-funnel{ --bg:#100e26; --bg2:#171438; --o:#8B7CFF; --c:#2FD3B5; --e:#FF9E4D; --a:#FF6FA0; --n:#6E8BFF; --cta:#FF8A3D; --pay:#43a58a; --ink:#F4F2FF; --ink-soft:#B7B4D8; --ink-faint:#9a97b8; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.07); --stroke:rgba(255,255,255,.10); --stroke-2:rgba(255,255,255,.18); --ok:#3ad29a; --no:#ff6a5a; /* PLEIN ÉCRAN : recouvre sidebar, titre et gabarit du thème, quel qu'il soit. dvh = hauteur RÉELLEMENT visible : exclut les barres Safari iOS / Chrome mobile (avec 100vh seul, le contenu dépassait et forçait un scroll). */ position:fixed; inset:0; z-index:99990; width:100vw; height:100vh; height:100dvh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); line-height:1.45; text-align:left; background: radial-gradient(900px 620px at 12% -8%, rgba(139,110,200,.20), transparent 60%), radial-gradient(760px 560px at 108% 6%, rgba(255,150,110,.12), transparent 55%), radial-gradient(820px 720px at 50% 122%, rgba(200,120,150,.12), transparent 58%), linear-gradient(180deg,var(--bg),var(--bg2)); } #psality-funnel *{box-sizing:border-box;} #psality-funnel button{font-family:inherit;cursor:pointer;color:inherit;} /* #start-quizz est masqué : il ne sert que de point d'accroche au système de reprise de progression (panier abandonné, ?session_test=... dans l'URL). */ #psality-funnel #custom-header{display:none !important;} #psality-funnel #start-quizz{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;} /* le paywall reste caché jusqu'à ce que le moteur l'affiche */ #psality-funnel #custom-loading{display:none;} /* fond réseau */ #psality-funnel #pf-net{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;} #psality-funnel #pf-top,#psality-funnel #custom-test,#psality-funnel #custom-loading{position:relative;z-index:2;} #psality-funnel #pf-top{z-index:50;position:sticky;top:0;} /* ---------- header ---------- */ #psality-funnel #pf-top{position:sticky;top:0;background:linear-gradient(180deg,rgba(16,14,38,.9),rgba(16,14,38,.42));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke);} #psality-funnel .pf-top-in{max-width:660px;margin:0 auto;padding:11px 20px 10px;} #psality-funnel .pf-top-row{display:flex;align-items:center;gap:11px;} #psality-funnel .pf-logo{height:50px !important;width:auto !important;max-width:none !important;display:block;object-fit:contain;flex:none;} #psality-funnel .pf-timer-slot{margin-left:auto;} /* barre d'admin WordPress (visible uniquement quand tu es connecté) : on décale le funnel pour qu'il ne passe pas dessous. */ body.admin-bar #psality-funnel{top:32px;height:calc(100vh - 32px);height:calc(100dvh - 32px);} @media screen and (max-width:782px){ body.admin-bar #psality-funnel{top:46px;height:calc(100vh - 46px);height:calc(100dvh - 46px);} } #psality-funnel #b5pt-timer{display:block !important;font-size:.9rem;font-weight:700;color:var(--ink-soft);padding:0;margin:0;} #psality-funnel .pf-bar{display:flex;gap:3px;height:6px;margin:11px 0 0;} #psality-funnel .pf-seg{position:relative;flex:1;background:rgba(255,255,255,.12);border-radius:100px;overflow:hidden;} #psality-funnel .pf-seg i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,#8B7CFF,#a98fe0,#e07597,#FF9E4D);background-size:var(--barw,600px) 100%;background-repeat:no-repeat;background-position:var(--segoff,0) 0;transition:width .5s cubic-bezier(.22,1,.36,1);} #psality-funnel .pf-meta{display:flex;justify-content:space-between;margin:7px 2px 0;} #psality-funnel #pf-count{font-size:.74rem;font-weight:600;color:var(--ink-faint);} #psality-funnel #pf-msg{font-size:.76rem;font-weight:600;font-style:italic;color:var(--ink-soft);} #psality-funnel .pf-app{max-width:660px;margin:0 auto;padding:16px 18px 40px;} /* boutons génériques */ #psality-funnel .pf-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:linear-gradient(135deg,var(--cta),#ff6f4d);color:#fff;font-weight:800;font-size:1.06rem;border:none;border-radius:100px;padding:17px 40px;box-shadow:0 14px 34px -10px rgba(255,138,61,.55);transition:transform .18s,filter .18s;} #psality-funnel .pf-cta:hover{transform:translateY(-2px);filter:brightness(1.05);} #psality-funnel .pf-cta--big{width:100%;max-width:420px;} /* ============================================================================ QUIZ (#b5pt_form) — le moteur remplit, on style tout ici ============================================================================ */ #psality-funnel #custom-test{padding-top:14px;} /* neutraliser tout flex/grid imposé par Divi autour du formulaire */ #psality-funnel #b5pt_form{width:auto !important;margin:0 !important;position:relative;display:block !important;} #psality-funnel #b5pt_form_progressbar{display:none;} /* une page de questions = carte sombre. ⚠️ Le moteur (b5_pt_test.js) injecte display:flex EN INLINE sur .b5pt_questions (next_fs.css("display","flex")). On ne peut pas l'empêcher, donc on le rend inoffensif : on force la direction en COLONNE pour que les questions s'empilent au lieu de se mettre côte à côte. */ #psality-funnel #b5pt_form .b5pt_questions{ flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; width:100% !important;max-width:100% !important;float:none !important; background:var(--panel);border:1px solid var(--stroke);border-radius:22px;padding:10px 22px 24px; } #psality-funnel #b5pt_form .b5pt_questions:not(:first-of-type){display:none;} /* chaque question empilée, pleine largeur */ #psality-funnel #b5pt_form fieldset{display:block !important;width:100% !important;max-width:100% !important;float:none !important;border:0;border-top:1px solid var(--stroke);margin:0;padding:20px 0;list-style:none;} #psality-funnel #b5pt_form fieldset:first-of-type{border-top:0;} #psality-funnel .fs-subtitle{display:block !important;width:100% !important;color:var(--ink);font-weight:700;font-size:clamp(1.05rem,3vw,1.22rem);line-height:1.3;text-align:center;margin:0 0 16px;} /* échelle : 5 ronds gradués reliés par une ligne */ #psality-funnel #b5pt_form .b5pt_form_radios{position:relative !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;justify-content:space-between !important;align-items:center !important;gap:2px !important;max-width:420px !important;margin:0 auto !important;width:100% !important;float:none !important;padding:6px 4px !important;} /* la ligne de liaison : bornée aux centres des ronds extrêmes (10% -> 90%) pour qu'elle ne dépasse jamais du premier ni du dernier rond. */ #psality-funnel #b5pt_form .b5pt_form_radios::before{ content:"";position:absolute;left:10%;right:10%;top:50%;height:3px;border-radius:3px; background:linear-gradient(90deg,#ff6a5a,#ff9270,#9d9ac0,#67d6a0,#3ad29a); opacity:.35;transform:translateY(-50%);z-index:0;pointer-events:none; } #psality-funnel #b5pt_form .choice{position:relative;z-index:1;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;flex:1 !important;width:auto !important;float:none !important;padding:6px 0 !important;} /* masquer les labels internes des choix (on n'utilise que .mobile-labels) — tous les cas du plugin */ #psality-funnel #b5pt_form .choice label, #psality-funnel #b5pt_form .choice:nth-child(1) label, #psality-funnel #b5pt_form .choice:nth-child(2) label, #psality-funnel #b5pt_form .choice:nth-child(3) label, #psality-funnel #b5pt_form .choice:nth-child(4) label, #psality-funnel #b5pt_form .choice:nth-child(5) label{display:none !important;} #psality-funnel #b5pt_form .choice input[type="radio"]{-webkit-appearance:none;appearance:none;margin:0;cursor:pointer;background:#1a1836;border-radius:50%;position:relative;z-index:1;display:block;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s,box-shadow .15s;} #psality-funnel #b5pt_form .choice input[type="radio"]::before, #psality-funnel #b5pt_form .choice input[type="radio"]::after{display:none;content:none;} #psality-funnel #b5pt_form .choice:nth-child(1) input{width:46px;height:46px;border:2.5px solid #ff6a5a;} #psality-funnel #b5pt_form .choice:nth-child(2) input{width:40px;height:40px;border:2.5px solid #ff9270;} #psality-funnel #b5pt_form .choice:nth-child(3) input{width:32px;height:32px;border:2.5px solid #9d9ac0;} #psality-funnel #b5pt_form .choice:nth-child(4) input{width:40px;height:40px;border:2.5px solid #67d6a0;} #psality-funnel #b5pt_form .choice:nth-child(5) input{width:46px;height:46px;border:2.5px solid #3ad29a;} #psality-funnel #b5pt_form .choice input[type="radio"]:hover{transform:scale(1.08);} #psality-funnel #b5pt_form .choice:nth-child(1) input:checked{background:#ff6a5a;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2);transform:scale(1.06);} #psality-funnel #b5pt_form .choice:nth-child(2) input:checked{background:#ff9270;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2);transform:scale(1.06);} #psality-funnel #b5pt_form .choice:nth-child(3) input:checked{background:#9d9ac0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2);transform:scale(1.06);} #psality-funnel #b5pt_form .choice:nth-child(4) input:checked{background:#67d6a0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2);transform:scale(1.06);} #psality-funnel #b5pt_form .choice:nth-child(5) input:checked{background:#3ad29a;box-shadow:inset 0 0 0 3px rgba(255,255,255,.2);transform:scale(1.06);} /* libellés extrêmes */ #psality-funnel .mobile-labels{display:flex !important;flex-direction:row !important;justify-content:space-between !important;max-width:420px !important;margin:8px auto 0 !important;width:100% !important;float:none !important;} #psality-funnel .mobile-labels label{display:block !important;font-size:.72rem !important;font-weight:600 !important;width:auto !important;} #psality-funnel .mobile-labels .redify{color:#ff6a5a;text-align:left;} #psality-funnel .mobile-labels .greenify{color:#3ad29a;text-align:right;} /* boutons Précédent / Suivant / Terminer */ #psality-funnel .b5pt_form_buttons{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:18px;gap:12px;} #psality-funnel .b5pt_form_buttons.reversed{flex-direction:row-reverse;} #psality-funnel #b5pt_form .action-button{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:linear-gradient(135deg,var(--o),#6E8BFF);color:#fff;font-size:.95rem;font-weight:700;letter-spacing:0;text-transform:none;border:none;border-radius:100px;padding:13px 28px;cursor:pointer;width:auto;box-shadow:0 10px 24px -10px rgba(110,139,255,.6);transition:transform .18s,filter .18s;} #psality-funnel #b5pt_form .action-button:hover{transform:translateY(-2px);filter:brightness(1.06);} #psality-funnel #b5pt_form .action-button .btn-text{font-size:.95rem;font-weight:700;letter-spacing:0;} /* L'icône du plugin est un caractère de la police ETmodules (Divi), posé avec style="font-family:ETmodules !important" EN INLINE. Divi n'étant plus chargé, les glyphes s'affichaient en clair ("4", "5"). On masque le caractère et on dessine des chevrons en CSS, indépendants de toute police. */ #psality-funnel #b5pt_form .action-button .btn-icon{ font-size:0 !important;line-height:0 !important;color:transparent !important; width:16px;height:16px;position:relative;display:inline-block;flex:none; } #psality-funnel #b5pt_form .action-button .btn-icon::before{ content:"";position:absolute;top:50%;left:50%;width:8px;height:8px; border-top:2.5px solid #fff;border-right:2.5px solid #fff;border-radius:1px; } /* chevron droit : Suivant + Terminer */ #psality-funnel #b5pt_form .b5pt_form_next .btn-icon::before, #psality-funnel #b5pt_form .b5pt_form_submit .btn-icon::before{transform:translate(-65%,-50%) rotate(45deg);} /* chevron gauche : Précédent */ #psality-funnel #b5pt_form .b5pt_form_previous .btn-icon::before{transform:translate(-35%,-50%) rotate(-135deg);} #psality-funnel input.b5pt_form_submit{font-size:1rem;text-transform:none;padding:14px 34px;} /* ============================================================================ PAYWALL — radar central + scores autour (floutés) ============================================================================ */ #psality-funnel #custom-loading{padding:20px 0 60px;} #psality-funnel .pf-paywall{max-width:520px;margin:0 auto;text-align:center;} #psality-funnel .pf-constel{position:relative;width:min(88vw,380px);height:min(88vw,380px);margin:0 auto;} #psality-funnel .pf-radar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66%;height:66%;filter:drop-shadow(0 10px 30px rgba(139,124,255,.4)) blur(3px);opacity:.94;} #psality-funnel .pf-radar-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} #psality-funnel .pf-spin{width:40px;height:40px;border-radius:50%;border:4px solid var(--stroke);border-top-color:var(--o);animation:pf-sp 1s linear infinite;} @keyframes pf-sp{to{transform:rotate(360deg);}} #psality-funnel .pf-chip{position:absolute;transform:translate(-50%,-50%);width:112px;text-align:center;} #psality-funnel .pf-chip .nm{display:flex;align-items:center;gap:6px;justify-content:center;font-weight:700;font-size:.8rem;white-space:nowrap;} #psality-funnel .pf-chip .tb{width:21px;height:21px;flex:none;border-radius:6px;display:grid;place-items:center;color:#111;font-weight:800;font-size:.7rem;} #psality-funnel .pf-chip .gauge{position:relative;height:8px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden;margin:6px auto 0;width:88px;filter:blur(5px);} #psality-funnel .pf-chip .gauge i{position:absolute;left:0;top:0;height:100%;border-radius:100px;background:var(--tc);width:0;transition:width .9s cubic-bezier(.22,1,.36,1);} #psality-funnel .pf-chip .sc{font-weight:800;font-size:.76rem;margin-top:3px;filter:blur(5px);} #psality-funnel .pf-pw-head{margin:8px 0 0;} #psality-funnel .pf-pw-head h2{font-size:clamp(1.8rem,5.4vw,2.4rem);font-weight:900;letter-spacing:-.025em;margin:0 auto;max-width:15ch;color:#fff;} #psality-funnel .pf-pw-head p{color:var(--ink-soft);font-size:1rem;max-width:38ch;margin:10px auto 0;} #psality-funnel .pf-lock-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;font-size:.86rem;color:var(--ink-soft);} #psality-funnel .pf-lock-note svg{stroke:var(--o);} #psality-funnel .pf-pw-cta{margin:18px 0 0;} #psality-funnel .pf-reassure{display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:center;margin:18px 0 0;font-size:.82rem;color:var(--ink-soft);} #psality-funnel .pf-reassure span{display:inline-flex;align-items:center;gap:7px;} #psality-funnel .pf-reassure svg{stroke:var(--o);} /* ============================================================================ MODALE HiPay — CSS complet (non scopé : les modales sont déplacées dans ) (les iframes s'injectent dans les conteneurs) ============================================================================ */ /* ⚠️ NE PAS mettre display:flex !important ici : le moteur ouvre/ferme la modale via style="display:none|block" EN INLINE. Un !important l'afficherait en permanence. On style la position/le fond, et on n'applique le centrage flex QUE lorsque le moteur l'a rendue visible (display:block inline). */ #payment-form.modal-hipay-background{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; box-sizing:border-box !important; /* le padding est COMPRIS dans la largeur */ position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important; width:100vw !important;max-width:100vw !important;height:100% !important;margin:0 !important;z-index:99998 !important; padding:20px !important;background:rgba(6,5,20,.72);backdrop-filter:blur(6px); overflow-y:auto;overflow-x:hidden !important;} #payment-form.modal-hipay-background *{box-sizing:border-box;} /* centrage quand la modale est ouverte par le moteur */ #payment-form.modal-hipay-background[style*="display: block"], #payment-form.modal-hipay-background[style*="display:block"]{ display:flex !important;align-items:center !important;justify-content:center !important;} #modal-hipay.modal-hipay{position:relative !important;width:100% !important;max-width:620px !important; max-height:92vh;margin:auto !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important; transform:none !important;float:none !important; background:linear-gradient(180deg,#1b1840,#161337);border:1px solid var(--stroke);border-radius:26px; box-shadow:0 40px 100px -20px rgba(0,0,0,.7);overflow:hidden;} .modal-hipay-content{padding:38px 34px 32px;overflow-y:auto;max-height:92vh;height:auto;} .modal-hipay .header{text-align:center;margin-bottom:8px;} #hipay-modal-title{color:#fff;font-size:1.4rem;font-weight:900;letter-spacing:-.02em;text-align:center;margin:0 6px;} #hipay-modal-subtitle{color:var(--ink-soft);font-size:.9rem;line-height:1.55;text-align:center;margin:8px auto 0;max-width:44ch;} .modal-hipay .content{display:flex;flex-direction:column;gap:0;margin-top:18px;} .modal-hipay .input-container label,#checkbox-label,.modal-hipay-content label{color:var(--ink-soft);font-size:.86rem;font-weight:600;display:inline-block;margin-bottom:8px;} .modal-hipay .input-container{display:flex;flex-direction:column;margin:20px 0 0 !important;} .hostedfield, #hipay-card-holder,#hipay-card-number,#hipay-expiry-date,#hipay-cvc, #hipay-mail-holder{background:rgba(255,255,255,.04);border:1.5px solid var(--stroke);border-radius:12px;height:50px;color:var(--ink);padding:0 14px;display:flex;align-items:center;box-sizing:border-box;width:100%;} #hipay-mail-holder{font-size:1rem;color:var(--ink) !important;-webkit-text-fill-color:var(--ink);} #hipay-mail-holder::placeholder{color:var(--ink-faint);} /* autofill navigateur : garder le fond sombre et le texte clair */ #modal-hipay input:-webkit-autofill,#modal-hipay input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--ink) !important; -webkit-box-shadow:0 0 0 1000px #221f45 inset !important; caret-color:var(--ink);} .hostedfield iframe{width:100%;height:100%;border:0;} .HiPayField--focused{border-color:var(--o);box-shadow:0 0 0 4px rgba(139,124,255,.18);} .HiPayField--invalid{border-color:var(--no);} .country-selector{display:none !important;} .split-input{display:flex;flex-direction:row;gap:14px;align-items:flex-end;margin-top:4px;} .input-container.cc-number{flex:1 1 auto !important;min-width:0 !important;width:auto !important;margin-top:0 !important;} .input-container.cc-exp{flex:0 0 120px !important;width:120px !important;min-width:0 !important;margin-top:0 !important;} .input-container.cc-cvc{flex:0 0 104px !important;width:104px !important;min-width:0 !important;margin-top:0 !important;} /* Message d'erreur HiPay (#card-errors) : encadré lisible. Le moteur le remplit en JS ; on le masque tant qu'il est vide. */ #card-errors.alert-danger{ display:none;position:static !important;float:none !important;width:100% !important; color:#ffb3a8;font-size:.84rem;font-weight:600;line-height:1.45; background:rgba(255,106,90,.12);border:1px solid rgba(255,106,90,.45); border-radius:10px;padding:11px 14px;margin:14px 0 0;text-align:left;box-sizing:border-box; } #card-errors.alert-danger:not(:empty){display:block;} .bottom-content{margin:18px 0 0;} .checkbox-container{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important; gap:12px !important;align-items:flex-start !important;cursor:pointer;width:100% !important;} .checkbox-container > *{margin:0 !important;} .checkbox-container input{display:none;} .checkbox-container .checkbox{flex:0 0 20px !important;flex-shrink:0;width:20px !important;height:20px !important;border-radius:6px;border:2px solid var(--o);background:rgba(255,255,255,.05);position:relative;margin-top:2px;} .checkbox-container .checkbox .checkmark{position:absolute;top:1px;left:6px;width:5px;height:11px;border-bottom:3px solid var(--o);border-right:3px solid var(--o);transform:rotate(45deg) scale(0);transition:transform .12s;} .checkbox-container input:checked ~ .checkbox .checkmark{transform:rotate(45deg) scale(1);} #checkbox-label.text{flex:1 1 auto !important;color:var(--ink-soft);font-size:.78rem;font-weight:400;line-height:1.55;margin:0 !important;display:block !important;} #checkbox-label a{color:var(--o);} /* Bloc prix : tout sur UNE ligne — libellé + montant à gauche, logos à droite. */ .price-container{display:flex !important;flex-direction:row !important;align-items:center !important; justify-content:space-between !important;gap:14px;flex-wrap:wrap; margin:0 0 6px !important;padding:14px 0 16px;border-bottom:1px solid var(--stroke);} #hipay-pay-message{display:flex;align-items:baseline;gap:10px;flex-wrap:nowrap; color:var(--ink-soft);font-size:.95rem;font-weight:600;margin:0 !important;} /* le style inline d'origine (top:10px) désalignait le montant : on neutralise. */ .big-price{color:#fff;font-weight:900;font-size:1.6rem;line-height:1; position:static !important;top:auto !important;margin-left:0 !important;} .big-price.mobile{display:none;} /* Logos de paiement : alignés à droite du prix, sans pastille (elle jurait sur le fond sombre). Légèrement désaturés pour s'intégrer sans écraser le montant. */ .price-container img{height:25px !important;width:auto !important;max-width:120px !important; margin:0 !important;padding:0 !important;background:none !important;display:block;flex:none; filter:grayscale(.35) brightness(1.05) opacity(.9);} .simpay-next-step,#continueButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--cta),#ff6f4d);color:#fff;font-size:1.05rem;font-weight:800;text-transform:none;letter-spacing:0;border:none;border-radius:100px;padding:16px;margin:20px 0 0;cursor:pointer;box-shadow:0 14px 34px -10px rgba(255,138,61,.55);transition:transform .18s,filter .18s;} .simpay-next-step:hover{transform:translateY(-2px);filter:brightness(1.05);} .hipay-checkout-container{display:flex;flex-direction:column;align-items:center;margin-top:28px;} .payment-button,#send-payment{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--pay),#348a70);color:#fff;font-size:1.05rem;font-weight:800;text-transform:none;letter-spacing:0;border:none;border-radius:100px;padding:16px;cursor:pointer;box-shadow:0 14px 34px -12px rgba(52,138,112,.5);transition:transform .18s,filter .18s;} .payment-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05);} .payment-button:disabled,#send-payment:disabled{opacity:.5;cursor:not-allowed;} .payment-button::before{content:none;} .hipay-checkout-container img{height:22px !important;width:auto !important;max-width:180px !important; margin-top:14px;display:block;background:none !important;padding:0 !important; filter:grayscale(1) brightness(2.2) opacity(.8);} .cgu-text-modal-hipay{color:var(--ink-faint);font-size:.7rem;line-height:1.6;background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;margin:16px 0 0;display:block;} .cgu-text-modal-hipay a{color:var(--o);} .secure-payment{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;margin:16px 0 0;} .secure-payment .img-wrap img{height:auto;max-width:44px;} .secure-payment .text-wrap p{color:var(--ink-faint);font-size:.76rem;line-height:1.5;} .reassurance{display:flex;flex-direction:column;gap:18px;margin-top:28px;} .reassurance-item{display:flex;flex-direction:row;align-items:flex-start;gap:14px;} .reassurance-item img{max-width:34px;width:34px;flex:none;} .reassurance-content{display:flex;flex-direction:column;} .reassurance-title{color:#fff;font-weight:700;font-size:.9rem;margin:0 0 2px;} .reassurance-text{color:var(--ink-soft);font-size:.82rem;line-height:1.45;} .step-2{display:none;} /* Fermeture désactivée : l'utilisateur ne doit pas pouvoir sortir du paywall. */ .close-icon{display:none !important;} /* modale 3DS */ #payment-secure-modal.payment-secure-background{position:fixed;inset:0;z-index:99998;background:rgba(6,5,20,.72);backdrop-filter:blur(6px);} .payment-secure{position:relative;background:#fff;max-width:560px;width:92%;height:520px;border-radius:16px;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;} .close-icon-secure{position:absolute;right:10px;top:10px;width:1.8rem;height:1.8rem;cursor:pointer;color:#888;z-index:5;} /* ligne carte : labels courts sur une ligne */ .split-input .input-container label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* #card-errors est déplacé par funnel_ui.js dans l'étape active (juste avant le bouton), car il est déclaré dans .step-1 dans le HTML du plugin. */ #modal-hipay .content{display:flex;flex-direction:column;} /* Sélecteur de langue TranslatePress : il flotte au-dessus du funnel et peut bloquer les boutons (surtout sur mobile). On le masque sur cette page. */ #trp-floater-ls,.trp-language-switcher-container,#trp-floater-ls-current-language, .trp-floater-ls-names,.trp-ls-shortcode-current-language,.trp-floater-ls-flags{display:none !important;} @media (max-width:560px){ .split-input{flex-wrap:wrap !important;} .input-container.cc-number{flex:1 1 100% !important;width:100% !important;} .input-container.cc-exp,.input-container.cc-cvc{flex:1 1 calc(50% - 7px) !important;width:auto !important;} } @media (max-width:560px){ /* MOBILE : la modale doit TENIR dans l'écran, sans scroll ni débordement. dvh = hauteur réelle hors barres Safari/Chrome mobile. */ #payment-form.modal-hipay-background{padding:6px !important;align-items:center !important; overflow:hidden !important;} #modal-hipay.modal-hipay{max-width:100% !important;width:100% !important; max-height:calc(100vh - 12px) !important;max-height:calc(100dvh - 12px) !important; margin:0 auto !important;border-radius:16px !important; overflow:hidden !important;} .modal-hipay-content{padding:30px 20px !important; max-height:calc(100vh - 12px) !important;max-height:calc(100dvh - 12px) !important; overflow-y:auto !important;overflow-x:hidden !important;} /* --- compactage general --- */ .modal-hipay .header{margin-bottom:2px !important;} #hipay-modal-title{font-size:1.05rem !important;line-height:1.2 !important;margin:0 !important;} #hipay-modal-subtitle{font-size:.76rem !important;line-height:1.35 !important;margin:5px auto 0 !important;} .modal-hipay .content{margin-top:8px !important;} .modal-hipay .input-container{margin:9px 0 0 !important;} .modal-hipay .input-container label{font-size:.76rem !important;margin-bottom:4px !important;} .hostedfield,#hipay-card-holder,#hipay-card-number,#hipay-expiry-date,#hipay-cvc,#hipay-mail-holder{ height:42px !important;border-radius:10px !important;padding:0 11px !important;} .simpay-next-step,#continueButton,.payment-button,#send-payment{ padding:13px !important;font-size:.95rem !important;margin-top:12px !important;} /* --- etape 2 : compactage fort --- */ .price-container{padding:10px 0 12px !important;margin:0 0 4px !important;gap:10px !important;} .price-container img{height:25px !important;max-width:96px !important;} #hipay-pay-message{font-size:.8rem !important;gap:8px !important;margin:0 !important;} .big-price{font-size:1.25rem !important;} .split-input{gap:9px !important;margin-top:2px !important;} .hipay-checkout-container{margin-top:10px !important;} .hipay-checkout-container img{height:25px !important;max-width:160px !important;padding:0 !important;margin-top:20px !important;} /* la reassurance prend trop de place a l'etape 2 : on la masque sur mobile */ .step-2 .reassurance{display:none !important;} /* etape 1 : CGV compactees */ .checkbox-container{gap:9px !important;} #checkbox-label.text{font-size:.72rem !important;line-height:1.42 !important;} .secure-payment{margin:10px 0 0 !important;gap:9px !important;} .secure-payment .img-wrap img{max-width:30px !important;} .secure-payment .text-wrap p{font-size:.68rem !important;line-height:1.4 !important;} .cgu-text-modal-hipay{font-size:.6rem !important;line-height:1.45 !important;padding:9px 10px !important;margin:10px 0 0 !important;} #card-errors.alert-danger{font-size:.76rem !important;padding:8px 11px !important;margin:10px 0 0 !important;} /* rien ne dépasse : tous les enfants bornés à la largeur dispo */ #modal-hipay .content,#modal-hipay .step-1,#modal-hipay .step-2,#modal-hipay .header{max-width:100% !important;overflow-x:hidden !important;} #modal-hipay *{max-width:100% !important;} #hipay-modal-title{font-size:1.2rem !important;} #hipay-modal-subtitle{font-size:.84rem !important;} /* champs : pleine largeur, rien qui dépasse */ .modal-hipay .input-container{width:100% !important;max-width:100% !important;} .hostedfield,#hipay-card-holder,#hipay-card-number,#hipay-expiry-date,#hipay-cvc,#hipay-mail-holder{ width:100% !important;max-width:100% !important;} .cgu-text-modal-hipay{padding:12px 13px !important;font-size:.66rem !important;} .secure-payment .text-wrap p{font-size:.72rem !important;} .reassurance-item img{width:28px !important;max-width:28px !important;} } @media (max-width:520px){ .split-input{flex-wrap:wrap !important;gap:12px !important;} .input-container.cc-number{flex:1 1 100% !important;width:100% !important;} .input-container.cc-exp,.input-container.cc-cvc{flex:1 1 calc(50% - 6px) !important;width:auto !important;} } @media (prefers-reduced-motion: reduce){ #psality-funnel *{animation-duration:.001s !important;transition-duration:.001s !important;} } /* ---------- garde-fous mobile pour tout le funnel ---------- */ @media (max-width:560px){ #psality-funnel{overflow-x:hidden !important;} #psality-funnel .pf-app{padding:14px 14px 36px !important;} #psality-funnel .pf-top-in{padding:10px 14px 9px !important;} #psality-funnel #b5pt_form .b5pt_questions{padding:8px 14px 20px !important;} /* échelle : ronds un peu réduits pour tenir sans déborder */ #psality-funnel #b5pt_form .choice:nth-child(1) input, #psality-funnel #b5pt_form .choice:nth-child(5) input{width:40px !important;height:40px !important;} #psality-funnel #b5pt_form .choice:nth-child(2) input, #psality-funnel #b5pt_form .choice:nth-child(4) input{width:35px !important;height:35px !important;} #psality-funnel #b5pt_form .choice:nth-child(3) input{width:28px !important;height:28px !important;} #psality-funnel .fs-subtitle{font-size:1rem !important;} /* boutons du quiz : ne pas déborder */ #psality-funnel #b5pt_form .action-button{padding:12px 20px !important;font-size:.9rem !important;} /* paywall : radar + chips adaptés */ #psality-funnel .pf-constel{width:min(94vw,340px) !important;height:min(94vw,340px) !important;} #psality-funnel .pf-chip{width:92px !important;} #psality-funnel .pf-chip .gauge{width:74px !important;} #psality-funnel .pf-chip .nm{font-size:.7rem !important;} #psality-funnel .pf-cta{padding:15px 24px !important;font-size:1rem !important;} } /* ============================================================================ PETITS ÉCRANS / HAUTEUR RÉDUITE (Safari iOS avec ses barres, petits mobiles). Ces règles ne se déclenchent QUE si la hauteur disponible est faible : sur un grand mobile en plein écran, rien ne change. On récupère de la place sur les espacements pour éviter le scroll quand les barres du navigateur sont là. ============================================================================ */ @media (max-width:560px) and (max-height:780px){ #psality-funnel .pf-top-in{padding:8px 14px 7px !important;} #psality-funnel .pf-logo{height:38px !important;} #psality-funnel .pf-bar{margin:8px 0 0 !important;height:5px !important;} #psality-funnel .pf-meta{margin:5px 2px 0 !important;} #psality-funnel #pf-count,#psality-funnel #pf-msg{font-size:.7rem !important;} #psality-funnel .pf-app{padding:10px 14px 24px !important;} #psality-funnel #custom-test{padding-top:8px !important;} #psality-funnel #b5pt_form .b5pt_questions{padding:4px 13px 14px !important;border-radius:18px !important;} #psality-funnel #b5pt_form fieldset{padding:13px 0 !important;} #psality-funnel .fs-subtitle{font-size:.95rem !important;margin:0 0 10px !important;line-height:1.25 !important;} #psality-funnel #b5pt_form .b5pt_form_radios{padding:2px 4px !important;} #psality-funnel #b5pt_form .choice{padding:3px 0 !important;} #psality-funnel .mobile-labels{margin:5px auto 0 !important;} #psality-funnel .mobile-labels label{font-size:.66rem !important;} #psality-funnel .b5pt_form_buttons{margin-top:12px !important;} #psality-funnel #b5pt_form .action-button{padding:10px 18px !important;font-size:.86rem !important;} /* paywall */ #psality-funnel #custom-loading{padding:10px 0 30px !important;} #psality-funnel .pf-constel{width:min(86vw,290px) !important;height:min(86vw,290px) !important;} #psality-funnel .pf-pw-head h2{font-size:1.5rem !important;} #psality-funnel .pf-pw-head p{font-size:.88rem !important;margin-top:7px !important;} #psality-funnel .pf-lock-note{margin-top:9px !important;font-size:.78rem !important;} #psality-funnel .pf-pw-cta{margin-top:12px !important;} #psality-funnel .pf-cta{padding:13px 20px !important;font-size:.95rem !important;} #psality-funnel .pf-reassure{margin-top:12px !important;font-size:.74rem !important;gap:8px 16px !important;} } /* Écrans très bas (< 700px utiles) : on comprime encore la modale de paiement */ @media (max-width:560px) and (max-height:700px){ #hipay-modal-title{font-size:.98rem !important;} #hipay-modal-subtitle{font-size:.71rem !important;margin-top:4px !important;} .modal-hipay-content{padding:20px 16px !important;} .modal-hipay .content{margin-top:6px !important;} .modal-hipay .input-container{margin:7px 0 0 !important;} .modal-hipay .input-container label{font-size:.72rem !important;margin-bottom:3px !important;} .hostedfield,#hipay-card-holder,#hipay-card-number,#hipay-expiry-date,#hipay-cvc,#hipay-mail-holder{ height:38px !important;} .simpay-next-step,#continueButton,.payment-button,#send-payment{padding:11px !important;font-size:.9rem !important;margin-top:10px !important;} .price-container{padding:7px 0 9px !important;} .big-price{font-size:1.35rem !important;} .price-container img{height:20px !important;} .cgu-text-modal-hipay{font-size:.56rem !important;padding:7px 9px !important;margin-top:8px !important;} .secure-payment{margin-top:8px !important;} .secure-payment .text-wrap p{font-size:.63rem !important;} .checkbox-container{gap:8px !important;} #checkbox-label.text{font-size:.68rem !important;line-height:1.35 !important;} .hipay-checkout-container{margin-top:8px !important;} .hipay-checkout-container img{height:18px !important;margin-top:10px !important;} }