/* ============================================================
   espace-style.css — Sous-domaine espace.aarec.fr
   Thème : Ardoise & Terracotta — Pages d'authentification
   Typographie : Playfair Display + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── VARIABLES ────────────────────────────────────────────── */
:root {
  --slate-deep:    #1C2330;
  --slate-mid:     #28354A;
  --slate-soft:    #38506A;
  --slate-muted:   #4A6280;
  --slate-border:  rgba(255,255,255,0.10);

  --terra:         #C25540;
  --terra-light:   #D4745C;
  --terra-dark:    #9A3825;
  --terra-glow:    rgba(194, 85, 64, 0.18);

  --cream:         #F7F2EB;
  --cream-warm:    #EFE8DC;
  --cream-deep:    #E3D8C8;
  --cream-border:  #D8CCBA;

  --on-dark:       #EDE8E0;
  --on-dark-muted: #9A9488;

  --charcoal:      #24303E;
  --stone:         #5A5248;
  --stone-light:   #8A8278;

  --error:         #B03830;
  --error-bg:      rgba(176, 56, 48, 0.09);
  --success:       #3A6848;
  --success-bg:    rgba(58, 104, 72, 0.10);
  --warning-color: #7A5820;
  --warning-bg:    rgba(192, 160, 96, 0.10);

  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --transition:    0.30s cubic-bezier(0.22, 0.61, 0.36, 1);
  --radius-sm:     5px;
  --radius-md:     12px;
  --shadow-sm:     0 2px 14px rgba(0,0,0,0.12);
  --shadow-md:     0 6px 32px rgba(0,0,0,0.20);
  --shadow-terra:  0 8px 32px rgba(194, 85, 64, 0.28);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  min-height: 100%;
  overflow-x: hidden;
}

/* ── LAYOUT SPLIT ─────────────────────────────────────────── */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ── PANNEAU GAUCHE : DÉCORATIF ───────────────────────────── */
.auth-panel-deco {
  position: relative;
  background: linear-gradient(150deg, var(--slate-deep) 0%, var(--slate-mid) 50%, #2C3E54 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 56px;
  overflow: hidden;
}

.deco-circle-1 {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(194, 85, 64, 0.15);
  top: -100px; left: -100px;
  animation: floatCircle 14s ease-in-out infinite;
}
.deco-circle-2 {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--terra-glow);
  bottom: -70px; right: -70px;
  animation: floatCircle 18s ease-in-out infinite reverse;
}
.deco-lines {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

@keyframes floatCircle {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(18px, -14px) scale(1.03); }
  66%       { transform: translate(-8px, 18px) scale(0.98); }
}

.deco-content { position: relative; z-index: 1; text-align: center; }

.deco-logo {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--on-dark);
  letter-spacing: 0.08em;
  margin-bottom: 48px;
  display: block;
  text-decoration: none;
  transition: color var(--transition);
}
.deco-logo:hover { color: var(--terra-light); }

.deco-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--on-dark);
  line-height: 1.22;
  margin-bottom: 20px;
}
.deco-title em { font-style: italic; font-weight: 400; color: var(--terra-light); }

.deco-subtitle {
  font-size: 0.9rem;
  color: var(--on-dark-muted);
  line-height: 1.78;
  max-width: 340px;
  margin-inline: auto;
  margin-bottom: 52px;
}

.deco-features { display: flex; flex-direction: column; gap: 12px; text-align: left; }

.deco-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), background var(--transition);
}
.deco-feature:hover {
  transform: translateX(5px);
  background: rgba(255,255,255,0.10);
}
.feature-icon { font-size: 1.2rem; flex-shrink: 0; }
.feature-text { font-size: 0.86rem; color: var(--on-dark); font-weight: 400; }

/* ── PANNEAU DROIT : FORMULAIRE ───────────────────────────── */
.auth-panel-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 72px;
  background: var(--cream);
  position: relative;
  animation: fadeInPanel 0.4s ease both;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.back-to-site {
  position: absolute;
  top: 32px; left: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone-light);
  text-decoration: none;
  transition: color var(--transition), gap var(--transition);
  background: none; border: none;
  cursor: pointer; font-family: var(--font-body);
  padding: 0;
}
.back-to-site:hover { color: var(--charcoal); gap: 12px; }

.auth-form-inner { width: 100%; max-width: 420px; }

/* ── EN-TÊTE FORMULAIRE ── */
.auth-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  display: block;
  margin-bottom: 12px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.15;
  margin-bottom: 8px;
}
.auth-title em { font-style: italic; color: var(--terra); }

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--stone);
  margin-bottom: 40px;
  line-height: 1.65;
}

/* ── CHAMPS ── */
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

.form-group label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.input-wrap { position: relative; display: flex; align-items: center; }

.input-icon {
  position: absolute;
  left: 16px;
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
}

.input-wrap input {
  width: 100%;
  padding: 15px 18px 15px 44px;
  border: 1.5px solid var(--cream-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: white;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.input-wrap input::placeholder { color: var(--stone-light); }
.input-wrap input:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px var(--terra-glow);
}
.input-wrap input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(176, 56, 48, 0.10);
}

/* Bouton afficher/masquer mot de passe */
.pwd-toggle {
  position: absolute;
  right: 14px;
  background: none; border: none;
  cursor: pointer;
  color: var(--stone-light);
  padding: 4px;
  display: flex; align-items: center;
  transition: color var(--transition);
  font-size: 1.1rem; line-height: 1;
}
.pwd-toggle:hover { color: var(--charcoal); }

/* Input password */
input[type="password"] { padding-right: 46px !important; }

/* ── INDICATEUR FORCE MDP ── */
.pwd-strength { margin-top: 8px; }
.pwd-strength-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--cream-deep);
  overflow: hidden;
  margin-bottom: 5px;
}
.pwd-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease, background-color 0.4s ease;
  width: 0;
}
.pwd-strength-label { font-size: 0.72rem; color: var(--stone-light); }

/* ── LIENS ── */
.form-link-row { display: flex; justify-content: flex-end; margin-top: -8px; margin-bottom: 18px; }
.form-link {
  font-size: 0.82rem;
  color: var(--terra);
  text-decoration: none;
  transition: color var(--transition);
  font-weight: 500;
  background: none; border: none;
  cursor: pointer; font-family: var(--font-body);
  padding: 0;
}
.form-link:hover { color: var(--terra-dark); text-decoration: underline; }

/* ── MESSAGES ── */
.auth-message {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  line-height: 1.55;
  margin-bottom: 18px;
  display: none;
}
.auth-message.error {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid rgba(176, 56, 48, 0.20);
  display: flex; align-items: flex-start; gap: 10px;
}
.auth-message.success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(58, 104, 72, 0.20);
  display: flex; align-items: flex-start; gap: 10px;
}
.auth-message.warning {
  background: var(--warning-bg);
  color: var(--warning-color);
  border: 1px solid rgba(192, 160, 96, 0.28);
  display: flex; align-items: flex-start; gap: 10px;
}
.msg-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ── BOUTON SUBMIT ── */
.btn-auth {
  width: 100%;
  padding: 16px 24px;
  background: var(--slate-deep);
  color: var(--on-dark);
  border: none;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  margin-top: 6px;
}
.btn-auth:hover:not(:disabled) {
  background: var(--terra);
  transform: translateY(-2px);
  box-shadow: var(--shadow-terra);
}
.btn-auth:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Spinner */
.btn-auth .spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-auth.loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── DIVIDER ── */
.auth-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0;
  color: var(--stone-light);
  font-size: 0.76rem; letter-spacing: 0.05em; text-align: center;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1;
  height: 1px; background: var(--cream-border);
}

/* ── NOTE PIED DE FORMULAIRE ── */
.auth-footer-note {
  font-size: 0.82rem;
  color: var(--stone);
  text-align: center;
  line-height: 1.65;
}
.auth-footer-note a { color: var(--terra); font-weight: 500; text-decoration: none; }
.auth-footer-note a:hover { text-decoration: underline; }

/* ── BADGE SÉCURITÉ ── */
.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding: 10px 16px;
  background: rgba(28, 35, 48, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  color: var(--stone-light);
}

/* ── ANIMATIONS D'ENTRÉE ── */
.auth-form-inner > * {
  animation: fadeUp 0.45s ease both;
}
.auth-form-inner > *:nth-child(1) { animation-delay: 0.05s; }
.auth-form-inner > *:nth-child(2) { animation-delay: 0.10s; }
.auth-form-inner > *:nth-child(3) { animation-delay: 0.15s; }
.auth-form-inner > *:nth-child(4) { animation-delay: 0.20s; }
.auth-form-inner > *:nth-child(5) { animation-delay: 0.25s; }
.auth-form-inner > *:nth-child(6) { animation-delay: 0.30s; }
.auth-form-inner > *:nth-child(7) { animation-delay: 0.35s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .auth-panel-deco { padding: 48px 36px; }
  .auth-panel-form { padding: 60px 48px; }
}

@media (max-width: 768px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-panel-deco {
    padding: 36px 28px;
    min-height: auto;
  }
  .deco-features { display: none; }
  .deco-title { font-size: 1.8rem; }
  .deco-logo { margin-bottom: 28px; }
  .auth-panel-form {
    padding: 48px 28px;
    min-height: auto;
  }
  .back-to-site { position: relative; top: auto; left: auto; margin-bottom: 24px; align-self: flex-start; }
}

@media (max-width: 480px) {
  .auth-panel-form { padding: 36px 20px; }
  .auth-panel-deco { padding: 28px 20px; }
  .auth-title { font-size: 1.9rem; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--cream-border); border-radius: 3px; }