/* ==========================================================================
   QUÉBEC HD — pages/home.css
   Styles spécifiques à la page d'accueil (slug « home »).
   Une feuille par page, jamais par section. Les composants réutilisables
   (typographie, boutons, pastille) restent dans general.css.

   Namespaces utilisés ici :
   - .qhd-hero-*     (section sections/hero.php)
   - .qhd-contenu-*  (section sections/contenu.php)
   ========================================================================== */

/* ==========================================================================
   Décor de la page d'accueil — ruban 3D
   --------------------------------------------------------------------------
   Une seule occurrence, posée sur le conteneur général de la page, derrière
   toutes les sections. Aucun shortcode, aucun balisage, aucun JavaScript :
   un seul pseudo-élément, pour que l'opacité du décor reste indépendante de
   celle des textes.

   L'URL est relative à CE fichier : le domaine n'est jamais figé, la migration
   fonctionne sans réécriture. Elle dépend de l'emplacement par défaut des
   médias (wp-content/uploads).

   `background-size: <largeur> auto` : l'image suit la largeur de l'écran et
   garde ses proportions — elle n'est jamais étirée sur la hauteur de la page.
   Le masque l'éteint vers le haut et vers le bas, pour que le fond uni
   #08090D prolonge la composition sans bord visible.
   ========================================================================== */

.qhd-theme.home {
  position: relative;
  z-index: 0;
}

.qhd-theme.home::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: url("../../../../../uploads/2026/09/qhd-accueil-background.webp");
  background-repeat: no-repeat;
  background-size: 126% auto;
  background-position: center 62vh;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 62%, transparent 88%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 62%, transparent 88%);
}

/* En colonne étroite, le hero occupe plus d'une hauteur d'écran : à 126 % de
   large le ruban resterait entièrement caché derrière lui. On l'agrandit et
   on le descend sous le hero, en gardant la même discrétion. */
@media (max-width: 767px) {
  .qhd-theme.home::before {
    background-size: 300% auto;
    background-position: center 128vh;
    opacity: 0.34;
  }
}


/* ==========================================================================
   Hero — H1 de l'accueil (sections/hero.php)
   --------------------------------------------------------------------------
   Mobile d'abord : contenu → visuel → avantages, une colonne.
   Dès 1024 px : texte à gauche, visuel à droite, avantages dessous.
   Le hero remonte sous l'en-tête transparent (marge négative) et réserve sa
   hauteur en padding : la marge est portée ici, jamais par l'en-tête.
   Couleurs locales : accent #F24A67 et son dégradé vers le magenta, réservés
   à cette section.
   ========================================================================== */

.qhd-hero {
  --qhd-hero-accent: #f24a67;
  --qhd-hero-magenta: #d545a6;
  --qhd-hero-gradient: linear-gradient(100deg, var(--qhd-hero-accent) 0%, var(--qhd-hero-magenta) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: calc(-1 * var(--qhd-header-h));
  padding-block: calc(var(--qhd-header-h) + clamp(1.5rem, 0.5rem + 3vw, 3.5rem)) clamp(3rem, 2rem + 3vw, 4.5rem);
  background-color: var(--qhd-bg);
}

.qhd-hero img {
  display: block;
}

/* --- Fond : Québec de nuit, éteint vers le bas (et vers le texte dès 1024) */

.qhd-hero__backdrop {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: -1;
  inline-size: 100%;
  max-inline-size: none;
  block-size: min(620px, 62%);
  object-fit: cover;
  object-position: 62% 35%;
  opacity: 0.42;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

/* --- Grille ---------------------------------------------------------------- */

.qhd-hero__inner {
  display: grid;
  grid-template-areas: "content" "visual" "stats";
  gap: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
}

/* --- Contenu --------------------------------------------------------------- */

.qhd-hero__content {
  grid-area: content;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  min-inline-size: 0;
}

.qhd-hero__content > * {
  margin: 0;
}

.qhd-hero__eyebrow {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--qhd-blue) 30%, var(--qhd-text-secondary));
}

.qhd-hero__title {
  font-family: var(--qhd-font-title);
  color: var(--qhd-text);
}

/* Tailles en unités de conteneur : le titre suit la largeur réelle de la
   colonne, quelle que soit la largeur de l'écran ou du conteneur Elementor. */
.qhd-hero__title-main {
  display: block;
  font-size: clamp(2.75rem, 15cqi, 6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}

.qhd-hero__title-accent {
  color: var(--qhd-hero-accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .qhd-hero__title-accent {
    background-image: var(--qhd-hero-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.qhd-hero__title-sub {
  display: block;
  margin-block-start: 0.55em;
  font-size: clamp(1.375rem, 5.4cqi, 2.625rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.qhd-hero__text {
  max-inline-size: 40em;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--qhd-text-secondary);
  text-wrap: pretty;
}

.qhd-hero__hl {
  font-weight: 500;
  color: var(--qhd-hero-accent);
}

.qhd-hero__strong {
  font-weight: 600;
  color: var(--qhd-text);
}

/* --- Boutons --------------------------------------------------------------
   19 px en graisse 700 : « grand texte » au sens WCAG. Le blanc sur le
   dégradé rose (≥ 3,5:1) atteint donc AA. */

.qhd-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  inline-size: 100%;
  margin-block-start: var(--qhd-space-2);
}

.qhd-hero__cta {
  min-block-size: 60px;
  padding: 8px 24px;
  gap: 10px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.qhd-hero__cta-chevron {
  flex: 0 0 auto;
}

.qhd-hero__cta--primary,
a.qhd-hero__cta--primary:not([href]):not([tabindex]) {
  border: 0;
  background-image: var(--qhd-hero-gradient);
  color: #ffffff;
  box-shadow: 0 14px 34px rgb(242 74 103 / 26%);
}

.qhd-hero__cta--primary:hover {
  color: #ffffff;
  filter: brightness(1.07);
}

.qhd-hero__cta--secondary {
  border: 1.5px solid rgb(255 255 255 / 68%);
  background-color: rgb(8 9 13 / 35%);
  color: var(--qhd-text);
}

.qhd-hero__cta--secondary:hover {
  border-color: #ffffff;
  background-color: rgb(255 255 255 / 6%);
  color: var(--qhd-text);
}

/* --- Visuel : téléviseur puis appareils en avant-plan ----------------------
   Les images ont un fond : leurs bords sont fondus dans le fond de la page.
   Le chevauchement est en pourcentage de la largeur : il reste proportionnel
   à toutes les tailles, sans positionnement absolu. */

.qhd-hero__visual {
  grid-area: visual;
  display: grid;
  inline-size: 100%;
  max-inline-size: 720px;
  justify-self: center;
  min-inline-size: 0;
}

.qhd-hero__tv,
.qhd-hero__devices {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.qhd-hero__tv {
  inline-size: 100%;
  block-size: auto;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 84%, transparent 100%);
}

.qhd-hero__devices {
  position: relative;
  z-index: 1;
  inline-size: 84%;
  block-size: auto;
  margin-block-start: -21%;
  margin-inline-start: 3%;
  justify-self: start;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 15%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 15%, #000 84%, transparent 100%);
}

/* --- Avantages ------------------------------------------------------------- */

.qhd-hero__stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qhd-space-5) var(--qhd-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qhd-hero__stat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--qhd-text);
}

.qhd-hero__stat-icon {
  flex: 0 0 auto;
  inline-size: 28px;
  block-size: 28px;
}

.qhd-hero__stat--accent .qhd-hero__stat-icon { color: var(--qhd-hero-accent); }
.qhd-hero__stat--blue .qhd-hero__stat-icon { color: var(--qhd-blue); }
.qhd-hero__stat--green .qhd-hero__stat-icon { color: var(--qhd-success); }
.qhd-hero__stat--violet .qhd-hero__stat-icon { color: color-mix(in srgb, var(--qhd-violet) 60%, #ffffff); }

/* Très petits écrans : le libellé de l'essai tient sur une ligne. Le bouton
   rose garde 19 px (grand texte, condition du contraste AA). */
@media (max-width: 479px) {
  .qhd-hero__cta {
    padding-inline: 18px;
  }

  .qhd-hero__cta--secondary {
    font-size: 1rem;
  }
}

/* --- 480 px : boutons côte à côte, trois avantages par ligne ---------------- */

@media (min-width: 480px) {
  .qhd-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    inline-size: auto;
  }

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

/* --- 768 px : avantages sur une ligne, séparés par un filet ----------------- */

@media (min-width: 768px) {
  .qhd-hero__stats {
    grid-template-columns: repeat(5, auto);
    justify-content: start;
    gap: 0;
  }

  .qhd-hero__stat {
    padding-inline: var(--qhd-space-4);
    font-size: 0.8125rem;
  }

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

  .qhd-hero__stat + .qhd-hero__stat {
    border-inline-start: 1px solid rgb(255 255 255 / 16%);
  }
}

/* --- 1024 px : deux colonnes ------------------------------------------------ */

@media (min-width: 1024px) {
  .qhd-hero__inner {
    grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
    grid-template-areas:
      "content visual"
      "stats stats";
    align-items: center;
    column-gap: clamp(2rem, 3vw, 3.5rem);
    row-gap: clamp(2.5rem, 3vw, 3.5rem);
  }

  .qhd-hero__visual {
    max-inline-size: none;
  }

  .qhd-hero__backdrop {
    inline-size: 74%;
    block-size: 80%;
    object-position: 55% 30%;
    opacity: 1;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 36%),
      linear-gradient(180deg, #000 48%, transparent 98%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 36%),
      linear-gradient(180deg, #000 48%, transparent 98%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* ==========================================================================
   Section 02 « contenu » (sections/contenu.php)
   --------------------------------------------------------------------------
   Mobile : titre → textes → arguments → bouton → mosaïque 2 × 2.
   Dès 768 px : mosaïque à gauche (≈ 38 %), texte à droite (≈ 62 %).
   Accent #F24A67 local, comme le hero. Halos très discrets, localisés.
   ========================================================================== */

.qhd-contenu {
  --qhd-contenu-accent: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 2.2rem + 5.4vw, 7.25rem); /* 64 → 116 px */
  /* Fond demandé pour la section : masque le ruban décoratif de la page
     (.qhd-theme.home::before) derrière elle. */
  background-color: #06070b;
}

/* Halos colorés (bleu, rose, violet) qui dérivent lentement : ils cassent le
   noir sans jamais passer devant le texte. Plus grands que la section pour
   que la dérive ne découvre aucun bord. */
.qhd-contenu::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(30% 34% at 26% 55%, rgb(86 154 240 / 22%), transparent 70%),
    radial-gradient(28% 32% at 76% 28%, rgb(242 74 103 / 17%), transparent 70%),
    radial-gradient(30% 26% at 58% 86%, rgb(139 92 246 / 18%), transparent 70%);
  /* Lumière éteinte avant les bords haut et bas : aucune ligne de coupure
     avec les sections voisines. */
  -webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 32%, #000 68%, transparent 86%);
  mask-image: linear-gradient(180deg, transparent 14%, #000 32%, #000 68%, transparent 86%);
  animation: qhd-contenu-drift 22s ease-in-out infinite alternate;
}

/* Filet néon en haut de la section : transition lumineuse depuis le hero. */
.qhd-contenu::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: min(80%, 920px);
  block-size: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent, var(--qhd-contenu-accent) 30%, #a06bff 55%, var(--qhd-blue) 78%, transparent);
  box-shadow: 0 0 14px 1px rgb(242 74 103 / 45%), 0 0 36px 6px rgb(139 92 246 / 18%);
  animation: qhd-contenu-breathe 4.5s ease-in-out infinite alternate;
}

@keyframes qhd-contenu-drift {
  to { transform: translate3d(5%, -4%, 0) scale(1.08); }
}

@keyframes qhd-contenu-breathe {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.qhd-contenu__inner {
  display: grid;
  grid-template-areas: "body" "media";
  gap: var(--qhd-space-7);
  width: min(100% - (var(--qhd-gutter) * 2), 1220px);
}

/* --- Texte ----------------------------------------------------------------- */

.qhd-contenu__body {
  grid-area: body;
  min-inline-size: 0;
}

.qhd-contenu__title {
  margin: 0 0 var(--qhd-space-5);
  font-family: var(--qhd-font-title);
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); /* 28 → 40 px */
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-contenu__accent {
  color: var(--qhd-contenu-accent);
  text-shadow: 0 0 22px rgb(242 74 103 / 45%);
}

.qhd-contenu__description {
  margin: 0;
  max-inline-size: 42em;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.65;
  color: #d4d6dc;
}

.qhd-contenu__description + .qhd-contenu__description {
  margin-block-start: 18px;
}

.qhd-contenu__nowrap {
  white-space: nowrap;
}

.qhd-contenu__benefits {
  display: grid;
  gap: 14px;
  margin: var(--qhd-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.qhd-contenu__benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.55;
  color: #d4d6dc;
}

.qhd-contenu__check {
  flex: 0 0 auto;
  margin-block-start: 0.1em;
  color: var(--qhd-contenu-accent);
  filter: drop-shadow(0 0 6px rgb(242 74 103 / 55%));
}

.qhd-contenu__benefit-lead {
  font-weight: 700;
  color: var(--qhd-text);
}

/* --- Bouton ----------------------------------------------------------------
   19 px en graisse 700 : « grand texte » WCAG, blanc sur #F24A67 conforme AA. */

.qhd-contenu__cta {
  margin-block-start: var(--qhd-space-6);
  min-block-size: 52px;
  padding: 8px 26px;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background-color: var(--qhd-contenu-accent);
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 10px 26px rgb(242 74 103 / 22%);
  transition: transform 0.25s var(--qhd-ease), filter 0.25s var(--qhd-ease);
  animation: qhd-contenu-pulse 2.8s ease-out infinite;
}

/* Onde lumineuse qui s'échappe du bouton, toutes les 2,8 s. */
@keyframes qhd-contenu-pulse {
  0% { box-shadow: 0 10px 26px rgb(242 74 103 / 22%), 0 0 0 0 rgb(242 74 103 / 50%); }
  70%,
  100% { box-shadow: 0 10px 26px rgb(242 74 103 / 22%), 0 0 0 14px rgb(242 74 103 / 0%); }
}

.qhd-contenu__cta:hover {
  color: #ffffff;
  filter: brightness(1.08);
}

.qhd-contenu__cta-arrow {
  flex: 0 0 auto;
  transition: transform 0.25s var(--qhd-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .qhd-contenu__cta:hover .qhd-contenu__cta-arrow {
    transform: translateX(3px);
  }
}

/* --- Mosaïque 2 × 2 -------------------------------------------------------- */

.qhd-contenu__media {
  grid-area: media;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cadre néon : un trait de lumière rose → violet → bleu fait le tour de la
   mosaïque. L'angle est une propriété animable (@property) ; sans support,
   le cadre reste simplement fixe. Positionnés en absolu, ces calques ne
   prennent aucune case de la grille. */
@property --qhd-contenu-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.qhd-contenu__media::before,
.qhd-contenu__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.qhd-contenu__media::before {
  inset: -12px;
  padding: 2px;
  border-radius: 20px;
  background-image:
    conic-gradient(from var(--qhd-contenu-angle), transparent 0 58%, var(--qhd-contenu-accent) 72%, #a06bff 84%, var(--qhd-blue) 94%, transparent 100%),
    linear-gradient(rgb(255 255 255 / 8%), rgb(255 255 255 / 8%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgb(242 74 103 / 70%)) drop-shadow(0 0 14px rgb(139 92 246 / 40%));
  animation: qhd-contenu-spin 7s linear infinite;
}

/* Lueur douce derrière les visuels, qui respire. */
.qhd-contenu__media::after {
  inset: -8%;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 25% 25%, rgb(242 74 103 / 42%), transparent 55%),
    radial-gradient(circle at 80% 80%, rgb(86 154 240 / 40%), transparent 55%);
  filter: blur(40px);
  animation: qhd-contenu-breathe 5s ease-in-out infinite alternate;
}

@keyframes qhd-contenu-spin {
  to { --qhd-contenu-angle: 360deg; }
}

.qhd-contenu__tile {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 10px;
  background-color: var(--qhd-surface);
  box-shadow: 0 14px 32px rgb(0 0 0 / 30%);
  transition: transform 0.3s var(--qhd-ease), border-color 0.3s var(--qhd-ease), box-shadow 0.3s var(--qhd-ease);
}

/* Format natif 4:5 : aucun rognage, le libellé intégré reste visible. */
.qhd-contenu__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  transition: transform 0.5s var(--qhd-ease);
}

/* Survol : la carte se soulève et s'allume en rose. */
@media (hover: hover) {
  .qhd-contenu__tile:hover {
    transform: translateY(-4px);
    border-color: rgb(242 74 103 / 60%);
    box-shadow: 0 0 0 1px rgb(242 74 103 / 30%), 0 18px 40px rgb(242 74 103 / 20%);
  }

  .qhd-contenu__tile:hover .qhd-contenu__img {
    transform: scale(1.04);
  }
}

/* Apparition des cartes au défilement, en cascade (navigateurs compatibles). */
@supports (animation-timeline: view()) {
  .qhd-contenu__tile {
    animation: qhd-contenu-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  .qhd-contenu__tile:nth-child(2) { animation-range: entry 8% entry 78%; }
  .qhd-contenu__tile:nth-child(3) { animation-range: entry 16% entry 86%; }
  .qhd-contenu__tile:nth-child(4) { animation-range: entry 24% entry 94%; }
}

/* translate/scale plutôt que transform : le survol (transform) reste actif
   même une fois l'apparition terminée. */
@keyframes qhd-contenu-rise {
  from { opacity: 0; translate: 0 24px; scale: 0.97; }
  to { opacity: 1; translate: none; scale: none; }
}

/* Mouvement réduit demandé par le système : lumières fixes, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .qhd-contenu::before,
  .qhd-contenu::after,
  .qhd-contenu__media::before,
  .qhd-contenu__media::after,
  .qhd-contenu__cta,
  .qhd-contenu__tile {
    animation: none;
  }

  .qhd-contenu__tile,
  .qhd-contenu__img {
    transition: none;
  }
}

/* --- Tablette : deux colonnes resserrées ---------------------------------- */

@media (min-width: 768px) {
  .qhd-contenu__inner {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-areas: "media body";
    align-items: center;
    gap: clamp(2rem, 0.5rem + 4vw, 4rem); /* 32 → 64 px */
  }

  .qhd-contenu__media {
    gap: 10px;
  }
}

@media (min-width: 1024px) {
  .qhd-contenu__inner {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  }

  .qhd-contenu__media {
    gap: 14px;
  }
}

/* ==========================================================================
   Section 03 « abonnements » (sections/abonnements.php)
   --------------------------------------------------------------------------
   Titre, texte et boutons centrés, puis interrupteur Essentiel / Premium et
   quatre cartes de prix (1 colonne, 2 dès 640 px, 4 dès 1200 px).
   Interrupteur en CSS seul (:has) ; enseignes néon : assets/js/pages/home.js.
   ========================================================================== */

.qhd-abo {
  --qhd-abo-accent: #f24a67;
  --qhd-abo-card: #0d1522;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); /* 48 → 80 px */
  background-color: #06070b;
}

/* Fond animé « aurore » : deux calques de lumière (magenta + violet, bleu +
   rose) qui glissent et respirent très lentement, à des rythmes différents,
   pour que le mouvement ne se répète jamais à l'identique.
   - Uniquement transform et opacity : animé par le GPU, sans repeindre la page.
   - Calques plus grands que la section : la dérive ne découvre aucun bord.
   - Masque en haut et en bas : la lumière s'éteint avant les bords, la section
     se fond dans ses voisines sans ligne de coupure. */
.qhd-abo::before,
.qhd-abo::after {
  content: "";
  position: absolute;
  inset: -25% -15%;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 34%, #000 66%, transparent 82%);
  mask-image: linear-gradient(180deg, transparent 18%, #000 34%, #000 66%, transparent 82%);
}

/* Calque 1 : magenta derrière les cartes, violet au centre. */
.qhd-abo::before {
  background-image:
    radial-gradient(26% 30% at 78% 38%, rgb(242 74 103 / 16%), transparent 70%),
    radial-gradient(24% 26% at 50% 62%, rgb(139 92 246 / 11%), transparent 70%);
  animation: qhd-abo-aurora-a 28s ease-in-out infinite alternate;
}

/* Calque 2 : bleu nuit sous le texte, touche rose en bas à droite. */
.qhd-abo::after {
  background-image:
    radial-gradient(28% 32% at 22% 60%, rgb(86 154 240 / 12%), transparent 70%),
    radial-gradient(20% 22% at 88% 70%, rgb(217 69 166 / 9%), transparent 70%);
  animation: qhd-abo-aurora-b 36s ease-in-out infinite alternate;
}

@keyframes qhd-abo-aurora-a {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(-6%, 4%, 0) scale(1.08); opacity: 1; }
  100% { transform: translate3d(-2%, -5%, 0) scale(1.03); opacity: 0.9; }
}

@keyframes qhd-abo-aurora-b {
  0% { transform: translate3d(0, 0, 0) scale(1.04); opacity: 1; }
  50% { transform: translate3d(7%, -3%, 0) scale(1); opacity: 0.8; }
  100% { transform: translate3d(3%, 5%, 0) scale(1.1); opacity: 0.95; }
}

/* Enseignes néon : composant partagé (general.css, .qhd-neon ; script
   assets/js/neons.js). Le calque est posé dans sections/abonnements.php. */

.qhd-abo__inner {
  display: grid;
  gap: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

/* --- En-tête centré : titre, texte, boutons -------------------------------- */

.qhd-abo__content {
  min-inline-size: 0;
  text-align: center;
}

.qhd-abo__title {
  max-inline-size: 960px;
  margin: 0 auto var(--qhd-space-5);
  font-family: var(--qhd-font-title);
  font-size: clamp(1.75rem, 1.3rem + 1.45vw, 2.625rem); /* 28 → 42 px */
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-abo__accent,
.qhd-abo__hl {
  color: var(--qhd-abo-accent);
}

.qhd-abo__description {
  max-inline-size: 920px;
  margin: 0 auto;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.68;
  color: #d4d6dc;
  text-wrap: pretty;
}

.qhd-abo__hl,
.qhd-abo__nowrap {
  white-space: nowrap;
}

.qhd-abo__hl {
  font-weight: 500;
}

.qhd-abo__strong {
  font-weight: 600;
  color: var(--qhd-text);
}

/* --- Boutons ---------------------------------------------------------------
   19 px en graisse 700 (« grand texte » WCAG) : le blanc sur le vert atteint
   AA. Rayon modéré, pas de pilule. */

.qhd-abo__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-block-start: var(--qhd-space-6);
}

.qhd-abo__btn {
  inline-size: 100%;
  max-inline-size: 380px;
  min-block-size: 54px;
  padding: 8px 20px;
  gap: 12px;
  border-radius: 12px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.25s var(--qhd-ease), filter 0.25s var(--qhd-ease),
    background-color 0.25s var(--qhd-ease), border-color 0.25s var(--qhd-ease);
}

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

.qhd-abo__btn-icon,
.qhd-abo__chevron {
  flex: 0 0 auto;
}

/* Vert WhatsApp partagé avec la section 05 (.qhd-avantages__cta--whatsapp). */
.qhd-abo__btn--whatsapp,
.qhd-avantages__cta--whatsapp {
  border: 0;
  background-color: #1a9e52;
  color: #ffffff;
  box-shadow: 0 10px 26px rgb(26 158 82 / 22%);
}

.qhd-abo__btn--whatsapp:hover,
.qhd-avantages__cta--whatsapp:hover {
  color: #ffffff;
  filter: brightness(1.08);
}

.qhd-abo__btn--contact {
  border: 1px solid rgb(255 255 255 / 65%);
  background-color: transparent;
  color: var(--qhd-text);
}

.qhd-abo__btn--contact:hover {
  border-color: #ffffff;
  background-color: rgb(255 255 255 / 6%);
  color: var(--qhd-text);
}

/* --- Interrupteur Essentiel / Premium ---------------------------------------
   Vraie case à cocher (role="switch"), invisible mais posée sur la piste :
   clic, toucher, Tab + Espace fonctionnent nativement. Rose = Essentiel,
   or = Premium. Le libellé actif passe en blanc. */

.qhd-abo {
  --qhd-abo-gold: #f2c511;
}

.qhd-abo__switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.qhd-abo__switch-label {
  font-family: var(--qhd-font-title);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.25s ease;
}

.qhd-abo__switch-label--premium {
  color: var(--qhd-text-muted);
  cursor: pointer;
}

.qhd-abo__switch:has(.qhd-abo__switch-input:checked) .qhd-abo__switch-label--essentiel {
  color: var(--qhd-text-muted);
}

.qhd-abo__switch:has(.qhd-abo__switch-input:checked) .qhd-abo__switch-label--premium {
  color: #ffffff;
}

.qhd-abo__switch-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: 60px;
  block-size: 32px;
}

.qhd-abo__switch-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.qhd-abo__switch-track {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 999px;
  background-color: var(--qhd-abo-accent);
  box-shadow: 0 6px 18px rgb(242 74 103 / 25%);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

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

.qhd-abo__switch-input:checked + .qhd-abo__switch-track {
  background-color: var(--qhd-abo-gold);
  box-shadow: 0 6px 18px rgb(242 197 17 / 25%);
}

.qhd-abo__switch-input:checked + .qhd-abo__switch-track .qhd-abo__switch-thumb {
  transform: translateX(28px);
  background-color: #15171c;
}

.qhd-abo__switch-input:focus-visible + .qhd-abo__switch-track {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
}

/* --- Nombre d'appareils (deux formules) -------------------------------------
   Même composant que la page « Abonnements » : barre segmentée de vrais
   boutons radio, chaque radio invisible recouvre son segment (clic, toucher,
   flèches du clavier natifs). Segment choisi en rose (Essentiel) ou en or
   (Premium). Masquée sans JavaScript (assets/js/pages/home.js la révèle). */

.qhd-abo__devices {
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 760px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

.qhd-abo__devices[hidden] {
  display: none;
}

.qhd-abo__devices-legend {
  display: block;
  inline-size: 100%;
  margin: 0 0 10px;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--qhd-text-muted);
}

.qhd-abo__devices-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgb(80 120 200 / 30%);
  border-radius: 10px;
  background-color: var(--qhd-abo-card);
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
}

.qhd-abo__device {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.qhd-abo__device + .qhd-abo__device {
  border-inline-start: 1px solid rgb(255 255 255 / 8%);
}

.qhd-abo__device-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.qhd-abo__device-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  block-size: 100%;
  min-block-size: 54px;
  padding: 8px 4px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.15;
  transition: background-color 0.2s ease;
}

.qhd-abo__device-num {
  font-family: var(--qhd-font-title);
  font-size: 1.125rem;
}

.qhd-abo__device-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c9cfda;
}

.qhd-abo__device:hover .qhd-abo__device-text {
  background-color: rgb(255 255 255 / 5%);
}

.qhd-abo__device-input:checked + .qhd-abo__device-text {
  background-color: #d93a58;
}

.qhd-abo__device-input:checked + .qhd-abo__device-text .qhd-abo__device-unit {
  color: #ffffff;
}

/* Premium : segment choisi en or, texte sombre. */
.qhd-abo:has(.qhd-abo__switch-input:checked) .qhd-abo__device-input:checked + .qhd-abo__device-text {
  background-color: var(--qhd-abo-gold);
  color: #111318;
}

.qhd-abo:has(.qhd-abo__switch-input:checked) .qhd-abo__device-input:checked + .qhd-abo__device-text .qhd-abo__device-unit {
  color: #111318;
}

.qhd-abo__device-input:focus-visible + .qhd-abo__device-text {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: -3px;
}

/* Dès 600 px : « 1 appareil » sur une seule ligne. */
@media (min-width: 600px) {
  .qhd-abo__device-text {
    flex-direction: row;
    gap: 6px;
  }

  .qhd-abo__device-num,
  .qhd-abo__device-unit {
    font-size: 1rem;
    font-weight: 700;
  }

  .qhd-abo__device-unit {
    color: #ffffff;
  }
}

/* --- Cartes de prix ---------------------------------------------------------
   Une grille par formule. Par défaut : Essentiel visible, Premium masquée ;
   case cochée : l'inverse. Sans prise en charge de :has (navigateurs très
   anciens), les deux grilles restent visibles : aucun prix n'est perdu. */

.qhd-abo__plans {
  display: grid;
  gap: 18px;
  min-inline-size: 0;
}

.qhd-abo__plans--essentiel {
  --plan: var(--qhd-abo-accent);
  --plan-strong: #d93a58; /* un cran plus sombre : texte blanc AA en petite taille */
  --plan-ink: #ffffff;
}

.qhd-abo__plans--premium {
  --plan: var(--qhd-abo-gold);
  --plan-strong: var(--qhd-abo-gold);
  --plan-ink: #111318;
}

@supports selector(:has(*)) {
  .qhd-abo__plans--premium {
    display: none;
  }

  .qhd-abo:has(.qhd-abo__switch-input:checked) .qhd-abo__plans--essentiel {
    display: none;
  }

  .qhd-abo:has(.qhd-abo__switch-input:checked) .qhd-abo__plans--premium {
    display: grid;
  }
}

.qhd-abo__plan {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background-color: var(--qhd-abo-card);
  background-image: linear-gradient(180deg, rgb(22 36 58 / 55%), rgb(13 21 34 / 0%) 45%);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.qhd-abo__plan:hover {
  border-color: color-mix(in srgb, var(--plan) 45%, transparent);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .qhd-abo__plan:hover {
    transform: translateY(-3px);
  }
}

.qhd-abo__plan-head {
  padding: 18px 16px 16px;
  text-align: center;
}

.qhd-abo__plan-title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--plan);
}

.qhd-abo__plan-price {
  margin: 4px 0 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.625rem, 1.45rem + 0.5vw, 1.875rem); /* 26 → 30 px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}

/* Pas de prix de référence pour cette combinaison : bandeau masqué
   (display: flex écraserait l'attribut hidden). */
.qhd-abo__plan-strip[hidden] {
  display: none;
}

/* Bandeau « Prix original | 50% OFF ». */
.qhd-abo__plan-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin: 0;
  /* Resserré pour que « Prix original 379,98$ | 50% OFF » tienne sur une
     ligne ; retour à la ligne conservé en secours sur écran très étroit. */
  padding: 10px 8px;
  background-color: var(--plan-strong);
  color: var(--plan-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.qhd-abo__plan-strip > span + span {
  padding-inline-start: 6px;
  border-inline-start: 1.5px solid currentColor;
}

/* Pastilles de qualité, entre deux filets. */
.qhd-abo__quality {
  display: flex;
  justify-content: center;
  gap: 8px;
  inline-size: fit-content;
  min-inline-size: 58%;
  margin: 20px auto 4px;
  padding: 12px 16px;
  border-block: 1px solid rgb(255 255 255 / 30%);
  list-style: none;
}

.qhd-abo__quality li {
  margin: 0;
  padding: 2px 6px;
  border: 2px solid #ffffff;
  border-radius: 5px;
  font-family: var(--qhd-font-title);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
}

.qhd-abo__plan-features {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0 18px;
  list-style: none;
}

.qhd-abo__plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #d4d6dc;
}

.qhd-abo__check {
  flex: 0 0 auto;
  margin-block-start: 0.12em;
  color: var(--plan);
}

/* Bouton : 17 px gras, fond plus sombre en Essentiel (texte blanc AA),
   texte sombre sur l'or en Premium. */
.qhd-abo__plan-cta {
  align-self: center;
  min-block-size: 46px;
  margin: 22px 18px;
  padding: 8px 26px;
  border: 0;
  border-radius: 8px;
  background-color: var(--plan-strong);
  color: var(--plan-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.qhd-abo__plan-cta:hover {
  color: var(--plan-ink);
  filter: brightness(1.08);
}

/* --- 480 px : boutons du haut côte à côte ---------------------------------- */

@media (min-width: 480px) {
  .qhd-abo__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

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

/* --- 640 px : deux cartes par ligne ; 1200 px : quatre ---------------------- */

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

@media (min-width: 1200px) {
  .qhd-abo__plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .qhd-abo::before,
  .qhd-abo::after {
    animation: none;
  }

  .qhd-abo__plan,
  .qhd-abo__btn,
  .qhd-abo__plan-cta,
  .qhd-abo__switch-track,
  .qhd-abo__switch-thumb,
  .qhd-abo__switch-label,
  .qhd-abo__device-text {
    transition: none;
  }
}

/* ==========================================================================
   Section 04 « étapes » (sections/etapes.php)
   --------------------------------------------------------------------------
   Mobile et tablette : une colonne (720 px max), cartes pleine largeur.
   Dès 1100 px : trois cartes côte à côte, flèches discrètes entre elles.
   Aucune animation permanente : seulement des transitions au survol.
   ========================================================================== */

.qhd-etapes {
  --qhd-etapes-accent: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); /* 48 → 80 px */
  background-color: #06070b;
}

/* Deux dégradés d'angle, comme la maquette : bleu électrique en haut à
   gauche, magenta en bas à droite. Fixes. Un fondu très court sur les bords
   haut et bas évite toute ligne de coupure avec les sections voisines.
   Règle partagée avec la section 06 (.qhd-test) : même fond. */
.qhd-etapes::before,
.qhd-test::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(34% 62% at 0% 0%, rgb(37 99 235 / 50%), rgb(37 99 235 / 12%) 45%, transparent 75%),
    radial-gradient(34% 62% at 100% 100%, rgb(214 36 120 / 45%), rgb(214 36 120 / 10%) 45%, transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

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

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

.qhd-etapes__header {
  max-inline-size: 960px;
  margin-inline: auto;
  text-align: center;
}

.qhd-etapes__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.75rem, 1.3rem + 1.45vw, 2.625rem); /* 28 → 42 px */
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-etapes__accent {
  color: var(--qhd-etapes-accent);
}

.qhd-etapes__intro {
  margin: 20px auto 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.65;
  color: #c7ceda;
  text-wrap: pretty;
}

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

.qhd-etapes__list {
  display: grid;
  gap: 20px;
  max-inline-size: 720px;
  margin: clamp(2rem, 1.2rem + 2.4vw, 3.25rem) auto 0; /* 32 → 52 px */
  padding: 0;
  list-style: none;
}

/* Pastille + icône sur la première ligne, titre et texte dessous. */
.qhd-etapes__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 20px;
  margin: 0;
  padding: clamp(24px, 1.2rem + 1vw, 34px);
  border: 1px solid rgb(80 120 200 / 25%);
  border-radius: 16px;
  background-color: #0d1522;
  background-image: linear-gradient(180deg, rgb(22 36 58 / 55%), rgb(13 21 34 / 0%) 60%);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.qhd-etapes__card:hover {
  border-color: rgb(80 120 200 / 50%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .qhd-etapes__card:hover {
    transform: translateY(-3px);
  }
}

.qhd-etapes__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background-color: var(--qhd-etapes-accent);
  color: #06070b;
  font-family: var(--qhd-font-title);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 20px rgb(242 74 103 / 15%);
}

.qhd-etapes__icon {
  align-self: center;
  justify-self: start;
  inline-size: 60px;
  block-size: 60px;
  color: #ffffff;
}

.qhd-etapes__icon-accent {
  stroke: var(--qhd-etapes-accent);
}

.qhd-etapes__icon-dot {
  fill: var(--qhd-etapes-accent);
}

.qhd-etapes__card-title {
  grid-column: 1 / -1;
  margin: 22px 0 14px;
  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;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
}

.qhd-etapes__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  color: #c3cad6;
}

/* Flèches : seulement quand les cartes sont côte à côte. */
.qhd-etapes__arrow {
  display: none;
}

/* --- Bouton ----------------------------------------------------------------
   19 px en graisse 700 : « grand texte » WCAG, le blanc sur le dégradé rose
   atteint AA. Pilule, comme les boutons du hero. */

.qhd-etapes__action {
  display: flex;
  justify-content: center;
  margin: clamp(2.25rem, 1.8rem + 1.2vw, 3rem) 0 0; /* 36 → 48 px */
}

.qhd-etapes__cta {
  inline-size: 100%;
  max-inline-size: 400px;
  min-block-size: 56px;
  padding: 8px 40px;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #e92376, #ff4a68);
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgb(242 74 103 / 22%);
  transition: transform 0.25s ease, filter 0.25s ease;
}

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

.qhd-etapes__cta:hover {
  color: #ffffff;
  filter: brightness(1.08);
}

.qhd-etapes__cta-chevron {
  flex: 0 0 auto;
}

@media (min-width: 480px) {
  .qhd-etapes__cta {
    inline-size: auto;
  }
}

/* --- 1100 px : trois colonnes ---------------------------------------------- */

@media (min-width: 1100px) {
  .qhd-etapes__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    max-inline-size: none;
  }

  .qhd-etapes__card {
    min-block-size: 300px;
  }

  /* Flèche centrée dans la gouttière de 30 px, à droite de la carte. */
  .qhd-etapes__arrow {
    display: block;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -27px;
    color: var(--qhd-etapes-accent);
    opacity: 0.8;
    transform: translateY(-50%);
  }
}

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

/* ==========================================================================
   Section 05 « avantages » (sections/avantages.php)
   --------------------------------------------------------------------------
   Fond : dégradé propre (magenta en haut à droite, bleu à gauche), mêmes
   teintes et même fondu de bords que la section 04.
   Cartes : même surface que la section 04 (bleu nuit + reflet supérieur).
   WhatsApp : vert partagé avec la section 03 (.qhd-abo__btn--whatsapp).
   Mobile : une colonne. 768 px : deux colonnes. 1280 px : quatre colonnes
   (en dessous, quatre cartes seraient trop étroites pour leurs boutons).
   Aucune animation permanente : seulement des transitions au survol.
   ========================================================================== */

.qhd-avantages {
  --qhd-avantages-accent: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); /* 48 → 80 px, comme les sections 03 et 04 */
  background-color: #06070b;
}

/* Dégradé propre à la section, disposé à l'inverse de la section 04 :
   orange du logo en haut à droite, avec un cœur jaune plus petit (la pointe
   du « D »), bleu électrique allongé le long du bord gauche, vers le bas.
   Le rose reste à la section 04 : au passage 04 → 05, on retrouve la suite
   rose → orange → jaune du logo au lieu d'une seule tache rose.
   Même fondu de bords que les autres sections : même famille visuelle.
   Règle partagée avec la FAQ (.qhd-faq). */
.qhd-avantages::before,
.qhd-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(14% 26% at 97% 6%, rgb(255 227 74 / 16%), transparent 75%),
    radial-gradient(30% 58% at 100% 4%, rgb(255 152 46 / 36%), rgb(255 91 103 / 9%) 48%, transparent 75%),
    radial-gradient(26% 78% at 0% 72%, rgb(37 99 235 / 45%), rgb(37 99 235 / 10%) 45%, transparent 75%),
    radial-gradient(40% 40% at 50% 100%, rgb(139 92 246 / 8%), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Mobile : section haute et étroite, halos un peu plus larges et plus doux. */
@media (max-width: 767px) {
  .qhd-avantages::before,
  .qhd-faq::before {
    background-image:
      radial-gradient(60% 30% at 100% 2%, rgb(255 152 46 / 30%), rgb(255 91 103 / 7%) 48%, transparent 75%),
      radial-gradient(55% 40% at 0% 72%, rgb(37 99 235 / 36%), rgb(37 99 235 / 8%) 45%, transparent 75%);
  }
}

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

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

.qhd-avantages__header {
  text-align: center;
}

.qhd-avantages__title {
  max-inline-size: 1100px;
  margin: 0 auto;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.75rem, 1.3rem + 1.45vw, 2.625rem); /* 28 → 42 px */
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-avantages__accent {
  color: var(--qhd-avantages-accent);
}

.qhd-avantages__intro {
  max-inline-size: 1100px;
  margin: 20px auto 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.65;
  color: #c9cfda;
  text-wrap: pretty;
}

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

.qhd-avantages__grid {
  display: grid;
  gap: 20px;
  margin-block-start: clamp(2rem, 1.2rem + 2.4vw, 3.125rem); /* 32 → 50 px */
}

.qhd-avantages__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  block-size: 100%;
  padding: 28px 26px;
  border: 1px solid rgb(80 120 200 / 25%);
  border-radius: 16px;
  background-color: #0d1522;
  background-image: linear-gradient(180deg, rgb(22 36 58 / 55%), rgb(13 21 34 / 0%) 60%);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.qhd-avantages__card:hover {
  border-color: rgb(242 74 103 / 38%);
  box-shadow: 0 14px 34px rgb(0 0 0 / 28%);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .qhd-avantages__card:hover {
    transform: translateY(-3px);
  }
}

.qhd-avantages__icon {
  flex: 0 0 auto;
  inline-size: 58px;
  block-size: 58px;
  color: #ffffff;
  filter: drop-shadow(0 0 8px rgb(242 74 103 / 15%));
}

.qhd-avantages__icon-accent {
  stroke: var(--qhd-avantages-accent);
}

.qhd-avantages__card-title {
  margin: 18px 0 14px;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.4375rem); /* 20 → 23 px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: pretty;
}

.qhd-avantages__text {
  margin: 0 0 24px;
  font-size: clamp(0.9375rem, 0.92rem + 0.08vw, 1rem); /* 15 → 16 px */
  line-height: 1.6;
  color: #c5cbd6;
}

/* --- Boutons : poussés en bas, alignés d'une carte à l'autre --------------- */

.qhd-avantages__cta {
  inline-size: 100%;
  min-block-size: 50px;
  margin-block-start: auto;
  padding: 8px 16px;
  gap: 8px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease,
    background-color 0.25s ease, filter 0.25s ease;
}

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

/* Boutons sobres (les trois premiers). */
.qhd-avantages__cta:not(.qhd-avantages__cta--whatsapp) {
  border: 1px solid rgb(255 255 255 / 65%);
  background-color: transparent;
  color: var(--qhd-text);
}

.qhd-avantages__cta:not(.qhd-avantages__cta--whatsapp):hover {
  border-color: var(--qhd-avantages-accent);
  background-color: rgb(242 74 103 / 8%);
  color: var(--qhd-text);
}

.qhd-avantages__cta--whatsapp {
  font-weight: 700;
}

.qhd-avantages__cta-icon,
.qhd-avantages__chevron {
  flex: 0 0 auto;
}

/* --- 768 px : deux colonnes ------------------------------------------------ */

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

/* --- 1280 px : quatre colonnes --------------------------------------------- */

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

  .qhd-avantages__card {
    padding: 28px 22px;
  }

  .qhd-avantages__cta {
    padding-inline: 12px;
  }
}

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

/* ==========================================================================
   Section 06 « test gratuit » (sections/test-gratuit.php)
   --------------------------------------------------------------------------
   Fond : règle partagée avec la section 04 (.qhd-etapes::before, plus haut) :
   bleu en haut à gauche (il prolonge le bleu du bas de la section 05),
   magenta en bas à droite, derrière l'image.
   Bouton : mêmes règles que le bouton rose de la section 04.
   Mobile et tablette : texte puis image. Dès 1024 px : texte à gauche (46 %),
   image à droite (54 %), fondue dans le fond côté texte : une seule bannière.
   ========================================================================== */

.qhd-test {
  --qhd-test-accent: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Haut resserré (24 → 40 px), bas légèrement réduit (40 → 64 px). */
  padding-block: clamp(1.5rem, 0.9rem + 1.8vw, 2.5rem) clamp(2.5rem, 1.6rem + 2.7vw, 4rem);
  background-color: #06070b;
}

.qhd-test__inner {
  display: grid;
  gap: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

.qhd-test__content {
  min-inline-size: 0;
}

.qhd-test__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.875rem); /* 28 → 46 px */
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-test__accent {
  color: var(--qhd-test-accent);
}

.qhd-test__description {
  max-inline-size: 640px;
  margin: 22px 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.65;
  color: #c9cfd8;
  text-wrap: pretty;
}

/* --- Bouton : mêmes règles que .qhd-etapes__cta (section 04) --------------- */

.qhd-test__action {
  margin: clamp(1.75rem, 1.4rem + 1vw, 2.25rem) 0 0;
}

.qhd-test__cta {
  inline-size: 100%;
  max-inline-size: 380px;
  min-block-size: 56px;
  padding: 8px 30px 8px 14px;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #e92376, #ff4a68);
  color: #ffffff;
  font-size: 1.1875rem; /* 19 px gras : « grand texte » WCAG, AA sur le rose */
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgb(242 74 103 / 22%);
  transition: transform 0.25s ease, filter 0.25s ease;
}

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

.qhd-test__cta:hover {
  color: #ffffff;
  filter: brightness(1.08);
}

.qhd-test__cta-play,
.qhd-test__cta-chevron {
  flex: 0 0 auto;
}

/* Très petits écrans : l'icône lecture laisse sa place pour que le libellé
   tienne sur une ligne en 19 px (taille requise pour le contraste). */
@media (max-width: 479px) {
  .qhd-test__cta {
    padding-inline: 16px;
    gap: 8px;
  }

  .qhd-test__cta-play {
    display: none;
  }
}

@media (min-width: 480px) {
  .qhd-test__cta {
    inline-size: auto;
    max-inline-size: none;
  }
}

/* --- Image ------------------------------------------------------------------
   Aucun cadre : l'image se fond dans le fond par un masque (pas de voile
   sombre, la famille et le téléviseur restent lumineux). Empilée, elle se
   fond par le haut ; côte à côte, par la gauche, vers le texte. */

.qhd-test__media {
  min-inline-size: 0;
}

.qhd-test__image {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  block-size: clamp(260px, 42vw + 100px, 400px);
  border-radius: 20px;
  object-fit: cover;
  object-position: 55% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 60%) 8%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 60%) 8%, #000 22%);
}

/* Dès 1024 px : l'image occupe la moitié droite de l'écran, du milieu jusqu'au
   bord. Le conteneur est centré : sa moitié droite commence au milieu de
   l'écran ; on prolonge l'image jusqu'au bord par une marge négative égale à
   l'espace entre le conteneur et le bord de l'écran. Le léger surplus de la
   barre de défilement (100vw) est coupé par l'overflow de la section. */
@media (min-width: 1024px) {
  .qhd-test {
    --qhd-test-bleed: calc((100vw - min(100vw - (var(--qhd-gutter) * 2), 1240px)) / 2);
  }

  .qhd-test__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
  }

  .qhd-test__content {
    padding-inline-end: clamp(2rem, 4vw, 4.5rem);
  }

  .qhd-test__media {
    margin-inline-end: calc(-1 * var(--qhd-test-bleed));
  }

  /* Ratio 16:10, proche de l'original (16:9) : presque rien n'est rogné.
     Fondu à gauche vers le texte, et léger fondu haut et bas : l'image se
     fond dans le fond de la section, sans cadre ni coin arrondi au bord. */
  .qhd-test__image {
    block-size: auto;
    max-block-size: 580px;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    object-position: 50% 50%;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, rgb(0 0 0 / 55%) 10%, #000 28%),
      linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, rgb(0 0 0 / 55%) 10%, #000 28%),
      linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-composite: intersect;
  }
}

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

/* ==========================================================================
   Section 07 « FAQ » (sections/faq.php)
   --------------------------------------------------------------------------
   Fond : règle partagée avec la section 05 (.qhd-avantages::before).
   Accordéon natif <details>/<summary> : aucun script, clavier natif.
   Barres bleu nuit du site (au lieu du gris clair de la maquette) pour rester
   dans la même page ; « + » rose qui pivote en « − » à l'ouverture.
   ========================================================================== */

.qhd-faq {
  --qhd-faq-accent: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 1.8rem + 3.6vw, 5rem); /* 48 → 80 px */
  background-color: #06070b;
}

.qhd-faq__inner {
  width: min(100% - (var(--qhd-gutter) * 2), 1140px);
}

.qhd-faq__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.75rem, 1.3rem + 1.45vw, 2.625rem); /* 28 → 42 px */
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-faq__intro {
  max-inline-size: 70em;
  margin: 20px 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  color: #d4d6dc;
  text-wrap: pretty;
}

.qhd-faq__list {
  display: grid;
  gap: 14px;
  margin-block-start: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.qhd-faq__item {
  border: 1px solid rgb(80 120 200 / 25%);
  border-radius: 12px;
  background-color: #0d1522;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.qhd-faq__item:hover,
.qhd-faq__item[open] {
  border-color: rgb(242 74 103 / 40%);
}

.qhd-faq__item[open] {
  background-color: #101a2a;
}

.qhd-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
}

/* Marqueur natif masqué : le « + » dessiné le remplace. */
.qhd-faq__question::-webkit-details-marker {
  display: none;
}

.qhd-faq__question::marker {
  content: "";
}

.qhd-faq__question-text {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16 → 18 px */
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}

.qhd-faq__icon {
  flex: 0 0 auto;
  color: var(--qhd-faq-accent);
  transition: transform 0.25s ease;
}

/* « + » → « − » : la barre verticale pivote et se couche sur l'horizontale. */
.qhd-faq__icon-v {
  transform-origin: center;
  transition: transform 0.25s ease;
}

.qhd-faq__item[open] .qhd-faq__icon-v {
  transform: rotate(90deg);
}

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

.qhd-faq__answer {
  padding: 0 20px 18px;
}

.qhd-faq__answer p {
  margin: 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.65;
  color: #c9cfda;
}

.qhd-faq__answer p + p {
  margin-block-start: 10px;
}

.qhd-faq__link {
  color: var(--qhd-faq-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.qhd-faq__link:hover {
  color: #ff7189;
}

@media (prefers-reduced-motion: reduce) {
  .qhd-faq__item,
  .qhd-faq__icon,
  .qhd-faq__icon-v {
    transition: none;
  }
}