/* =====================================================================
   CONNEXION & INSCRIPTION — mise en page premium partagée
   Utilisé par espace.html (vue déconnectée) et inscription.html.
   Classes préfixées « au- » : aucune autre page n'est affectée.
   ===================================================================== */

.au-shell{
  --au-ivory:#FAF6F1; --au-ivory-2:#F3EBE1; --au-line:#E6DCD0; --au-field:#D8CCBE;
  --au-navy:var(--navy,#10233F); --au-ink:var(--ink,#1E2A3F); --au-mute:#5E6878;
  --au-copper:var(--gold,#C8683F); --au-copper-d:var(--gold-dark,#A34F2B);
  --au-err:#B42318; --au-err-t:#FDECEA; --au-ok:#1F6B47; --au-ok-t:#E6F3EC;
  display:flex; align-items:stretch; min-height:calc(100vh - 118px);
  background:var(--au-ivory); font-family:var(--sans);
}

/* ---------- Zone visuelle ---------- */
.au-visual{
  flex:0 0 44%; max-width:640px; position:relative; overflow:hidden; background:var(--au-navy);
}
.au-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.au-visual::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,35,63,0) 38%, rgba(16,35,63,.55) 66%, rgba(16,35,63,.88) 100%);
}
.au-visual-caption{ position:absolute; left:44px; right:44px; bottom:44px; z-index:1; color:#fff; }
.au-visual-brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.01em; margin-bottom:18px; color:#F3EADF; }
.au-visual-brand img{ position:static; width:30px; height:30px; border-radius:8px; object-fit:cover; }
.au-visual-caption h2{
  font-family:var(--display-serif); font-weight:600; color:#fff; letter-spacing:-.01em;
  font-size:clamp(26px,2.4vw,34px); line-height:1.15; max-width:16ch;
}
.au-visual-caption p{ margin-top:12px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86); max-width:38ch; }
.au-visual-caption .au-rule{ display:block; width:36px; height:2px; background:var(--au-copper); margin-bottom:16px; }

/* ---------- Zone formulaire ---------- */
.au-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:56px 28px; background:#FFFDFA; }
.au-panel{ width:100%; max-width:420px; }
.au-mini-brand{ display:none; align-items:center; gap:10px; margin-bottom:22px; }
.au-mini-brand img{ width:34px; height:34px; border-radius:9px; object-fit:cover; }
.au-mini-brand b{ display:block; font-family:var(--display); font-size:14.5px; color:var(--au-navy); }
.au-mini-brand span{ display:block; font-size:12px; color:var(--au-mute); }

.au-panel h1{
  font-family:var(--display-serif); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(28px,3vw,34px); line-height:1.12; color:var(--au-navy);
}
.au-sub{ margin-top:10px; font-size:15px; line-height:1.55; color:var(--au-mute); }
.au-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  background:var(--au-ivory-2); color:var(--au-navy); border-radius:100px;
  padding:6px 12px; font-size:12.5px; font-weight:600;
}

.au-form{ margin-top:28px; }
.au-field{ margin-bottom:16px; }
.au-label-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:7px; }
.au-field label{ display:block; font-size:13.5px; font-weight:600; color:var(--au-ink); }
.au-label-row label{ margin:0; }
.au-field > label{ margin-bottom:7px; }
.au-input{
  width:100%; min-height:50px; padding:12px 14px; font-family:var(--sans); font-size:15.5px; color:var(--au-ink);
  background:#fff; border:1.5px solid var(--au-field); border-radius:12px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.au-input::placeholder{ color:#9AA1AD; }
.au-input:hover{ border-color:#C4B5A3; }
.au-input:focus{ outline:none; border-color:var(--au-copper); box-shadow:0 0 0 4px rgba(200,104,63,.14); }
.au-input[aria-invalid="true"]{ border-color:var(--au-err); }
.au-input[aria-invalid="true"]:focus{ box-shadow:0 0 0 4px rgba(180,35,24,.12); }
.au-hint{ margin-top:6px; font-size:12.5px; color:var(--au-mute); }
.au-field-error{ margin-top:6px; font-size:12.5px; font-weight:500; color:var(--au-err); }
.au-field-error:empty{ display:none; }

.au-pw{ position:relative; }
.au-pw .au-input{ padding-right:52px; }
.au-pw-toggle{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:none; background:none; border-radius:10px; cursor:pointer;
  color:var(--au-mute); display:flex; align-items:center; justify-content:center;
}
.au-pw-toggle:hover{ color:var(--au-navy); background:var(--au-ivory); }
.au-pw-toggle[aria-pressed="true"]{ color:var(--au-copper-d); }
.au-pw-toggle .au-eye-off{ display:none; }
.au-pw-toggle[aria-pressed="true"] .au-eye-on{ display:none; }
.au-pw-toggle[aria-pressed="true"] .au-eye-off{ display:block; }

.au-link{
  background:none; border:none; padding:0; cursor:pointer; font-family:var(--sans);
  font-size:13.5px; font-weight:600; color:var(--au-copper-d); text-decoration:none;
}
.au-link:hover{ text-decoration:underline; text-underline-offset:3px; }

.au-submit{
  position:relative; width:100%; min-height:52px; margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--au-copper); color:#fff; border:none; border-radius:12px; cursor:pointer;
  font-family:var(--sans); font-size:15.5px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px rgba(200,104,63,.28);
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.au-submit:hover{ background:var(--au-copper-d); box-shadow:0 10px 24px rgba(163,79,43,.32); }
.au-submit:active{ transform:translateY(1px); }
.au-submit[disabled]{ cursor:progress; opacity:.85; }
.au-spinner{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:au-spin .8s linear infinite; display:none; }
.au-submit.is-loading .au-spinner{ display:block; }
@keyframes au-spin{ to{ transform:rotate(360deg); } }

.au-alert{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 18px; padding:12px 14px;
  border-radius:12px; font-size:14px; line-height:1.5;
}
.au-alert[hidden]{ display:none; }
.au-alert svg{ flex:0 0 auto; margin-top:2px; }
.au-alert--error{ background:var(--au-err-t); color:#7A1A11; border:1px solid #F5C9C3; }
.au-alert--ok{ background:var(--au-ok-t); color:#164E34; border:1px solid #BFE0CD; }

.au-or{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--au-mute); font-size:12.5px; letter-spacing:.04em; }
.au-or::before, .au-or::after{ content:''; flex:1; height:1px; background:var(--au-line); }

.au-google{
  width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:var(--au-ink); border:1.5px solid var(--au-field); border-radius:12px; cursor:pointer;
  font-family:var(--sans); font-size:15px; font-weight:600;
  transition:border-color .2s ease, background .2s ease;
}
.au-google:hover{ border-color:var(--au-navy); background:#FCFAF7; }

.au-alt{ margin-top:14px; text-align:center; }
.au-alt-toggle{
  background:none; border:none; cursor:pointer; padding:8px; min-height:44px;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--au-navy);
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
}
.au-alt-toggle span{ font-weight:500; font-size:12.5px; color:var(--au-mute); }
.au-alt-toggle:hover{ color:var(--au-copper-d); }
.au-alt-panel{
  margin-top:10px; padding:18px; border-radius:14px; text-align:left;
  background:var(--au-ivory); border:1px solid var(--au-line);
}
.au-alt-panel .au-submit{ background:var(--au-navy); box-shadow:none; }
.au-alt-panel .au-submit:hover{ background:#1A3459; }
.au-note{ margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--au-mute); }
.au-note a{ color:var(--au-copper-d); font-weight:600; }

.au-legal{ margin-top:16px; font-size:12.5px; line-height:1.55; color:var(--au-mute); text-align:center; }
.au-legal a{ color:var(--au-navy); text-decoration:underline; text-underline-offset:2px; }

.au-foot{
  margin-top:28px; padding-top:22px; border-top:1px solid var(--au-line);
  text-align:center; font-size:14.5px; color:var(--au-mute);
}
.au-foot a{ color:var(--au-copper-d); font-weight:700; margin-left:4px; }
.au-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

.au-back{ display:inline-flex; align-items:center; gap:6px; margin-bottom:22px; }
.au-state-icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--au-ivory-2); margin-bottom:20px;
}

/* Focus clavier visible */
.au-shell a:focus-visible, .au-shell button:focus-visible{ outline:3px solid var(--au-copper); outline-offset:2px; }

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .au-visual{ flex-basis:40%; }
  .au-visual-caption{ left:32px; right:32px; bottom:32px; }
}
@media(max-width:899px){
  .au-shell{ min-height:auto; }
  .au-visual{ display:none; }
  /* le logo est déjà dans la barre de navigation : pas de doublon */
  .au-main{ align-items:flex-start; padding:32px 18px 48px; }
}
@media(max-width:360px){
  .au-main{ padding:24px 14px 40px; }
  .au-label-row{ flex-wrap:wrap; }
}
@media(prefers-reduced-motion: reduce){
  .au-spinner{ animation-duration:2s; }
}

/* Section sans marge héritée + visuel qui reste dans l'écran sur les longs formulaires */
.au-shell{ padding:0; }
@media(min-width:900px){
  .au-visual{ position:sticky; top:86px; align-self:flex-start; height:calc(100vh - 124px); min-height:560px; }
}