:root{
  --bg:#0e0f13;
  --bg-raised:#16181f;
  --card-border:#272a34;
  --text:#e9e9ee;
  --text-faint:#8a8d99;
  --matin:#e08a3e;
  --aprem:#2f9c93;
  --soiree:#c2447e;
  --danger:#c2447e;
  --mono:'IBM Plex Mono', monospace;
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--aprem);}
.wrap{max-width:960px;margin:0 auto;padding:0 24px;}
button, input, select, textarea{font-family:inherit;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--card-border);background:var(--bg-raised);color:var(--text);
  padding:10px 18px;border-radius:8px;transition:filter .15s;
}
.btn:hover{filter:brightness(1.15);}
.btn.primary{background:var(--aprem);border-color:var(--aprem);color:#08130f;}
.btn.danger{color:var(--danger);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.block{width:100%;}

.card{
  border:1px solid var(--card-border);background:var(--bg-raised);
  border-radius:12px;padding:22px;
}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-faint);margin-bottom:6px;font-family:var(--mono);letter-spacing:.03em;}
.field input, .field select{
  width:100%;background:var(--bg);border:1px solid var(--card-border);
  color:var(--text);border-radius:7px;padding:10px 12px;font-size:14.5px;
}
.field input:focus, .field select:focus{outline:none;border-color:var(--aprem);}

.hint{font-size:12.5px;color:var(--text-faint);margin-top:6px;}
.error-box{
  background:rgba(194,68,126,.12);border:1px solid rgba(194,68,126,.4);
  color:#f0b8cf;border-radius:8px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;
}
.success-box{
  background:rgba(47,156,147,.12);border:1px solid rgba(47,156,147,.4);
  color:#a9e6df;border-radius:8px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;
}

.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:18px 0;border-bottom:1px solid var(--card-border);margin-bottom:32px;
}
/* .brand ne forme plus un bloc unique : ses enfants (logo, texte) sont
   placés indépendamment dans la grille — logo à gauche, "Planningo"
   au centre — tandis que le logo garde sa taille d'origine. */
.topbar .brand{display:contents;}
.topbar .brand img{grid-column:1;justify-self:start;height:38px;width:auto;display:block;}
.topbar .brand .brand-text{grid-column:2;justify-self:center;font-family:'Fredoka',var(--display);font-weight:600;font-size:32px;letter-spacing:.01em;}
.topbar .brand .accent{color:var(--aprem);}
.topbar > *:last-child{grid-column:3;justify-self:end;}

@media (max-width: 560px){
  .topbar{grid-template-columns:auto 1fr;row-gap:10px;}
  .topbar .brand img{grid-column:1;justify-self:start;}
  .topbar .brand .brand-text{grid-column:2;justify-self:center;font-size:26px;}
  .topbar > *:last-child{grid-column:1 / -1;justify-self:end;}
}

.legal-footer{
  max-width:960px;margin:48px auto 24px;padding-top:20px;
  border-top:1px solid var(--card-border);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
  font-size:12.5px;color:var(--text-faint);
}
.legal-footer .legal-links{display:flex;gap:10px;}
.legal-footer .sep{opacity:.6;}
.legal-footer a{color:var(--text-faint);text-decoration:none;}
.legal-footer a:hover{color:var(--aprem);}

.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--card-border);border-top-color:var(--aprem);
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

.hidden{display:none !important;}