/* ── EduCycle Auth Pages — split photo + form ───────────────────── */

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

html, body { height: 100%; margin: 0; }

:root {
  /* Anciennement --auth-green* : le nom datait d'une palette verte abandonnée
     alors que la valeur était déjà le bleu EduCycle.

     Les pages Auth ont Layout = null et ne chargent PAS ec-theme.css (elles
     restent volontairement sans Bootstrap). Les valeurs de marque sont donc
     écrites en repli ici : var() les reprend si le thème est présent, sinon la
     valeur littérale s'applique. Ces replis doivent rester alignés sur
     ec-theme.css. --auth-ink, --auth-muted et --auth-line sont propres à cette
     surface (gris plus doux que le CRM). */
  --auth-primary: var(--ec-primary, #085ee7);
  --auth-primary-dark: var(--ec-primary-dark, #0749b8);
  --auth-primary-soft: var(--ec-primary-light, #60a5fa);
  --auth-ink: #323846;
  --auth-muted: #8b94a6;
  --auth-line: #e7ebf0;
  --auth-field: var(--ec-primary-mid, #dbeafe);
}

.auth-body {
  min-height: 100vh;
  display: flex;
  font-family: var(--ec-font, 'Public Sans', system-ui, -apple-system, sans-serif);
  background: #fff;
}

/* ── Panneau gauche (branding) ────────────────────────────── */
.auth-panel-left {
  width: 74.5%;
  min-height: 100vh;
  /* Photo laissée dans ses couleurs réelles : elle porte déjà les tons de
     la charte (chemise et dossier bleus, lumière naturelle) et un voile
     uniforme l'éteignait. L'assombrissement est reporté sur le seul bas du
     panneau, derrière le titre et le paragraphe en blanc (voir ::before). */
  background:
    url('/uploads/img/marketing/login.webp') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 46px 58px;
  position: relative;
  overflow: hidden;
}

/* Seul assombrissement du panneau : il porte le titre et le paragraphe en
   blanc, posés en flex-end. Teinté du bleu de marque plutôt que du noir,
   et fondu jusqu'à transparent pour ne pas trancher sur la photo. */
.auth-panel-left::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(0deg,
    rgba(9, 32, 88, .92) 0%,
    rgba(9, 32, 88, .78) 26%,
    rgba(9, 32, 88, .44) 56%,
    rgba(9, 32, 88, .16) 80%,
    transparent 100%);
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
}
.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}
.auth-brand-logo-mark {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.2);
}
.auth-brand-logo-mark svg {
  width: 22px; height: 22px;
  fill: #fff;
}
.auth-brand-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}

/* Lockup cliquable identique à l'en-tête vitrine.
   Le SVG porte de la marge interne : la hauteur de cadre est nettement
   supérieure à la taille perçue du dessin. */
a.auth-brand-logo { text-decoration: none; }
/* Lockup original (educycle-logo.svg), sans recoloration.
   Le viewBox contient ~20% de marge interne : la hauteur de cadre est
   nettement supérieure à la taille perçue du dessin. */
.auth-brand-lockup {
  height: 96px;
  width: auto;
  display: block;
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 0 34px;
  max-width: 600px;
}
.auth-brand-headline {
  font-family: var(--ec-font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(2.9rem, 4.6vw, 5rem);
  font-weight: 700;
  color: #fff;
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0 0 22px;
}
.auth-brand-headline span {
  color: var(--auth-primary-soft);
  font-weight: 700;
}
.auth-brand-sub {
  font-size: 1.04rem;
  color: rgba(255,255,255,.74);
  line-height: 1.65;
  margin: 0;
  max-width: 460px;
}

/* Grand E décoratif */
.auth-deco-letter {
  display: none;
}

.auth-brand-footer {
  position: relative;
  z-index: 1;
  font-size: .8rem;
  color: rgba(255,255,255,.56);
}

/* ── Panneau droit (formulaire) ───────────────────────────── */
.auth-panel-right {
  flex: 1;
  min-width: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 84px 54px 48px;
  background: #fff;
  position: relative;
}

.auth-form-wrap {
  width: 100%;
  max-width: 372px;
}

.auth-topbar {
  position: absolute;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #6b7280;
  font-size: .78rem;
  font-weight: 600;
}

.auth-theme-toggle {
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: #eef1f5;
  border: 1px solid #dce2ea;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
}

.auth-theme-toggle::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: 2px;
  left: 3px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.18);
}

.auth-theme-toggle::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  top: 5px;
  right: 7px;
  background: #f4d04f;
}

.auth-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: .02em;
}

.auth-lang-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  background: linear-gradient(90deg, #244aa5 0 33%, #fff 33% 66%, #df3346 66% 100%);
  box-shadow: 0 0 0 1px rgba(15,23,42,.08);
}

.auth-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--auth-primary);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: 26px;
}

.auth-section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-primary);
}

.auth-heading {
  font-family: var(--ec-font-display, 'Source Serif 4', Georgia, serif);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--auth-ink);
  letter-spacing: -.04em;
  line-height: 1.02;
  margin: 0 0 20px;
}
.auth-heading strong {
  display: block;
  color: var(--auth-primary-dark);
  font-weight: 700;
}
.auth-subheading {
  font-size: .88rem;
  color: var(--auth-muted);
  margin: 0 0 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--auth-line);
}

.auth-field {
  margin-bottom: 24px;
  position: relative;
}
/* Prénom et nom côte à côte : deux champs courts sur une ligne évitent d'allonger
   le formulaire, qui tiendrait sinon mal dans la hauteur d'écran d'un téléphone. */
.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .auth-field-row { grid-template-columns: 1fr; gap: 0; }
}
.auth-field label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: #5f646c;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.auth-field input {
  width: 100%;
  min-height: 41px;
  padding: 10px 44px 10px 16px;
  border: 1px solid var(--auth-field);
  border-radius: 10px;
  font-size: .88rem;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.auth-field input:focus {
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 3px rgba(79,143,18,.10);
}
.auth-field input::placeholder { color: #aab0bb; }

.auth-pwd-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-pwd-wrap input {
  flex: 1;
  padding-right: 36px;
}
.auth-pwd-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #8b8f98;
  display: flex;
  align-items: center;
  line-height: 1;
}
.auth-pwd-toggle:hover { color: var(--auth-primary); }
.auth-pwd-eye,
.auth-pwd-eye-off {
  width: 18px;
  height: 18px;
}

.auth-field-error {
  display: block;
  font-size: .75rem;
  color: var(--ec-danger,#dc2626);
  margin-top: 4px;
}

/* Alertes */
.auth-alert-error {
  background: var(--ec-danger-soft,#fef2f2);
  border-left: 3px solid var(--ec-danger,#dc2626);
  color: var(--ec-danger,#dc2626);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 24px;
}
.auth-alert-success {
  background: var(--ec-success-soft,#f0fdf4);
  border-left: 3px solid var(--ec-success,#16a34a);
  color: #15803d;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: .85rem;
  margin-bottom: 24px;
}

/* Remember me */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 28px;
  font-size: .85rem;
  color: var(--auth-muted);
  cursor: pointer;
}
.auth-remember input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--auth-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Bouton */
.auth-btn {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 13px 20px;
  background: var(--auth-primary);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
  font-family: inherit;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 13px 22px rgba(79,143,18,.18);
}
.auth-btn:hover { background: var(--auth-primary-dark); transform: translateY(-1px); }
.auth-btn:active { transform: translateY(0); }

/* Lien pied de formulaire */
.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: .85rem;
  color: var(--ec-muted,#64748b);
}
.auth-footer a {
  color: var(--auth-primary);
  font-weight: 600;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* Responsive — mobile : colonne unique */
@media (max-width: 768px) {
  .auth-body { flex-direction: column; }
  .auth-panel-left {
    width: 100%;
    min-height: 360px;
    padding: 26px 24px 34px;
  }
  .auth-brand-lockup { height: 64px; }
  .auth-brand-headline { font-size: 2.35rem; }
  .auth-deco-letter { font-size: 6rem; bottom: 16px; right: 16px; }
  .auth-brand-content { padding: 16px 0; }
  .auth-panel-right { min-width: 0; padding: 86px 24px 36px; }
  .auth-topbar { top: 24px; right: 24px; }
}

/*
   RegisterPending — Confirmation e-mail (scopé à .auth-pending) */

.auth-pending .auth-form-wrap{

  width:100%;

  max-width:480px;
}

.auth-pending .auth-form-wrap-center{

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:0;
}

.auth-pending .auth-panel-right{

  flex:1;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:48px 40px;

  background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
  );

  position:relative;

  overflow:hidden;
}

.auth-pending .auth-panel-right::before{

  content:"";

  position:absolute;

  left:0;
  top:0;

  width:1px;
  height:100%;

  background:
  linear-gradient(
    to bottom,
    transparent,
    rgba(148,163,184,.18),
    transparent
  );
}

.auth-pending .auth-panel-right::after{

  content:"";

  position:absolute;

  top:-120px;
  right:-120px;

  width:320px;
  height:320px;

  border-radius:50%;

  background:
  radial-gradient(
    circle,
    rgba(37,99,235,.05),
    transparent 70%
  );

  pointer-events:none;
}

.auth-pending .auth-mail-icon{

  width:92px;

  height:92px;

  margin:0 auto 30px;

  border-radius:28px;

  background:
  linear-gradient(
    135deg,
    #2563eb,
    #5b8def
  );

  display:flex;

  align-items:center;

  justify-content:center;

  color:white;

  border:1px solid rgba(255,255,255,.18);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow:
  0 16px 34px rgba(37,99,235,.24);
}

.auth-pending .auth-mail-icon svg{

  width:42px;

  height:42px;
}

.auth-pending .auth-heading{

  font-size:2.2rem;

  line-height:1.1;

  text-align:center;

  margin-bottom:12px;
}

.auth-pending .auth-subheading-wide{

  max-width:460px;

  margin:0 auto 22px;

  text-align:center;

  font-size:1rem;

  line-height:1.6;
}

.auth-pending .auth-email-box{

  background:var(--ec-primary-soft,#eff6ff);

  color:#2563eb;

  border-radius:18px;

  padding:18px 20px;

  font-size:1rem;

  font-weight:600;

  margin-bottom:24px;

  text-align:center;

  word-break:break-word;

  border:
  1px solid rgba(37,99,235,.08);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.7);
}

.auth-pending .auth-alert-success{

  border-left:4px solid var(--ec-success,#16a34a);

  border-radius:14px;

  padding:18px 18px;

  font-size:.96rem;

  line-height:1.65;

  margin-bottom:28px;

  box-shadow:
  0 4px 14px rgba(22,163,74,.05);
}

.auth-pending .auth-btn{

  margin-top:4px;

  min-height:54px;

  border-radius:14px;

  font-size:1rem;

  font-weight:600;

  transition:
  transform .18s ease,
  box-shadow .18s ease,
  background .18s ease;
}

.auth-pending .auth-btn:hover{

  background:#1d4ed8;

  transform:translateY(-2px);

  box-shadow:
  0 14px 28px rgba(37,99,235,.24);
}

.auth-pending .auth-btn-link{

  text-decoration:none;

  display:flex;

  align-items:center;

  justify-content:center;
}
/* ── Boutons sociaux ─────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2rem 0 1.45rem;
  color: #2f3440;
  font-size: .8rem;
  white-space: nowrap;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d9dee7;
}
.auth-social-btns {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1rem;
}
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 39px;
  padding: .55rem 1rem;
  border: 1px solid #d8dde5;
  border-radius: 4px;
  background: #fff;
  color: #1e293b;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-social-btn:hover {
  border-color: #bfc6d1;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}