/* ==========================================================================
   Base — polices, variables de thème, reset et éléments de formulaire
   ========================================================================== */

/* Polices custom auto-hébergées (public/fonts/) */
@font-face {
  font-family: 'New Icon Script';
  src: url('/fonts/NewIconScript.woff2') format('woff2'),
       url('/fonts/NewIconScript.woff') format('woff'),
       url('/fonts/NewIconScript.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'New Icon Serif';
  src: url('/fonts/NewIconSerif.woff2') format('woff2'),
       url('/fonts/NewIconSerif.woff') format('woff'),
       url('/fonts/NewIconSerif.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette Réflective : Indigo, Lilas, Parme, Bleu Ciel & Nacre */
  --bg-main: #FAF9FC;

  --accent-blue: #1E2B52;
  --accent-blue-light: #2E4078;

  --accent-sky: #7BA9E6;
  --accent-sky-light: #D6E6FB;

  --accent-purple: #6B4885;
  --accent-lilas: #9B63C7;
  --accent-parme: #BF93E4;

  --text-dark: #151822;
  --text-muted: #565C6E;
  --white: #FFFFFF;

  --error: #B3261E;
  --success: #1E6B45;

  /* Glassmorphism lumineux */
  --glass-bg: rgba(255, 255, 255, 0.93);
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-shadow: 0 20px 50px rgba(30, 43, 82, 0.05), 0 10px 25px rgba(123, 169, 230, 0.12);

  --font-mono: 'Pinyon Script', cursive;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-dark);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

/* Monogramme partagé entre la page de connexion, la nav et le chargeur */
.monogram-small {
  font-family: 'New Icon Script', var(--font-mono); font-size: 4rem;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-lilas) 50%, var(--accent-sky) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.4; padding: 10px 15px 15px; display: inline-block; overflow: visible;
}

/* Boutons */
.btn {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-light) 100%);
  color: var(--white); border: none; padding: 16px 32px; border-radius: 50px;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 25px rgba(30, 43, 82, 0.15), 0 0 20px rgba(123, 169, 230, 0.2);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(30, 43, 82, 0.22), 0 0 30px rgba(123, 169, 230, 0.45); }
.btn:disabled { opacity: 0.6; cursor: progress; transform: none; }

.btn-secondary {
  background: #FFFFFF; color: var(--accent-purple); border: 1px solid var(--accent-sky);
  box-shadow: 0 5px 15px rgba(123, 169, 230, 0.15);
}
.btn-secondary:hover { background: linear-gradient(135deg, var(--accent-sky), var(--accent-lilas)); color: var(--white); border-color: transparent; }

/* Champs de formulaire */
input, select, textarea {
  width: 100%; padding: 16px; border: 1px solid rgba(191, 147, 228, 0.35); border-radius: 14px;
  background: #FFFFFF; font-family: var(--font-sans); font-size: 0.95rem;
  outline: none; transition: all 0.3s; color: var(--text-dark); resize: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-sky); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(123, 169, 230, 0.25);
}

/* Messages de statut renvoyés par les endpoints */
.form-status { margin-top: 18px; font-size: 0.95rem; min-height: 1.4em; }
.form-status[data-state='error'] { color: var(--error); }
.form-status[data-state='success'] { color: var(--success); }

/* Réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  .monogram-small { font-size: 3.5rem; }
  .btn { width: 100%; padding: 16px 20px; }
}