/* ═══════════════════════════════════════════════════════════════════════════
   Écrans d'authentification — style « Épure » (aligné sur la vitrine login.php).
   Partagé par les 7 vues de views/auth/ : signup, password_forgot,
   password_reset, verify_email_{sent,resend,confirm,result}.
   Chargé par views/auth/_styles.php.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --coral:#FF6B52; --coral-dk:#E8513A; --coral-lt:#FFF1EE;
  --teal:#00BDA5;  --teal-dk:#06A18C;  --teal-lt:#E5F8F6;
  --navy:#0B1220;  --navy2:#1B2D4A;
  --ink:#1D1D1F;   --gray:#6E6E73;     --gray2:#86868B;
  --bgw:#FFFFFF;   --bgg:#F5F5F7;
  --line:#D2D2D7;  --line-lt:#E8E8ED;
  --red:#B91C1C;   --red-lt:#FEF2F2;

  /* Alias de l'ancienne charte : les vues sœurs portent encore des styles
     inline en var(--tx) / var(--orange-lt)… Les garder évite un texte noir
     par défaut ou un fond transparent sur ces écrans. */
  --orange:var(--coral); --orange-dk:var(--coral-dk); --orange-lt:var(--coral-lt);
  --brand:var(--coral);  --navy-2:var(--navy2);
  --tx:var(--ink); --tx-2:var(--gray); --tx-3:var(--gray2); --tx-4:#A9A9AF;
  --border:var(--line); --bg:var(--bgg); --surface:var(--bgw);
}

html { font-size: 14px; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased;
  background: var(--bgw); min-height: 100vh; display: flex;
}
svg { display: block; }

/* ══════════════ Panneau de marque (gauche) ══════════════ */
.panel-l {
  width: 44%; max-width: 560px; min-width: 400px; min-height: 100vh; flex-shrink: 0;
  background: linear-gradient(165deg, var(--navy2) 0%, var(--navy) 62%);
  display: flex; flex-direction: column; padding: 44px 52px 40px;
  position: relative; overflow: hidden;
}
.panel-l::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 92% -8%, rgba(255,107,82,.26), transparent 62%),
    radial-gradient(560px 400px at -10% 108%, rgba(99,102,241,.22), transparent 60%);
}
/* Trame discrète, estompée en diagonale : donne de la matière au dégradé sans
   attirer l'œil. Purement décoratif. */
.panel-l::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 70%);
}
.panel-l > * { position: relative; z-index: 1; }

.l-brand { display: flex; align-items: center; gap: 10px; }
.l-brand-icon { width: 26px; height: 26px; color: var(--coral); flex-shrink: 0; }
.l-brand-icon svg { width: 100%; height: 100%; fill: currentColor; }
.l-brand-name { font-size: 13px; font-weight: 800; letter-spacing: 2.4px; color: #fff; }

.l-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0 32px; }
.l-tag {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  background: rgba(255,107,82,.14); border: 1px solid rgba(255,107,82,.26); color: #FFB199;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  padding: 6px 13px; border-radius: 980px; margin-bottom: 26px;
}
.l-tag svg { width: 12px; height: 12px; }
.l-headline { font-size: 40px; font-weight: 800; color: #fff; line-height: 1.08; letter-spacing: -1.8px; }
.l-headline em {
  font-style: normal; background: linear-gradient(120deg, #FFB199, var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.l-desc { font-size: 15px; color: #B6C2D6; line-height: 1.6; margin-top: 18px; max-width: 330px; font-weight: 450; }

.l-features { display: flex; flex-direction: column; gap: 14px; margin-top: 38px; }
.l-feat { display: flex; align-items: center; gap: 13px; font-size: 13.5px; font-weight: 500; color: #D7DFEC; }
.l-feat-ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: #FFB199;
}
.l-feat-ico svg { width: 15px; height: 15px; }

/* Avis client — alimenté par Testimonial::publishable(), donc publié ET consenti. */
.l-quote {
  margin-top: 40px; padding: 20px 22px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.l-quote .stars { display: flex; gap: 3px; color: #FFB199; }
.l-quote .stars svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.l-quote blockquote {
  font-size: 13.5px; color: #E6EBF3; line-height: 1.55; margin-top: 10px;
  font-weight: 450; letter-spacing: -.1px;
}
.l-quote .who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.l-quote .av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(135deg, #6366F1, #4F46E5); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.l-quote .who b { font-size: 11.5px; font-weight: 700; color: #fff; display: block; }
.l-quote .who span { font-size: 10.5px; color: #8595AD; font-weight: 500; }

.l-foot { display: flex; align-items: center; gap: 14px; font-size: 11px; color: #6E7E96; font-weight: 500; }
.l-foot .dot { width: 3px; height: 3px; border-radius: 50%; background: #3E4C63; flex-shrink: 0; }

/* ══════════════ Panneau formulaire (droite) ══════════════ */
.panel-r { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bgw); }
/* Vues sans .r-mid (mot de passe, vérification email) : la marge auto centre
   la carte dans la hauteur restante, le pied légal restant collé en bas. */
.panel-r > .r-box { margin: auto; padding: 40px 24px; }
.r-top { display: flex; justify-content: flex-end; padding: 26px 40px 0; font-size: 12.5px; color: var(--gray); }
.r-top a { color: var(--coral-dk); font-weight: 600; margin-left: 5px; text-decoration: none; }
.r-top a:hover { text-decoration: underline; text-underline-offset: 3px; }
.r-mid { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 24px 36px; }
.r-box { width: 100%; max-width: 392px; }

.r-heading h1 { font-size: 29px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; }
.r-heading p { font-size: 14px; color: var(--gray); margin-top: 7px; letter-spacing: -.1px; }
.r-heading strong { color: var(--ink); font-weight: 600; }

/* ══════════════ Formulaire ══════════════ */
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 26px; height: 46px; border-radius: 14px; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--ink); background: #fff;
  cursor: pointer; font-family: inherit; text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.gbtn:hover { background: var(--bgg); border-color: #BFBFC6; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
/* Deux fournisseurs = un seul groupe de choix : resserré à 8px entre eux, les
   26px ne séparant que le bloc de ce qui le précède. */
.gbtn + .gbtn { margin-top: 8px; }
.gbtn svg { flex-shrink: 0; }

.divider {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 2px;
  font-size: 10.5px; font-weight: 700; color: var(--gray2);
  text-transform: uppercase; letter-spacing: .09em;
}
.divider i { flex: 1; height: 1px; background: var(--line-lt); }

.field { margin-top: 16px; }
.field > label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 7px; letter-spacing: -.05px; }
.field-wrap { position: relative; }
/* Icons::svg() rend un <svg class="… field-ico"> : cibler l'élément par sa
   seule classe. Un sélecteur `i.field-ico` ne matchait rien et l'icône se
   posait AU-DESSUS du champ au lieu d'être dedans. */
.field-wrap .field-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--gray2); pointer-events: none; transition: color .15s;
}
.field-wrap input {
  width: 100%; height: 46px; padding: 0 14px 0 42px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  font-size: 13.5px; font-family: inherit; color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field-wrap input::placeholder { color: #A9A9AF; }
.field-wrap input:focus { border-color: var(--coral); box-shadow: 0 0 0 3.5px rgba(255,107,82,.14); }
.field-wrap:focus-within .field-ico { color: var(--coral); }
.field-wrap.has-eye input { padding-right: 44px; }
/* Anti-zoom iOS : un champ sous 16px déclenche un zoom automatique à la saisie. */
@media (max-width: 767.98px) { .field-wrap input { font-size: 16px; } }

.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 10px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--gray2);
}
.eye:hover { background: var(--bgg); color: var(--ink); }
.eye svg { width: 16px; height: 16px; }
/* Les deux icônes sont rendues, le JS bascule la classe : pas de redessin
   d'inline SVG à chaque clic, et l'œil barré reste correct sans JS. */
.eye .eye-hide { display: none; }
.eye.is-on .eye-show { display: none; }
.eye.is-on .eye-hide { display: block; }

.field-help  { font-size: 11.5px; color: var(--gray2); margin-top: 7px; font-weight: 450; }
.field-error { font-size: 11.5px; color: var(--red);   margin-top: 7px; font-weight: 500; }
.field-readonly input { background: var(--bgg); color: var(--gray); cursor: not-allowed; }

/* Critères du mot de passe — verdissent en direct (public/js/auth-signup.js). */
.pw-crit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pw-crit span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--gray2);
  background: var(--bgg); border: 1px solid transparent;
  padding: 4px 9px; border-radius: 980px; transition: color .18s, background .18s, border-color .18s;
}
.pw-crit span svg { width: 10px; height: 10px; opacity: .45; }
.pw-crit span.ok { color: var(--teal-dk); background: var(--teal-lt); border-color: rgba(0,189,165,.28); }
.pw-crit span.ok svg { opacity: 1; }

/* Case à cocher CGU : la vraie case est masquée, .box en tient lieu. */
.terms { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; cursor: pointer; }
.terms input { position: absolute; opacity: 0; width: 0; height: 0; }
.terms .box {
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--line);
  flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center;
  background: #fff; transition: background .15s, border-color .15s;
}
.terms .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.terms input:checked + .box { background: var(--coral); border-color: var(--coral); }
.terms input:checked + .box svg { opacity: 1; transform: scale(1); }
.terms input:focus-visible + .box { box-shadow: 0 0 0 3.5px rgba(255,107,82,.18); }
.terms .txt { font-size: 12.5px; color: var(--gray); line-height: 1.55; font-weight: 450; }
.terms .txt a { color: var(--coral-dk); font-weight: 600; text-decoration: none; }
.terms .txt a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* .btn-login : nom conservé, les 6 vues sœurs l'utilisent (parfois sur un <a>). */
.btn-login {
  width: 100%; height: 48px; margin-top: 22px; border: none; border-radius: 980px; cursor: pointer;
  background: var(--coral); color: #fff; font-size: 14.5px; font-weight: 600; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  letter-spacing: -.15px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(255,107,82,.28);
  transition: background .15s, box-shadow .18s, transform .12s;
}
.btn-login svg { width: 15px; height: 15px; transition: transform .18s; }
.btn-login:hover { background: var(--coral-dk); box-shadow: 0 10px 26px rgba(255,107,82,.36); }
.btn-login:hover svg { transform: translateX(3px); }
.btn-login:active { transform: scale(.988); }

.reassure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 18px; }
.reassure span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--gray); }
.reassure svg { width: 12px; height: 12px; color: var(--teal-dk); flex-shrink: 0; }

.error-box, .notice-box, .success-box {
  display: flex; gap: 9px; font-size: 12.5px; border-radius: 14px;
  padding: 12px 14px; margin-top: 22px; line-height: 1.45; font-weight: 450;
}
.error-box svg, .notice-box svg, .success-box svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.error-box   { background: var(--red-lt);  color: var(--red); }
.notice-box  { background: var(--teal-lt); color: var(--teal-dk); }
.success-box { background: #ECFDF5;        color: #047857; }

.auth-links {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-lt);
  font-size: 12.5px; color: var(--gray);
  display: flex; flex-direction: column; gap: 7px; text-align: center;
}
.auth-links a { color: var(--coral-dk); text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Pied légal — dans le flux, à l'intérieur de .panel-r. En position:fixed il
   recouvrait le bas du formulaire (« Déjà un compte ? » passait dessous). */
.legal-foot { padding: 0 40px 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.legal-foot a { font-size: 11.5px; color: var(--gray2); font-weight: 450; text-decoration: none; }
.legal-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════ Responsive ══════════════ */
@media (max-width: 900px) {
  body { display: block; }
  .panel-l { width: 100%; max-width: none; min-width: 0; min-height: 0; padding: 26px 24px 30px; }
  .panel-l .l-hero { padding: 22px 0 4px; }
  .panel-l .l-headline { font-size: 29px; letter-spacing: -1.2px; }
  .panel-l .l-desc { font-size: 14px; margin-top: 12px; max-width: none; }
  .panel-l .l-features, .panel-l .l-quote, .panel-l .l-foot { display: none; }
  .panel-r { min-height: 0; }
  .panel-r > .r-box { padding: 32px 20px; }
  .r-top { padding: 24px 22px 0; justify-content: center; }
  .r-mid { padding: 18px 20px 30px; }
  .legal-foot { padding: 0 20px 20px; }
}