/* components.css — Composants réutilisables sur plusieurs pages
   (boutons, formulaires, badges, tags, cards).
   Dépend de tokens.css. Charger après base.css.
*/

/* ===== Boutons Miami Vice (app / auth) ===== */
body.neo .btn,
body.neo button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 13px 20px;
  border-radius: var(--mv-r-pill);
  background: var(--mv-grad-btn);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  text-transform: uppercase;
  letter-spacing:.02em;
  border:none;
  box-shadow: var(--mv-glow-pink);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

body.neo .btn:hover{
  transform: translateY(-2px);
  filter:brightness(1.08);
}

body.neo .btn:active{
  transform: translateY(0);
}

body.neo .btn.btn-danger{
  background:linear-gradient(90deg,var(--mv-coral),var(--mv-pink));
}

.btn_connect{
  display: inline-flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  border-radius: var(--mv-r-pill);
  background: var(--mv-grad-btn);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing:.02em;
  border: none;
  box-shadow: var(--mv-glow-pink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  width: 100%;
  margin-top: 8px;
}

.btn_connect:hover{ transform:translateY(-2px); filter:brightness(1.08); }

/* ===== Liens boutons (blog) ===== */
.b-link{
  display:inline-block;
  text-decoration:none;
  color: var(--c-ink);
  font-weight: 800;
  margin: var(--mg-5) var(--mg-8) var(--mg-8) var(--mg-5);
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-s);
  padding: var(--sp-8) var(--sp-12);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.b-link:hover{
  transform: translateX(4px);
  box-shadow: var(--sh-m);
  background: var(--c-accent);
}

.b-link--cta{
  background: var(--c-danger);
}

.b-cardLink{
  padding: var(--sp-10) var(--sp-14);
  margin-top: var(--sp-12);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

/* ===== Badges (pilules néon) ===== */
body.neo .badge{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r-pill);
  padding: var(--sp-6) var(--sp-12);
  font-weight:900;
  font-size: var(--fs-13);
  letter-spacing:.03em;
  text-transform:uppercase;
  background: rgba(255,255,255,.06);
  color: var(--mv-cream);
  transform:none;
}

body.neo .badge--accent{ border-color:var(--mv-pink); color:var(--mv-pink-2); box-shadow:var(--mv-glow-pink); }
body.neo .badge--warn{ border-color:var(--mv-orange); color:var(--mv-orange); }
body.neo .badge--cyan{ border-color:var(--mv-cyan); color:var(--mv-cyan-2); box-shadow:var(--mv-glow-cyan); }

.b-badge{
  display:inline-block;
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  background: var(--c-white);
  padding: var(--sp-6) var(--sp-10);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
}

.tag{
  display:inline-block;
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  background: var(--c-white);
  padding: var(--sp-6) var(--sp-10);
  font-size: var(--fs-12);
  font-weight: 800;
  text-transform: uppercase;
}

.tag--cyan{ background: var(--c-cyan); }
.tag--purple{ background: var(--c-3aff); }
.tag--aqua{ background: var(--c-aqua); }

/* ===== Cards génériques Miami Vice ===== */
body.neo .card{
  width:100%;
  max-width: 520px;
  margin: 18px auto;
  background:var(--mv-panel);
  color:var(--mv-cream);
  border:1px solid var(--mv-line);
  border-radius:var(--mv-r-l);
  box-shadow: var(--mv-glow-soft);
  padding:18px;
}

body.neo .card hr{
  border:0;
  border-top:1px solid var(--mv-line);
  margin: 14px 0;
}

body.neo .card h2{
  margin:0 0 8px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.b-card{
  border: var(--b-mid);
  background: var(--c-white);
  box-shadow: var(--sh-xl);
  padding: var(--sp-16);
}

.b-card--cyan{ background: var(--c-cyan); }
.b-card--aqua{ background: var(--c-aqua); }
.b-card--accent{ background: var(--c-accent); }
.b-card--danger{ background: var(--c-danger); }

.b-callout{
  border: var(--b-mid);
  box-shadow: var(--sh-s);
  background: var(--c-warn);
  padding: var(--sp-12);
  margin: var(--sp-16) 0;
}

.b-callout strong{
  display:block;
  margin-bottom: var(--sp-8);
  font-size: var(--fs-17);
  text-transform: uppercase;
}

.b-grid{
  display:grid;
  gap: var(--sp-16);
}

.b-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.b-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ===== Formulaires (app / auth) ===== */
body.neo form{
  display:block;
  margin:0;
}

.hint{
  font-size: 12px;
  color: #555;
  margin-top: 5px;
}

body.neo label{
  display:block;
  margin: 10px 0 6px;
  color:var(--mv-mist);
  font-size: 12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform: uppercase;
}

body.neo input{
  width:100%;
  box-sizing:border-box;
  padding: 13px 14px;
  border-radius:var(--mv-r-m);
  border:1px solid var(--mv-line);
  box-shadow:none;
  font: inherit;
  background:rgba(255,255,255,.04);
  color:var(--mv-cream);
}
body.neo input::placeholder{ color:#766b83; }
body.neo input:focus{
  outline:none;
  border-color:var(--mv-cyan);
  box-shadow:0 0 0 3px rgba(41,230,230,.16);
}

body.neo .pass-wrap{
  display:flex;
  align-items:stretch;
  gap:8px;
}

body.neo .pass-wrap input{ flex:1; min-width:0; }

body.neo .toggle-pass{
  border-radius:var(--mv-r-m);
  border:1px solid var(--mv-line);
  background:rgba(255,255,255,.04);
  color:var(--mv-cream);
  font-weight:900;
  text-transform: uppercase;
  box-shadow:none;
  padding: 0 14px;
  cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}

body.neo .toggle-pass:hover{
  border-color:var(--mv-cyan);
  color:var(--mv-cyan-2);
}

body.neo .toggle-pass:active{
  transform: translateY(1px);
}

body.neo .errors,
body.neo .alert{
  margin: 10px 0 12px;
  background: rgba(255,111,145,.1);
  border:1px solid var(--mv-coral);
  box-shadow:none;
  border-radius:var(--mv-r-m);
  color:var(--mv-cream);
  padding: 10px 12px;
  font-weight:900;
  text-transform: uppercase;
}

body.neo .errors div,
body.neo .alert p{
  margin:0;
  padding: 3px 0;
}

body.neo form p{
  margin: 25px 0 0;
  font-weight:900;
  text-transform: uppercase;
}

/* ===== Responsive ===== */
@media (max-width: 600px){
  body.neo .pass-wrap{ flex-direction:column; }
  body.neo .toggle-pass{ padding: 10px 12px; }
}