/* ============================================================
   espace-auth-v2.css — pages auth (connexion, inscription,
   mot-de-passe-oubli, reinitialiser-mdp, completer-profil)
   ============================================================
   Charge APRES framework-v2.css + page-home-v2.css.
   Layout centre full-screen avec halos, sans header/footer V2.
   ============================================================ */

body.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.auth-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.auth-page::before,
.auth-page::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.auth-page::before {
  top: -150px; right: -150px;
  background: radial-gradient(circle, rgba(232, 0, 10, 0.15), transparent 70%);
}
.auth-page::after {
  bottom: -150px; left: -150px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.10), transparent 70%);
}

.auth-page__header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.auth-page__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.auth-page__brand .wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: var(--tracking-wordmark);
  color: var(--color-text-primary);
}
.auth-page__brand .accent { color: var(--color-rouge-teco); }
.auth-page__brand-tag {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--color-border-subtle);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-rouge-teco);
}

/* ── Selecteur de theme Clair / Auto / Sombre ──────────────────
   Les pages d'authentification sont souvent la PREMIERE page vue
   du site : y refuser le reglage d'affichage, c'est enfermer la
   personne dans un theme qu'elle n'a pas choisi des la porte
   d'entree. Meme dessin que dans l'espace et sur la vitrine.

   Tout est cadre sous .auth-body : profil.php charge cette meme
   feuille SANS etre une page d'authentification, et possede deja
   son propre selecteur habille par espace-app.css. Sans ce cadre,
   les regles d'ici deteindraient dessus.

   Le bloc de marque reste centre : le selecteur se pose en angle
   haut droit de la page, la ou l'oeil le cherche partout ailleurs. */
.auth-body .auth-page > .seg-theme {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
}
.auth-body .seg-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
}
[data-theme="light"] .auth-body .seg-theme { background: rgba(0, 0, 0, 0.04); }
.auth-body .seg-theme button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Jetons et non couleurs figees : le fond creme du theme clair
     avalerait un gris pense pour le fond noir. */
  color: var(--color-text-muted);
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.auth-body .seg-theme button svg { width: 15px; height: 15px; }
.auth-body .seg-theme button:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .auth-body .seg-theme button:hover { background: rgba(0, 0, 0, 0.05); }
.auth-body .seg-theme button.on,
.auth-body .seg-theme button.on:hover {
  background: var(--color-rouge-teco);
  color: #fff;
}
.auth-body .seg-theme button:focus-visible {
  outline: 2px solid var(--color-rouge-teco);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .auth-body .auth-page > .seg-theme { top: 0.85rem; right: 0.85rem; }
  .auth-body .seg-theme button { width: 26px; height: 26px; }
  .auth-body .seg-theme button svg { width: 13px; height: 13px; }
}

.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 2rem 1.75rem;
  position: relative;
  z-index: 1;
}
.auth-card__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0 0 0.4rem;
}
.auth-card__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-rouge-teco);
}
.auth-card__sub {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  margin: 0 0 1.5rem;
}
.auth-card__sub a {
  color: var(--color-rouge-teco);
  text-decoration: none;
  font-weight: 600;
}
.auth-card__sub a:hover { text-decoration: underline; }

/* Champs (preserve les classes legacy .champ + .input-wrap) */
.champ {
  margin-bottom: 1rem;
}
.champ label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.4rem;
}
.input-wrap {
  position: relative;
}
.input-wrap .icon,
.input-wrap .icon-svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-wrap .icon-svg { width: 16px; height: 16px; }
.input-wrap input,
.input-wrap select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-item);
  padding: 0.7rem 0.85rem 0.7rem 2.6rem;
  box-sizing: border-box;
  transition: border-color 150ms ease, background 150ms ease;
}
[data-theme="light"] .input-wrap input,
[data-theme="light"] .input-wrap select {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.10);
}
/* Override pour les inputs sans icone (classe explicite .no-icon).
   Pattern HTML standard auth = .input-wrap > .icon + input, donc le
   padding-left:2.6rem doit s'appliquer pour laisser la place a l'icone.
   L'ancien selecteur :not(:has(+ .icon)) etait casse car l'icone est
   AVANT l'input, donc + .icon retournait false sur l'input et la regle
   :has(+ .icon) matchait TOUS les inputs, ecrasant le padding 2.6rem. */
.input-wrap input.no-icon { padding-left: 0.85rem; }
.input-wrap input:focus,
.input-wrap select:focus {
  outline: none;
  border-color: var(--color-rouge-teco);
  background: rgba(255, 255, 255, 0.07);
}
[data-theme="light"] .input-wrap input:focus,
[data-theme="light"] .input-wrap select:focus {
  background: rgba(0, 0, 0, 0.04);
}
.input-wrap input::placeholder { color: var(--color-text-muted); }

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.pw-hint,
.hint {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* Alertes */
.alerte {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-item);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.alerte-erreur {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: #EF4444;
}
.alerte-succes {
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.30);
  color: #10B981;
}
.alerte a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Form options (lien mot de passe oublié) */
.form-options {
  margin: -0.25rem 0 1rem;
  text-align: right;
}
.form-options a {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.form-options a:hover { color: var(--color-rouge-teco); }

/* Boutons */
.btn-auth,
.btn-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--color-rouge-teco);
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-auth:hover,
.btn-submit:hover {
  background: var(--color-rouge-deep);
  transform: translateY(-1px);
}
.btn-auth:disabled {
  background: rgba(255, 255, 255, 0.10);
  cursor: not-allowed;
  transform: none;
}

/* Switch link en bas */
.auth-switch,
.auth-card__switch {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}
.auth-switch a,
.auth-card__switch a {
  color: var(--color-rouge-teco);
  text-decoration: none;
  font-weight: 600;
}
.auth-switch a:hover,
.auth-card__switch a:hover { text-decoration: underline; }

/* CGV checkbox (inscription) */
.auth-cgv {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.75rem 0 1rem;
}
.auth-cgv input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--color-rouge-teco);
  cursor: pointer;
}
.auth-cgv label {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.auth-cgv label a {
  color: var(--color-rouge-teco);
  text-decoration: underline;
}
.auth-cgv--optionnel {
  margin-top: -0.35rem;
}
.auth-cgv-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--color-text-muted);
}

/* Bloc règles MDP (reinitialiser-mdp) */
.pw-rules {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-item);
}
[data-theme="light"] .pw-rules { background: rgba(0, 0, 0, 0.03); }
.pw-rules strong {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}
.pw-rules ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.3rem;
}
.pw-rules li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-rouge-teco);
  flex-shrink: 0;
}

/* Footer simple bas de page */
.auth-foot {
  padding: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
}
.auth-foot a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.auth-foot a:hover { color: var(--color-rouge-teco); }

@media (max-width: 600px) {
  .auth-card { padding: 1.5rem 1.25rem; }
  .row-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ===== Réassurance inscription (audit conso #8, juin 2026) ===== */
.auth-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-item);
  list-style: none;
}
.auth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.auth-benefits li svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-rouge-teco);
}