/* components.css — boutons, cards risograph, chips, forms, modal, lightbox */

/* Boutons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;
  font-family:var(--ff-body);
  font-size:.96rem;
  font-weight:600;
  letter-spacing:.005em;
  border-radius:var(--r-md);
  border:1.5px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  min-height:48px;
  line-height:1.2;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn:hover{transform:translateY(-1px);}
@media (prefers-reduced-motion:reduce){.btn{transition:none;}.btn:hover{transform:none;}}

.btn-primary{
  background:var(--accent);color:#fff;
  border-color:var(--accent);
  box-shadow:3px 3px 0 var(--surface-deep);
}
.btn-primary:hover{
  background:var(--surface-deep);
  border-color:var(--surface-deep);
  color:#fff;
  box-shadow:5px 5px 0 var(--accent);
}
.btn-wa{
  background:#fff;color:var(--surface-deep);
  border-color:var(--surface-deep);
  box-shadow:3px 3px 0 var(--accent);
}
.btn-wa:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:5px 5px 0 var(--surface-deep);
}
.btn-wa svg{color:#25D366;}
.btn-wa:hover svg{color:#fff;}
.btn-ghost{
  background:transparent;color:var(--text);
  border-color:color-mix(in srgb,var(--text) 25%,transparent);
}
.btn-ghost:hover{
  border-color:var(--text);
  background:color-mix(in srgb,var(--text) 4%,transparent);
}
.btn-ghost-light{
  background:transparent;color:#fff;
  border-color:rgba(255,255,255,.45);
}
.btn-ghost-light:hover{
  background:rgba(255,255,255,.1);
  border-color:#fff;
}
.btn-block{width:100%;justify-content:center;}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:520px){
  .btn-row{flex-direction:column;}
  .btn-row .btn{width:100%;justify-content:center;}
}

/* Card risograph (LAY-3) */
.c-riso{
  background:var(--bg);
  border:1.5px solid var(--text);
  border-radius:12px;
  padding:26px;
  box-shadow:5px 5px 0 var(--accent);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
}
.c-riso:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--accent);
}
@media (prefers-reduced-motion:reduce){
  .c-riso{transition:none;}
  .c-riso:hover{transform:none;}
}

/* Chips */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.82rem;
  background:var(--surface);
  color:var(--text);
}
.chip--solid{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* Form */
.form-field{
  display:flex;flex-direction:column;gap:6px;
  min-width:0;
}
.form-field label{
  font-size:.85rem;font-weight:500;color:var(--text-2);
}
.form-field input,
.form-field select,
.form-field textarea{
  font:inherit;font-size:1rem;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  min-width:0;
  width:100%;
  transition:border-color var(--t-fast),background 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);
  background:#fff;
}
.form-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
}
@media (min-width:560px){
  .form-grid{grid-template-columns:1fr 1fr;}
  .form-grid .form-field--full{grid-column:1/-1;}
}

/* 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(31,53,49,.65);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal__box{
  position:relative;
  background:var(--bg);
  border:1.5px solid var(--text);
  border-radius:16px;
  box-shadow:6px 6px 0 var(--accent);
  max-width:560px;width:100%;
  padding:32px 28px;
  max-height:85vh;overflow-y:auto;
}
.modal__close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  font-size:1.5rem;line-height:1;
}
.modal__close:hover{background:var(--bg-alt);}
.modal__box h2{
  font-size:1.6rem;margin:0 0 18px;
}
.modal__box h3{
  font-size:.96rem;font-family:var(--ff-body);
  font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:18px 0 8px;
}
.modal__box p{font-size:.92rem;color:var(--text-2);}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(15,27,25,.94);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.lightbox__img{
  max-width:92vw;max-height:84vh;object-fit:contain;
  border-radius:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.4);
}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:grid;place-items:center;
  font-size:1.5rem;line-height:1;
  transition:background var(--t-fast);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.25);}
.lb-close{top:18px;right:18px;}
.lb-prev{left:14px;top:50%;transform:translateY(-50%);}
.lb-next{right:14px;top:50%;transform:translateY(-50%);}

/* FAB Appeler mobile */
.fab-call{
  position:fixed;
  bottom:18px;right:18px;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 10px 22px rgba(31,53,49,.25),0 0 0 4px rgba(74,139,127,.18);
  z-index:var(--z-fab);
  opacity:0;
  transform:translateY(20px);
  visibility:hidden;
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.fab-call.is-visible{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
  transition:opacity .3s ease,transform .3s ease;
}
.fab-call svg{width:24px;height:24px;}
@media (min-width:768px){.fab-call{display:none;}}

/* Rating badge (hero) */
.rating-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;
  background:color-mix(in srgb,#fff 70%,transparent);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:.86rem;
  color:var(--text);
  margin-top:14px;
  text-decoration:none;
}
.rating-badge strong{font-weight:700;}
.rating-badge .stars{display:inline-flex;gap:1px;color:#E0A41A;}
.rating-badge .stars svg{width:14px;height:14px;}

/* Dot pulse (status online) */
.status-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:#25D366;
  position:relative;
  margin-right:8px;
  vertical-align:middle;
}
.status-dot::after{
  content:"";
  position:absolute;inset:-4px;
  border-radius:50%;
  background:#25D366;
  opacity:.4;
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.8);opacity:.5;}
  100%{transform:scale(2.2);opacity:0;}
}
@media (prefers-reduced-motion:reduce){.status-dot::after{animation:none;}}

/* Hero rating badge variant on dark */
.rating-badge--on-dark{
  background:rgba(255,255,255,.92);
  border-color:transparent;
  color:var(--surface-deep);
}