/* ==========================================================================
   QUÉBEC HD — pages/revendeur.css
   Styles spécifiques à la page « Revendeur » (slug « revendeur », ID 19).
   Une feuille par page, jamais par section. Les composants réutilisables
   (typographie, boutons, focus) restent dans general.css.

   Namespaces utilisés ici :
   - .qhd-rsl-*          (section sections/revendeur-hero.php)
   - .qhd-rsl-steps-*,
     .qhd-rsl-step-*     (section sections/revendeur-etapes.php)
   - .qhd-rsl-credits-*,
     .qhd-rsl-cstep-*,
     .qhd-rsl-conv-*     (section sections/revendeur-credits.php)
   - .qhd-rsl-pricing-*,
     .qhd-rsl-plan-*     (section sections/revendeur-forfaits.php)
   - .qhd-rsl-benefits-*,
     .qhd-rsl-benefit-*  (section sections/revendeur-avantages.php)
   ========================================================================== */

/* ==========================================================================
   Section 01 « hero » (sections/revendeur-hero.php)
   --------------------------------------------------------------------------
   Texte à gauche (≈ 46 %), image du panneau revendeur à droite (≈ 54 %) dès
   1025 px. En dessous : une colonne — texte, boutons, image, confiance.
   Fond : même système que la page Abonnements — base #06070B, halo bleu à
   gauche, halo magenta à droite, centre sombre, fondu des bords haut et bas —
   plus une lumière douce derrière l'image.
   ========================================================================== */

/* Pleine largeur : la section sort de son conteneur Elementor. 100vw inclut
   la barre de défilement verticale : le léger surplus est coupé au niveau de
   la page (clip ne crée pas de conteneur de défilement).
   Règle limitée à cette page : la feuille n'est chargée que sur /revendeur/. */
body.qhd-theme {
  overflow-x: clip;
}

.qhd-rsl {
  --qhd-rsl-pink: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 5rem) clamp(3.5rem, 2rem + 3.5vw, 6.5rem); /* 40 → 80 / 56 → 104 px */
  background-color: #06070b;
}

/* Halo bleu à gauche, magenta à droite (mêmes teintes que l'accueil et la
   page Abonnements), lumière douce derrière l'image. */
.qhd-rsl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(30% 60% at 0% 40%, rgb(37 99 235 / 40%), rgb(37 99 235 / 9%) 45%, transparent 75%),
    radial-gradient(30% 55% at 100% 18%, rgb(214 36 120 / 38%), rgb(214 36 120 / 9%) 45%, transparent 75%),
    radial-gradient(28% 38% at 74% 48%, rgb(120 110 255 / 14%), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%);
}

/* Une colonne : texte, image, confiance (ordre du HTML). */
.qhd-rsl__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "media"
    "trust";
  gap: 36px;
  width: min(100% - (var(--qhd-gutter) * 2), 1220px);
}

.qhd-rsl__content {
  grid-area: content;
  min-inline-size: 0;
}

/* --- Fil d'Ariane ---------------------------------------------------------- */

.qhd-rsl__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.qhd-rsl__breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--qhd-rsl-pink);
}

/* Séparateur « › » dessiné, non lu par les lecteurs d'écran. */
.qhd-rsl__breadcrumb li + li::before {
  content: "›";
  color: var(--qhd-text-muted);
  font-size: 1.1em;
}

.qhd-rsl .qhd-rsl__breadcrumb a {
  color: #c7ceda;
  text-decoration: none;
}

.qhd-rsl .qhd-rsl__breadcrumb a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* --- Titre et texte -------------------------------------------------------- */

.qhd-rsl__title {
  margin: 18px 0 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem); /* 34 → 56 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-rsl__accent {
  color: var(--qhd-rsl-pink);
}

.qhd-rsl__description {
  max-inline-size: 640px;
  margin: 24px 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.65;
  color: #c9cfd9;
}

/* --- Boutons --------------------------------------------------------------- */

.qhd-rsl__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-block-start: 30px;
}

.qhd-rsl__cta {
  inline-size: 100%;
  max-inline-size: 380px;
  min-block-size: 56px;
  padding: 10px 28px;
  font-size: 1.1875rem; /* 19 px gras : texte « grand » au sens WCAG */
  font-weight: 700;
}

/* Le thème parent souligne les liens du contenu (.page-content a, 0,1,1). */
.qhd-rsl a.qhd-rsl__cta {
  text-decoration: none;
}

.qhd-rsl__cta svg {
  flex: 0 0 auto;
  transition: transform var(--qhd-duration) var(--qhd-ease);
}

.qhd-rsl__cta--primary {
  background-color: var(--qhd-rsl-pink);
  color: #ffffff;
  box-shadow: 0 12px 30px rgb(242 74 103 / 28%);
}

.qhd-rsl a.qhd-rsl__cta--primary:hover {
  color: #ffffff;
  background-color: #f45d77;
}

.qhd-rsl__cta--primary:hover svg {
  transform: translateX(3px);
}

.qhd-rsl__cta--secondary {
  background-color: transparent;
  color: #f7f7f8;
  border-color: rgb(80 160 255 / 75%);
}

.qhd-rsl a.qhd-rsl__cta--secondary:hover {
  color: #ffffff;
  background-color: rgb(80 160 255 / 12%);
  border-color: rgb(80 160 255 / 100%);
}

/* Focus : surpasse la réinitialisation du thème parent. */
.qhd-rsl .qhd-rsl__cta:focus-visible,
.qhd-rsl .qhd-rsl__breadcrumb a:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

/* --- Image ----------------------------------------------------------------- */

.qhd-rsl__media {
  grid-area: media;
  min-inline-size: 0;
}

.qhd-rsl__image {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 24px 48px rgb(0 0 0 / 45%)) drop-shadow(0 0 36px rgb(110 90 255 / 16%));
}

/* --- Éléments de confiance ------------------------------------------------- */

.qhd-rsl__trust {
  grid-area: trust;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qhd-rsl__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: #e4e7ed;
}

.qhd-rsl__trust-icon {
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  color: var(--qhd-rsl-pink);
}

/* --- 600 px : boutons côte à côte, confiance sur une ligne ------------------ */

@media (min-width: 600px) {
  .qhd-rsl__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .qhd-rsl__cta {
    inline-size: auto;
  }

  .qhd-rsl__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .qhd-rsl__trust-item {
    padding-inline: 16px;
  }

  .qhd-rsl__trust-item:first-child {
    padding-inline-start: 0;
  }

  /* Séparateurs verticaux. */
  .qhd-rsl__trust-item + .qhd-rsl__trust-item {
    border-inline-start: 1px solid rgb(255 255 255 / 14%);
  }
}

/* --- 1025 px : deux colonnes ≈ 46 / 54 ------------------------------------- */

@media (min-width: 1025px) {
  .qhd-rsl {
    padding-block: clamp(4.5rem, 2rem + 3.5vw, 6.5rem); /* 72 → 104 px */
  }

  .qhd-rsl__inner {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    grid-template-areas:
      "content media"
      "trust   media";
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: clamp(2.5rem, 1rem + 2.5vw, 4rem); /* 40 → 64 px */
    row-gap: 44px;
    min-block-size: 600px;
  }

  .qhd-rsl__content {
    align-self: end;
  }

  .qhd-rsl__trust {
    align-self: start;
  }

  /* L'image déborde légèrement à droite ; la section coupe le surplus. */
  .qhd-rsl__image {
    inline-size: calc(100% + clamp(0rem, 4vw, 4rem));
    max-inline-size: none;
  }
}

@media (min-width: 1025px) and (max-width: 1279px) {
  .qhd-rsl__trust-item {
    padding-inline: 12px;
    font-size: 0.875rem;
  }

  .qhd-rsl__trust-item:first-child {
    padding-inline-start: 0;
  }

  .qhd-rsl__trust-icon {
    inline-size: 26px;
    block-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qhd-rsl__cta,
  .qhd-rsl__cta svg {
    transition: none;
  }
}

/* ==========================================================================
   Section 02 « étapes » (sections/revendeur-etapes.php)
   --------------------------------------------------------------------------
   H2 centré, introduction, trois cartes (liste ordonnée) reliées par des
   flèches dès 1025 px ; une colonne en dessous, reliées par un trait.
   Fond : mêmes halos que la section 01 (bleu à gauche, magenta à droite,
   mêmes teintes et intensités), séparés sur ::before et ::after pour
   « respirer » très lentement (transform et opacity uniquement).
   Animations (toutes en CSS, coupées par prefers-reduced-motion) :
   - halos : dérive de quelques pour cent, 16 s et 19 s, alternate ;
   - icônes : pulse lumineux bref (≈ 300 ms) une fois par cycle de 9 s,
     décalé d'une carte à l'autre — jamais de stroboscope ;
   - flèches : glissement de 5 px, 3 s ;
   - cartes : apparition à l'entrée dans l'écran (animation liée au
     défilement, sans script) si le navigateur la prend en charge.
   ========================================================================== */

.qhd-rsl-steps {
  --qhd-rsl-pink: #f24a67;
  --qhd-rsl-steps-gap: 56px;
  /* Intensité du pulse des icônes (réduite sur mobile). */
  --qhd-rsl-pulse-rest: 0 0 6px rgb(242 74 103 / 16%);
  --qhd-rsl-pulse-peak: 0 0 14px rgb(242 74 103 / 45%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.75rem); /* 56 → 92 px */
  background-color: #06070b;
}

/* Halos : mêmes valeurs que .qhd-rsl::before (section 01), plus une lumière
   bleue basse comme sur la maquette. Débordent de 6 % pour que la dérive ne
   découvre jamais un bord.
   Règles partagées avec les sections 03 (.qhd-rsl-credits) et 04
   (.qhd-rsl-pricing) : même fond, même respiration, transition fluide d'une
   section à l'autre. */
.qhd-rsl-steps::before,
.qhd-rsl-steps::after,
.qhd-rsl-credits::before,
.qhd-rsl-credits::after,
.qhd-rsl-pricing::before,
.qhd-rsl-pricing::after,
.qhd-rsl-benefits::before,
.qhd-rsl-benefits::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 6%, #000 22%, #000 80%, transparent 94%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 6%, #000 22%, #000 80%, transparent 94%);
  will-change: transform, opacity;
}

.qhd-rsl-steps::before,
.qhd-rsl-credits::before,
.qhd-rsl-pricing::before,
.qhd-rsl-benefits::before {
  background-image:
    radial-gradient(30% 60% at 3% 35%, rgb(37 99 235 / 40%), rgb(37 99 235 / 9%) 45%, transparent 75%),
    radial-gradient(22% 34% at 2% 92%, rgb(37 99 235 / 26%), transparent 72%);
  animation: qhd-rsl-halo-blue 16s ease-in-out infinite alternate;
}

.qhd-rsl-steps::after,
.qhd-rsl-credits::after,
.qhd-rsl-pricing::after,
.qhd-rsl-benefits::after {
  background-image:
    radial-gradient(30% 55% at 97% 22%, rgb(214 36 120 / 38%), rgb(214 36 120 / 9%) 45%, transparent 75%),
    radial-gradient(22% 34% at 98% 90%, rgb(214 36 120 / 24%), transparent 72%);
  animation: qhd-rsl-halo-pink 19s ease-in-out infinite alternate;
}

@keyframes qhd-rsl-halo-blue {
  0% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  100% { transform: translate(2.5%, -3%) scale(1.05); opacity: 1; }
}

@keyframes qhd-rsl-halo-pink {
  0% { transform: translate(0, 0) scale(1.04); opacity: 1; }
  100% { transform: translate(-2.5%, 3%) scale(1); opacity: 0.82; }
}

.qhd-rsl-steps__inner {
  width: min(100% - (var(--qhd-gutter) * 2), 1220px);
}

/* --- Titre et introduction ------------------------------------------------- */

.qhd-rsl-steps__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem); /* 30 → 46 px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-align: center;
  text-wrap: balance;
}

.qhd-rsl-steps__accent {
  color: var(--qhd-rsl-pink);
}

.qhd-rsl-steps__intro {
  max-inline-size: 640px;
  margin: 12px auto 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 px */
  line-height: 1.6;
  color: #c8ced8;
  text-align: center;
}

/* --- Cartes ---------------------------------------------------------------- */

.qhd-rsl-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qhd-rsl-steps-gap);
  max-inline-size: 720px;
  margin: clamp(2.25rem, 1.8rem + 1.2vw, 3rem) auto 0; /* 36 → 48 px */
  padding: 0;
  list-style: none;
}

/* Icône à gauche ; numéro, titre et texte à droite. */
.qhd-rsl-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  margin: 0;
  padding: 26px 24px;
  border: 1px solid rgb(20 110 210 / 42%);
  border-radius: 16px;
  background-color: rgb(7 20 35 / 88%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.qhd-rsl-step__icon {
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border: 2px solid var(--qhd-rsl-pink);
  border-radius: 50%;
  color: var(--qhd-rsl-pink);
  transition: scale 0.25s ease, box-shadow 0.25s ease;
}

.qhd-rsl-step__icon svg {
  inline-size: 30px;
  block-size: 30px;
  filter: drop-shadow(var(--qhd-rsl-pulse-rest));
  animation: qhd-rsl-soft-blink 9s ease-in-out infinite;
}

.qhd-rsl-step:nth-child(2) .qhd-rsl-step__icon svg {
  animation-delay: 3s;
}

.qhd-rsl-step:nth-child(3) .qhd-rsl-step__icon svg {
  animation-delay: 6s;
}

/* Pulse occasionnel : repos ≈ 8 s, puis deux éclats doux de ≈ 300 ms. */
@keyframes qhd-rsl-soft-blink {
  0%, 72%, 100% {
    opacity: 0.82;
    filter: drop-shadow(var(--qhd-rsl-pulse-rest));
  }
  75.5% {
    opacity: 1;
    filter: drop-shadow(var(--qhd-rsl-pulse-peak));
  }
  79% {
    opacity: 0.86;
    filter: drop-shadow(var(--qhd-rsl-pulse-rest));
  }
  82.5% {
    opacity: 1;
    filter: drop-shadow(var(--qhd-rsl-pulse-peak));
  }
  86% {
    opacity: 0.82;
    filter: drop-shadow(var(--qhd-rsl-pulse-rest));
  }
}

.qhd-rsl-step__number {
  font-family: var(--qhd-font-title);
  font-size: 1.25rem; /* 20 px */
  font-weight: 800;
  line-height: 1.2;
  color: var(--qhd-rsl-pink);
}

.qhd-rsl-step__title {
  margin: 6px 0 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); /* 20 → 24 px */
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.qhd-rsl-step__text {
  margin: 10px 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.6;
  color: #c1c8d3;
}

/* Liaison mobile / tablette : trait vertical discret entre deux cartes. */
.qhd-rsl-step + .qhd-rsl-step::before {
  content: "";
  position: absolute;
  inset-block-end: calc(100% + 12px);
  inset-inline-start: calc(24px + 31px);
  inline-size: 2px;
  block-size: calc(var(--qhd-rsl-steps-gap) - 24px);
  border-radius: 2px;
  background-color: rgb(242 74 103 / 55%);
}

/* Flèche : affichée seulement en trois colonnes. */
.qhd-rsl-step__arrow {
  display: none;
}

/* Survol : légère élévation, bordure plus lumineuse, lueur bleue et rose. */
@media (hover: hover) {
  .qhd-rsl-step:hover {
    transform: translateY(-4px);
    border-color: rgb(40 140 255 / 65%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 6%),
      0 14px 34px rgb(37 99 235 / 14%),
      0 6px 26px rgb(242 74 103 / 8%);
  }

  .qhd-rsl-step:hover .qhd-rsl-step__icon {
    scale: 1.04;
    box-shadow: 0 0 18px rgb(242 74 103 / 30%);
  }
}

/* --- 1025 px : trois colonnes reliées par des flèches ---------------------- */

@media (min-width: 1025px) {
  .qhd-rsl-steps {
    --qhd-rsl-steps-gap: 44px;
  }

  .qhd-rsl-steps__inner {
    width: min(100% - (var(--qhd-gutter) * 2), 1240px);
  }

  .qhd-rsl-steps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-inline-size: none;
  }

  .qhd-rsl-step {
    column-gap: 18px;
    padding: 30px 24px;
  }

  .qhd-rsl-step__title {
    font-size: 1.375rem; /* 22 px */
    letter-spacing: -0.01em;
  }

  .qhd-rsl-step + .qhd-rsl-step::before {
    content: none;
  }

  /* Centrée dans l'espace qui sépare deux cartes. */
  .qhd-rsl-step__arrow {
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + (var(--qhd-rsl-steps-gap) - 30px) / 2);
    inline-size: 30px;
    block-size: 30px;
    margin-block-start: -15px;
    color: var(--qhd-rsl-pink);
    filter: drop-shadow(0 0 6px rgb(242 74 103 / 35%));
    animation: qhd-rsl-arrow-move 3s ease-in-out infinite;
  }
}

/* Cartes plus étroites : l'icône passe au-dessus du texte. */
@media (min-width: 1025px) and (max-width: 1239px) {
  .qhd-rsl-step {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .qhd-rsl-step__icon {
    grid-row: auto;
    margin-block-end: 18px;
  }
}

@media (min-width: 1240px) {
  .qhd-rsl-step__icon {
    inline-size: 72px;
    block-size: 72px;
  }

  .qhd-rsl-step__icon svg {
    inline-size: 34px;
    block-size: 34px;
  }
}

@keyframes qhd-rsl-arrow-move {
  0%, 100% { translate: 0 0; opacity: 0.65; }
  50% { translate: 5px 0; opacity: 1; }
}

/* --- Apparition des cartes à l'entrée dans l'écran -------------------------
   Liée au défilement, sans script ; ignorée par les navigateurs qui ne la
   connaissent pas (cartes simplement visibles). Propriétés translate et
   opacity : le survol (transform) n'est pas écrasé. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qhd-rsl-step {
      animation: qhd-rsl-step-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    .qhd-rsl-step:nth-child(2) {
      animation-range: entry 8% entry 63%;
    }

    .qhd-rsl-step:nth-child(3) {
      animation-range: entry 16% entry 71%;
    }
  }
}

@keyframes qhd-rsl-step-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

/* --- Mobile : halos plus doux et fixes (seule l'opacité varie), pulse
   encore plus discret. */
@media (max-width: 767px) {
  .qhd-rsl-steps {
    --qhd-rsl-steps-gap: 40px;
    --qhd-rsl-pulse-rest: 0 0 4px rgb(242 74 103 / 12%);
    --qhd-rsl-pulse-peak: 0 0 9px rgb(242 74 103 / 30%);
  }

  .qhd-rsl-steps::before,
  .qhd-rsl-credits::before,
  .qhd-rsl-pricing::before,
  .qhd-rsl-benefits::before {
    background-image:
      radial-gradient(60% 28% at 0% 24%, rgb(37 99 235 / 32%), rgb(37 99 235 / 7%) 45%, transparent 75%),
      radial-gradient(50% 18% at 0% 94%, rgb(37 99 235 / 20%), transparent 72%);
    animation-name: qhd-rsl-halo-fade;
  }

  .qhd-rsl-steps::after,
  .qhd-rsl-credits::after,
  .qhd-rsl-pricing::after,
  .qhd-rsl-benefits::after {
    background-image:
      radial-gradient(60% 24% at 100% 10%, rgb(214 36 120 / 30%), rgb(214 36 120 / 7%) 45%, transparent 75%),
      radial-gradient(50% 18% at 100% 86%, rgb(214 36 120 / 18%), transparent 72%);
    animation-name: qhd-rsl-halo-fade;
  }

  .qhd-rsl-step {
    column-gap: 16px;
    padding: 24px 20px;
  }

  .qhd-rsl-step__icon {
    inline-size: 56px;
    block-size: 56px;
  }

  .qhd-rsl-step__icon svg {
    inline-size: 26px;
    block-size: 26px;
  }

  .qhd-rsl-step + .qhd-rsl-step::before {
    inset-inline-start: calc(20px + 27px);
  }
}

@keyframes qhd-rsl-halo-fade {
  from { opacity: 0.8; }
  to { opacity: 1; }
}

/* Mouvement réduit : design statique, aucune animation ni translation. */
@media (prefers-reduced-motion: reduce) {
  .qhd-rsl-steps::before,
  .qhd-rsl-steps::after,
  .qhd-rsl-credits::before,
  .qhd-rsl-credits::after,
  .qhd-rsl-pricing::before,
  .qhd-rsl-pricing::after,
  .qhd-rsl-benefits::before,
  .qhd-rsl-benefits::after,
  .qhd-rsl-step__icon svg,
  .qhd-rsl-step__arrow {
    animation: none;
  }

  .qhd-rsl-step,
  .qhd-rsl-step__icon {
    transition: none;
  }

  .qhd-rsl-step:hover {
    transform: none;
  }

  .qhd-rsl-step:hover .qhd-rsl-step__icon {
    scale: none;
  }
}

/* ==========================================================================
   Section 03 « crédits » (sections/revendeur-credits.php)
   --------------------------------------------------------------------------
   H2 centré, introduction, quatre étapes (liste ordonnée) reliées par des
   flèches, puis le tableau « Conversion des crédits ».
   - moins de 768 px : une colonne, étapes reliées par un trait vertical ;
   - 768 à 1279 px : quatre étapes sur une ligne, tableau centré dessous ;
   - dès 1280 px : étapes à gauche (≈ 65 %), tableau à droite.
   Fond : règles partagées avec la section 02 (.qhd-rsl-steps::before /
   ::after, plus haut) — mêmes halos, même respiration lente.
   Animations réutilisées de la section 02 : qhd-rsl-soft-blink (pulse des
   icônes), qhd-rsl-arrow-move (flèches), qhd-rsl-step-in (apparition).
   Propre à cette section : pulse de la lueur du tableau, décalé.
   ========================================================================== */

.qhd-rsl-credits {
  --qhd-rsl-pink: #f24a67;
  --qhd-rsl-cstep-gap: 44px;
  --qhd-rsl-cstep-icon: 80px;
  --qhd-rsl-pulse-rest: 0 0 6px rgb(242 74 103 / 16%);
  --qhd-rsl-pulse-peak: 0 0 13px rgb(242 74 103 / 40%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.75rem); /* 56 → 92 px */
  background-color: #06070b;
}

.qhd-rsl-credits__inner {
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

/* --- Titre et introduction ------------------------------------------------- */

.qhd-rsl-credits__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem); /* 30 → 46 px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-align: center;
  text-wrap: balance;
}

.qhd-rsl-credits__accent {
  color: var(--qhd-rsl-pink);
}

.qhd-rsl-credits__intro {
  max-inline-size: 640px;
  margin: 12px auto 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 px */
  line-height: 1.6;
  color: #c7ced9;
  text-align: center;
}

.qhd-rsl-credits__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  margin-block-start: clamp(2.5rem, 2rem + 1.2vw, 3.25rem); /* 40 → 52 px */
}

/* --- Étapes ---------------------------------------------------------------- */

.qhd-rsl-credits__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qhd-rsl-cstep-gap);
  max-inline-size: 420px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.qhd-rsl-cstep {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}

.qhd-rsl-cstep__icon {
  display: grid;
  place-items: center;
  inline-size: var(--qhd-rsl-cstep-icon);
  block-size: var(--qhd-rsl-cstep-icon);
  border: 2px solid var(--qhd-rsl-pink);
  border-radius: 50%;
  background-color: rgb(7 20 35 / 70%);
  color: var(--qhd-rsl-pink);
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}

.qhd-rsl-cstep__icon svg {
  inline-size: 36px;
  block-size: 36px;
  filter: drop-shadow(var(--qhd-rsl-pulse-rest));
  animation: qhd-rsl-soft-blink 9s ease-in-out infinite;
}

/* Pulses décalés : jamais deux icônes en même temps. */
.qhd-rsl-cstep:nth-child(2) .qhd-rsl-cstep__icon svg {
  animation-delay: 2.25s;
}

.qhd-rsl-cstep:nth-child(3) .qhd-rsl-cstep__icon svg {
  animation-delay: 4.5s;
}

.qhd-rsl-cstep:nth-child(4) .qhd-rsl-cstep__icon svg {
  animation-delay: 6.75s;
}

.qhd-rsl-cstep__title {
  margin: 18px 0 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 18 → 20 px */
  font-weight: 700;
  line-height: 1.3;
  color: #f7f7f8;
}

.qhd-rsl-cstep__text {
  margin: 8px 0 0;
  font-size: 0.9375rem; /* 15 px */
  line-height: 1.6;
  color: #c0c7d2;
}

/* Liaison en une colonne : trait vertical discret entre deux étapes. */
.qhd-rsl-cstep + .qhd-rsl-cstep::before {
  content: "";
  position: absolute;
  inset-block-end: calc(100% + 10px);
  inset-inline-start: calc(50% - 1px);
  inline-size: 2px;
  block-size: calc(var(--qhd-rsl-cstep-gap) - 20px);
  border-radius: 2px;
  background-color: rgb(242 74 103 / 55%);
}

.qhd-rsl-cstep__arrow {
  display: none;
}

@media (hover: hover) {
  .qhd-rsl-cstep:hover .qhd-rsl-cstep__icon {
    translate: 0 -3px;
    box-shadow: 0 0 18px rgb(242 74 103 / 30%);
  }
}

/* --- Tableau « Conversion des crédits » ------------------------------------ */

.qhd-rsl-conv {
  inline-size: 100%;
  max-inline-size: 560px;
  margin-inline: auto;
  padding: 26px;
  border: 1px solid rgb(25 115 195 / 40%);
  border-radius: 16px;
  background-color: rgb(6 22 38 / 88%);
  /* Ombre bleutée et très légère lumière derrière le bloc. */
  box-shadow:
    0 15px 45px rgb(0 80 180 / 8%),
    0 0 60px rgb(37 99 235 / 10%);
  transition: border-color 0.25s ease;
  animation: qhd-rsl-conv-pulse 10s ease-in-out 4s infinite;
}

/* Pulse occasionnel de la lueur (≈ 250 ms), la bordure reste libre pour le survol. */
@keyframes qhd-rsl-conv-pulse {
  0%, 74%, 100% {
    box-shadow:
      0 15px 45px rgb(0 80 180 / 8%),
      0 0 60px rgb(37 99 235 / 10%);
  }
  76.5% {
    box-shadow:
      0 15px 45px rgb(0 80 180 / 12%),
      0 0 60px rgb(37 99 235 / 22%);
  }
  80% {
    box-shadow:
      0 15px 45px rgb(0 80 180 / 8%),
      0 0 60px rgb(37 99 235 / 12%);
  }
}

@media (hover: hover) {
  .qhd-rsl-conv:hover {
    border-color: rgb(40 140 255 / 65%);
  }
}

.qhd-rsl-conv__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem); /* 20 → 22 px */
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.qhd-rsl-conv__intro {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #c0c7d2;
}

/* Le thème parent stylise table / th / td (bordures, rayures, marges) :
   sélecteurs à deux classes pour reprendre la main. */
.qhd-rsl-conv .qhd-rsl-conv__table {
  inline-size: 100%;
  margin: 20px 0 0;
  border: 1px solid rgb(90 130 180 / 30%);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  font-size: 0.9375rem;
  table-layout: fixed;
}

.qhd-rsl-conv .qhd-rsl-conv__table th,
.qhd-rsl-conv .qhd-rsl-conv__table td {
  padding: 13px 8px;
  border: 0;
  border-block-start: 1px solid rgb(90 130 180 / 18%);
  border-inline-start: 1px solid rgb(90 130 180 / 18%);
  background-color: transparent;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
  color: #f7f7f8;
}

.qhd-rsl-conv .qhd-rsl-conv__table thead th {
  border-block-start: 0;
  font-family: var(--qhd-font-title);
  font-size: 1.1875rem; /* 19 px gras : texte blanc sur rose lisible (WCAG) */
  font-weight: 700;
}

.qhd-rsl-conv .qhd-rsl-conv__table tr > :first-child {
  border-inline-start: 0;
}

/* Colonnes : durée (bleu nuit), Essentiel (rose), Premium (or). */
.qhd-rsl-conv .qhd-rsl-conv__table .qhd-rsl-conv__head--duration {
  background-color: rgb(22 45 78);
  color: #f3f5f8;
}

.qhd-rsl-conv .qhd-rsl-conv__table .qhd-rsl-conv__head--essentiel {
  background-color: #f24a67;
  color: #ffffff;
}

.qhd-rsl-conv .qhd-rsl-conv__table .qhd-rsl-conv__head--premium {
  background-color: #ffc800;
  color: #06070b;
}

.qhd-rsl-conv .qhd-rsl-conv__table .qhd-rsl-conv__duration {
  background-color: rgb(16 34 60 / 75%);
  color: #f3f5f8;
}

.qhd-rsl-conv .qhd-rsl-conv__table .qhd-rsl-conv__essentiel {
  background-color: rgb(242 74 103 / 12%);
}

.qhd-rsl-conv .qhd-rsl-conv__table .qhd-rsl-conv__premium {
  background-color: rgb(255 200 0 / 9%);
}

/* Coins arrondis suivis par les fonds des cellules d'angle. */
.qhd-rsl-conv .qhd-rsl-conv__table thead th:first-child {
  border-start-start-radius: 11px;
}

.qhd-rsl-conv .qhd-rsl-conv__table thead th:last-child {
  border-start-end-radius: 11px;
}

.qhd-rsl-conv .qhd-rsl-conv__table tbody tr:last-child > :first-child {
  border-end-start-radius: 11px;
}

.qhd-rsl-conv .qhd-rsl-conv__table tbody tr:last-child > :last-child {
  border-end-end-radius: 11px;
}

/* --- 768 px : quatre étapes sur une ligne, reliées par des flèches --------- */

@media (min-width: 768px) {
  .qhd-rsl-credits {
    --qhd-rsl-cstep-gap: 32px;
    --qhd-rsl-cstep-icon: 88px;
  }

  .qhd-rsl-credits__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-inline-size: none;
  }

  .qhd-rsl-cstep + .qhd-rsl-cstep::before {
    content: none;
  }

  .qhd-rsl-cstep__icon svg {
    inline-size: 40px;
    block-size: 40px;
  }

  /* Centrée entre deux icônes, dans l'espace qui sépare les étapes. */
  .qhd-rsl-cstep__arrow {
    display: block;
    position: absolute;
    inset-block-start: calc(var(--qhd-rsl-cstep-icon) / 2 - 13px);
    inset-inline-start: calc(100% + (var(--qhd-rsl-cstep-gap) - 26px) / 2);
    inline-size: 26px;
    block-size: 26px;
    color: var(--qhd-rsl-pink);
    filter: drop-shadow(0 0 6px rgb(242 74 103 / 35%));
    animation: qhd-rsl-arrow-move 3s ease-in-out infinite;
  }
}

/* --- 1280 px : étapes à gauche, tableau à droite --------------------------- */

@media (min-width: 1280px) {
  .qhd-rsl-credits {
    --qhd-rsl-cstep-gap: 28px;
    --qhd-rsl-cstep-icon: 92px;
  }

  .qhd-rsl-credits__layout {
    grid-template-columns: minmax(0, 1.85fr) minmax(340px, 1fr);
    align-items: center;
    gap: 48px;
  }

  .qhd-rsl-conv {
    max-inline-size: none;
  }
}

/* --- Apparition à l'entrée dans l'écran (même principe que la section 02) -- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qhd-rsl-cstep {
      animation: qhd-rsl-step-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    .qhd-rsl-cstep:nth-child(2) {
      animation-range: entry 6% entry 61%;
    }

    .qhd-rsl-cstep:nth-child(3) {
      animation-range: entry 12% entry 67%;
    }

    .qhd-rsl-cstep:nth-child(4) {
      animation-range: entry 18% entry 73%;
    }

    /* Le pulse de la lueur (animation) est conservé : deux animations. */
    .qhd-rsl-conv {
      animation:
        qhd-rsl-conv-in linear both,
        qhd-rsl-conv-pulse 10s ease-in-out 4s infinite;
      animation-timeline: view(), auto;
      animation-range: entry 10% entry 60%, normal;
    }
  }
}

@keyframes qhd-rsl-conv-in {
  from { opacity: 0; translate: 15px 0; }
  to { opacity: 1; translate: 0 0; }
}

/* --- Mobile : pulse encore plus discret ------------------------------------ */

@media (max-width: 767px) {
  .qhd-rsl-credits {
    --qhd-rsl-pulse-rest: 0 0 4px rgb(242 74 103 / 12%);
    --qhd-rsl-pulse-peak: 0 0 9px rgb(242 74 103 / 28%);
  }

  .qhd-rsl-conv {
    padding: 22px 18px;
  }

  .qhd-rsl-conv .qhd-rsl-conv__table {
    font-size: 0.875rem;
  }

  .qhd-rsl-conv .qhd-rsl-conv__table th,
  .qhd-rsl-conv .qhd-rsl-conv__table td {
    padding-inline: 4px;
  }
}

/* Mouvement réduit : design statique, contenu entièrement visible. */
@media (prefers-reduced-motion: reduce) {
  .qhd-rsl-cstep__icon svg,
  .qhd-rsl-cstep__arrow,
  .qhd-rsl-conv {
    animation: none;
  }

  .qhd-rsl-cstep__icon,
  .qhd-rsl-conv {
    transition: none;
  }

  .qhd-rsl-cstep:hover .qhd-rsl-cstep__icon {
    translate: none;
  }
}

/* ==========================================================================
   Section 04 « forfaits » (sections/revendeur-forfaits.php)
   --------------------------------------------------------------------------
   Label, H2, introduction, interrupteur Essentiel / Premium, puis quatre
   cartes (1 colonne, 2 dès 768 px, 4 dès 1025 px), même hauteur, bouton
   aligné en bas.
   Fond : règles partagées avec les sections 02 et 03 (plus haut).
   Interrupteur : assets/js/pages/revendeur.js ; mêmes dimensions et couleurs
   que celui de la page Abonnements (rose = Essentiel, or = Premium).
   Animations (coupées par prefers-reduced-motion) :
   - lueur de l'interrupteur : pulse bref toutes les 11 s ;
   - titres des cartes : pulse bref, une carte à la fois (cycle de 12 s) ;
   - cartes : apparition décalée à l'entrée dans l'écran (CSS, sans script).
   ========================================================================== */

.qhd-rsl-pricing {
  --qhd-rsl-pink: #f24a67;
  --qhd-rsl-gold: #ffc800;
  --qhd-rsl-accent: var(--qhd-rsl-pink);
  --qhd-rsl-accent-glow: rgb(242 74 103 / 55%);
  --qhd-rsl-accent-shadow: rgb(242 74 103 / 30%);
  --qhd-rsl-plan-pad: 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.75rem) clamp(4rem, 2.25rem + 4vw, 6.5rem); /* 56 → 92 / 64 → 104 px */
  background-color: #06070b;
}

.qhd-rsl-pricing.is-premium {
  --qhd-rsl-accent: var(--qhd-rsl-gold);
  --qhd-rsl-accent-glow: rgb(255 200 0 / 45%);
  --qhd-rsl-accent-shadow: rgb(255 200 0 / 28%);
}

.qhd-rsl-pricing__inner {
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

/* --- En-tête --------------------------------------------------------------- */

.qhd-rsl-pricing__eyebrow {
  margin: 0;
  font-size: 0.875rem; /* 14 px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--qhd-rsl-pink);
}

.qhd-rsl-pricing__title {
  margin: 10px 0 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem); /* 30 → 46 px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-align: center;
  text-wrap: balance;
}

.qhd-rsl-pricing__accent {
  color: var(--qhd-rsl-pink);
}

.qhd-rsl-pricing__intro {
  max-inline-size: 850px;
  margin: 12px auto 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 px */
  line-height: 1.6;
  color: #c7ced9;
  text-align: center;
}

/* --- Interrupteur ---------------------------------------------------------- */

.qhd-rsl-pricing__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block-start: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.qhd-rsl-pricing__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--qhd-font-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--qhd-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease;
}

.qhd-rsl-pricing__label--essentiel,
.qhd-rsl-pricing.is-premium .qhd-rsl-pricing__label--premium {
  color: #ffffff;
}

.qhd-rsl-pricing.is-premium .qhd-rsl-pricing__label--essentiel {
  color: var(--qhd-text-muted);
}

.qhd-rsl-pricing__diamond {
  flex: 0 0 auto;
  color: #6fd3ff;
}

.qhd-rsl-pricing__switch {
  position: relative;
  flex: 0 0 auto;
  inline-size: 66px;
  block-size: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--qhd-rsl-pink);
  box-shadow: 0 6px 18px rgb(242 74 103 / 28%);
  cursor: pointer;
  transition: background-color 0.25s ease;
  animation: qhd-rsl-switch-pulse 11s ease-in-out 2s infinite;
}

/* Le thème parent colore les boutons au survol et au focus. */
.qhd-rsl-pricing .qhd-rsl-pricing__switch:hover,
.qhd-rsl-pricing .qhd-rsl-pricing__switch:focus {
  background-color: var(--qhd-rsl-pink);
}

.qhd-rsl-pricing__thumb {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.qhd-rsl-pricing .qhd-rsl-pricing__switch[aria-checked="true"] {
  background-color: var(--qhd-rsl-gold);
  animation-name: qhd-rsl-switch-pulse-gold;
}

.qhd-rsl-pricing__switch[aria-checked="true"] .qhd-rsl-pricing__thumb {
  transform: translateX(30px);
  background-color: #06070b;
}

.qhd-rsl-pricing .qhd-rsl-pricing__switch:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
}

/* Lueur de l'interrupteur : repos, puis un éclat doux (≈ 300 ms). */
@keyframes qhd-rsl-switch-pulse {
  0%, 80%, 100% { box-shadow: 0 6px 18px rgb(242 74 103 / 28%); }
  82.5% { box-shadow: 0 6px 18px rgb(242 74 103 / 28%), 0 0 22px rgb(242 74 103 / 50%); }
  85% { box-shadow: 0 6px 18px rgb(242 74 103 / 28%); }
}

@keyframes qhd-rsl-switch-pulse-gold {
  0%, 80%, 100% { box-shadow: 0 6px 18px rgb(255 200 0 / 25%); }
  82.5% { box-shadow: 0 6px 18px rgb(255 200 0 / 25%), 0 0 22px rgb(255 200 0 / 45%); }
  85% { box-shadow: 0 6px 18px rgb(255 200 0 / 25%); }
}

/* --- Grille et cartes ------------------------------------------------------ */

.qhd-rsl-pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) 0 0; /* 28 → 36 px */
  padding: 0;
  list-style: none;
}

.qhd-rsl-pricing__grid[hidden],
.qhd-rsl-pricing__note[hidden],
.qhd-rsl-pricing__pending[hidden] {
  display: none;
}

/* Emplacement Premium tant que les vrais tarifs ne sont pas fournis. */
.qhd-rsl-pricing__pending {
  max-inline-size: 640px;
  margin: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) auto 0;
  padding: 28px 24px;
  border: 1px dashed rgb(255 200 0 / 45%);
  border-radius: 16px;
  background-color: rgb(7 21 34 / 88%);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  color: #e4e7ed;
}

.qhd-rsl-plan {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px var(--qhd-rsl-plan-pad);
  border: 1px solid rgb(35 120 210 / 40%);
  border-radius: 16px;
  background-color: #071522;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.qhd-rsl-plan__credits {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.5625rem, 1.45rem + 0.35vw, 1.75rem); /* 25 → 28 px */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--qhd-rsl-accent);
  animation: qhd-rsl-credits-pulse 12s ease-in-out infinite;
}

/* Une carte à la fois : décalage de 3 s sur un cycle de 12 s. */
.qhd-rsl-plan:nth-child(2) .qhd-rsl-plan__credits {
  animation-delay: 3s;
}

.qhd-rsl-plan:nth-child(3) .qhd-rsl-plan__credits {
  animation-delay: 6s;
}

.qhd-rsl-plan:nth-child(4) .qhd-rsl-plan__credits {
  animation-delay: 9s;
}

@keyframes qhd-rsl-credits-pulse {
  0%, 80%, 100% { text-shadow: 0 0 0 transparent; }
  82% { text-shadow: 0 0 14px var(--qhd-rsl-accent-glow); }
  84.5% { text-shadow: 0 0 0 transparent; }
}

.qhd-rsl-plan__price {
  margin: 4px 0 0;
  padding-block-end: 18px;
  border-block-end: 1px solid rgb(100 150 200 / 25%);
  font-family: var(--qhd-font-title);
  font-size: clamp(2.5rem, 2.35rem + 0.4vw, 2.75rem); /* 40 → 44 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
}

/* --- Premium : offre bonus, coût mensuel, qualités d'image ----------------- */

.qhd-rsl-pricing__note {
  max-inline-size: 850px;
  margin: 18px auto 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
  color: #e4e7ed;
}

/* Sous le prix : pas de filet, la bande fait la séparation. */
.qhd-rsl-pricing__grid--premium .qhd-rsl-plan__price {
  padding-block-end: 0;
  border-block-end: 0;
}

/* Bande pleine largeur de la carte (annule le padding latéral). */
.qhd-rsl-plan__rate {
  margin: 16px calc(var(--qhd-rsl-plan-pad) * -1) 0;
  padding: 9px 12px;
  background-color: var(--qhd-rsl-gold);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #06070b;
}

.qhd-rsl-plan__quality {
  display: flex;
  justify-content: center;
  gap: 6px;
  inline-size: min(100%, 130px);
  margin: 16px auto 0;
  padding: 8px 0;
  border-block: 1px solid rgb(100 150 200 / 25%);
  list-style: none;
}

.qhd-rsl-plan__quality li {
  margin: 0;
  padding: 1px 5px;
  border: 1.5px solid #e4e7ed;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.3;
  color: #e4e7ed;
}

.qhd-rsl-plan__features {
  display: grid;
  gap: 11px;
  /* Espace minimal au-dessus du bouton (poussé en bas par margin-top: auto). */
  margin: 20px 0 26px;
  padding: 0;
  list-style: none;
}

.qhd-rsl-plan__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.9375rem; /* 15 px */
  line-height: 1.45;
  color: #e4e7ed;
}

.qhd-rsl-plan__check {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 0.05em;
  color: var(--qhd-rsl-accent);
}

/* Bouton pleine largeur, poussé en bas : alignés d'une carte à l'autre. */
.qhd-rsl-plan__cta {
  inline-size: 100%;
  min-block-size: 52px;
  margin-block-start: auto;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  background-image: linear-gradient(90deg, #e92376, #ff3d67);
  color: #ffffff;
  font-size: 1.1875rem; /* 19 px gras : texte « grand » au sens WCAG */
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

/* Le thème parent souligne les liens du contenu (.page-content a, 0,1,1). */
.qhd-rsl-pricing a.qhd-rsl-plan__cta {
  text-decoration: none;
  color: #ffffff;
}

.qhd-rsl-pricing.is-premium a.qhd-rsl-plan__cta {
  background-image: none;
  background-color: var(--qhd-rsl-gold);
  color: #06070b;
}

.qhd-rsl-pricing .qhd-rsl-plan__cta:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

@media (hover: hover) {
  .qhd-rsl-plan__cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 22px var(--qhd-rsl-accent-shadow);
  }
}

/* --- 768 px : deux cartes par ligne ; 1025 px : quatre --------------------- */

@media (min-width: 768px) {
  .qhd-rsl-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  .qhd-rsl-pricing__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .qhd-rsl-pricing {
    --qhd-rsl-plan-pad: 22px;
  }
}

/* Survol des cartes : desktop uniquement. */
@media (hover: hover) and (min-width: 1025px) {
  .qhd-rsl-plan:hover {
    transform: translateY(-4px);
    border-color: rgb(40 140 255 / 65%);
    box-shadow:
      0 12px 35px rgb(0 95 200 / 8%),
      0 0 22px rgb(242 74 103 / 5%);
  }
}

/* --- Apparition des cartes à l'entrée dans l'écran (comme sections 02, 03) - */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qhd-rsl-plan {
      animation: qhd-rsl-step-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    .qhd-rsl-plan:nth-child(2) {
      animation-range: entry 5% entry 50%;
    }

    .qhd-rsl-plan:nth-child(3) {
      animation-range: entry 10% entry 55%;
    }

    .qhd-rsl-plan:nth-child(4) {
      animation-range: entry 15% entry 60%;
    }
  }
}

/* --- Mobile : halos plus lents, pas de pulse sur les cartes ---------------- */

@media (max-width: 767px) {
  .qhd-rsl-pricing::before,
  .qhd-rsl-pricing::after {
    animation-duration: 26s;
  }

  .qhd-rsl-plan__credits {
    animation: none;
  }

  .qhd-rsl-pricing__label {
    font-size: 0.9375rem;
  }
}

/* Mouvement réduit : design statique, contenu entièrement visible. */
@media (prefers-reduced-motion: reduce) {
  .qhd-rsl-pricing__switch,
  .qhd-rsl-pricing .qhd-rsl-pricing__switch[aria-checked="true"],
  .qhd-rsl-plan__credits {
    animation: none;
  }

  .qhd-rsl-pricing__switch,
  .qhd-rsl-pricing__thumb,
  .qhd-rsl-pricing__label,
  .qhd-rsl-plan,
  .qhd-rsl-plan__cta {
    transition: none;
  }

  .qhd-rsl-plan:hover,
  .qhd-rsl-plan__cta:hover {
    transform: none;
  }
}

/* ==========================================================================
   Section 05 « avantages » (sections/revendeur-avantages.php)
   --------------------------------------------------------------------------
   H2 centré, introduction, six cartes (1 colonne, 2 dès 768 px, 3 dès
   1025 px), puis le bandeau « Prêt à lancer votre activité ? » : texte et
   bouton WhatsApp à gauche, image à droite dès 1025 px (dessous avant).
   Fond : règles partagées avec les sections 02 à 04 (plus haut).
   Animations (coupées par prefers-reduced-motion) :
   - icônes : qhd-rsl-soft-blink (section 02), une icône à la fois ;
   - bouton WhatsApp : lueur brève toutes les 10 s ;
   - cartes puis bandeau : apparition à l'entrée dans l'écran (CSS) ;
   - image : zoom de 1,5 % au survol du bandeau (desktop).
   ========================================================================== */

.qhd-rsl-benefits {
  --qhd-rsl-pink: #f24a67;
  --qhd-rsl-pulse-rest: 0 0 8px rgb(242 74 103 / 16%);
  --qhd-rsl-pulse-peak: 0 0 14px rgb(242 74 103 / 40%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.75rem) clamp(4rem, 2.25rem + 4vw, 6.5rem); /* 56 → 92 / 64 → 104 px */
  background-color: #06070b;
}

.qhd-rsl-benefits__inner {
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

/* --- En-tête --------------------------------------------------------------- */

.qhd-rsl-benefits__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem); /* 30 → 46 px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-align: center;
  text-wrap: balance;
}

.qhd-rsl-benefits__accent {
  color: var(--qhd-rsl-pink);
}

.qhd-rsl-benefits__intro {
  max-inline-size: 760px;
  margin: 10px auto 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 px */
  line-height: 1.6;
  color: #c7ced9;
  text-align: center;
}

/* --- Cartes ---------------------------------------------------------------- */

.qhd-rsl-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: clamp(2.25rem, 1.9rem + 1vw, 2.75rem) 0 0; /* 36 → 44 px */
  padding: 0;
  list-style: none;
}

/* Icône à gauche, titre et texte à droite, centrés verticalement. */
.qhd-rsl-benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 20px;
  margin: 0;
  padding: 22px;
  border: 1px solid rgb(35 120 210 / 38%);
  border-radius: 14px;
  background-color: rgb(7 21 34 / 88%);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.qhd-rsl-benefit__icon {
  grid-row: 1 / -1;
  align-self: center;
  inline-size: 48px;
  block-size: 48px;
  color: var(--qhd-rsl-pink);
  filter: drop-shadow(var(--qhd-rsl-pulse-rest));
  animation: qhd-rsl-soft-blink 9s ease-in-out infinite;
}

/* Une icône à la fois : décalage de 1,5 s sur un cycle de 9 s. */
.qhd-rsl-benefit:nth-child(2) .qhd-rsl-benefit__icon { animation-delay: 1.5s; }
.qhd-rsl-benefit:nth-child(3) .qhd-rsl-benefit__icon { animation-delay: 3s; }
.qhd-rsl-benefit:nth-child(4) .qhd-rsl-benefit__icon { animation-delay: 4.5s; }
.qhd-rsl-benefit:nth-child(5) .qhd-rsl-benefit__icon { animation-delay: 6s; }
.qhd-rsl-benefit:nth-child(6) .qhd-rsl-benefit__icon { animation-delay: 7.5s; }

.qhd-rsl-benefit__title {
  grid-row: 2;
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 18 → 20 px */
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

.qhd-rsl-benefit__text {
  grid-row: 3;
  margin: 6px 0 0;
  font-size: 0.9375rem; /* 15 px */
  line-height: 1.55;
  color: #c4cbd6;
}

@media (hover: hover) and (min-width: 1025px) {
  .qhd-rsl-benefit:hover {
    transform: translateY(-3px);
    border-color: rgb(242 74 103 / 40%);
  }
}

/* --- Bandeau « Prêt à lancer votre activité ? » ---------------------------- */

.qhd-rsl-benefits__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgb(35 120 210 / 42%);
  border-radius: 20px;
  background-color: rgb(5 16 29 / 90%);
  box-shadow: 0 16px 50px rgb(0 80 190 / 8%);
}

.qhd-rsl-benefits__cta-content {
  align-self: center;
  min-inline-size: 0;
  padding: 32px 22px 30px;
}

.qhd-rsl-benefits__cta-title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem); /* 30 → 40 px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-rsl-benefits__cta-text {
  max-inline-size: 620px;
  margin: 14px 0 0;
  font-size: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem); /* 16 → 17 px */
  line-height: 1.65;
  color: #ccd2dc;
}

/* Bouton unique : sombre, bordure rose, icône WhatsApp blanche. */
.qhd-rsl-benefits__whatsapp {
  inline-size: 100%;
  max-inline-size: 380px;
  min-block-size: 56px;
  margin-block-start: 26px;
  padding: 0 30px;
  border: 2px solid var(--qhd-rsl-pink);
  border-radius: 999px;
  background-color: rgb(18 10 24 / 88%);
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  animation: qhd-rsl-wa-pulse 10s ease-in-out 3s infinite;
}

.qhd-rsl-benefits__whatsapp svg {
  flex: 0 0 auto;
}

/* Le thème parent souligne les liens du contenu (.page-content a, 0,1,1). */
.qhd-rsl-benefits a.qhd-rsl-benefits__whatsapp {
  text-decoration: none;
  color: #ffffff;
}

.qhd-rsl-benefits .qhd-rsl-benefits__whatsapp:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

@media (hover: hover) {
  .qhd-rsl-benefits__whatsapp:hover {
    transform: translateY(-2px);
    border-color: #ff4c78;
    box-shadow: 0 0 18px rgb(242 74 103 / 20%);
  }
}

/* Lueur occasionnelle du bouton (filter : le survol garde box-shadow). */
@keyframes qhd-rsl-wa-pulse {
  0%, 78%, 100% { filter: drop-shadow(0 0 0 transparent); }
  81% { filter: drop-shadow(0 0 12px rgb(242 74 103 / 45%)); }
  84% { filter: drop-shadow(0 0 0 transparent); }
}

.qhd-rsl-benefits__media {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
}

.qhd-rsl-benefits__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transition: scale 0.6s ease;
}

/* Fondu du haut de l'image dans le bandeau (superposition CSS uniquement). */
.qhd-rsl-benefits__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgb(5 16 29) 0%, rgb(5 16 29 / 0%) 28%);
}

/* --- 768 px : deux cartes par ligne ---------------------------------------- */

@media (min-width: 768px) {
  .qhd-rsl-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .qhd-rsl-benefits__cta-content {
    padding: 40px 40px 34px;
  }
}

/* --- 1025 px : trois colonnes, bandeau en deux colonnes -------------------- */

@media (min-width: 1025px) {
  .qhd-rsl-benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qhd-rsl-benefit {
    padding: 24px 26px;
  }

  .qhd-rsl-benefit__icon {
    inline-size: 54px;
    block-size: 54px;
  }

  .qhd-rsl-benefits__cta {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  }

  .qhd-rsl-benefits__cta-content {
    padding: 48px 20px 48px 48px;
  }

  .qhd-rsl-benefits__whatsapp {
    inline-size: auto;
    max-inline-size: none;
  }

  /* L'image remplit sa colonne, recadrée sur le sujet (personne et écran). */
  .qhd-rsl-benefits__media {
    min-block-size: 340px;
  }

  .qhd-rsl-benefits__image {
    position: absolute;
    inset: 0;
    block-size: 100%;
    object-fit: cover;
    object-position: 60% 50%;
  }

  /* Fondu du bord gauche de l'image dans le texte. */
  .qhd-rsl-benefits__media::after {
    background-image: linear-gradient(90deg, rgb(5 16 29) 0%, rgb(5 16 29 / 65%) 16%, rgb(5 16 29 / 0%) 45%);
  }
}

@media (hover: hover) and (min-width: 1025px) {
  .qhd-rsl-benefits__cta:hover .qhd-rsl-benefits__image {
    scale: 1.015;
  }
}

/* --- Apparition : cartes décalées, puis bandeau ---------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qhd-rsl-benefit {
      animation: qhd-rsl-step-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }

    .qhd-rsl-benefit:nth-child(2) { animation-range: entry 4% entry 54%; }
    .qhd-rsl-benefit:nth-child(3) { animation-range: entry 8% entry 58%; }
    .qhd-rsl-benefit:nth-child(4) { animation-range: entry 12% entry 62%; }
    .qhd-rsl-benefit:nth-child(5) { animation-range: entry 16% entry 66%; }
    .qhd-rsl-benefit:nth-child(6) { animation-range: entry 20% entry 70%; }

    .qhd-rsl-benefits__cta {
      animation: qhd-rsl-cta-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}

@keyframes qhd-rsl-cta-in {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

/* --- Mobile : pulse plus discret ------------------------------------------- */

@media (max-width: 767px) {
  .qhd-rsl-benefits {
    --qhd-rsl-pulse-rest: 0 0 5px rgb(242 74 103 / 12%);
    --qhd-rsl-pulse-peak: 0 0 9px rgb(242 74 103 / 28%);
  }

  .qhd-rsl-benefit {
    column-gap: 16px;
    padding: 20px 18px;
  }
}

/* Mouvement réduit : design statique, contenu entièrement visible. */
@media (prefers-reduced-motion: reduce) {
  .qhd-rsl-benefit__icon,
  .qhd-rsl-benefits__whatsapp {
    animation: none;
  }

  .qhd-rsl-benefit,
  .qhd-rsl-benefits__whatsapp,
  .qhd-rsl-benefits__image {
    transition: none;
  }

  .qhd-rsl-benefit:hover,
  .qhd-rsl-benefits__whatsapp:hover {
    transform: none;
  }

  .qhd-rsl-benefits__cta:hover .qhd-rsl-benefits__image {
    scale: none;
  }
}