/* components.css : buttons, cards, chips, forms, lightbox, modal */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;
  border-radius:999px;
  font-family:var(--ff-ui);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.005em;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:all var(--t-fast);
  min-height:44px;
  cursor:pointer;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(138,90,51,.25);}
.btn-wa{background:var(--wa-green);color:#fff;}
.btn-wa:hover{background:var(--wa-green-dark);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,211,102,.25);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface);border-color:var(--accent);color:var(--accent);}
.btn-light{background:rgba(255,255,255,.92);color:var(--text);}
.btn-light:hover{background:#fff;color:var(--accent-dark);transform:translateY(-1px);}

/* Cards plain (LAY-2 card=plain) */
.c-plain{
  background:color-mix(in srgb,var(--text) 4%,var(--bg));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;
}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent-dark);
  font-family:var(--ff-ui);
  font-size:.78rem;
  font-weight:500;
}

/* Hero rating badge — NON utilise pour ce site (note < 4.0) */
/* (volontairement omis : pas de social proof brute) */

/* USP pills hero */
.hero-usps{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:18px;
}
.hero-usp{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#fff;
  font-family:var(--ff-ui);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.005em;
}
.hero-usp::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;}

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

/* Lightbox */
.lightbox{
  position:fixed;inset:0;
  background:rgba(20,12,4,.92);
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:lbFadeIn .25s ease;
}
@keyframes lbFadeIn{from{opacity:0;}to{opacity:1;}}
.lb-image{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  transition:background var(--t-fast);
  font-size:1.6rem;font-family:var(--ff-display);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.22);}
.lb-close{top:18px;right:18px;}
.lb-prev{left:18px;top:50%;transform:translateY(-50%);}
.lb-next{right:18px;top:50%;transform:translateY(-50%);}
@media (max-width:600px){
  .lb-prev,.lb-next{width:44px;height:44px;}
  .lb-prev{left:10px;}.lb-next{right:10px;}
}

/* Modal mentions legales */
.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,12,4,.55);}
.ml-box{
  position:relative;
  max-width:520px;
  width:100%;
  background:var(--bg);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  padding:32px 26px;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.ml-close{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--text);
  font-size:1.4rem;
  transition:background var(--t-fast);
}
.ml-close:hover{background:var(--surface);}
.ml-box h2{margin-top:0;font-size:1.6rem;}
.ml-box h3{font-size:1.05rem;margin:18px 0 6px;color:var(--accent-dark);}
.ml-box p{font-size:.92rem;color:var(--text-2);margin:0 0 8px;}