/* ---------- connexion / inscription : carte centrée, présentation à gauche et formulaire à droite (PC) */
.authwrap { min-height:calc(100vh - 40px); display:flex; align-items:center; justify-content:center; padding:10px 0 30px }
.authcard { width:100%; max-width:940px; display:grid; border-radius:22px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.25) }
.authbrand { position:relative; padding:26px 24px 22px; overflow:hidden; color:#fff;
  background:radial-gradient(circle at 80% 10%, rgba(255,216,107,.25), transparent 45%),
             radial-gradient(circle at 10% 100%, rgba(124,196,255,.25), transparent 50%), linear-gradient(150deg, #5b4bdb, #2a1d7a 70%) }
.authbrand .logo { font-size:24px; color:#fff }
.authbrand .logo b { color:#ffd86b }
.authbrand h1 { font-size:26px; margin:14px 0 6px; line-height:1.15 }
.authbrand p { margin:0; opacity:.85; font-size:14.5px; line-height:1.5 }
.authbrand ul { list-style:none; padding:0; margin:18px 0 0; display:none; gap:10px; font-size:14px }
.authbrand li { display:flex; gap:10px; align-items:center; opacity:.92 }
.authbrand li .ico-svg { color:#ffd86b }
.afan { position:relative; height:150px; margin:18px 0 0; display:none }
.afan .ac { position:absolute; bottom:0; width:96px; height:134px; border-radius:12px; padding:5px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--t) 85%, #fff), var(--t) 50%, color-mix(in srgb, var(--t) 60%, #000));
  box-shadow:0 12px 26px rgba(0,0,0,.35) }
.afan .ac span { display:flex; height:100%; border-radius:8px; align-items:center; justify-content:center;
  background:rgba(15,10,40,.55); font:900 34px Georgia, serif; color:rgba(255,255,255,.9) }
.afan .ac:nth-child(1) { left:10px; transform:rotate(-12deg) }
.afan .ac:nth-child(2) { left:88px; transform:rotate(-1deg); bottom:12px; z-index:1 }
.afan .ac:nth-child(3) { left:166px; transform:rotate(11deg) }
.authform { padding:24px 22px 26px }
.authform h2 { margin:0 0 4px; font-size:21px }
.authform .seg { margin:14px 0 16px }
.aform { display:grid; gap:12px }
.aform label { display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--muted) }
.pwd { position:relative }
.pwd .field { padding-right:84px }
.pwd button { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--accent);
  font-weight:600; cursor:pointer; padding:6px 8px; font-size:13px }
.anote { font-size:13px; line-height:1.5; color:var(--muted); padding:10px 12px; border-radius:10px; background:var(--surface2);
  border:1px solid color-mix(in srgb, var(--good) 45%, var(--line)) }
.anote b { color:var(--ink) }
body.guest .toast { left:50% }
.gbtn { display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1f1f1f; border:1px solid #dadce0; font-weight:600 }
.gbtn:hover { background:#f6f7f9 }
.orline { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; margin:14px 0 2px }
.orline::before, .orline::after { content:""; flex:1; height:1px; background:var(--line) }
.afoot { font-size:12px; color:var(--muted); margin-top:14px; line-height:1.5 }
@media (min-width:860px) {
  .authcard { grid-template-columns:1.05fr 1fr; min-height:560px }
  .authbrand { padding:40px 36px; display:flex; flex-direction:column }
  .authbrand h1 { font-size:34px; margin-top:auto }
  .authbrand ul { display:grid }
  .afan { display:block; margin-top:28px }
  .authform { padding:44px 40px; display:flex; flex-direction:column; justify-content:center }
}
.seg { display:grid; grid-template-columns:1fr 1fr; background:var(--surface2); border-radius:12px; padding:4px; margin:14px 0 }
.seg button { border:0; background:none; padding:9px; border-radius:9px; font-weight:600; cursor:pointer; color:var(--muted) }
.seg button.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow) }
.more { margin:16px auto 0; display:flex }
/* page de connexion : pas de colonne de navigation, la carte est centrée dans toute la largeur */
body.guest main { margin-left:auto !important; margin-right:auto; max-width:1000px; padding-left:16px; padding-right:16px }