/* ==========================================================================
   LE MUSCLÉ DU WEB — Components
   ========================================================================== */

/* -----------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-weight-semibold);
  padding: 14px 28px; border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--transition-normal); text-decoration: none; white-space: nowrap;
}
.btn--primary {
  background-color: var(--color-accent); color: #fff;
}
.btn--primary:hover {
  background-color: var(--color-accent-hover); color: #fff;
  box-shadow: var(--shadow-accent); transform: translateY(-2px);
}
.btn--secondary {
  background: transparent; color: var(--color-accent);
  border: 1px solid var(--color-border-accent);
}
.btn--secondary:hover {
  background: var(--color-accent-subtle); border-color: var(--color-border-accent-hover);
  color: var(--color-accent); transform: translateY(-1px);
}
.btn--ghost {
  background: transparent; color: var(--color-text-primary); padding: 10px 20px;
}
.btn--ghost:hover { color: var(--color-accent); }
.btn--sm { padding: 10px 20px; font-size: var(--text-sm); }
.btn--lg { padding: 18px 36px; font-size: var(--text-lg); }
.btn svg, .btn .btn-icon { width: 18px; height: 18px; }

/* -----------------------------------------------------------------------
   BADGE
   ----------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-accent-subtle); color: var(--color-accent);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wider);
  padding: 6px 14px; border-radius: var(--radius-full);
}
.badge--outline {
  background: transparent; border: 1px solid var(--color-border-accent);
}
.badge--success {
  background: var(--color-success-subtle); color: var(--color-success);
}
.badge--spaced { margin-bottom: var(--space-4); }

/* -----------------------------------------------------------------------
   CARD — Service
   ----------------------------------------------------------------------- */
.card {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  transition: all var(--transition-normal); position: relative; overflow: hidden;
}
.card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card-hover); transform: translateY(-4px);
}
.card__icon {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  background: var(--color-accent-subtle); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5); font-size: var(--text-2xl);
}
.card__title {
  font-family: var(--font-heading); font-size: var(--text-xl);
  font-weight: var(--font-weight-bold); margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}
.card__text { color: var(--color-text-secondary); font-size: var(--text-base); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.card__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-accent); font-weight: var(--font-weight-medium); font-size: var(--text-sm);
  transition: gap var(--transition-normal);
}
.card__link:hover { gap: var(--space-3); }
.card__link::after { content: '→'; }

/* On alt-bg sections, use card-alt */
.section--alt .card { background: var(--color-bg-card-alt); }

/* -----------------------------------------------------------------------
   CARD — Use Case
   ----------------------------------------------------------------------- */
.card-case {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all var(--transition-normal);
}
.card-case:hover { border-color: var(--color-border-accent); transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.card-case__img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--color-bg-elevated);
}
.card-case__body { padding: var(--space-6); }
.card-case__badge { margin-bottom: var(--space-3); }
.card-case__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.card-case__kpi { color: var(--color-success); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }

/* -----------------------------------------------------------------------
   CARD — Testimonial
   ----------------------------------------------------------------------- */
.card-testimonial {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-lg);
  padding: var(--space-6); position: relative;
}
.card-testimonial__quote {
  font-size: var(--text-lg); color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed); margin-bottom: var(--space-5);
  font-style: italic;
}
.card-testimonial__quote::before {
  content: '\201C'; font-size: 3rem; color: var(--color-accent);
  font-family: Georgia, serif; line-height: 1; display: block; margin-bottom: var(--space-2);
}
.card-testimonial__author { display: flex; align-items: center; gap: var(--space-3); }
.card-testimonial__avatar {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-bg-elevated); overflow: hidden; flex-shrink: 0;
}
.card-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.card-testimonial__name { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); color: var(--color-text-primary); }
.card-testimonial__role { font-size: var(--text-xs); color: var(--color-text-muted); }

/* -----------------------------------------------------------------------
   KPI STAT
   ----------------------------------------------------------------------- */
.stat {
  text-align: center; padding: var(--space-6);
}
.stat__number {
  font-family: var(--font-heading); font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold); color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.stat__label {
  font-size: var(--text-sm); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
}

/* -----------------------------------------------------------------------
   SEPARATOR
   ----------------------------------------------------------------------- */
.separator { border: none; height: 1px; background: var(--color-border); margin-block: var(--space-8); }
.separator--accent { height: 3px; width: 40px; background: var(--color-accent); border-radius: 2px; margin-block: var(--space-6); }
.separator--accent-center { margin-inline: auto; }

/* -----------------------------------------------------------------------
   CITIES GRID (Ancres locales)
   ----------------------------------------------------------------------- */
.cities-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.cities-grid__link {
  display: block; padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text-secondary);
  font-size: var(--text-sm); text-align: center;
  transition: all var(--transition-fast); text-decoration: none;
}
.cities-grid__link:hover {
  border-color: var(--color-border-accent); color: var(--color-accent);
  background: var(--color-accent-subtle);
}

/* -----------------------------------------------------------------------
   FAQ ACCORDION
   ----------------------------------------------------------------------- */
.faq-item {
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); margin-bottom: var(--space-3); overflow: hidden;
}
.faq-item__question {
  width: 100%; padding: var(--space-5) var(--space-6); background: none; border: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  cursor: pointer; font-family: var(--font-heading); font-size: var(--text-base);
  font-weight: var(--font-weight-semibold); color: var(--color-text-primary); text-align: left;
}
.faq-item__icon {
  width: 24px; height: 24px; flex-shrink: 0; color: var(--color-accent);
  transition: transform var(--transition-normal);
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  max-height: 0; overflow: hidden; transition: max-height var(--transition-slow);
}
.faq-item.is-open .faq-item__answer { max-height: 500px; }
.faq-item__answer-inner {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-text-secondary); line-height: var(--line-height-relaxed);
}

/* -----------------------------------------------------------------------
   PROCESS / STEPS
   ----------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step {
  text-align: center; padding: var(--space-6); position: relative; counter-increment: step;
}
.step__number {
  font-family: var(--font-heading); font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold); color: var(--color-accent-subtle);
  margin-bottom: var(--space-3);
}
.step__number::before { content: counter(step, decimal-leading-zero); }
.step__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.step__text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* -----------------------------------------------------------------------
   BREADCRUMB
   ----------------------------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb__sep { color: var(--color-text-muted); }
.breadcrumb__current { color: var(--color-text-secondary); }

/* -----------------------------------------------------------------------
   CTA BLOCK (full-width call-to-action)
   ----------------------------------------------------------------------- */
.cta-block {
  background: var(--color-bg-darkest); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-16) var(--space-8);
  text-align: center; position: relative; overflow: hidden;
}
.cta-block::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 400px; height: 400px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.cta-block__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); position: relative; }
.cta-block__text { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--space-8); max-width: 600px; margin-inline: auto; position: relative; }
.cta-block__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; position: relative; }

/* -----------------------------------------------------------------------
   DEFINITION + AVAILABILITY BADGE (sidebar)
   ----------------------------------------------------------------------- */
.def-with-badge {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-8);
  align-items: start;
}
.def-with-badge__content { min-width: 0; }
.def-with-badge__aside {
  position: sticky;
  top: 160px;
  align-self: start;
}
@media (max-width: 1024px) {
  .def-with-badge { grid-template-columns: 1fr; }
  .def-with-badge__aside { position: static; }
}