/* Boutons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:var(--r-md);
  font-family:var(--ff-ui);
  font-size:0.98rem;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-base);
  min-height:48px;
  line-height:1.2;
  text-align:center;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 6px 18px rgba(31,58,95,0.22);
}
.btn-primary:hover{
  background:color-mix(in srgb, var(--accent) 88%, black);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(31,58,95,0.3);
}
.btn-wa{
  background:var(--wa-green);
  color:#fff;
  border-color:var(--wa-green);
}
.btn-wa:hover{
  background:color-mix(in srgb, var(--wa-green) 86%, black);
  color:#fff;
  transform:translateY(-1px);
}
.btn-outline{
  background:transparent;
  color:var(--text);
  border-color:color-mix(in srgb, var(--text) 26%, transparent);
}
.btn-outline:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.btn-ghost{
  background:transparent;
  color:var(--accent);
  padding:10px 0;
  border:none;
  min-height:auto;
}
.btn-ghost::after{
  content:"\2192";
  margin-left:6px;
  transition:transform var(--t-fast);
}
.btn-ghost:hover::after{transform:translateX(4px);}

/* USP pills */
.usp-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 24px;
}
.usp-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:color-mix(in srgb, var(--accent) 7%, var(--bg));
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius:50px;
  font-family:var(--ff-ui);
  font-size:0.84rem;
  font-weight:500;
  color:var(--text);
}
.usp-pill svg{width:14px;height:14px;color:var(--accent);flex-shrink:0;}

/* Card row (LAY-4 card=row) */
.c-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:flex-start;
  padding:22px 0;
  border-top:1px solid var(--border);
}
.c-row:last-child{border-bottom:1px solid var(--border);}
.c-row__icon{
  width:48px;height:48px;
  border-radius:10px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--bg));
  color:var(--accent);
  flex-shrink:0;
}
.c-row__icon svg{width:24px;height:24px;}
.c-row__body h3{
  font-size:1.2rem;
  margin-bottom:6px;
  color:var(--text);
  font-weight:500;
}
.c-row__body p{font-size:0.95rem;color:var(--text-2);}

/* Hero rating badge */
.hero-rating{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:50px;
  font-family:var(--ff-ui);
  font-size:0.86rem;
  color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  margin-bottom:18px;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.hero-rating:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,0.08);color:var(--text);}
.hero-rating .stars{display:inline-flex;gap:1px;color:#E8A33D;}
.hero-rating .stars svg{width:14px;height:14px;}
.hero-rating strong{font-weight:600;color:var(--text);}
.hero-rating span{color:var(--text-mute);}

/* Eyebrow */
.eyebrow{
  display:inline-block;
  font-family:var(--ff-ui);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:24px;height:1px;
  background:var(--accent);
  vertical-align:middle;
  margin-right:10px;
  position:relative;
  top:-2px;
}

/* Mentions modal */
.ml-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.ml-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,18,24,0.6);
  backdrop-filter:blur(2px);
}
.ml-box{
  position:relative;
  background:var(--bg);
  max-width:520px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  border-radius:var(--r-lg);
  padding:32px 28px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
}
.ml-box h2{
  font-size:1.5rem;
  margin-bottom:18px;
  font-weight:500;
}
.ml-box p{font-size:0.92rem;margin-bottom:12px;line-height:1.55;}
.ml-box strong{color:var(--text);}
.ml-close{
  position:absolute;
  top:14px;right:14px;
  width:36px;height:36px;
  border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--text) 8%, var(--bg));
  color:var(--text);
  font-size:18px;
}
.ml-close:hover{background:color-mix(in srgb, var(--text) 14%, var(--bg));}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  background:rgba(10,12,16,0.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.lb-image{
  max-width:92vw;
  max-height:88vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.10);
  color:#fff;
  display:grid;place-items:center;
  font-size:22px;
  transition:background var(--t-fast);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{background:rgba(255,255,255,0.20);}
.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:560px){
  .lb-prev, .lb-next{width:42px;height:42px;}
  .lb-prev{left:10px;}
  .lb-next{right:10px;}
}

/* Form */
.form{display:flex;flex-direction:column;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{
  font-family:var(--ff-ui);
  font-size:0.84rem;
  font-weight:500;
  color:var(--text);
}
.field input,
.field textarea,
.field select{
  width:100%;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  font-family:var(--ff-ui);
  font-size:1rem;
  color:var(--text);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  min-height:48px;
}
.field textarea{min-height:120px;resize:vertical;}
.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) 16%, transparent);
}
.form-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}
@media(min-width:560px){
  .form-actions{flex-direction:row;}
  .form-actions .btn{flex:1;}
}
.form-note{
  font-size:0.78rem;
  color:var(--text-mute);
  margin-top:8px;
}
.form-success{
  display:none;
  padding:14px 16px;
  background:color-mix(in srgb, #25D366 14%, var(--bg));
  border:1px solid color-mix(in srgb, #25D366 36%, transparent);
  border-radius:var(--r-md);
  color:#0e6839;
  font-size:0.92rem;
}
.form-success.is-visible{display:block;}

/* Badges */
.dot-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--ff-ui);
  font-size:0.88rem;
  font-weight:500;
}
.dot-status .dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#1F8A4C;
  position:relative;
}
.dot-status .dot::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:#1F8A4C;
  opacity:.35;
  animation:dot-pulse 2s ease-out infinite;
}
.dot-status[data-state="closed"] .dot{background:#B0463A;}
.dot-status[data-state="closed"] .dot::after{background:#B0463A;}
@keyframes dot-pulse{
  0%{transform:scale(.7);opacity:.5;}
  80%{transform:scale(1.7);opacity:0;}
  100%{transform:scale(1.7);opacity:0;}
}