/* ==========================================================================
   King Host — Styles spécifiques aux pages
   1. Accueil   2. Offres   3. À propos   4. Contact   5. Légal   6. 404
   ========================================================================== */

/* ==========================================================================
   1. ACCUEIL
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(36px, 5vw, 54px);
  padding-block: clamp(44px, 7vw, 82px) clamp(36px, 5vw, 54px);
}

.hero h1 {
  margin: var(--sp-5) 0 var(--sp-5);
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.hero h1 span {
  display: block;
}

.hero__text {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lg);
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.hero__proof p {
  margin: 0;
  color: var(--muted-dim);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.hero__proof strong {
  color: var(--text-soft);
}

.avatar-stack {
  display: flex;
  flex-shrink: 0;
}

.avatar-stack span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-right: -8px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: #1d1e22;
  color: var(--gold-light);
  font-size: 0.62rem;
  font-weight: 800;
}

/* --- Colonne visuelle ---------------------------------------------------- */
.render-column {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 46vw, 520px);
}

.render-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(214, 177, 92, 0.12);
  filter: blur(80px);
  animation: float-glow 9s var(--ease) infinite;
}

@keyframes float-glow {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-16px) scale(1.06); }
}

/* Emplacement du render : remplacez ce bloc par votre <img class="hero-render"> */
.render-placeholder {
  width: min(100%, 440px);
  aspect-ratio: 0.86;
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 11px;
  padding: var(--sp-5);
  text-align: center;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(214, 177, 92, 0.06), transparent 45%),
    rgba(255, 255, 255, 0.025);
  box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.04);
}

/*
  Le render est sur fond noir plutôt que transparent : le mode de fusion
  « screen » rend ce noir invisible sur notre fond sombre, ce qui donne un
  détourage parfait sans avoir à retoucher l'image.
*/
.hero-render {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  max-height: 560px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: saturate(1.05) contrast(1.05);
  animation: float-render 11s var(--ease) infinite;
}

@keyframes float-render {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.render-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(214, 177, 92, 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 177, 92, 0.17) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.render-placeholder > *:not(.render-grid) {
  position: relative;
  z-index: 2;
}

.render-placeholder p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.render-placeholder code {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.24);
  color: var(--muted-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* --- Bandeau de réassurance ---------------------------------------------- */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.trust-strip article {
  min-height: 112px;
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border-right: 1px solid var(--line);
}

.trust-strip article:last-child {
  border-right: 0;
}

.trust-strip svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--gold);
}

.trust-strip strong,
.trust-strip span {
  display: block;
  line-height: 1.4;
}

.trust-strip strong {
  font-size: var(--fs-sm);
}

.trust-strip span {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* --- Grille de fonctionnalités ------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: var(--sp-4);
}

.feature-grid .card {
  min-height: 244px;
}

.feature-grid .card--featured {
  grid-row: span 2;
  min-height: 504px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    radial-gradient(circle at 50% 12%, rgba(214, 177, 92, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(214, 177, 92, 0.06), rgba(255, 255, 255, 0.025));
}

/* --- Étapes -------------------------------------------------------------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.steps-grid .card {
  position: relative;
  min-height: 268px;
}

.step-number {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(214, 177, 92, 0.26);
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

/* --- Statistiques -------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, rgba(214, 177, 92, 0.08), transparent 55%),
    var(--surface);
}

.stats article {
  text-align: center;
  border-right: 1px solid var(--line);
}

.stats article:last-child {
  border-right: 0;
}

.stats strong,
.stats span {
  display: block;
}

.stats strong {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem);
  letter-spacing: -0.04em;
}

.stats span {
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* --- Témoignages --------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.testimonial blockquote {
  margin: 0 0 var(--sp-5);
  color: var(--text-soft);
  font-size: var(--fs-base);
  line-height: 1.65;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial .avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(214, 177, 92, 0.12);
  border: 1px solid var(--line-gold);
  color: var(--gold-light);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.testimonial .who strong {
  display: block;
  font-size: var(--fs-sm);
}

.testimonial .who span {
  color: var(--muted-dim);
  font-size: var(--fs-xs);
}

.stars {
  display: flex;
  gap: 3px;
  margin-bottom: var(--sp-4);
  color: var(--gold);
}

.stars svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

/* ==========================================================================
   2. OFFRES
   ========================================================================== */

/* --- Bascule mensuel / annuel -------------------------------------------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
}

.billing-toggle button {
  position: relative;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--t-base), color var(--t-base);
}

.billing-toggle button[aria-selected="true"] {
  background: var(--grad-gold);
  color: #17130b;
}

.billing-toggle .save {
  margin-left: 7px;
  font-size: 0.68rem;
  opacity: 0.8;
}

/* --- Grille de tarifs ---------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-base), transform var(--t-base);
}

.plan:hover {
  transform: translateY(-4px);
  border-color: var(--line-gold);
}

.plan--popular {
  border-color: var(--line-gold-strong);
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 177, 92, 0.16), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow-gold);
}

.plan__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--grad-gold);
  border-color: transparent;
  color: #17130b;
}

.plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.plan__tagline {
  margin: 6px 0 var(--sp-5);
  color: var(--muted);
  font-size: var(--fs-sm);
  min-height: 2.6em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--text);
}

.plan__period {
  color: var(--muted-dim);
  font-size: var(--fs-sm);
}

.plan__specs {
  display: grid;
  gap: 8px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.22);
  font-size: var(--fs-xs);
}

.plan__specs div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.plan__specs dt {
  color: var(--muted);
}

.plan__specs dd {
  margin: 0;
  color: var(--text-soft);
  font-weight: 600;
  text-align: right;
}

.plan__features {
  list-style: none;
  display: grid;
  gap: 11px;
  margin: 0 0 var(--sp-6);
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.plan__features svg {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 3px;
  color: var(--gold);
}

.plan__features li.is-off {
  color: var(--muted-dim);
}

.plan__features li.is-off svg {
  color: var(--muted-dim);
}

.plan .btn {
  margin-top: auto;
}

/* ==========================================================================
   3. À PROPOS
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

.split--reverse .split__visual {
  order: -1;
}

.split h2 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
}

.split p {
  color: var(--muted);
}

.split__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: var(--sp-6);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 30%, rgba(214, 177, 92, 0.14), transparent 60%),
    var(--surface);
  overflow: hidden;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
}

/* --- Frise chronologique ------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  max-width: 760px;
  margin-inline: auto;
  padding-left: 34px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 9px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(214, 177, 92, 0.08));
}

.timeline article {
  position: relative;
}

.timeline article::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -34px;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(214, 177, 92, 0.14);
}

.timeline time {
  color: var(--gold-light);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline h3 {
  margin: 6px 0 6px;
  font-size: var(--fs-h3);
}

.timeline p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* --- Équipe -------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
}

.team-card {
  text-align: center;
}

.team-card .avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: rgba(214, 177, 92, 0.12);
  border: 1px solid var(--line-gold);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
}

.team-card h3 {
  margin: 0 0 4px;
  font-size: var(--fs-base);
}

.team-card p {
  margin: 0;
  color: var(--gold-light);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.team-card .bio {
  margin-top: 10px;
  color: var(--muted);
}

/* ==========================================================================
   4. CONTACT
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}

.contact-form {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(22px, 3.5vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.contact-aside {
  display: grid;
  gap: var(--sp-4);
}

.contact-channel {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.contact-channel h3 {
  margin: 0 0 4px;
  font-size: var(--fs-base);
}

.contact-channel p {
  margin: 0 0 8px;
}

.contact-channel a {
  color: var(--gold-light);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ==========================================================================
   5. PAGES LÉGALES
   ========================================================================== */
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  align-content: start;
  gap: 4px;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.legal-toc strong {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.legal-toc a {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--fs-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.legal-toc a:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.legal-body {
  max-width: 760px;
}

.legal-body h2 {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-2);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-h3);
}

.legal-body p,
.legal-body li {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.legal-body ul,
.legal-body ol {
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.legal-body a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-body strong {
  color: var(--text-soft);
}

.legal-note {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  margin-bottom: var(--sp-7);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  background: rgba(214, 177, 92, 0.05);
}

.legal-note p {
  margin: 0;
  font-size: var(--fs-sm);
}

.legal-note svg {
  color: var(--gold);
  margin-top: 3px;
}

/* ==========================================================================
   6. PAGE 404
   ========================================================================== */
.notfound {
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--sp-5);
  min-height: 66svh;
  padding-block: var(--sp-8);
}

.notfound__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
}

/* ==========================================================================
   RESPONSIVE
   Un seul endroit pour toutes les adaptations : plus facile à maintenir.
   ========================================================================== */

/* --- Tablette large (< 1100px) ------------------------------------------- */
@media (max-width: 1100px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-grid .card--featured {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 320px;
  }
}

/* --- Tablette (< 980px) --------------------------------------------------- */
@media (max-width: 980px) {
  /*
    Hero en une colonne, aligné à gauche. Le texte centré paraît vite amateur
    sur écran étroit, et le render passe SOUS le message : on lit d'abord la
    promesse et le bouton, l'image vient appuyer, pas bloquer.
  */
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .render-column {
    order: 0;
    min-height: 0;
  }

  .render-placeholder {
    max-width: 380px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }

  .plan__tagline {
    min-height: 0;
  }

  .split,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .split--reverse .split__visual {
    order: 0;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    /* Sur mobile la table des matières devient une barre horizontale */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .legal-toc strong {
    width: 100%;
    margin-bottom: 4px;
  }
}

/* --- Petite tablette / grand mobile (< 760px) ---------------------------- */
@media (max-width: 760px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid .card {
    min-height: 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MOBILE (< 620px)
   Le mobile est la principale cible : on ne se contente pas d'empiler les
   colonnes, on retravaille les densités, les tailles et les rythmes.
   ========================================================================== */
@media (max-width: 620px) {

  /* Respiration verticale nettement resserrée */
  :root {
    --section-gap: 56px;
    --shell-pad: 18px;
    --header-h: 64px;
  }

  /* --- Hero ------------------------------------------------------------- */
  .hero {
    gap: 0;
    padding-block: 28px 0;
  }

  .hero h1 {
    /* Un titre trop grand casse sur les mots longs comme « Minecraft » */
    font-size: clamp(2.3rem, 1.1rem + 6.2vw, 3.1rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
    margin: 16px 0 16px;
  }

  .hero__text {
    font-size: 1rem;
    max-width: 34ch;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    margin-top: 26px;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__actions .btn--link {
    min-height: 44px;
  }

  .hero__proof {
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }

  /*
    Le render passe en pleine largeur sous le message : il déborde des marges
    du conteneur pour occuper tout l'écran, et se fond dans le fond par un
    dégradé bas. Une grande image assumée vaut mieux qu'une vignette centrée
    entourée de vide.
  */
  .render-column {
    min-height: 0;
    margin-inline: calc(var(--shell-pad) * -1);
    /* 40px : la marge du bloc « preuve » fusionne hors de son parent, ce qui
       le fait dépasser d'environ 18px. Il faut en tenir compte ici. */
    margin-top: 40px;
    /*
      « start » et non « center » : le centrage hérité de .render-column fait
      remonter l'image et la superpose au texte juste au-dessus.
      Il faut bien neutraliser align-items (place-items), pas align-content.
    */
    place-items: start center;
  }

  .hero-render {
    width: 100%;
    height: auto;
    max-height: none;
    mask-image: linear-gradient(to bottom, #000 60%, transparent 96%);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 96%);
    animation: none;
  }

  .render-glow {
    width: 78%;
    filter: blur(64px);
  }

  /* --- Réassurance : 2 colonnes compactes, icône au-dessus du texte ------ */
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-strip article {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
  }

  .trust-strip article:nth-child(2n) {
    border-right: 0;
  }

  .trust-strip article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .trust-strip strong {
    font-size: 0.86rem;
  }

  .trust-strip span {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  /* --- Cartes ----------------------------------------------------------- */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-grid .card,
  .feature-grid .card--featured {
    min-height: 0;
  }

  .card h3 {
    margin-top: 16px;
  }

  .icon-box {
    width: 42px;
    height: 42px;
  }

  .step-number {
    font-size: 1.7rem;
    top: 14px;
    right: 16px;
  }

  /* --- Titres de section ------------------------------------------------ */
  .section-heading {
    margin-bottom: 28px;
  }

  /* Même logique que le hero : à gauche, comme un texte qui se lit. */
  .section-heading--center {
    text-align: left;
    margin-inline: 0;
  }

  .section-heading p {
    font-size: 0.95rem;
  }

  /* --- Statistiques : 2×2 sans bordures verticales ---------------------- */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
    padding: 26px 18px;
  }

  .stats article {
    border-right: 0;
  }

  /* --- Offres ----------------------------------------------------------- */
  .billing-toggle {
    width: 100%;
  }

  .billing-toggle button {
    flex: 1;
    padding-inline: 8px;
    font-size: 0.82rem;
  }

  .pricing-grid {
    margin-top: 32px;
    gap: 14px;
  }

  /*
    Le tableau comparatif déborde forcément sur mobile : on l'indique
    explicitement au lieu de laisser l'utilisateur deviner qu'il défile.
  */
  .table-wrap {
    position: relative;
    scroll-snap-type: x proximity;
  }

  .table-wrap::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 36px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(8, 9, 12, 0.85));
  }

  .compare-table th,
  .compare-table td {
    padding: 13px 15px;
  }

  /* --- Accordéon -------------------------------------------------------- */
  .accordion summary {
    padding: 15px 16px;
    font-size: 0.95rem;
  }

  .accordion details > *:not(summary) {
    padding: 0 16px 18px;
  }

  /* --- Contact ---------------------------------------------------------- */
  .contact-form {
    padding: 20px 16px;
    gap: 18px;
  }

  .contact-channel {
    gap: 14px;
  }

  /* --- Pages légales : sommaire en bandeau défilant --------------------- */
  .legal-toc {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 14px;
    scrollbar-width: none;
  }

  .legal-toc::-webkit-scrollbar {
    display: none;
  }

  .legal-toc a {
    white-space: nowrap;
    border: 1px solid var(--line);
    font-size: 0.8rem;
  }

  .legal-body h2 {
    margin-top: 40px;
  }

  /* --- Bandeau CTA ------------------------------------------------------ */
  .cta-banner {
    margin-block: 56px 40px;
    padding: 24px 20px;
    gap: 22px;
  }

  .cta-banner__copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .cta-banner h2 {
    font-size: 1.55rem;
  }

  /* --- En-tête des pages internes --------------------------------------- */
  .page-hero {
    padding-block: 30px 22px;
    text-align: left;
  }

  .page-hero .breadcrumb {
    justify-content: flex-start;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 1.2rem + 4.4vw, 2.5rem);
    line-height: 1.06;
  }

  .page-hero p {
    margin-inline: 0;
    font-size: 0.98rem;
  }

  /* --- Frise ------------------------------------------------------------ */
  .timeline {
    gap: 26px;
    padding-left: 26px;
  }

  .timeline article::before {
    left: -26px;
  }
}

/* --- Très petit écran (< 370px) ------------------------------------------ */
@media (max-width: 370px) {
  .trust-strip {
    grid-template-columns: 1fr;
  }

  .trust-strip article {
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .trust-strip article:last-child {
    border-bottom: 0;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}