/* ════════════════════════════════════════════════════════════════════
   evalab : Pages d'authentification
   ════════════════════════════════════════════════════════════════════

   Connexion, inscription, choix du profil, mot de passe oublié,
   réinitialisation, vérification d'adresse.

   ── Pourquoi ce fichier existe ─────────────────────────────────────
   Ces règles vivaient dans un <style> de 373 lignes au sommet de
   auth-pages/auth-layout.blade.php. Elles étaient donc renvoyées dans
   chaque réponse HTML et jamais mises en cache, sur des pages qu'un
   visiteur hésitant recharge plusieurs fois de suite.

   ── Ce qui a changé ────────────────────────────────────────────────
   Le bloc d'origine déclarait des variables locales (`--blue`, `--bg`,
   `--ff-head`…) pointant vers les tokens evalab, mais le gabarit ne
   chargeait jamais ev-tokens.css : chacune se résolvait dans le vide.
   Les pages tiraient par ailleurs Cormorant Garamond et DM Sans, la
   typographie d'AVANT la refonte.

   Le reste des couleurs était écrit en dur, et pas dans la bonne
   palette : les accents employaient rgba(29,158,217,…), un cyan hérité
   d'une version antérieure, là où la marque est à #1b74d9. Le contraste
   s'en ressentait, et rien ne suivait le mode sombre.

   Dépend de ev-tokens.css, qui doit être chargé AVANT.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--ev-ff-body);
  background: var(--ev-surface);
  color: var(--ev-text);
}

/* ════════════════════════════════════════════════════════════════════
   1. Ossature en deux volets
   ════════════════════════════════════════════════════════════════════
   À gauche la marque et ce que la plateforme permet ; à droite le
   formulaire seul. Sous 992 px le volet gauche disparaît : sur un
   téléphone, l'argumentaire repousserait le formulaire hors de l'écran.
   ════════════════════════════════════════════════════════════════════ */

.auth-wrap { display: flex; min-height: 100vh; }

.auth-left {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 42%;
  padding: 52px 56px;
  overflow: hidden;
  background: var(--ev-bg);
}

/* Fond uni.
   Ce volet portait une trame de 56 px en `::before` et deux halos
   floutés en `::after` et `.auth-left-orb2`. Le motif quadrillé
   alourdissait la page sans rien apporter : retiré à la demande, au
   profit d'un aplat. La séparation d'avec le volet du formulaire est
   désormais portée par un simple filet, puisque les deux fonds sont
   proches en clair. */
.auth-left { border-inline-end: 1px solid var(--ev-divider); }

.auth-left-inner,
.auth-left-footer-wrap { position: relative; z-index: 2; }
.auth-left-inner { display: flex; flex-direction: column; flex: 1; }

.auth-brand { margin-block-end: 64px; }
.auth-brand img { height: 36px; width: auto; }

.auth-panel-title {
  font-family: var(--ev-ff-head);
  font-size: clamp(1.95rem, 2.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -.025em;
  color: var(--ev-text);
  margin-block-end: 16px;
}
/* Le gabarit mettait ce fragment en italique. Space Grotesk n'a pas de
   coupe italique : le navigateur l'aurait penchée mécaniquement, ce qui
   se voit. La mise en valeur passe donc par la couleur d'accent. */
.auth-panel-title em {
  font-style: normal;
  color: var(--ev-accent-deep);
}

.auth-panel-desc {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ev-text-muted);
  margin: 0;
}

/* ── Ce que la plateforme permet ───────────────────────────────── */

.auth-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-block-start: auto;
  padding-block-start: 52px;
}
.auth-feat { display: flex; align-items: flex-start; gap: 14px; }
.auth-feat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin-block-start: 1px;
  border-radius: var(--ev-radius-sm);
  background: var(--ev-blue-soft);
  color: var(--ev-blue);
  font-size: 13px;
}
.auth-feat-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ev-text);
  margin-block-end: 2px;
}
.auth-feat-text span { font-size: 12.5px; color: var(--ev-text-muted); }

.auth-panel-foot {
  font-size: 12px;
  color: var(--ev-text-faint);
  padding-block-start: 28px;
  margin-block-start: 40px;
  border-block-start: 1px solid var(--ev-divider);
}

/* ════════════════════════════════════════════════════════════════════
   2. Volet du formulaire
   ════════════════════════════════════════════════════════════════════ */

.auth-right {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow-y: auto;
  background: var(--ev-surface);
}
.auth-form-box { width: 100%; max-width: 420px; }
.auth-form-box.wide { max-width: 500px; }

/* Visible uniquement quand le volet de marque disparaît. */
.auth-mobile-logo { display: none; text-align: center; margin-block-end: 36px; }
.auth-mobile-logo img { height: 34px; width: auto; }

/* ════════════════════════════════════════════════════════════════════
   3. Titres
   ════════════════════════════════════════════════════════════════════ */

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  margin-block-end: 14px;
  border-radius: var(--ev-radius-sm);
  background: var(--ev-accent-soft);
  color: var(--ev-accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.auth-eyebrow i { font-size: 10px; }

.auth-title {
  font-family: var(--ev-ff-head);
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -.02em;
  color: var(--ev-text);
  margin-block-end: 8px;
}
.auth-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ev-text-muted);
  margin-block-end: 32px;
}
.auth-sub a { color: var(--ev-accent-deep); font-weight: 700; text-decoration: none; }
.auth-sub a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   4. Champs
   ════════════════════════════════════════════════════════════════════ */

.auth-field { margin-block-end: 16px; }
.auth-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-text);
  margin-block-end: 7px;
}

.auth-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  background: var(--ev-bg);
  color: var(--ev-text);
  font-family: var(--ev-ff-body);
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  transition: border-color .18s var(--ev-ease), box-shadow .18s var(--ev-ease), background-color .18s var(--ev-ease);
}
.auth-input::placeholder { color: var(--ev-text-faint); }
.auth-input:focus {
  border-color: var(--ev-blue);
  box-shadow: 0 0 0 3px var(--ev-blue-highlight);
  background: var(--ev-surface);
}
.auth-input[readonly],
.auth-input:disabled {
  background: var(--ev-surface-offset);
  color: var(--ev-text-muted);
  cursor: default;
}

/* Champ en erreur : le rouge seul ne suffit pas, le message sous le
   champ porte l'information. La bordure ne fait que diriger l'œil. */
.auth-input.is-error,
.auth-input[aria-invalid="true"] {
  border-color: var(--ev-error);
}
.auth-input.is-error:focus,
.auth-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--ev-error-highlight);
}
.auth-error {
  display: block;
  margin-block-start: 6px;
  font-size: 12.5px;
  color: var(--ev-error);
}

/* Champ portant un bouton à l'intérieur (affichage du mot de passe).
   Le retrait à droite est porté par `.has-affix` et non par un style en
   ligne, pour que le texte saisi ne passe jamais sous le bouton. */
.auth-input-wrap { position: relative; }
.auth-input.has-affix { padding-inline-end: 46px; }

.auth-affix-btn {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--ev-radius-sm);
  background: transparent;
  color: var(--ev-text-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s var(--ev-ease), background-color .18s var(--ev-ease);
}
.auth-affix-btn:hover { color: var(--ev-text); background: var(--ev-surface-offset); }
.auth-affix-btn:focus-visible { outline: 2px solid var(--ev-blue); outline-offset: 1px; }
/* Quand le mot de passe est visible, le bouton le dit aussi à l'œil. */
.auth-affix-btn[aria-pressed="true"] { color: var(--ev-blue); }

.auth-forgot {
  display: block;
  text-align: end;
  margin-block-start: 6px;
  font-size: 12.5px;
  color: var(--ev-text-muted);
  text-decoration: none;
}
.auth-forgot:hover { color: var(--ev-accent-deep); text-decoration: underline; }

/* ── Groupe de boutons radio ───────────────────────────────────── */

.auth-radio-group {
  padding: 16px 18px;
  margin-block-end: 16px;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  background: var(--ev-bg);
}
.auth-radio-group label {
  display: block;
  margin-block-end: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ev-text);
}
.auth-radio-opts { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.auth-radio-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ev-text);
  cursor: pointer;
}
.auth-radio-opt input { accent-color: var(--ev-blue); }

/* ── Listes déroulantes (Select2) ──────────────────────────────── */
/* La liste ouverte est rattachée au champ (dropdownParent) : ces règles
   s'appliquent donc aussi à elle, thème sombre compris. */

.auth-select-wrap { position: relative; }
.auth-select-wrap .select2-container { width: 100% !important; }
.auth-select-wrap .select2-selection--single {
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
  padding: 0 40px 0 16px !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-md) !important;
  background: var(--ev-bg) !important;
  box-shadow: none !important;
  cursor: pointer;
}
.auth-select-wrap .select2-container--focus .select2-selection--single,
.auth-select-wrap .select2-container--open .select2-selection--single {
  border-color: var(--ev-blue) !important;
  box-shadow: 0 0 0 3px var(--ev-blue-highlight) !important;
  background: var(--ev-surface) !important;
}
.auth-select-wrap .select2-selection__rendered {
  padding: 0 !important;
  color: var(--ev-text) !important;
  font-family: var(--ev-ff-body) !important;
  font-size: 14px !important;
  line-height: normal !important;
}
.auth-select-wrap .select2-selection__placeholder { color: var(--ev-text-faint) !important; }
.auth-select-wrap .select2-selection__arrow { height: 46px !important; right: 12px !important; }
.auth-select-wrap .select2-selection__arrow b { border-top-color: var(--ev-text-faint) !important; }
.auth-select-wrap .select2-dropdown {
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-md) !important;
  background: var(--ev-surface) !important;
  color: var(--ev-text) !important;
  box-shadow: var(--ev-shadow-deep) !important;
  font-family: var(--ev-ff-body) !important;
  font-size: 14px !important;
  overflow: hidden;
}
.auth-select-wrap .select2-search__field {
  border: 1.5px solid var(--ev-border) !important;
  border-radius: 8px !important;
  background: var(--ev-bg) !important;
  color: var(--ev-text) !important;
  padding: 6px 10px !important;
  outline: 0 !important;
}
.auth-select-wrap .select2-results__option--highlighted,
.auth-select-wrap .select2-results__option--highlighted[aria-selected] {
  background: var(--ev-blue-soft) !important;
  color: var(--ev-blue) !important;
}

/* ════════════════════════════════════════════════════════════════════
   5. Boutons et liens de pied
   ════════════════════════════════════════════════════════════════════ */

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  margin-block-start: 8px;
  border: 0;
  border-radius: var(--ev-radius-md);
  background: var(--ev-blue);
  /* Pas `#fff` : en thème sombre le bleu s'éclaircit et le blanc
     tomberait à 2,4:1. Le token suit le thème. */
  color: var(--ev-on-blue);
  font-family: var(--ev-ff-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ev-ease), transform .12s var(--ev-ease);
}
.auth-btn:hover {
  background: var(--ev-blue-hover);
  color: var(--ev-on-blue);
  text-decoration: none;
  transform: translateY(-1px);
}
.auth-btn:active { transform: translateY(0); }
.auth-btn:focus-visible { outline: 2px solid var(--ev-blue); outline-offset: 2px; }
.auth-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.auth-foot {
  text-align: center;
  margin-block-start: 24px;
  font-size: 14px;
  color: var(--ev-text-muted);
}
.auth-foot a { color: var(--ev-accent-deep); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 22px;
  font-size: 13px;
  color: var(--ev-text-muted);
  text-decoration: none;
}
.auth-back:hover { color: var(--ev-accent-deep); }

/* ════════════════════════════════════════════════════════════════════
   6. Messages
   ════════════════════════════════════════════════════════════════════ */

.auth-alert {
  padding: 12px 16px;
  margin-block-end: 20px;
  border-radius: var(--ev-radius-md);
  font-size: 13px;
  line-height: 1.55;
  list-style: none;
}
.auth-alert.danger {
  background: var(--ev-error-highlight);
  border: 1px solid var(--ev-error-border);
  color: var(--ev-error-text);
}
.auth-alert.success {
  background: var(--ev-success-highlight);
  border: 1px solid var(--ev-success-border);
  color: var(--ev-success-text);
}
.auth-alert ul { margin: 0; padding-inline-start: 18px; }

/* ════════════════════════════════════════════════════════════════════
   7. Choix du profil
   ════════════════════════════════════════════════════════════════════ */

.type-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  margin-block-end: 12px;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  background: var(--ev-bg);
  color: var(--ev-text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s var(--ev-ease), box-shadow .18s var(--ev-ease), background-color .18s var(--ev-ease);
}
.type-card:hover {
  border-color: var(--ev-blue);
  box-shadow: 0 0 0 3px var(--ev-blue-highlight);
  background: var(--ev-surface);
  color: var(--ev-text);
  text-decoration: none;
}
.type-card:focus-visible { outline: 2px solid var(--ev-blue); outline-offset: 2px; }
.type-card img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.type-card-info { flex: 1; min-width: 0; }
.type-card-info h6 {
  margin-block-end: 3px;
  font-family: var(--ev-ff-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ev-text);
}
.type-card-info p { margin: 0; font-size: 12.5px; color: var(--ev-text-muted); }
.type-card-arrow { flex: none; font-size: 12px; color: var(--ev-text-faint); }
.type-card:hover .type-card-arrow { color: var(--ev-blue); }

/* ── Progression ───────────────────────────────────────────────── */

.auth-step-badge { display: flex; align-items: center; gap: 8px; margin-block-end: 28px; }
.auth-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-border);
}
.auth-step-dot.active { background: var(--ev-blue); }

/* ════════════════════════════════════════════════════════════════════
   8. Langue et thème
   ════════════════════════════════════════════════════════════════════ */

.auth-utils {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--ev-surface-offset);
}
.auth-lang-opt {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ev-text-faint);
  text-decoration: none !important;
  transition: color .18s var(--ev-ease), background-color .18s var(--ev-ease);
}
.auth-lang-opt.active { background: var(--ev-blue-highlight); color: var(--ev-blue-dark); }
.auth-lang-opt:hover:not(.active) { color: var(--ev-text); }

/* ════════════════════════════════════════════════════════════════════
   9. Adaptation aux petits écrans
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  /* Le volet de marque cède la place : sur un téléphone, l'argumentaire
     repousserait le formulaire sous la ligne de flottaison. */
  .auth-left { display: none; }
  .auth-mobile-logo { display: block; }
  .auth-right { padding: 40px 28px; }
}

@media (max-width: 575px) {
  .auth-right { align-items: flex-start; padding: 48px 20px 36px; }
  .auth-utils { inset-block-start: 14px; inset-inline-end: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-btn, .type-card, .auth-input, .auth-lang-opt { transition: none; }
  .auth-btn:hover { transform: none; }
}