/* ═══════════════════════════════════════════════
   AUTH PAGES — Mobile-first
   Shared by login / register / forgot
═══════════════════════════════════════════════ */

/* Layout deux colonnes */
.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ── Panneau gauche — visuel décoratif ────────── */
.auth-visual {
  background: linear-gradient(145deg,#1a1d3b 0%,#2d1060 55%,#0f3460 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(40px,6vw,72px);
}
.auth-visual::before {
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;pointer-events:none;
}
.av-orb { position:absolute;border-radius:50%;pointer-events:none; }
.av-orb-1 { width:500px;height:500px;top:-150px;right:-150px;background:radial-gradient(circle,rgba(78,43,134,.5),transparent 70%); }
.av-orb-2 { width:400px;height:400px;bottom:-120px;left:-100px;background:radial-gradient(circle,rgba(130,190,96,.25),transparent 70%); }
.av-orb-3 { width:250px;height:250px;top:40%;left:30%;background:radial-gradient(circle,rgba(54,162,206,.2),transparent 70%); }

.av-logo { position:relative;z-index:2; }
.av-logo img { height:52px;width:auto; }

.av-content { position:relative;z-index:2; }
.av-title {
  font-family:var(--font-heading);
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:800;color:#fff;line-height:1.2;margin-bottom:16px;
}
.av-sub { font-size:clamp(.88rem,1.4vw,.97rem);color:rgba(255,255,255,.65);line-height:1.8;margin-bottom:36px; }

.av-features { list-style:none;padding:0;margin:0; }
.av-features li {
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.88rem;color:rgba(255,255,255,.75);
}
.av-features li:last-child { border-bottom:none; }
.av-feat-icon {
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;
}
.afi-green  { background:rgba(130,190,96,.2);color:var(--c-green); }
.afi-blue   { background:rgba(54,162,206,.2);color:var(--c-blue);  }
.afi-purple { background:rgba(78,43,134,.3); color:rgba(200,160,255,.9); }

.av-footer { position:relative;z-index:2; }
.av-testimonial {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:20px 24px;
}
.avt-text { font-size:.88rem;color:rgba(255,255,255,.8);line-height:1.7;font-style:italic;margin-bottom:14px; }
.avt-author { display:flex;align-items:center;gap:10px; }
.avt-ava {
  width:36px;height:36px;border-radius:50%;
  background:var(--grad-full);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:.75rem;font-weight:800;color:#fff;
}
.avt-name { font-family:var(--font-heading);font-size:.82rem;font-weight:700;color:#fff; }
.avt-role { font-size:.72rem;color:rgba(255,255,255,.45); }

/* ── Panneau droit — formulaire ───────────────── */
.auth-form-panel {
  display:flex;flex-direction:column;justify-content:center;
  padding: clamp(32px,6vw,80px) clamp(24px,5vw,72px);
  background: #fff;
  overflow-y: auto;
}

.af-header { margin-bottom:32px; }
.af-back {
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--c-muted);text-decoration:none;
  margin-bottom:28px;transition:color .2s;
}
.af-back:hover { color:var(--c-purple); }
.af-back i { font-size:.7rem; }

.af-title {
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,3vw,2rem);
  font-weight:800;color:var(--c-navy);margin-bottom:8px;
}
.af-sub { font-size:.9rem;color:var(--c-muted);line-height:1.7; }

/* Alertes — fermables */
.auth-alert {
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;border-radius:12px;margin-bottom:20px;
  font-size:.85rem;line-height:1.6;position:relative;
  animation:slideDown .3s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.auth-alert-error  { background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#dc2626; }
.auth-alert-success{ background:rgba(130,190,96,.1);border:1px solid rgba(130,190,96,.3);color:#166534; }
.auth-alert i { margin-top:2px;flex-shrink:0; }
.auth-alert-close {
  position:absolute;top:10px;right:12px;
  background:none;border:none;cursor:pointer;
  font-size:.9rem;opacity:.5;padding:2px 6px;
  transition:opacity .2s;color:inherit;line-height:1;
}
.auth-alert-close:hover { opacity:1; }
.auth-alert-progress {
  position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 12px 12px;
  background:currentColor;opacity:.25;
  animation:shrink 5s linear forwards;
}
@keyframes shrink { from{width:100%} to{width:0%} }

/* Bouton Google */
.af-google {
  width:100%;padding:13px 16px;border-radius:12px;
  background:#fff;border:1.5px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-heading);font-size:.9rem;font-weight:700;
  color:var(--c-navy);text-decoration:none;
  transition:border-color .2s,box-shadow .2s;
}
.af-google:hover { border-color:#4285f4;box-shadow:0 4px 16px rgba(66,133,244,.15);color:var(--c-navy); }
.af-google-icon {
  width:20px;height:20px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.af-divider { display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--c-muted);font-size:.78rem; }
.af-divider::before,.af-divider::after { content:'';flex:1;height:1px;background:var(--c-border); }

/* Champs */
.af-field { margin-bottom:18px; }
.af-label {
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-heading);font-size:.8rem;font-weight:700;
  color:var(--c-navy);margin-bottom:7px;
}
.af-label a { font-weight:600;color:var(--c-blue);text-decoration:none;font-size:.76rem; }
.af-label a:hover { color:var(--c-purple); }

.af-input-wrap { position:relative; }
.af-input {
  width:100%;padding:13px 44px 13px 44px;
  border:1.5px solid var(--c-border);border-radius:12px;
  font-family:var(--font-body);font-size:.93rem;color:var(--c-navy);
  background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.af-input:focus { border-color:var(--c-purple);box-shadow:0 0 0 3px rgba(78,43,134,.1); }
.af-input.is-invalid { border-color:#ef4444; }
.af-input-icon {
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--c-muted);font-size:.88rem;pointer-events:none;
}
.af-pwd-toggle {
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--c-muted);cursor:pointer;background:none;border:none;
  font-size:.88rem;padding:4px;transition:color .2s;
}
.af-pwd-toggle:hover { color:var(--c-purple); }
.af-error { font-size:.76rem;color:#ef4444;margin-top:5px;display:block; }

/* Checkbox "Se souvenir" */
.af-remember {
  display:flex;align-items:center;gap:10px;
  font-size:.84rem;color:var(--c-text);cursor:pointer;
  user-select:none;
}
.af-remember input[type="checkbox"] { display:none; }
.af-check-box {
  width:18px;height:18px;border-radius:5px;flex-shrink:0;
  border:1.5px solid var(--c-border);background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;
}
.af-remember input:checked ~ .af-check-box {
  background:var(--c-purple);border-color:var(--c-purple);
}
.af-remember input:checked ~ .af-check-box::after {
  content:'✓';color:#fff;font-size:.7rem;font-weight:700;
}

/* Bouton principal */
.af-submit {
  width:100%;padding:14px;border-radius:12px;
  background:var(--grad-full);color:#fff;border:none;
  font-family:var(--font-heading);font-size:.97rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .22s,box-shadow .22s;
  box-shadow:var(--shadow-btn);margin-top:8px;
}
.af-submit:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(78,43,134,.4); }

/* Séparateur "ou" */
.af-divider {
  display:flex;align-items:center;gap:12px;
  margin:22px 0;color:var(--c-muted);font-size:.8rem;
}
.af-divider::before,.af-divider::after {
  content:'';flex:1;height:1px;background:var(--c-border);
}

/* Bouton Google */
.af-google {
  width:100%;padding:13px;border-radius:12px;
  background:#fff;color:var(--c-navy);
  border:1.5px solid var(--c-border);
  font-family:var(--font-heading);font-size:.9rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:border-color .2s,box-shadow .2s;text-decoration:none;
}
.af-google:hover { border-color:var(--c-blue);box-shadow:0 4px 16px rgba(54,162,206,.12); }
.af-google img { width:18px;height:18px; }

/* Lien bas "Pas de compte ?" */
.af-switch {
  text-align:center;margin-top:24px;
  font-size:.86rem;color:var(--c-muted);
}
.af-switch a { color:var(--c-purple);font-weight:700;text-decoration:none; }
.af-switch a:hover { color:var(--c-blue); }

/* RESPONSIVE */
@media (max-width:991px) {
  .auth-layout { grid-template-columns:1fr; min-height:auto; }
  .auth-visual { padding:clamp(28px,5vw,48px);min-height:auto; }
  .av-features { display:none; }
  .av-testimonial { display:none; }
  .av-title { font-size:1.5rem; }
  .auth-form-panel { padding:clamp(28px,5vw,48px); }
}
@media (max-width:480px) {
  .auth-visual { padding:24px 20px; }
  .auth-form-panel { padding:24px 20px; }
  .af-title { font-size:1.5rem; }
}