/* components.css - boutons, cards, forms, badges */

/* === BOUTONS === */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  border-radius:var(--r-md);
  font-family:var(--ff-ui);
  font-size:.95rem;
  font-weight:500;
  line-height:1;
  transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
  white-space:normal;
  text-align:center;
  min-height:48px;
}
.btn svg{width:18px;height:18px;flex-shrink:0}

.btn-primary{
  background:var(--text);
  color:var(--bg);
}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}

.btn-wa{
  background:var(--wa-green);
  color:#fff;
}
.btn-wa:hover{background:#1ebe5d;transform:translateY(-1px)}

.btn-outline{
  background:transparent;
  color:var(--text);
  border:1.5px solid var(--text);
}
.btn-outline:hover{background:var(--text);color:var(--bg)}

.btn-accent{
  background:var(--accent);
  color:#fff;
}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-1px)}

.btn-ghost{
  background:transparent;
  color:var(--accent-deep);
  padding:10px 0;
  border-bottom:1px solid var(--accent);
  border-radius:0;
}
.btn-ghost:hover{color:var(--text)}

/* === CARDS (LAY-1 card = line) === */
.c-line{
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  background:transparent;
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.c-line:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}

/* === BADGES & PILLS === */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family:var(--ff-ui);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--text-2);
  background:var(--surface);
}
.pill svg{width:13px;height:13px;color:var(--accent)}
.pill--accent{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent-2)}

/* === FORM === */
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){
  .form-grid--2{grid-template-columns:1fr 1fr}
  .form-grid--2 .full{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{
  font-family:var(--ff-ui);
  font-size:.82rem;
  font-weight:500;
  color:var(--text-2);
  letter-spacing:.02em;
}
.field input,
.field textarea,
.field select{
  font-family:var(--ff-body);
  font-size:1rem;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text);
  min-width:0;
  width:100%;
  min-height:48px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* === MODAL (mentions legales) === */
.ml-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.ml-modal[hidden]{display:none !important}
.ml-overlay{
  position:absolute;
  inset:0;
  background:rgba(42,34,24,.62);
  backdrop-filter:blur(2px);
}
.ml-box{
  position:relative;
  background:var(--bg);
  border-radius:var(--r-lg);
  max-width:520px;
  max-height:86dvh;
  overflow-y:auto;
  padding:32px 28px;
  width:100%;
  box-shadow:0 18px 60px rgba(42,34,24,.32);
}
.ml-box h2{font-family:var(--ff-display);font-size:1.4rem;margin-bottom:12px;color:var(--text)}
.ml-box h3{font-family:var(--ff-display);font-size:1rem;margin:18px 0 6px;color:var(--accent-deep)}
.ml-box p{font-size:.92rem;line-height:1.6;color:var(--text-2);margin-bottom:8px}
.ml-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--bg-alt);
  display:grid;
  place-items:center;
  font-size:1.2rem;
  line-height:1;
  color:var(--text);
}
.ml-close:hover{background:var(--accent-soft)}