/* ==========================================================================
   Site public BAC CI — pages compte (connexion, inscription, mon-compte…)
   Chargé par resources/views/site/layout.blade.php
   ========================================================================== */

:root {
  --ground:#F6F7F3; --surface:#FFFFFF; --ink:#14231A; --muted:#566258; --line:#E0E6DC;
  --brand:#0B5A34; --brand-2:#0E7A46; --brand-ink:#F3F7F0;
  --accent:#F07E1A; --accent-2:#FFB25A; --accent-ink:#3A1E00;
  --shadow:0 1px 2px rgba(20,35,26,.05), 0 18px 44px -18px rgba(20,35,26,.28);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0A130E; --surface:#111E16; --ink:#E9F1EA; --muted:#9BB0A2; --line:#23342A;
    --brand:#10422A; --brand-2:#0E7A46; --brand-ink:#EAF4EC; --accent:#FF9433; --accent-2:#FFB25A;
  }
}
:root[data-theme="dark"] {
  --ground:#0A130E; --surface:#111E16; --ink:#E9F1EA; --muted:#9BB0A2; --line:#23342A;
  --brand:#10422A; --brand-2:#0E7A46; --brand-ink:#EAF4EC; --accent:#FF9433; --accent-2:#FFB25A;
}

* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; color:var(--ink); font-family:var(--font);
  background: radial-gradient(120% 80% at 50% -25%, color-mix(in srgb, var(--brand) 24%, var(--ground)), var(--ground) 62%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 20px;
}
a { color:var(--brand-2); text-decoration:none; }
a:hover { text-decoration:underline; }

.brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink); margin-bottom:22px; }
.brand img { width:44px; height:44px; border-radius:11px; background:#fff; padding:3px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }

.card { width:100%; max-width:430px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:32px 28px; }
h1 { font-size:1.5rem; font-weight:800; margin:0 0 6px; letter-spacing:-.02em; }
.sub { color:var(--muted); font-size:.96rem; margin:0 0 22px; line-height:1.5; }

label { display:block; font-size:.85rem; font-weight:600; margin:15px 0 6px; }
input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--ground); color:var(--ink); font-size:1rem; font-family:inherit; }
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

.btn { display:block; width:100%; margin-top:24px; padding:14px; border:0; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:1rem; text-align:center; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--accent-2); text-decoration:none; }
.btn-ghost { background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:600; }
.btn-ghost:hover { background:var(--ground); }

.social { display:flex; flex-direction:column; gap:10px; }
.btn-social { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:13px;
  border-radius:12px; font-weight:700; font-size:1rem; font-family:inherit; cursor:pointer; border:1px solid var(--line); }
.btn-social svg { width:20px; height:20px; flex:0 0 auto; }
.btn-google { background:var(--surface); color:var(--ink); }
.btn-google:hover { background:var(--ground); text-decoration:none; }
.btn-apple { background:#000; color:#fff; border-color:#000; }
.btn-apple:hover { background:#1a1a1a; text-decoration:none; }

.divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:.82rem; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }

.alt { margin-top:20px; text-align:center; font-size:.92rem; color:var(--muted); }
.err { background:color-mix(in srgb, #e5484d 12%, var(--surface)); border:1px solid color-mix(in srgb, #e5484d 40%, transparent); color:#d13438; padding:11px 13px; border-radius:10px; font-size:.9rem; margin-bottom:16px; }
.flash { background:color-mix(in srgb, var(--brand-2) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--brand-2) 40%, transparent); color:var(--brand-2); padding:11px 13px; border-radius:10px; font-size:.9rem; margin-bottom:16px; }
.panel { background:var(--ground); border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:12px; }
.panel .lbl { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.foot { margin-top:24px; font-size:.88rem; color:var(--muted); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }