/* voyanceprestige.com — pages visiteurs : inscription, espace client, mot de passe, contact, devenir voyante.
   Complète voyanceprestige.css (jetons et composants communs). Les formulaires du socle étaient mis en forme
   par Bootstrap : leur présentation est refaite ici, sans recharger Bootstrap. */

/* ---------- messages ---------- */
.flash-Erreur, .flash-nonValide, .flash-LiensExpirer { background: color-mix(in srgb, var(--spec) 10%, #fff); color: #8a3300; }
.vpc-alerte { margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: var(--r); background: color-mix(in srgb, var(--spec) 10%, #fff); color: #8a3300; border: 1px solid color-mix(in srgb, var(--spec) 30%, #fff); }
.vpc-info { margin: 0 0 1.2rem; padding: .8rem 1rem; border-radius: var(--r); background: var(--ciel); color: var(--marque); }

/* ---------- colonne de connexion (espace client, mot de passe) ---------- */
.vpc-auth { max-width: 520px; margin: -70px auto 3rem; padding: 0 16px; position: relative; }
.vpc-carte { background: var(--carte); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 2rem 2.2rem; }
.vpc-carte h1 { font-size: 1.7rem; }
.vpc-chapo { color: var(--doux); margin: 0 0 1.4rem; }
.vpc-bas { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--bord); text-align: center; color: var(--doux); }
.vpc-bas a { font-weight: 500; }

/* ---------- champs ---------- */
.vpc-form { display: grid; gap: 1rem; }
.vpc-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vpc-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vpc-large { grid-column: 1 / -1; }
.vpc-champ { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.vpc-champ > label, .vpc-libelle { font-weight: 500; font-size: .92rem; color: var(--encre); }
.vpc-form input[type="text"], .vpc-form input[type="email"], .vpc-form input[type="password"], .vpc-form input[type="tel"],
.vpc-form select, .vpc-form textarea {
  width: 100%; min-height: 46px; padding: .55rem .8rem; border: 1px solid var(--bord); border-radius: var(--r-sm);
  background: #fff; font: 400 1rem/1.4 var(--sans); color: var(--encre); transition: border-color .15s ease, box-shadow .15s ease;
}
.vpc-form textarea { min-height: 150px; resize: vertical; }
.vpc-form input:focus-visible, .vpc-form select:focus-visible, .vpc-form textarea:focus-visible {
  outline: 3px solid var(--inscription); outline-offset: 1px; border-color: var(--inscription);
}
.vpc-form ::placeholder { color: var(--doux); opacity: .8; }
/* erreurs rendues par form_errors (liste) */
.vpc-champ ul, .vpc-erreurs ul { list-style: none; margin: 0; padding: 0; color: #a33a00; font-size: .88rem; font-weight: 500; }
.vpc-champ:has(ul) input, .vpc-champ:has(ul) select, .vpc-champ:has(ul) textarea { border-color: var(--spec); }
.vpc-aide { font-size: .85rem; color: var(--doux); margin: 0; }

fieldset.vpc-bloc { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
fieldset.vpc-bloc + fieldset.vpc-bloc { padding-top: 1.2rem; border-top: 1px solid var(--bord); }
.vpc-bloc legend { padding: 0; margin-bottom: .2rem; font: 600 1.05rem/1.3 var(--serif); color: var(--titre); }

/* mot de passe avec bouton Afficher */
.vpc-mdp { display: flex; gap: .5rem; }
.vpc-mdp input { flex: 1 1 auto; min-width: 0; }
.vpc-voir { flex: 0 0 auto; min-height: 46px; min-width: 44px; padding: 0 .9rem; border: 1px solid var(--bord); border-radius: var(--r-sm);
  background: #fff; color: var(--lien); font: 500 .88rem var(--sans); cursor: pointer; }
.vpc-voir:hover { border-color: var(--lien); }

/* cases à cocher */
.vpc-case { display: flex; gap: .7rem; align-items: flex-start; min-height: 44px; padding: .35rem 0; font-size: .95rem; cursor: pointer; }
.vpc-case input { flex: 0 0 auto; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--client); cursor: pointer; }
.vpc-lien-discret { font-size: .92rem; }
.vpc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; }
.vpc-form button[type="submit"], .vpc-envoyer { min-width: 200px; }
.vpc-form button[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

/* connexion avec Google / Facebook */
.vpc-ou { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0; color: var(--doux); font-size: .88rem; }
.vpc-ou::before, .vpc-ou::after { content: ""; flex: 1; border-top: 1px solid var(--bord); }
.vpc-social { display: grid; gap: .6rem; }
.vpc-social .vbtn { width: 100%; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; gap: .6rem; }
.vpc-social img { width: 20px; height: 20px; }

/* ---------- inscription : les 4 étapes ---------- */
.vpc-etapes { list-style: none; counter-reset: etape; padding: 0 !important; margin: 1.2rem 0 1.6rem; display: grid; gap: .8rem; }
.vpc-etapes li { counter-increment: etape; position: relative; padding: .2rem 0 0 3rem; min-height: 2.2rem; max-width: none; }
.vpc-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--inscription); color: #fff; font: 700 1rem/1 var(--sans); }
.vpc-etapes strong { color: var(--marque); }

/* encart latéral (texte de l'ancien site) */
.vpc-aparte { background: var(--carte); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 1.6rem 1.6rem 1.2rem; border-top: 5px solid var(--client); }
.vpc-aparte h2 { font-size: 1.2rem; }
.vpc-aparte p { font-size: .95rem; color: var(--encre); }
.vpc-aparte .vbtn { margin-top: .4rem; }

/* ---------- contact ---------- */
.vpc-tels { list-style: none; padding: 0 !important; margin: .8rem 0 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.vpc-tels li { max-width: none; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond); }
.vpc-tels .drapeau { grid-row: span 2; width: 30px; height: 30px; color: var(--lien); }
.vpc-tels span { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--doux); }
.vpc-tels a { font: 700 1.15rem/1.4 var(--sans); color: var(--marque); text-decoration: none; }
.vpc-tels a:hover { text-decoration: underline; }
.vpc-recaptcha { min-height: 78px; max-width: 100%; overflow: hidden; }

/* ---------- devenir voyante ---------- */
.vpc-appel { margin: 1.6rem 0; padding: 1.3rem 1.4rem; border-radius: var(--r); background: linear-gradient(180deg, var(--ciel) 0, #fff 100%); border-left: 5px solid var(--inscription); }
.vpc-appel p { margin: 0 0 .9rem; font-weight: 500; color: var(--marque); }
.vpc-etape-titre { display: flex; align-items: center; gap: .6rem; font: 600 1.15rem/1.3 var(--serif); color: var(--titre); margin: 0 0 1rem; border: 0 !important; padding: 0 !important; }
.vpc-etape-titre span { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--inscription); color: #fff; font: 700 .95rem/1 var(--sans); }
.vpc-accord { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem; border: 1px solid var(--bord); border-radius: var(--r); background: var(--fond); }
.vpc-accord strong { color: var(--marque); }
.vpc-accord.ok { border-color: var(--client); background: color-mix(in srgb, var(--client) 10%, #fff); }
.vpc-accord .vpc-ok { font-weight: 700; color: #3f6b16; }
.vpc-separe { border: 0; border-top: 1px solid var(--bord); margin: 1.6rem 0; }
/* spécialités : cases en pastilles */
.vpc-pastilles > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.vpc-pastilles input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vpc-pastilles input[type="checkbox"] + label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--bord);
  border-radius: 999px; background: #fff; color: var(--encre); font-weight: 500; cursor: pointer; }
.vpc-pastilles input[type="checkbox"]:checked + label { background: var(--inscription); border-color: var(--inscription); color: #fff; }
.vpc-pastilles input[type="checkbox"]:focus-visible + label { outline: 3px solid var(--inscription); outline-offset: 2px; }

/* charte à accepter */
.vpc-accepter { margin-top: 2rem; padding: 1.3rem 1.4rem; border-radius: var(--r); background: var(--ciel); display: grid; gap: 1rem; }

@media (max-width: 900px) {
  .vpc-auth { margin-top: -40px; }
}
@media (max-width: 640px) {
  .vpc-carte { padding: 1.4rem 1.1rem; }
  .vpc-grille, .vpc-grille-3, .vpc-tels { grid-template-columns: minmax(0, 1fr); }
  .vpc-actions { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .vpc-form button[type="submit"], .vpc-envoyer { width: 100%; min-width: 0; }
}
.vpc-paiement { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--bord); }
.vpc-paiement p { margin: 0 0 .6rem; color: var(--doux); }
.vpc-paiement img { display: block; max-width: 200px; height: auto; }