/* Page /login — CC-LOGIN-SPLIT-01 (#529, retour Damien) : DEUX COLONNES
   25/75. Gauche : le formulaire sur fond BLANC. Droite : la vitrine sur le
   violet pâle de la marque (#f4f2fd — EMAIL_COLORS.fond, le fond du gabarit
   emailShellHtml : le même violet, pas un second). Tokens → tokens.css */

/* ── CC-SATOSHI-01 (#531) : Satoshi, la police de MARQUE — elle habille le
   SEUIL (wordmark + titres de la page d'entrée), pas l'outil. UNE graisse
   (Bold 700, woff2 27 ko — trois titres n'ont pas besoin de neuf graisses),
   font-display swap (jamais d'attente : repli système puis bascule).
   Licence : Fontshare EULA (ITF), copie à côté du fichier. */
@font-face {
  font-family: 'Satoshi';
  src: url('/public/assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* CC-DESIGN-3-01 (#566) : Instrument Serif (OFL) porte le WORDMARK du seuil.
   Les TITRES du seuil restent en Satoshi (proposition — Damien tranche). */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/public/assets/fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--login-fg);
  background: var(--surface, #fff); /* blanc — le fond de la colonne login */
}

/* ── Layout split 25/75 ── */
.login-split {
  display: flex;
  min-height: 100vh;
}

.login-form-side {
  flex: 0 0 25%;
  max-width: 25%;
  min-width: 320px; /* PLANCHER responsive : sous ~1280 px le 25 % devient
     étroit — la colonne tient 320 px (min-width GAGNE sur max-width) et la
     vitrine absorbe la différence (elle est en flex 1) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* --login-gutter : LA marge de la colonne. Le pied légal s'y ferre (retour
     Damien) — une seule valeur, elles ne peuvent plus diverger. */
  --login-gutter: 40px;
  padding: 60px var(--login-gutter);
  background: var(--surface, #fff); /* fond login : BLANC */
}

/* la colonne est le carton : fond blanc plein, plus de voile */
.login-form-wrap {
  width: 100%;
  max-width: 400px;
}

/* ── Colonne vitrine (75 %) : le graphe sur le VIOLET PÂLE marque ── */
.login-vitrine-side {
  flex: 1 1 75%; /* souple : cède au plancher 320 px de la colonne login */
  min-width: 0;
  position: relative;
  background: var(--colo-pale, #f4f2fd); /* violet pâle (colors.css #564) — valeur du gabarit email */
  overflow: hidden;
}
/* #865 : le panneau porte le diaporama fixe (login-slides.css). Le fondu croisé
   de l'ex-vitrine (.dv-layer, transition d'opacité + double calque) est retiré
   avec demo-vitrine.js : plus rien ne bouge tout seul ici. */
.login-demo {
  position: absolute;
  inset: 0;
}

/* ── CC-DEMO-VITRINE-02 : le logo, en grand, en haut à gauche de la colonne ── */
.login-form-side { position: relative; } /* CC-COCKPIT-GRAPHE-01 : ancre du logo haut de page */
/* CC-COCKPIT-GRAPHE-01 (#541) : le logo EN HAUT DE PAGE, plus gros —
   sorti du flux (absolu en tête de colonne, aligné sur le formulaire), le
   formulaire reste centré, le 25/75 et la vitrine ne bougent pas. */
.login-logo {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 400px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.login-logo img { width: 64px; height: 64px; display: block; }
.login-logo-name {
  font-family: var(--font); /* CC-FONTS-SWAP-01 (#570) : wordmark RE-PASSÉ en Satoshi */
  font-size: var(--text-rem-175, 30px); /* proportionné au mark 64px */
  font-weight: 700; /* la graisse Satoshi chargée */
  letter-spacing: -0.02em;
  color: var(--login-fg);
}

.login-heading {
  margin: 0 0 32px;
  font-family: var(--font-title); /* CC-FONTS-SWAP-01 (#570) : titre du seuil en Instrument Serif */
  font-size: var(--text-rem-2);
  font-weight: 400; /* Instrument Serif : une seule graisse */
  letter-spacing: -0.02em;
  color: var(--login-fg);
}

/* CC-BTN-CHARTE-PRINT-01 (#540) : le bloc « Panneau branding » (side,
   blobs, logo, headline, tag, desc, trust) est PURGÉ — son markup a disparu
   avec le plein écran #528/#529, les règles étaient mortes (dont le dégradé
   145deg hors charte). */

/* ── Formulaires ── */
.login-panel { display: none; flex-direction: column; gap: 0; }
.login-panel.on { display: flex; }

.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/*
 * CU-MFA-FIELD-VISIBILITY-01 (#758) : `.login-field { display:flex }` bat le
 * `hidden` UA — sans cette règle le champ MFA reste VISIBLE au chargement.
 * Même piège que les SVG œil (CC-UI-QUICKWINS-01 plus bas).
 */
.login-field[hidden],
#login-mfa-field[hidden] {
  display: none !important;
}

/* Apparition douce quand le hint MFA retire [hidden] */
#login-mfa-field.is-shown {
  animation: login-mfa-in 0.28s ease;
}
@keyframes login-mfa-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #login-mfa-field.is-shown { animation: none; }
}

.login-label {
  font-size: var(--text-rem-875);
  font-weight: 500;
  color: var(--login-fg);
}

.login-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.login-req {
  color: var(--color-danger);
  font-weight: 600;
}

.login-field input {
  font: inherit;
  font-size: var(--text-rem-95);
  color: var(--login-fg);
  border: 1px solid var(--login-border);
  border-radius: var(--radius-8);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--surface);
}

.login-field input::placeholder { color: var(--text-placeholder); }

.login-field input:focus {
  border-color: var(--colo-fresh);
  box-shadow: var(--shadow-focus-fresh);
}

.login-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-pw-wrap input {
  padding-right: 44px;
}

.login-pw-toggle {
  position: absolute;
  right: 10px;
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: var(--login-muted);
  display: flex;
  align-items: center;
  border-radius: var(--radius-6);
}

.login-pw-toggle:hover { color: var(--login-fg); }

/* CC-UI-QUICKWINS-01 : l'attribut hidden du HTML n'agit pas sur les <svg>
   inline (namespace SVG) — les deux yeux s'affichaient ensemble. */
.login-pw-toggle .icon-eye-off { display: none; }
.login-pw-toggle[aria-pressed="true"] .icon-eye { display: none; }
.login-pw-toggle[aria-pressed="true"] .icon-eye-off { display: block !important; }

.login-hint {
  margin: -12px 0 16px;
  font-size: var(--text-rem-8);
  color: var(--login-muted);
  line-height: 1.4;
}

.login-pw-hint {
  margin: -4px 0 0;
}

.login-pw-hint.is-error {
  color: var(--color-error-alt);
}

.login-hint-top {
  margin: -8px 0 20px;
  font-size: var(--text-rem-9);
}

/* ── Bouton CTA gradient (style Make) ── */
.login-btn {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: var(--radius-full); /* CC-LOGIN-BTN-PILL-01 (#578) : CTA en pilule, comme les autres boutons de marque */
  padding: 14px 20px;
  font: inherit;
  font-size: var(--text-rem-1);
  font-weight: 600;
  color: var(--surface);
  /* CC-BTN-CHARTE-PRINT-01 : le CTA canonique reste le violet de marque.
     CC-LOGIN-BTN-PILL-01 (#578 suite) : halo RADIAL plus clair qui part du
     coin HAUT-DROIT et se dégrade en DIAGONALE jusqu'au coin BAS-GAUCHE
     (farthest-corner depuis 100% 0% = précisément le bas-gauche). Lumière
     douce superposée : la teinte de marque ne change pas. */
  background: var(--cta-sheen), var(--colo-fresh, #7141D9);
  cursor: pointer;
  box-shadow: var(--shadow-cta-glow);
  transition: filter 0.15s, transform 0.1s;
}

.login-btn:hover { filter: brightness(1.07); }
.login-btn:active { transform: scale(0.99); }
.login-btn:disabled { opacity: 0.55; cursor: default; filter: none; }

.login-text-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-rem-875);
  font-weight: 600;
  color: var(--colo-fresh);
  cursor: pointer;
  text-decoration: none;
}

.login-text-link:hover { text-decoration: underline; }

.login-switch {
  margin: 24px 0 0;
  text-align: center;
  font-size: var(--text-rem-875);
  color: var(--login-muted);
}

.login-switch .login-text-link { font-size: inherit; }

/* ── Messages ── */
.login-field input.is-invalid {
  border-color: var(--color-danger);
  box-shadow: var(--shadow-focus-danger);
}

.login-field-err {
  margin: 4px 0 0;
  font-size: var(--text-rem-8);
  color: var(--color-error-alt);
  line-height: 1.3;
}

.login-err {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: var(--text-rem-875);
  color: var(--color-error-alt);
  line-height: 1.4;
  background: var(--surface-error-soft);
  border: 1px solid var(--surface-error-border);
  border-radius: var(--radius-8);
}

.login-ok {
  margin: -8px 0 12px;
  font-size: var(--text-rem-875);
  color: var(--color-success);
  line-height: 1.4;
}

.login-msg {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: var(--radius-8);
  font-size: var(--text-rem-875);
  line-height: 1.4;
}

.login-msg.ok {
  background: var(--surface-success-soft);
  color: var(--color-success);
  border: 1px solid var(--surface-success-mid);
}

.login-msg.err {
  background: var(--surface-error-soft);
  color: var(--color-error-alt);
  border: 1px solid var(--surface-error-border);
}

/* #995 / #1008 / #1010 — cases d'inscription : 12px, cible ≥ 44 px, gap serré */
.login-legal-checks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--login-fg);
}
.login-legal-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  min-height: 40px;
  padding: 0px;
}
.login-legal-row input {
  margin-top: 2px;
  flex: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.login-legal-notice {
  margin: 0;
  color: var(--text-muted, #6b7480);
}
.login-legal-checks a {
  color: var(--colo-fresh, #2a6);
  text-decoration: underline;
  font-size: 12px;
}
/* #1008 amend / #1010b / #1010c : oublié = look Mentions (.llf-link)
   — inline à droite du label (login) ; below encore utilisé (verify-email) */
.login-forgot-below {
  margin: -4px 0 14px;
  text-align: left;
}
.login-forgot-below .login-text-link,
.login-forgot-inline {
  color: #1d2330;
  font-size: var(--text-2xs, 11px);
  font-weight: 400;
  opacity: 0.8;
  flex: none;
  white-space: nowrap;
}
.login-forgot-below .login-text-link:hover,
.login-forgot-inline:hover {
  text-decoration: underline;
  opacity: 1;
}
/* #1010 : HR plus fin, éloigné du bouton, proche du switch */
.login-panel-hr,
.login-legal-hr {
  margin: 28px 0 8px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--login-fg, #1d2330) 8%, transparent);
}
.login-panel-hr + .login-switch {
  margin-top: 0;
}

/* ── Responsive : sous 900 px la colonne du formulaire prend tout ── */
@media (max-width: 900px) {
  /* CC-LOGIN-SPLIT-01 : sous 900 px la colonne vitrine disparaît — et
     login-slides.js ne fetche RIEN (#865 : zéro octet de diaporama sur mobile) */
  .login-vitrine-side { display: none; }
  .login-form-side {
    flex: 1 1 100%;
    max-width: 100%; /* lève le plafond 38 % du split */
    padding: 32px 20px;
  }
}

@media (max-width: 400px) {
  .login-heading { font-size: var(--text-rem-165); margin-bottom: 24px; }
}

/* #1010 : Mentions + cookies centrés dans la zone blanche (colonne formulaire).
   Pacte = fab viewport bas-droite (comme #pacte-link graphique). */
/* retour Damien : liens légaux, widget carrousel et fab Pacte sur UNE SEULE
   ligne horizontale. Les trois ont des hauteurs différentes (≈15, 7 et 30 px) :
   les caler sur `bottom` les décalait forcément. On ancre donc le CENTRE —
   `bottom: <ligne>` + `translateY(50%)` place le milieu de l'élément
   exactement à `--login-baseline` du bas, quelle que soit sa hauteur. */
:root { --login-baseline: 31px; }

.login-legal-foot {
  position: absolute;
  /* retour Damien : FERRÉS À GAUCHE, sur la marge de la colonne — le même bord
     que le titre, les champs et le bouton (mesuré : 40 px). Plus de centrage. */
  left: var(--login-gutter, 40px);
  right: auto;
  bottom: var(--login-baseline, 31px);
  transform: translateY(50%); /* le centre reste sur la ligne commune */
  z-index: 20;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - var(--login-gutter, 40px) * 2);
}
.llf-link {
  color: #1d2330;
  font-size: var(--text-2xs, 11px);
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
}
.llf-link:hover { text-decoration: underline; opacity: 1; }
.llf-sep { font-size: var(--text-2xs, 11px); opacity: 0.5; }

/* #1008 / #1010 — Pacte icône seule, bas-droite de la PAGE (viewport) */
.login-pacte-fab {
  position: fixed;
  right: 12px;
  /* même ligne : le fab fait 30 px, son centre tombe donc à baseline − 15.
     Pas de translateY ici — il garde son `transform` de survol intact. */
  bottom: calc(var(--login-baseline, 31px) - 15px);
  z-index: 30;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  background: #171a26;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(20, 24, 38, 0.25);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.login-pacte-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 24, 38, 0.32);
  text-decoration: none;
}
.login-pacte-fab .ico { display: inline-flex; }
.login-pacte-fab .ico svg { color: var(--pacte-green, #00cec9); }
.login-tip { position: relative; }
.login-pacte-fab.login-tip { position: fixed; } /* #1008b / #1010 : tip ≠ écraser fixed */
.login-tip::after {
  content: attr(data-tip);
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  background: #171a26;
  color: #eef0f6;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 6px;
  z-index: 30;
}
.login-tip:hover::after { opacity: 1; }
.login-tip-left::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}