/*
  Base layer — reset + generic, brand-agnostic component classes
  (buttons, badges, cards, container, reveal-on-scroll, accordion).
  Reuse this file verbatim on any future landing page; only tokens.css
  needs to change per-brand.
*/

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, p, figure { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-14);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-10);
}

.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Typography helpers ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}

.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
}

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.lede {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
}

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-brand { color: var(--color-brand-light); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 3.25rem;
  padding-inline: var(--space-6);
  border-radius: var(--radius-btn-lg);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px) scale(0.99); }

.btn-brand {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-glow);
}
.btn-brand:hover { background: var(--color-brand-hover); }
.btn-brand:active { background: var(--color-brand-active); }

.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-strong);
}
.btn-outline:hover { border-color: var(--color-brand-light); background: var(--color-surface-translucent); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  height: auto;
  padding: 0;
  border-radius: 0;
}
.btn-ghost:hover { color: var(--color-text-primary); }

.btn-sm { height: 2.5rem; padding-inline: var(--space-4); font-size: var(--text-xs); border-radius: var(--radius-btn-sm); }

/* ---------- Badge / chip ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-light);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}

/* ---------- Card ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.card-raised {
  background: var(--color-surface-raised);
}

/* ---------- Reveal on scroll ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }

/* ---------- Accordion ---------- */

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
}

.accordion-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--color-text-primary);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.accordion-icon::before { width: 9px; height: 1.5px; }
.accordion-icon::after { width: 1.5px; height: 9px; }

.accordion-item.is-open .accordion-icon { border-color: var(--color-brand); transform: rotate(180deg); }
.accordion-item.is-open .accordion-icon::after { opacity: 0; }

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel p { padding-bottom: var(--space-5); color: var(--color-text-secondary); max-width: 42rem; }

/* ---------- Form fields ---------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }

.field label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.input {
  height: 3.25rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-canvas-alt);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-text-tertiary); }
.input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.input:user-invalid { border-color: #ef5f5c; }

/* ---------- Modal / dialog ---------- */

dialog[data-modal] {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--color-text-primary);
  max-width: 28rem;
  width: calc(100% - 2.5rem);
  border-radius: var(--radius-xl);
  overflow: visible;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
dialog[data-modal][open] { opacity: 1; transform: none; }
@starting-style {
  dialog[data-modal][open] { opacity: 0; transform: translateY(20px) scale(0.97); }
}

dialog[data-modal]::backdrop {
  background: rgb(10 6 14 / 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
dialog[data-modal][open]::backdrop { opacity: 1; }
@starting-style {
  dialog[data-modal][open]::backdrop { opacity: 0; }
}

.modal-panel {
  position: relative;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  /* Multi-step content can be taller than a short viewport (small phones,
     landscape, an on-screen keyboard) — scroll inside the panel rather than
     letting the last step's continue/submit button become unreachable. */
  max-height: calc(100svh - 3rem);
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.modal-close:hover { background: var(--color-surface-translucent); color: var(--color-text-primary); }

.modal-body { display: flex; flex-direction: column; gap: var(--space-5); }
.modal-body .fields { display: flex; flex-direction: column; gap: var(--space-4); }

.modal-submit { position: relative; width: 100%; }
.modal-submit .spinner { display: none; }

.modal-body.is-loading .modal-submit .btn-label { visibility: hidden; }
.modal-body.is-loading .modal-submit .spinner {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.modal-body.is-loading .modal-submit { pointer-events: none; opacity: 0.85; }

@keyframes spin { to { transform: rotate(360deg); } }

.modal-fields-panel,
.modal-result-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.modal-result-panel { display: none; align-items: center; text-align: center; padding-block: var(--space-4); }
.modal-body.is-success .modal-fields-panel,
.modal-body.is-error .modal-fields-panel { display: none; }
.modal-body.is-success .modal-result-panel[data-result="success"],
.modal-body.is-error .modal-result-panel[data-result="error"] { display: flex; }

.result-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
}
.result-icon.is-success { background: var(--color-brand-soft); color: var(--color-brand-light); }
.result-icon.is-error { background: rgb(239 95 92 / 0.14); color: #ef8f8d; }

.result-icon svg circle {
  stroke-dasharray: 62;
  stroke-dashoffset: 62;
  animation: draw-circle 0.5s var(--ease-out) forwards;
}
.result-icon svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw-path 0.35s var(--ease-out) 0.4s forwards;
}
@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-path { to { stroke-dashoffset: 0; } }

/* ---------- Inline trust note ---------- */
/* A single-line callout, e.g. under a trust strip: "<icon> Le lieu est noté
   4,7/5 sur Google (52 avis)". Keep it truthful about what the figure covers. */

.rating-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-align: center;
}
.rating-note svg { flex: none; color: var(--color-brand-light); }

/* ---------- Aggregate rating block ---------- */
/* Big score + stars + count, e.g. "4.7/5 ★★★★★ — 52 avis vérifiés". */

.rating-block {
  text-align: center;
  max-width: 30rem;
  margin-inline: auto;
}
.rating-value {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.rating-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-block: var(--space-4);
  color: var(--color-brand-light);
}
.rating-count { color: var(--color-text-secondary); }

/* ---------- Testimonials ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-11);
  text-align: left;
}

.testimonial-card { display: flex; flex-direction: column; gap: var(--space-4); }

.testimonial-quote-mark { color: var(--color-brand-soft); }

.testimonial-quote { color: var(--color-text-secondary); font-size: var(--text-sm); flex: 1; }

.testimonial-author {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.testimonial-author strong { font-size: var(--text-sm); }
.testimonial-source { font-size: var(--text-2xs); color: var(--color-text-tertiary); white-space: nowrap; }

@media (max-width: 960px) {
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* ---------- Simple price list ---------- */
/* A flat list of "label ... price" rows inside a .card. For tiered plan
   comparisons (multiple cards side by side), see .plan-card instead —
   that pattern stays page-specific since its shape varies more per offer. */

.price-card { max-width: 34rem; margin-inline: auto; }

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
}
.price-row:last-child { border-bottom: none; }
.price-row strong { font-size: var(--text-base); color: var(--color-text-primary); }
.price-row span:first-child { color: var(--color-text-secondary); }

.price-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
}

/* ---------- Chip list ---------- */
/* A decorative, non-interactive cloud of pills — e.g. use cases, tags,
   categories. For an interactive, selectable chip (a form control), see the
   wizard's [data-chip] below instead. */

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.chip-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.chip-item:hover { border-color: var(--color-brand); background: var(--color-brand-soft); transform: translateY(-2px); }
.chip-item .emoji { font-size: var(--text-md); line-height: 1; }

@media (max-width: 640px) {
  .chip-item { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); }
}

/* ---------- Feature card grid ---------- */
/* Icon + optional badge + title + description, in a bordered card grid.
   For a plain icon+text row (no card/border), see .usp-item in layout.css
   instead — that one reads as a list, this one reads as comparable options. */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.feature-card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); }

.feature-card .icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand-light);
  display: grid;
  place-items: center;
}
.feature-card > .badge { align-self: flex-start; }
.feature-card p { color: var(--color-text-secondary); font-size: var(--text-sm); }

@media (max-width: 960px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Sticky mobile CTA ---------- */
/* [data-sticky-cta]: hidden by default, shown on mobile once the page's
   .hero has scrolled out of view (see the IntersectionObserver in site.js). */

.sticky-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  padding: var(--space-3) var(--container-pad);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--color-canvas-alt);
  border-top: 1px solid var(--color-border);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
}
.sticky-cta .btn { width: 100%; }
.sticky-cta.is-visible { transform: translateY(0); }

@media (max-width: 640px) {
  .sticky-cta { display: block; }
  /* leave room so the bar never covers the last section's content */
  body:has(.sticky-cta) { padding-bottom: 4.5rem; }
}

/* ---------- Wizard (multi-step form) ---------- */

dialog[data-modal][data-size="lg"] { max-width: 32rem; }

.wizard-progress-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.wizard-progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-brand-hover), var(--color-brand-light));
  transition: width var(--dur-base) var(--ease-out);
}
.wizard-progress-label {
  font-size: var(--text-2xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
}

.wizard-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  border: 1px solid rgb(218 149 2 / 0.25);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.wizard-note svg { flex: none; color: var(--color-brand-light); margin-top: 1px; }

.wizard-steps { position: relative; }

.wizard-step { display: none; flex-direction: column; gap: var(--space-5); text-align: left; }
.wizard-step.is-active { display: flex; animation: step-in-next var(--dur-base) var(--ease-out); }
.wizard-steps[data-dir="back"] .wizard-step.is-active { animation-name: step-in-back; }

@keyframes step-in-next { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

.wizard-step h2 { font-size: var(--text-xl); }
.wizard-step .lede { font-size: var(--text-sm); margin-top: var(--space-1); }

.wizard-choice-grid { display: flex; flex-direction: column; gap: var(--space-3); }

.wizard-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-canvas-alt);
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wizard-choice:hover { border-color: var(--color-border-strong); }
.wizard-choice.is-selected { border-color: var(--color-brand); background: var(--color-brand-soft); }

.wizard-choice-title { font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.wizard-choice-desc { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: 2px; }
.wizard-choice-price { font-weight: var(--fw-bold); color: var(--color-brand-light); white-space: nowrap; font-size: var(--text-sm); }

.wizard-chip-group { display: flex; flex-direction: column; gap: var(--space-3); }
.wizard-chip-group-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wizard-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wizard-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-canvas-alt);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.wizard-chip.is-selected { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand-light); }

textarea.input { height: auto; min-height: 6.5rem; padding-block: var(--space-3); resize: vertical; }

.wizard-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.wizard-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.wizard-back:hover { color: var(--color-text-primary); }
.wizard-continue { margin-inline-start: auto; }

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}