/* components.css — boutons, cards, badges, formulaire, lightbox, modal */

/* BOUTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-ui);font-size:.96rem;font-weight:600;
  padding:13px 22px;border-radius:999px;
  border:1.5px solid transparent;text-decoration:none;cursor:pointer;
  line-height:1;transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
  min-height:44px;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 82%,#000);}
.btn-wa{background:var(--wa-green);color:#fff;}
.btn-wa:hover{background:#1ebb59;}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong);}
.btn-ghost:hover{background:color-mix(in srgb,var(--text) 6%,transparent);}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);}
.btn-ghost-light:hover{background:rgba(255,255,255,.10);border-color:#fff;}

/* CTA hero — empilés pleine largeur mobile (PIEGE PROD #2) */
.cta-pack{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;}
.cta-pack .btn{width:100%;}
@media(min-width:768px){
  .cta-pack{flex-direction:row;flex-wrap:wrap;width:auto;max-width:none;}
  .cta-pack .btn{width:auto;}
}

/* CHIPS / pastilles */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;
  font-family:var(--ff-ui);font-size:.78rem;font-weight:500;
  background:color-mix(in srgb,var(--accent) 14%,var(--bg));
  color:var(--text);
}
.chip-light{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);}
.chip-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}
.chip-dot.chip-light::before{background:#A4D9A8;}

/* CARDS — c-line (LAY-1 cards line) */
.c-line{
  border:1px solid var(--border);
  border-radius:14px;padding:24px;
  background:var(--surface);
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
}
.c-line:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  box-shadow:0 14px 28px -18px rgba(46,40,32,.22);
}
.c-line h3{font-size:1.16rem;margin-bottom:8px;}
.c-line p{font-size:.94rem;margin-bottom:0;}
@media (prefers-reduced-motion:reduce){.c-line{transition:none;}.c-line:hover{transform:none;}}

/* FORMULAIRE */
.form{display:grid;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;} /* PIEGE PROD #10 min-width:0 */
.field label{font-family:var(--ff-ui);font-size:.84rem;font-weight:500;color:var(--text-2);}
.field input,.field textarea,.field select{
  font-family:var(--ff-body);font-size:1rem;
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);
  min-width:0;width:100%; /* PIEGE PROD #10 */
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.field textarea{min-height:120px;resize:vertical;}
.form-status{font-size:.92rem;}
.form-status.ok{color:var(--accent);}
.form-status.err{color:#B14545;}

/* MODAL mentions */
.modal{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal[hidden]{display:none !important;}
.modal__overlay{position:absolute;inset:0;background:rgba(31,51,40,.62);}
.modal__box{
  position:relative;background:var(--bg);
  max-width:540px;width:100%;max-height:88vh;overflow-y:auto;
  padding:28px 22px 24px;border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.4);
}
.modal__close{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;border-radius:50%;border:0;
  background:transparent;color:var(--text);
  display:grid;place-items:center;
}
.modal__close:hover{background:color-mix(in srgb,var(--text) 8%,transparent);}
.modal h2{font-size:1.4rem;margin-bottom:14px;}
.modal h3{font-size:1rem;margin-top:18px;margin-bottom:6px;}
.modal p,.modal li{font-size:.9rem;color:var(--text-2);}
.modal ul{padding-left:1.1em;}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);
}
.lightbox[hidden]{display:none !important;}
.lightbox img{
  max-width:92vw;max-height:88vh;width:auto;height:auto;
  object-fit:contain;border-radius:8px;
}
.lb-btn{
  position:absolute;background:rgba(255,255,255,.10);color:#fff;
  border:0;border-radius:50%;width:46px;height:46px;
  display:grid;place-items:center;
  font-size:1.4rem;font-family:inherit;
  backdrop-filter:blur(6px);
  transition:background var(--t-fast);
}
.lb-btn:hover{background:rgba(255,255,255,.22);}
.lb-close{top:18px;right:18px;}
.lb-prev{left:14px;top:50%;transform:translateY(-50%);}
.lb-next{right:14px;top:50%;transform:translateY(-50%);}
@media(min-width:768px){.lb-prev{left:24px;}.lb-next{right:24px;}}

/* RATING BADGE (hero) */
.rating-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.92);color:var(--text);
  padding:8px 13px 8px 10px;border-radius:999px;
  font-family:var(--ff-ui);font-size:.84rem;font-weight:500;
  text-decoration:none;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.32);
  backdrop-filter:blur(6px);
}
.rating-badge:hover{text-decoration:none;background:#fff;}
.rating-stars{display:inline-flex;gap:1px;color:var(--gold);}
.rating-stars svg{width:14px;height:14px;}
.rating-badge strong{font-weight:700;}
.rating-badge .rg-google{color:var(--text-mute);}