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

/* Boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-family:var(--ff-ui);font-size:.98rem;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast);
  white-space:nowrap;
  border:1.5px solid transparent;
  min-height:48px;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#1b2d1f;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent);}
.btn-wa{background:var(--wa-green);color:#fff;}
.btn-wa:hover{background:#1eaf52;box-shadow:0 8px 22px color-mix(in srgb,var(--wa-green) 40%,transparent);}
.btn-ghost{
  background:transparent;color:var(--text);
  border-color:var(--border-strong);
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-ghost-light{
  background:transparent;color:#fff;
  border-color:rgba(255,255,255,.32);
}
.btn-ghost-light:hover{border-color:var(--accent-on-dark);color:var(--accent-on-dark);}

/* Chips / pills */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--accent);
  font-family:var(--ff-ui);font-size:.83rem;font-weight:500;
}
.chip svg{width:14px;height:14px;}
.chip--solid{background:var(--accent);color:#fff;border-color:transparent;}

/* Cards — card radius-asym (LAY-6) */
.c-asym{
  background:color-mix(in srgb,var(--text) 4%,var(--bg));
  border:1px solid var(--border);
  border-radius:22px 4px 22px 4px;
  padding:28px 26px;
  transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med);
  position:relative;
}
.c-asym:nth-child(even){border-radius:4px 22px 4px 22px;}
.c-asym:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:0 18px 36px color-mix(in srgb,var(--accent) 12%,transparent);
}
/* Lead card (sombre, mise en avant) */
.c-asym--lead{
  background:var(--surface-deep);
  border-color:transparent;
}
.c-asym--lead,
.c-asym--lead :where(h2,h3,h4,p,li,span,a,small){
  color:var(--text-on-dark);
}
.c-asym--lead h3{color:#fff;}
.c-asym--lead .svc-num{color:var(--accent-on-dark);}
.c-asym--lead .svc-icon{
  background:rgba(255,255,255,.08);
  color:var(--accent-on-dark);
}
.c-asym--lead p{color:var(--text-on-dark-2);}

/* Formulaire */
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.form-field label{
  font-family:var(--ff-ui);font-size:.82rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;min-width:0; /* PIEGE PROD #10b : select min-width:0 */
  padding:14px 16px;
  border:1.5px solid var(--border-strong);
  border-radius:12px;
  background:#fff;color:var(--text);
  font-family:var(--ff-body);font-size:1rem;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form-field textarea{min-height:120px;resize:vertical;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

/* Modal (mentions legales) */
.modal{
  position:fixed;inset:0;
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay{
  position:absolute;inset:0;background:rgba(15,22,18,.62);
  backdrop-filter:blur(4px);
}
.modal-box{
  position:relative;
  width:100%;max-width:520px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:#fff;
  border-radius:18px;
  padding:30px 26px 26px;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}
.modal-close{
  position:absolute;top:10px;right:10px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--text-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.modal-close:hover{background:var(--accent-soft);color:var(--accent);}
.modal-box h2{font-size:1.4rem;margin-bottom:14px;}
.modal-box h3{
  font-family:var(--ff-ui);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--accent);margin:18px 0 6px;
}
.modal-box p{font-size:.95rem;color:var(--text-2);}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(15,22,18,.90);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.lightbox-img{
  max-width:92vw;max-height:88vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.lb-btn{
  position:absolute;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  display:grid;place-items:center;
  transition:background var(--t-fast);
  font-size:1.4rem;line-height:1;
}
.lb-btn: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:640px){
  .lb-prev,.lb-next{bottom:18px;top:auto;transform:none;}
  .lb-prev{left:18px;}
  .lb-next{right:18px;}
}

/* Stars */
.stars{display:inline-flex;gap:2px;color:var(--gold);}
.stars svg{width:18px;height:18px;}

/* Google badge */
.badge-google{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-ui);font-size:.78rem;color:var(--text-mute);
}
.badge-google svg{width:14px;height:14px;}

/* Dispo dot */
.dispo-line{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-ui);font-size:.93rem;color:var(--text-2);
  padding:8px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,var(--bg));
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
}
.dispo-dot{
  width:9px;height:9px;border-radius:50%;
  background:#3aa15a;
  box-shadow:0 0 0 4px color-mix(in srgb,#3aa15a 22%,transparent);
}
.dispo-line.is-closed .dispo-dot{
  background:#c4554d;
  box-shadow:0 0 0 4px color-mix(in srgb,#c4554d 22%,transparent);
}