/* Shared utility styles — most styling lives in the inline JSX */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Hide scrollbars inside artboards */
.lp-scope { scrollbar-width: thin; }

/* ---------------------------------------------------------------
   Reset des titres dans la landing — pour battre les styles Divi
   parent qui forcent une couleur grise sur h1/h2/h3.
   --------------------------------------------------------------- */
.lp-scope,
.lp-scope * {
  box-sizing: border-box;
}
.lp-scope h1,
.lp-scope h2,
.lp-scope h3,
.lp-scope h4,
.lp-scope h5,
.lp-scope h6 {
  color: #F4F5F7 !important;
  margin: 0;
  padding: 0;
  font-weight: inherit;
}
.lp-scope p {
  margin: 0;
}
.lp-scope a {
  color: inherit;
  text-decoration: none;
}
.lp-scope button {
  font-family: inherit;
}
/* Les <span> qui doivent rester dim/accent gardent leur couleur inline
   (l'inline style bat le !important du sélecteur ci-dessus quand l'inline
   est lui-même !important — mais nos spans dim utilisent du style normal,
   donc il faut les protéger autrement : */
.lp-scope h1 span,
.lp-scope h2 span,
.lp-scope h3 span {
  color: inherit;
}
.lp-scope h1 span[style],
.lp-scope h2 span[style],
.lp-scope h3 span[style] {
  /* L'inline style prend le dessus naturellement.
     Cette règle existe juste pour la doc — ne fait rien. */
}

/* ===============================================================
   RESPONSIVE — Tablette (1024px) + Mobile (768px)
   La landing utilise des styles inline ; on surcharge ici en !important.
   =============================================================== */

/* Empêche tout débordement horizontal causé par les ornements
   (radial gradient, dashboard chrome, marquee). */
.lp-scope { overflow-x: hidden; max-width: 100vw; }

/* ---------- TABLETTE ≤ 1024px ---------- */
@media (max-width: 1024px) {
  .lp-scope section { padding-left: 32px !important; padding-right: 32px !important; }
  /* Grilles 4-col → 2-col */
  .lp-scope [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Grilles 3-col → 2 ou 1 */
  .lp-scope [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- MOBILE ≤ 768px ---------- */
@media (max-width: 768px) {

  /* Sections : padding réduit, vertical aéré */
  .lp-scope section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .lp-scope footer { padding: 32px 20px !important; }

  /* ===== Nav ===== */
  /* Le nav est le 1er enfant direct de .lp-scope, en sticky */
  .lp-scope > div:first-child {
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  /* Cache les liens du milieu */
  .lp-scope > div:first-child > div:nth-child(2) { display: none !important; }
  /* Cache l'éventuel pill "3 places / Q3" à côté du CTA */
  .lp-scope > div:first-child > div:nth-child(3) > span:first-child { display: none !important; }
  .lp-scope > div:first-child img { height: 32px !important; }
  /* CTA plus petit */
  .lp-scope > div:first-child button { padding: 10px 14px !important; font-size: 13px !important; }

  /* ===== Toutes les grilles → 1 colonne par défaut ===== */
  .lp-scope [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* KPI : 2 colonnes au lieu de 1 (lisible plus dense) */
  .lp-scope [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* ===== Hero ===== */
  .lp-scope h1 {
    font-size: 44px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
  }
  .lp-scope h2 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }
  .lp-scope h3 { font-size: 22px !important; }

  /* Hero CTAs : stack vertical, full width */
  .lp-scope section:first-of-type [style*="justify-content: center"][style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .lp-scope section:first-of-type a[href*="calendly"],
  .lp-scope section:first-of-type a[href*="calendly"] button {
    width: 100% !important;
  }

  /* Trust strip → wrap + plus petit */
  .lp-scope section:first-of-type [style*="40px"][style*="justify-content: center"] {
    gap: 12px !important;
    flex-wrap: wrap !important;
    font-size: 10px !important;
  }

  /* ===== Hero Dashboard (le bloc app.clicnstart.com) ===== */
  /* Réduit la largeur visuelle et les paddings internes */
  .lp-scope section:first-of-type > div:last-child { margin-top: 32px !important; }
  .lp-scope section:first-of-type > div:last-child > div { padding: 12px !important; }

  /* ===== KPI tiles : taille des gros chiffres ===== */
  .lp-scope [style*="font-size: 64"] { font-size: 44px !important; }
  .lp-scope [style*="fontSize: 64"] { font-size: 44px !important; }

  /* ===== Comparatif : transformation cartes ===== */
  /* Ligne d'en-tête masquée + chaque ligne en 1 colonne avec labels visibles */
  .lp-scope [style*="grid-template-columns: 1.2fr 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  /* En-tête comparatif : masque "Critère / Clic'N Start / Agence" header */
  section [style*="background: rgb(10, 11, 13)"][style*="grid-template-columns"] { display: none !important; }

  /* ===== Calculateur (sliders + carte résultat) ===== */
  .lp-scope input[type=range] { height: 6px !important; }

  /* ===== Footer 4 colonnes → 1 colonne, gap réduit ===== */
  .lp-scope footer > div:first-child {
    padding: 32px 20px !important;
    gap: 24px !important;
  }
  .lp-scope footer > div:last-child {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .lp-scope footer img { height: 32px !important; }

  /* ===== Sticky banner ===== */
  .lp-scope [style*="position: fixed"][style*="bottom: 24px"] {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    padding: 8px 8px 8px 14px !important;
    font-size: 12px !important;
  }
  .lp-scope [style*="position: fixed"][style*="bottom: 12px"] button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* ===== Méthode (les étapes en 4-col) → stack vertical ===== */
  .lp-scope [style*="80px 200px 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 24px 0 !important;
  }

  /* ===== Marquee logos : ralenti, plus petit ===== */
  .marquee-track > div { font-size: 16px !important; padding: 0 24px !important; }

  /* ===== Réduit les paddings internes des cartes ===== */
  .lp-scope [style*="padding: 28"],
  .lp-scope [style*="padding: 32"],
  .lp-scope [style*="padding: 36"] {
    padding: 20px !important;
  }

  /* Hero pill, pill sections : reste lisible */
  .lp-scope [style*="border-radius: 999"][style*="padding: 6px 12px"] {
    font-size: 10px !important;
  }

  /* Bandeau "Bonne nouvelle" sous les pain points → stack */
  .lp-scope [style*="justify-content: space-between"][style*="padding: 28px 32px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }

  /* ===== Tableau comparatif Création Sites (4 colonnes) ===== */
  /* Transforme chaque ligne en bloc carte sur mobile */
  .lp-scope .cs-compare-row {
    display: block !important;
    padding: 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  /* Masque le header (déjà lisible via les data-label) */
  .lp-scope .cs-compare-row:first-child {
    background: transparent !important;
    padding: 12px 16px !important;
  }
  .lp-scope .cs-compare-row:first-child > div:not(:first-child) {
    display: none !important;
  }
  .lp-scope .cs-compare-row:first-child > div:first-child {
    font-size: 10px !important;
  }
  /* Le label devient un titre de carte */
  .lp-scope .cs-compare-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: #F4F5F7 !important;
  }
  /* Chaque cellule affiche son label via data-label */
  .lp-scope .cs-compare-cell {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    border-top: 1px dashed rgba(255,255,255,0.06) !important;
  }
  .lp-scope .cs-compare-cell::before {
    content: attr(data-label);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(244,245,247,0.42);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  /* ===== CTA intermédiaire CS : stack ===== */
  .lp-scope [style*="border-radius: 16px"][style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px !important;
  }
}

/* ---------- TRÈS PETIT ≤ 380px ---------- */
@media (max-width: 380px) {
  .lp-scope h1 { font-size: 36px !important; }
  .lp-scope section { padding-left: 16px !important; padding-right: 16px !important; }
  /* KPI : 1 colonne */
  .lp-scope [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
}