/* Page auth combinée (login / register) — Champs Libres.
   Le layout et les couleurs vivent en classes Tailwind dans auth.html ; ce
   fichier porte uniquement ce qui n'est pas faisable en pur Tailwind :
   la mécanique de bascule pilotée par [data-mode], les composants de champ
   réutilisés, les décors animés et le repli responsive. Tout est exprimé en
   custom properties → suit la palette du panneau Apparences en live. */

:root {
  --cl-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Champs et bouton submit (répétés 9× dans le template → composants) */
.cl-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--surface-2) 45%, var(--surface));
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font-body);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
/* Modificateurs plutôt que pl-[46px] Tailwind : auth.css est chargé après le
   CSS Tailwind, le shorthand `padding` de .cl-input écraserait l'utility. */
.cl-input--icon { padding-left: 46px; }
.cl-input--trail { padding-right: 46px; }
.cl-input::placeholder { color: color-mix(in oklab, var(--ink-soft) 55%, transparent); }
.cl-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);
}

.cl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  cursor: pointer;
  border: none;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--accent) 80%, transparent);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.cl-submit:hover {
  background: var(--accent-strong);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px color-mix(in oklab, var(--accent) 85%, transparent);
}
.cl-submit:focus-visible,
.cl-auth a:focus-visible,
.cl-auth button:focus-visible,
.cl-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Jauge de robustesse du mot de passe (segments pilotés par auth.js) */
.cl-strength-seg {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--ink) 10%, transparent);
  transition: background .25s;
}
.cl-strength-label { color: transparent; transition: color .25s; }

/* Halos de fond + anneaux décoratifs de l'overlay */
.cl-halo { position: absolute; border-radius: 50%; filter: blur(14px); animation: clDrift 18s ease-in-out infinite; }
.cl-halo--1 {
  top: -140px; left: -120px; width: 460px; height: 460px;
  background: radial-gradient(circle at 35% 35%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%);
}
.cl-halo--2 {
  bottom: -160px; right: -130px; width: 500px; height: 500px;
  background: radial-gradient(circle at 60% 40%, color-mix(in oklab, var(--accent-2) 22%, transparent), transparent 70%);
  animation-duration: 24s;
  animation-direction: reverse;
}
.cl-halo--3 {
  top: 38%; left: 46%; width: 340px; height: 340px;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
  animation-duration: 28s;
}

.cl-ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--hero-ring); }
.cl-ring--1 { top: -70px; right: -70px; width: 230px; height: 230px; }
.cl-ring--2 { bottom: -90px; left: -50px; width: 280px; height: 280px; border-width: 2px; }
.cl-ring--3 { top: -60px; left: -80px; width: 250px; height: 250px; }
.cl-ring--4 { bottom: -80px; right: -60px; width: 300px; height: 300px; border-width: 2px; }

.cl-floaty { animation: floaty 6s ease-in-out infinite; }
.cl-rise { animation: clRise .55s var(--cl-ease) both; }

@keyframes clRise { from { opacity: 0; transform: translateY(24px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes clDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -28px) scale(1.07); }
  66% { transform: translate(-28px, 22px) scale(.95); }
}

/* Mécanique de bascule — pilotée par [data-mode] sur .cl-auth.
   État par défaut = login ; [data-mode="register"] fait glisser les 3 couches.
   Les deux panneaux sont empilés dans la même cellule de grid : la carte prend
   la hauteur du formulaire le plus haut (register), et le plus petit (login)
   se centre dans l'espace — jamais de scrollbar interne ni de contenu serré. */
.cl-auth { display: grid; }
.cl-signin, .cl-signup {
  grid-area: 1 / 1;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform .65s var(--cl-ease), opacity .5s var(--cl-ease);
}
.cl-signin { padding: 48px 56px; z-index: 2; opacity: 1; }
.cl-signup { padding: 48px; z-index: 1; opacity: 0; }

.cl-overlay-container {
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  overflow: hidden;
  z-index: 10;
  transition: transform .65s var(--cl-ease);
}
.cl-overlay {
  position: relative;
  left: -100%;
  height: 100%; width: 200%;
  transition: transform .65s var(--cl-ease);
}
.cl-overlay-panel {
  position: absolute;
  top: 0;
  height: 100%; width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0 48px;
  overflow: hidden;
  transition: transform .65s var(--cl-ease);
}
.cl-overlay-left  { left: 0; transform: translateX(-18%); }
.cl-overlay-right { right: 0; transform: translateX(0); }

.cl-auth[data-mode="register"] .cl-signin { z-index: 1; opacity: 0; transform: translateX(100%); }
.cl-auth[data-mode="register"] .cl-signup { z-index: 5; opacity: 1; transform: translateX(100%); }
.cl-auth[data-mode="register"] .cl-overlay-container { transform: translateX(-100%); }
.cl-auth[data-mode="register"] .cl-overlay { transform: translateX(50%); }
.cl-auth[data-mode="register"] .cl-overlay-left  { transform: translateX(0); }
.cl-auth[data-mode="register"] .cl-overlay-right { transform: translateX(18%); }

/* Inscription fermée (ACCOUNTS_ALLOW_PUBLIC_REGISTRATION=False) :
   pas d'overlay ni de signup dans le DOM, le login occupe toute la carte. */
.cl-auth--solo { width: 520px; }
.cl-auth--solo .cl-signin { width: 100%; padding: 48px 56px; }

/* Repli < 768px : le double-slider n'a pas de sens sur mobile. On empile,
   l'overlay disparaît, seul le panneau du mode courant est affiché et la
   bascule passe par les liens texte (qui restent fonctionnels sans JS). */
@media (max-width: 767px) {
  .cl-overlay-container { display: none; }
  .cl-signin, .cl-signup {
    width: 100%;
    padding: 32px 24px;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cl-auth[data-mode="login"] .cl-signup { display: none; }
  .cl-auth[data-mode="register"] .cl-signin { display: none; }
  .cl-auth--solo { width: 100%; }
  .cl-auth--solo .cl-signin { padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-halo, .cl-floaty, .cl-rise { animation: none !important; }
  .cl-signin, .cl-signup, .cl-overlay-container, .cl-overlay, .cl-overlay-panel,
  .cl-submit { transition: none !important; }
}