/* * Page d'inscription — fond sombre + habillage identique à l'esprit de * l'accueil/annuaire (demandé par le propriétaire), plus un reskin des * champs Ultimate Member (classes .um-*, générées par le plugin, pas * les nôtres) qui sont conçus pour un thème clair par défaut. * * Auto-suffisant (variables et couleurs propres, aucune dépendance à * une classe de body d'une autre page) — même précaution que * .mavipro-caps-wrap/.mavipro-site-foot après les pièges déjà vécus. */ body.mavipro-inscription-page { --mvi-bg: #060B16; --mvi-cyan: #22D3EE; --mvi-cyan-soft: #67E8F9; --mvi-blue: #3B82F6; --mvi-white: #F2F6FF; --mvi-text: #E6EDFB; --mvi-text-mut: #93A2C4; --mvi-text-dim: #5E7099; --mvi-glass: rgba(255, 255, 255, 0.05); --mvi-glass-2: rgba(255, 255, 255, 0.08); --mvi-glass-line: rgba(255, 255, 255, 0.14); --mvi-fd: 'Space Grotesk', system-ui, sans-serif; --mvi-fb: 'Inter', system-ui, sans-serif; background: var(--mvi-bg); color: var(--mvi-text); font-family: var(--mvi-fb); min-height: 100vh; -webkit-font-smoothing: antialiased; margin: 0; overflow-x: hidden; } /* CSS chargé uniquement sur /inscription/ (voir mavipro_enqueue_inscription_page_assets) donc cette règle non scopée sur n'affecte aucune autre page — même piège déjà rencontré sur l'accueil : overflow-x:hidden sur body seul ne suffit pas sous Safari pour empêcher le défilement horizontal causé par les halos qui débordent volontairement de l'écran. */ html { overflow-x: hidden; } body.mavipro-inscription-page a { color: inherit; text-decoration: none; } .mavipro-inscription-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mavipro-inscription-halo { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .4; } .mavipro-inscription-halo--1 { width: 560px; height: 560px; top: -140px; left: -100px; background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 62%); } .mavipro-inscription-halo--2 { width: 480px; height: 480px; bottom: -120px; right: -100px; background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 65%); } .mavipro-inscription-main { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 3rem 1.4rem 6rem; } .mavipro-inscription-head { text-align: center; margin-bottom: 2.4rem; } /* display:flex + gap sans wrapper autour du texte espacerait aussi "MaVi" et "Pro" (rendu "MaVi Pro") — l'espacement vit sur __mark uniquement. */ .mavipro-inscription-brand { display: inline-flex; align-items: center; font-family: var(--mvi-fd); font-weight: 600; font-size: 1.2rem; color: #fff; margin-bottom: 1.6rem; } .mavipro-inscription-brand span { color: var(--mvi-cyan); } .mavipro-inscription-brand__mark { width: 12px; height: 16px; border-radius: 8px; background: linear-gradient(160deg, var(--mvi-cyan-soft), var(--mvi-blue)); display: inline-block; margin-right: .5rem; } .mavipro-inscription-eyebrow { font-family: var(--mvi-fd); font-size: .76rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mvi-cyan-soft); margin-bottom: .8rem; } .mavipro-inscription-head h1 { font-family: var(--mvi-fd); font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--mvi-white); letter-spacing: -0.02em; margin: 0; } .mavipro-inscription-card { position: relative; z-index: 1; background: var(--mvi-glass); border: 1px solid var(--mvi-glass-line); border-radius: 20px; padding: 2.2rem clamp(1.2rem, 4vw, 2.4rem); backdrop-filter: blur(16px); } .mavipro-inscription-back { display: block; text-align: center; margin-top: 1.6rem; font-family: var(--mvi-fd); font-size: .85rem; font-weight: 500; color: var(--mvi-text-mut); } .mavipro-inscription-back:hover { color: var(--mvi-cyan-soft); } /* Lien vers l'autre page (inscription <-> connexion) : un seul bouton d'action principal par formulaire, ce lien reste discret plutôt que de rivaliser visuellement avec le bouton primaire (voir mavipro_disable_um_register_secondary_btn() / ..._login_secondary_btn()). */ .mavipro-inscription-switch { display: block; text-align: center; margin-top: 1.4rem; font-family: var(--mvi-fd); font-size: .88rem; font-weight: 500; color: var(--mvi-text-mut); } .mavipro-inscription-switch:hover { color: var(--mvi-cyan-soft); } /* --- Reskin sombre du formulaire Ultimate Member --- */ .mavipro-inscription-card .um-field-label label { font-family: var(--mvi-fd); font-size: .85rem; font-weight: 500; color: var(--mvi-text); } .mavipro-inscription-card .um-form-field, .mavipro-inscription-card select.um-form-field, .mavipro-inscription-card textarea.um-form-field { background: var(--mvi-glass-2) !important; border: 1px solid var(--mvi-glass-line) !important; border-radius: 10px !important; color: var(--mvi-text) !important; font-family: var(--mvi-fb) !important; } .mavipro-inscription-card .um-form-field::placeholder { color: var(--mvi-text-dim); opacity: 1; } .mavipro-inscription-card .um-form-field:focus { border-color: var(--mvi-cyan) !important; outline: none; box-shadow: none !important; } .mavipro-inscription-card select.um-form-field option { background: #0E1626; color: var(--mvi-text); } /* Cases à cocher CGV & CGU / RGPD, juste au-dessus du bouton d'envoi — voir mavipro_render_registration_consent_checkboxes(), includes/ um-inscription.php. */ .mavipro-consent { margin: 1.2rem 0; display: flex; flex-direction: column; gap: .7rem; } .mavipro-consent__row { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--mvi-text-mut); cursor: pointer; } .mavipro-consent__row input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--mvi-cyan); cursor: pointer; } .mavipro-consent__row a { color: var(--mvi-cyan-soft); text-decoration: underline; text-underline-offset: 2px; } .mavipro-consent__row a:hover { color: var(--mvi-cyan); } .mavipro-consent .um-notice.err { margin: -.3rem 0 0 2.4rem; font-size: .8rem; padding: .5rem .8rem; } .mavipro-inscription-card .um-button, .mavipro-inscription-card #um-submit-btn { font-family: var(--mvi-fd) !important; font-weight: 600 !important; background: var(--mvi-cyan) !important; color: #04121b !important; border: none !important; border-radius: 100px !important; padding: .85rem 1.8rem !important; } .mavipro-inscription-card .um-button:hover { opacity: .92; } .mavipro-inscription-card .um-field-error .um-form-field { border-color: #F87171 !important; } .mavipro-inscription-card .um-error, .mavipro-inscription-card .um-notice.err { color: #F87171; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 10px; padding: .8rem 1rem; } /* .um-notice.success (ex. "Votre mot de passe a bien été modifié.") héritait du fond vert par défaut d'Ultimate Member malgré notre couleur de texte rouge héritée de la règle .um-error/.um-notice ci-dessus — mélange illisible fond vert/texte rouge (retour propriétaire, 31 juillet 2026). Repris dans les mêmes couleurs que le bouton primaire (--mvi-cyan + texte quasi noir) plutôt que le rouge d'erreur, pour rester cohérent avec le succès plutôt qu'avec une alerte. */ .mavipro-inscription-card .um-notice.success { color: #04121b !important; background: var(--mvi-cyan) !important; border: 1px solid var(--mvi-cyan) !important; border-radius: 10px; padding: .8rem 1rem; } /* select2 (utilisé sur le select "Type d'établissement", classe um-s1 — voir jQuery(".um-s1").select2() dans um-scripts.js d'Ultimate Member) : select2.min.css est chargé APRÈS inscription.css et fixe un fond blanc codé en dur (background-color:#fff) sur la boîte fermée — repassé ici en !important pour ne laisser aucune chance à un fond blanc résiduel (bug remonté par le propriétaire, le champ tranchait sur tous les autres, stylés en sombre). */ .mavipro-inscription-card .select2-container--default .select2-selection--single { background: var(--mvi-glass-2) !important; border: 1px solid var(--mvi-glass-line) !important; border-radius: 10px !important; height: auto !important; padding: .68rem 1rem !important; } /* Insuffisant à lui seul : um-styles.min.css (chargé encore après select2.min.css) cible aussi ce champ avec .um-field .select2.select2- container .select2-selection (4 classes, !important) — plus précis que la règle ci-dessus (3 classes), donc gagnant malgré notre !important. Fond blanc + texte gris sur la boîte fermée ET sur les options de la liste déroulante (bug remonté par le propriétaire, 1er août 2026, capture à l'appui). Repris avec un sélecteur au moins aussi précis. */ .mavipro-inscription-card .um-field .select2.select2-container .select2-selection { background: var(--mvi-glass-2) !important; border: 1px solid var(--mvi-glass-line) !important; color: var(--mvi-text) !important; /* Même sélecteur qu'UM fixe aussi height:40px/padding:0 0 0 12px/ border-radius:2px en !important — repris ici pour la même raison que la couleur, sinon le champ garde un design plus petit/moins arrondi que les autres (retour propriétaire, 1er août 2026, capture à l'appui). Mêmes valeurs que .um-form-field ci-dessus. */ border-radius: 10px !important; height: auto !important; padding: .68rem 1rem !important; } .mavipro-inscription-card .select2-selection__rendered { color: var(--mvi-text) !important; padding: 0 !important; line-height: 1.3 !important; } .mavipro-inscription-card .select2-selection__placeholder { color: var(--mvi-text-dim) !important; } .mavipro-inscription-card .select2-selection__arrow { height: 100% !important; } .mavipro-inscription-card .select2-selection__arrow b { border-color: var(--mvi-text-dim) transparent transparent transparent !important; } /* La liste déroulante ouverte et son champ de recherche s'ajoutent au , hors de .mavipro-inscription-card — jamais scopés dessous. */ .select2-dropdown { background: #0E1626 !important; border-color: var(--mvi-glass-line) !important; } .select2-results__option { color: var(--mvi-text) !important; } /* Classe répétée : même cause que ci-dessus. Sélecteur réel d'UM (vérifié dans um-styles.min.css) : ".um-field .select2-container.select2-container--open .select2-dropdown .select2-results li" — 5 classes + une balise, !important — largement plus précis que notre première tentative à 4 répétitions (encore battue, retour propriétaire, 1er août 2026, capture à l'appui). Répéter la classe augmente la précision sans dépendre de la présence ou non de .um-field comme ancêtre (le dropdown ouvert est parfois détaché du DOM d'origine, voir commentaire au-dessus) ; marge large (7×) pour ne pas rejouer cette chasse à la spécificité à chaque future mise à jour d'Ultimate Member. */ /* :not(...) exclut l'état survolé/sélectionné au clavier (--highlighted) : à 7 répétitions, cette règle (spécificité 7) battait aussi la règle ci-dessous censée mettre le texte en noir sur le fond cyan du survol (spécificité 3 seulement) — texte clair devenu illisible sur fond cyan clair (retour propriétaire, 1er août 2026). */ .select2-results__option.select2-results__option.select2-results__option.select2-results__option.select2-results__option.select2-results__option.select2-results__option:not(.select2-results__option--highlighted) { color: var(--mvi-text) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--mvi-cyan) !important; color: #000000 !important; } .select2-search--dropdown .select2-search__field { background: #0E1626 !important; border: 1px solid var(--mvi-glass-line) !important; color: var(--mvi-text) !important; } /* Le texte tapé (color ci-dessus) ne suffit pas pour le placeholder "Rechercher..." : ::placeholder n'hérite pas de `color`, chaque navigateur lui donne son propre gris par défaut — invisible sur notre fond sombre (retour propriétaire, 1er août 2026). */ .select2-search--dropdown .select2-search__field::placeholder { color: var(--mvi-text) !important; opacity: 1 !important; } /* --- Pages paiement (étape 6) : réutilisent le même habillage --- */ .mavipro-inscription-card p { font-family: var(--mvi-fb); color: var(--mvi-text-mut); line-height: 1.6; margin: 0 0 1rem; } .mavipro-inscription-card p:last-child { margin-bottom: 0; } .mavipro-paiement-spinner { width: 44px; height: 44px; margin: 0 auto 1.2rem; border-radius: 50%; border: 3px solid var(--mvi-glass-line); border-top-color: var(--mvi-cyan); animation: mavipro-spin 1s linear infinite; } @keyframes mavipro-spin { to { transform: rotate(360deg); } } .mavipro-inscription-btn { display: inline-block; margin-top: .4rem; font-family: var(--mvi-fd); font-weight: 600; font-size: .95rem; background: var(--mvi-cyan); color: #04121b !important; border: none; border-radius: 100px; padding: .85rem 1.8rem; text-align: center; } .mavipro-inscription-btn:hover { opacity: .92; } /* --- Indicateur d'étapes (Inscription / Paiement / Capsule) --- */ .mavipro-steps { display: flex; justify-content: center; max-width: 420px; margin: 0 auto 2.2rem; position: relative; z-index: 1; } .mavipro-step { flex: 1; text-align: center; position: relative; } .mavipro-step::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--mvi-glass-line); z-index: 0; } .mavipro-step:last-child::after { display: none; } .mavipro-step__n { width: 30px; height: 30px; border-radius: 50%; background: var(--mvi-glass-2); border: 1px solid var(--mvi-glass-line); color: var(--mvi-text-dim); display: grid; place-items: center; margin: 0 auto .4rem; font-family: var(--mvi-fd); font-size: .82rem; font-weight: 600; position: relative; z-index: 1; } .mavipro-step__l { font-size: .68rem; color: var(--mvi-text-dim); font-family: var(--mvi-fd); letter-spacing: .04em; } .mavipro-step.on .mavipro-step__n { background: var(--mvi-cyan); border-color: var(--mvi-cyan); color: #04121b; } .mavipro-step.on .mavipro-step__l { color: var(--mvi-text); } .mavipro-step.done .mavipro-step__n { background: #34D399; border-color: #34D399; color: #04121b; } /* --- Mot de passe : checklist + correspondance (voir assets/js/inscription-password.js) — icône œil gérée nativement par l'option Ultimate Member "toggle_password" (.um-toggle-password). --- */ .mavipro-pw-requirements { list-style: none; margin: .6rem 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .mavipro-pw-req { display: flex; align-items: center; gap: .55rem; font-family: var(--mvi-fb); font-size: .8rem; color: var(--mvi-text-dim); transition: color .15s ease; } .mavipro-pw-req__icon { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--mvi-text-dim); position: relative; transition: background-color .15s ease, border-color .15s ease; } .mavipro-pw-req.is-met { color: #34D399; } .mavipro-pw-req.is-met .mavipro-pw-req__icon { border-color: #34D399; background: #34D399; } .mavipro-pw-req.is-met .mavipro-pw-req__icon::after { content: ""; position: absolute; left: 4px; top: .5px; width: 4px; height: 8px; border: solid #04121b; border-width: 0 2px 2px 0; transform: rotate(45deg); } .mavipro-pw-match { margin: -.5rem 0 1.1rem; font-family: var(--mvi-fb); font-size: .82rem; min-height: 1.2em; } .mavipro-pw-match.is-match { color: #34D399; } .mavipro-pw-match.is-mismatch { color: #F87171; } .mavipro-inscription-card #um-submit-btn:disabled, .mavipro-inscription-card .um-button:disabled { opacity: .45 !important; cursor: not-allowed !important; } /* --- Bloc "Votre adresse définitive" (aperçu du slug en direct) --- */ .mavipro-slug-box { margin-top: 1.2rem; padding: .9rem 1rem; border-radius: 12px; background: var(--mvi-glass-2); border: 1px solid var(--mvi-glass-line); font-size: .85rem; } .mavipro-slug-box .lbl { color: var(--mvi-text-dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; } .mavipro-slug-box .url { font-family: var(--mvi-fd); color: var(--mvi-cyan); word-break: break-all; } .mavipro-slug-state { margin-top: .5rem; font-size: .82rem; } .mavipro-slug-state.ok { color: #34D399; } .mavipro-slug-state.ko { color: #F87171; } /* Avertissement "code postal au lieu du nom de ville" (retour propriétaire, 29 août 2026) — voir assets/js/um-inscription-check.js. */ .mavipro-ville-warning { margin-top: .5rem; font-size: .82rem; color: #F87171; }