/* ==========================================================================
   Écrans de connexion et d'inscription 1.7.1 — [relpro_auth]
   --------------------------------------------------------------------------
   CSS écrit à la main, chargé par PasswordlessShortcode::maybe_enqueue_assets()
   sur les pages qui portent [relpro_auth] ou [relpro_client_dashboard]
   (/inscription/, /inscription-pro/, /connexion/, /mon-espace-client/).
   Même langage que l'espace parent : carte blanche arrondie, Caveat, panneau
   Pêche pour les parents, cacao pour les pros. Classes relpro-ax*.
   ========================================================================== */

.relpro-ax {
  --ax-coral:     #D4553A;
  --ax-coral-700: #B8442C;
  --ax-coral-100: #FBE3D5;
  --ax-teal-700:  #3F8780;
  --ax-teal-200:  #C8E2DF;
  --ax-cream:     var(--cp-cream, #FBF6F0);
  --ax-peach:     var(--cp-peach, #F5EDE3);
  --ax-cacao:     var(--cp-cacao, #3B2A24);
  --ax-ink:       var(--cp-graphite, #2C2C2A);
  --ax-muted:     #888780;
  --ax-line:      #ECE3D6;
  --ax-soft:      #5C5650;
  --ax-hero-a:    #F7D3C3;
  --ax-hero-b:    #FBE6D3;
  --ax-sub:       #7A5A4E;

  width: min(1040px, calc(100vw - 32px));
  margin: 8px 0 56px calc((100% - min(1040px, calc(100vw - 32px))) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(59, 42, 36, .12);
  font-family: 'Lato', sans-serif;
  color: var(--ax-ink);
  text-align: left;
}
.relpro-ax *,
.relpro-ax *::before { box-sizing: border-box; }
.relpro-ax--single {
  grid-template-columns: minmax(0, 1fr);
  width: min(620px, calc(100vw - 32px));
  margin-left: calc((100% - min(620px, calc(100vw - 32px))) / 2);
}

/* Le titre du thème fait doublon avec celui de la carte ; fond crème uni. */
body:has(.relpro-ax) .entry-header { display: none; }
body:has(.relpro-ax) { background: var(--cp-cream, #FBF6F0); }
body:has(.relpro-ax) .inside-article { background: transparent; }

/* Dans l'espace parent non connecté, le composant prend toute sa largeur. */
.relpro-client-dashboard.relpro-cd-locked { max-width: none; padding: 0; margin: 0; }

/* ── Colonne du formulaire ── */
.relpro-ax__main { padding: 48px 52px 44px; min-width: 0; }
.relpro-ax__main--center { text-align: center; display: flex; flex-direction: column; align-items: center; }

.relpro-ax__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; }
.relpro-ax__steps li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ax-cream); color: var(--ax-muted); font-size: 12.5px; font-weight: 700; }
.relpro-ax__steps i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-style: normal; font-size: 11px; }
.relpro-ax__steps .is-on { background: var(--ax-coral-100); color: var(--ax-coral-700); }
.relpro-ax__steps .is-on i { background: var(--ax-coral); color: #fff; }
.relpro-ax__steps .is-done { color: var(--ax-teal-700); }
.relpro-ax__steps .is-done i { background: var(--ax-teal-200); color: var(--ax-teal-700); }

.relpro-ax__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ax-teal-700); }
.relpro-ax .relpro-ax__title { margin: 0 0 12px; font: 700 46px/1.02 'Caveat', cursive; color: var(--ax-ink); letter-spacing: 0; text-transform: none; }
.relpro-ax .relpro-ax__title span { color: var(--ax-coral); }
.relpro-ax__lead { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ax-soft); }
.relpro-ax__lead strong { color: var(--ax-ink); }

.relpro-ax__alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--ax-teal-200); color: #24433F; font-size: 14.5px; font-weight: 700; line-height: 1.5; }
.relpro-ax__alert--error { background: #FDECE8; color: #A63A22; }

.relpro-ax__form { margin: 0; }
.relpro-ax__label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ax-ink); }
.relpro-ax__label em { font-style: normal; font-weight: 400; color: var(--ax-muted); }
.relpro-ax .relpro-ax__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  border: 1.5px solid var(--ax-line);
  border-radius: 16px;
  background: var(--ax-cream);
  font: 16px 'Lato', sans-serif;
  color: var(--ax-ink);
  box-shadow: none;
}
.relpro-ax .relpro-ax__input:focus { outline: none; border-color: var(--ax-coral); background: #fff; box-shadow: 0 0 0 4px var(--ax-coral-100); }
.relpro-ax__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 18px; }
.relpro-ax__hint { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ax-muted); }

/* Boutons : trois états, GeneratePress repeint les <button> au survol. */
.relpro-ax .relpro-ax__btn,
.relpro-ax .relpro-ax__btn:hover,
.relpro-ax .relpro-ax__btn:focus,
.relpro-ax .relpro-ax__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ax-coral);
  color: #fff;
  font: 700 16px/1.2 'Lato', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.relpro-ax .relpro-ax__btn:hover { background: var(--ax-coral-700); transform: translateY(-1px); }
.relpro-ax .relpro-ax__btn:disabled { opacity: .65; cursor: default; transform: none; }

.relpro-ax__legal { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ax-muted); text-align: center; }
.relpro-ax__legal a { color: var(--ax-soft); text-decoration: underline; }
.relpro-ax__switch { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ax-line); font-size: 14px; color: var(--ax-muted); }
.relpro-ax__switch a,
.relpro-ax__back { font-weight: 700; color: var(--ax-teal-700); text-decoration: none; }
.relpro-ax__back { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--ax-coral-700); }
.relpro-ax__switch a:hover,
.relpro-ax__back:hover { text-decoration: underline; }

/* ── Le code : un seul champ, six emplacements dessinés ──
   Police à chasse fixe : chaque chiffre occupe 1ch, suivi de 1ch d'espace ;
   les six traits du fond sont posés tous les 2ch, exactement sous chacun. */
.relpro-ax__otp {
  display: flex;
  justify-content: center;
  padding: 18px 10px 14px;
  border: 1.5px solid var(--ax-line);
  border-radius: 20px;
  background: var(--ax-cream);
}
.relpro-ax__otp:focus-within { border-color: var(--ax-coral); background: #fff; box-shadow: 0 0 0 4px var(--ax-coral-100); }
.relpro-ax .relpro-ax__otp input {
  width: calc(12ch + 4px);
  max-width: 100%;
  margin: 0;
  padding: 10px 0 14px 1ch;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  font: 700 34px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 1ch;
  color: var(--ax-ink);
  background-color: transparent;
  background-image: linear-gradient(to right, var(--ax-coral) 0 1.4ch, transparent 1.4ch 2ch);
  background-size: 2ch 3px;
  background-repeat: repeat-x;
  background-position: .3ch 100%;
}
.relpro-ax .relpro-ax__otp input::placeholder { color: transparent; }
/* Le thème grise les champs au focus (input[type=text]:focus) : on garde le
   fond transparent, les six traits restent seuls visibles. */
.relpro-ax .relpro-ax__otp input:focus,
.relpro-ax .relpro-ax__otp input:hover { background-color: transparent; outline: none; box-shadow: none; }

/* ── Photo (profil parent) ── */
.relpro-ax__avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 4px; }
.relpro-ax__avatar-preview { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 1.5px dashed var(--ax-line); background: var(--ax-cream); color: var(--ax-muted); flex: none; }
.relpro-ax__avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.relpro-ax__avatar-btn { padding: 9px 16px; border-radius: 999px; background: var(--ax-peach); font-size: 14px; font-weight: 700; cursor: pointer; }
.relpro-ax__avatar-name { font-size: 13px; color: var(--ax-muted); }
.relpro-ax__visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ── Déjà connecté ── */
.relpro-ax__me { width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ax-coral-100); color: var(--ax-coral-700); font-size: 28px; font-weight: 700; }
.relpro-ax--logged .relpro-ax__btn { max-width: 340px; }

/* ── Panneau d'accompagnement ── */
.relpro-ax__side {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 48px 44px;
  background: linear-gradient(150deg, var(--ax-hero-a), var(--ax-hero-b));
  color: var(--ax-cacao);
}
.relpro-ax__side::after { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -150px; border-radius: 50%; border: 2px solid rgba(212, 85, 58, .16); pointer-events: none; }
.relpro-ax--pro .relpro-ax__side { background: var(--ax-cacao); color: #EFE7DC; }
.relpro-ax--pro .relpro-ax__side::after { border-color: rgba(232, 131, 58, .2); }
.relpro-ax__side > * { position: relative; z-index: 1; }
.relpro-ax__badge { align-self: flex-start; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: rgba(232, 131, 58, .18); color: #F7B9A6; font-size: 13px; font-weight: 700; line-height: 1.4; }
.relpro-ax__side-title { margin: 0 0 20px; font: 700 34px/1.05 'Caveat', cursive; }
.relpro-ax--pro .relpro-ax__side-title { color: #fff; }
.relpro-ax__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.relpro-ax__perks li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; font-size: 15px; line-height: 1.5; }
.relpro-ax__perks b { display: block; font-size: 15.5px; }
.relpro-ax__perks small { display: block; font-size: 14px; color: var(--ax-sub); }
.relpro-ax--pro .relpro-ax__perks small { color: #C9C0B4; }
.relpro-ax__perk-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .6); color: var(--ax-coral); }
.relpro-ax--pro .relpro-ax__perk-ic { background: rgba(255, 255, 255, .08); color: #F7B9A6; }
.relpro-ax__side-foot { margin: auto 0 0; padding-top: 28px; font-size: 14px; }
.relpro-ax__side-foot a { font-weight: 700; color: var(--ax-coral-700); text-decoration: none; }
.relpro-ax--pro .relpro-ax__side-foot a { color: #F7B9A6; }
.relpro-ax__side-foot a:hover { text-decoration: underline; }

/* ── Mobile ── */
@media (max-width: 860px) {
  .relpro-ax,
  .relpro-ax--single { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 4px 0 32px; border-radius: 26px; }
  .relpro-ax__main { padding: 30px 22px 28px; }
  .relpro-ax__side { padding: 28px 22px; }
  .relpro-ax .relpro-ax__title { font-size: 38px; }
  .relpro-ax__grid { grid-template-columns: minmax(0, 1fr); }
  .relpro-ax .relpro-ax__otp input { font-size: 28px; }
}