/* ============================================================
   CRÉNO — E4 Connexion / création de compte (US4.1 · SCRUM-14)
   S'appuie sur creno-ds.css (tokens v7 + composants).
   Un seul flux : magic-link (connexion ET création), + OAuth.
   ============================================================ */

.auth-page{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:32px 18px calc(32px + env(safe-area-inset-bottom,0px));background:var(--paper)}

/* ---- Layout façon ClassPass : carte login (gauche) + panneau valeur Réno (droite) ---- */
.auth-shell{width:100%;max-width:1060px;display:grid;grid-template-columns:1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
.auth-left{display:flex;flex-direction:column;align-items:center;min-width:0}
@media(min-width:900px){.auth-shell{grid-template-columns:1.02fr .98fr}}

/* Panneau valeur : Réno t'accueille (centré), puis les avantages d'un compte.
   Pas de fond (retour Baptiste) — Réno + texte posés sur le paper, façon ClassPass. */
.auth-aside{padding:clamp(6px,1.6vw,18px);display:flex;flex-direction:column;align-items:center}
.auth-reno{width:clamp(150px,17vw,210px);height:auto;margin:-6px 0 8px;filter:drop-shadow(0 14px 26px rgba(20,22,14,.14))}
.auth-aside-title{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin-bottom:20px;width:100%;max-width:400px}
.auth-perks{list-style:none;display:flex;flex-direction:column;gap:15px;width:100%;max-width:400px}
.perk{display:flex;gap:13px;align-items:flex-start}
.perk-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.perk-ic svg{width:21px;height:21px}
.perk-ic-lime{background:var(--lime-soft);color:var(--ink)}
.perk-ic-violet{background:var(--violet-soft);color:var(--violet)}
.perk-ic-ok{background:var(--ok-soft);color:var(--ok)}
.perk-t{display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;min-width:0}
.perk-t b{font-family:var(--body);font-weight:700;font-size:14.5px;color:var(--ink)}

/* Brand au-dessus de la carte */
.auth-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;margin-bottom:22px}
.auth-brand .mark{width:28px;height:28px;border-radius:9px;background:var(--lime);display:grid;place-items:center;transform:rotate(-8deg);transition:transform var(--dur-base) var(--ease)}
.auth-brand:hover .mark{transform:rotate(0) scale(1.05)}
.auth-brand .mark svg{width:14px;height:14px}

/* Carte */
.auth-card{width:min(440px,100%);background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--elev-3);padding:clamp(26px,5vw,36px)}
.auth-card h1{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}
.auth-sub{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:22px}

/* Champ email + CTA magic-link */
.auth-form .field{margin-bottom:12px}
.auth-form input{width:100%;font-family:var(--body);font-size:15.5px;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);transition:border-color var(--dur-fast) var(--ease)}
.auth-form input::placeholder{color:var(--ink-mute)}
.auth-form input:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-color:var(--violet)}
.auth-form .btn{width:100%;justify-content:center}
.auth-err{background:var(--danger-soft);color:var(--danger);border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;line-height:1.45;margin-bottom:12px}

/* Divider « ou » */
.auth-or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--ink-soft)}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-or span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}

/* Boutons OAuth */
.auth-oauth{display:flex;flex-direction:column;gap:10px}
.btn-oauth{width:100%;justify-content:center;gap:11px;background:var(--cloud);color:var(--ink);border:1.5px solid var(--line);box-shadow:var(--elev-1);font-weight:600}
.btn-oauth:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--elev-card)}
.btn-oauth svg,.btn-oauth img{width:19px;height:19px;flex:none}

/* Note « pas de mot de passe » */
.auth-note{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:20px}
.auth-note svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--violet)}

/* État « lien envoyé » */
.auth-sent{text-align:center;padding:8px 0 4px}
.auth-sent .ic{width:56px;height:56px;border-radius:18px;background:var(--lime-soft);display:grid;place-items:center;margin:0 auto 16px}
.auth-sent .ic svg{width:26px;height:26px;color:var(--ink)}
.auth-sent h2{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.auth-sent p{font-size:14.5px;color:var(--ink-soft);line-height:1.55;max-width:34ch;margin:0 auto 18px}
.auth-sent b{color:var(--ink);overflow-wrap:anywhere}

/* État « déjà connecté » */
.auth-in{text-align:center;padding:8px 0 4px}
.auth-in .who{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}
.auth-in .who b{color:var(--ink);overflow-wrap:anywhere}
.auth-in .btn{width:100%;justify-content:center}
.auth-in .btn + .btn{margin-top:10px}

/* Retour */
.auth-back{margin-top:20px;font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none}
.auth-back:hover{color:var(--ink)}
.auth-back .arr{display:inline-block;transition:transform var(--dur-fast) var(--ease)}
.auth-back:hover .arr{transform:translateX(-3px)}