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

/* ========== BTN ========== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--ff-ui);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:14px 24px;
  border-radius:var(--r-pill);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{flex-shrink:0;}

.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{
  transform:translateY(-1px);
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:var(--shadow-lift);
}

.btn-secondary,.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.btn-secondary:hover,.btn-ghost:hover{
  background:var(--text);color:var(--bg);border-color:var(--text);
}

.btn-wa{
  background:var(--wa-green);
  color:#fff;
  border-color:var(--wa-green);
  box-shadow:0 8px 24px -8px rgba(37,211,102,.45);
}
.btn-wa:hover{
  transform:translateY(-1px);
  background:#1ebe5a;border-color:#1ebe5a;color:#fff;
  box-shadow:0 14px 32px -10px rgba(37,211,102,.55);
}

.btn-ghost-light{
  background:transparent;
  color:var(--text-on-dark);
  border-color:color-mix(in srgb,var(--text-on-dark) 50%,transparent);
}
.btn-ghost-light:hover{background:var(--text-on-dark);color:var(--primary);border-color:var(--text-on-dark);}

/* ========== CHIPS / TAGS / BADGES ========== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  font-family:var(--ff-ui);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.02em;
  border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent) 12%,var(--bg));
  color:var(--primary);
  border:1px solid var(--border);
}
.chip svg{color:var(--accent);}

.chip-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-family:var(--ff-ui);
  font-size:.95rem;
  color:var(--text);
}
.chip-check::before{
  content:"";
  width:18px;height:18px;
  border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  flex-shrink:0;
}

.tag-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  font-family:var(--ff-ui);
  font-size:.74rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:color-mix(in srgb,#fff 75%,transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--primary);
  border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,#fff 30%,transparent);
}

/* Cards = LAY-2 plain (preset impose) */
.c-plain{
  background:color-mix(in srgb,var(--text) 4%,var(--bg));
  border-radius:var(--r-lg);
  padding:26px;
  border:1px solid var(--border);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.c-plain:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);}

/* ========== Hero rating badge ========== */
.hero-rating{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  font-family:var(--ff-ui);
  font-size:.86rem;
  color:var(--text);
  text-decoration:none;
  margin-bottom:18px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.hero-rating:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);color:var(--text);}
.hero-rating strong{font-weight:700;color:var(--primary);}
.hero-rating .stars{display:inline-flex;gap:1px;color:#E1A92E;}
.hero-rating .stars svg{width:14px;height:14px;}
.hero-rating .meta{color:var(--text-2);}

/* ========== Form ========== */
.form{
  display:grid;
  gap:16px;
}
.form-row{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:560px){.form-row{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{
  font-family:var(--ff-ui);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--text-mute);
}
.field input,.field select,.field textarea{
  font-family:var(--ff-ui);
  font-size:.98rem;
  padding:13px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  color:var(--text);
  width:100%;
  min-width:0;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Modal ML */
.ml-modal{
  position:fixed;inset:0;
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:18px;
}
.ml-overlay{
  position:absolute;inset:0;
  background:rgba(20,30,28,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.ml-box{
  position:relative;
  background:var(--bg);
  max-width:560px;
  width:100%;
  max-height:88dvh;
  overflow-y:auto;
  border-radius:var(--r-lg);
  padding:36px 28px 30px;
  box-shadow:var(--shadow-card);
}
.ml-box h2{margin-top:0;}
.ml-close{
  position:absolute;
  top:14px;right:14px;
  width:36px;height:36px;
  background:transparent;border:0;
  cursor:pointer;
  color:var(--text);
  display:grid;place-items:center;
  border-radius:50%;
}
.ml-close:hover{background:var(--surface-2);}
.ml-box small{color:var(--text-mute);}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;
  z-index:var(--z-modal);
  background:rgba(15,22,20,.94);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.lightbox img{
  max-width:92vw;max-height:88dvh;
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}
.lightbox button{
  position:absolute;
  background:rgba(255,255,255,.1);
  color:#fff;border:0;
  width:48px;height:48px;
  border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  font-size:1.4rem;
  font-family:var(--ff-ui);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .2s;
}
.lightbox button:hover{background:rgba(255,255,255,.22);}
.lb-close{top:20px;right:20px;}
.lb-prev{left:20px;top:50%;transform:translateY(-50%);}
.lb-next{right:20px;top:50%;transform:translateY(-50%);}

/* Drop cap */
.drop-cap::first-letter{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:500;
  font-size:3.4rem;
  line-height:.85;
  float:left;
  margin:.18em .12em 0 0;
  color:var(--accent);
}