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

   Namespaces utilisés ici :
   - .qhd-subs-*   (section sections/abonnements-tarifs.php)
   - .qhd-chan-*   (section sections/abonnements-chaines.php)
   - .qhd-sfaq-*   (section sections/abonnements-faq.php)
   ========================================================================== */

/* ==========================================================================
   Section 01 « tarifs » (sections/abonnements-tarifs.php)
   --------------------------------------------------------------------------
   Fil d'Ariane, H1, introduction, interrupteur Essentiel / Premium, phrase du
   forfait, puis quatre cartes (1 colonne, 2 dès 768 px, 4 dès 1025 px).
   Fond : même système que la page d'accueil (sections 04 à 07) — base
   #06070B, halos radiaux bleu électrique et magenta, mêmes teintes, fondu
   des bords haut et bas pour éviter toute coupure.
   Interrupteur : assets/js/pages/abonnements.js.
   ========================================================================== */

/* Pleine largeur : la section sort de son conteneur Elementor, même si ce
   dernier est en largeur « encadrée ». 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 et ne casse pas position: sticky).
   Règle limitée à cette page : la feuille n'est chargée que sur /abonnements/. */
body.qhd-theme {
  overflow-x: clip;
}

.qhd-subs {
  --qhd-subs-pink: #f24a67;
  --qhd-subs-pink-strong: #e63759;
  --qhd-subs-gold: #ffc800;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.75rem, 2.5rem + 2.5vw, 5.5rem) clamp(5rem, 3.5rem + 3vw, 6.75rem); /* 60 → 88 / 80 → 108 px */
  background-color: #06070b;
}

/* Halo bleu diffus à gauche, halo magenta à droite, centre sombre. Mêmes
   teintes que l'accueil (rgb 37 99 235 et rgb 214 36 120), un peu plus doux.
   Règle partagée avec les sections 02 (.qhd-chan) et 03 (.qhd-sfaq) : même
   fond, transitions fluides d'une section à l'autre. */
.qhd-subs::before,
.qhd-chan::before,
.qhd-sfaq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(30% 60% at 0% 32%, rgb(37 99 235 / 40%), rgb(37 99 235 / 9%) 45%, transparent 75%),
    radial-gradient(30% 55% at 100% 12%, rgb(214 36 120 / 38%), rgb(214 36 120 / 9%) 45%, transparent 75%);
  -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%);
}

/* Mobile : section haute et étroite, halos plus larges et plus doux. */
@media (max-width: 767px) {
  .qhd-subs::before,
  .qhd-chan::before,
  .qhd-sfaq::before {
    background-image:
      radial-gradient(60% 28% at 0% 20%, rgb(37 99 235 / 32%), rgb(37 99 235 / 7%) 45%, transparent 75%),
      radial-gradient(60% 24% at 100% 6%, rgb(214 36 120 / 30%), rgb(214 36 120 / 7%) 45%, transparent 75%);
  }
}

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

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

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

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

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

.qhd-subs__breadcrumb a {
  color: #d4d6dc;
  text-decoration: none;
}

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

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

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

.qhd-subs__accent {
  color: var(--qhd-subs-pink);
}

.qhd-subs__intro {
  max-inline-size: 900px;
  margin: 18px auto 0;
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.1875rem); /* 15 → 19 px */
  line-height: 1.6;
  color: #d3d7e0;
  text-wrap: pretty;
}

/* --- Interrupteur -----------------------------------------------------------
   Bouton role="switch" (aria-checked). Rose = Essentiel, or = Premium.
   Les libellés sont cliquables (script) ; le libellé actif passe en blanc. */

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

.qhd-subs__toggle-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-subs__toggle-label--essentiel,
.qhd-subs.is-premium .qhd-subs__toggle-label--premium {
  color: #ffffff;
}

.qhd-subs.is-premium .qhd-subs__toggle-label--essentiel {
  color: var(--qhd-text-muted);
}

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

.qhd-subs__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-subs-pink);
  box-shadow: 0 6px 18px rgb(242 74 103 / 28%);
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.qhd-subs__switch-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-subs__switch[aria-checked="true"] {
  background-color: var(--qhd-subs-gold);
  box-shadow: 0 6px 18px rgb(255 200 0 / 25%);
}

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

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

.qhd-subs__plan-description {
  max-inline-size: 760px;
  margin: 14px auto 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #bcc0cb;
  text-wrap: pretty;
}

/* --- Nombre d'appareils (deux formules) -------------------------------------
   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. */

.qhd-subs__devices {
  min-inline-size: 0;
  max-inline-size: 760px;
  margin: clamp(1.25rem, 1rem + 0.8vw, 1.75rem) auto 0;
  padding: 0;
  border: 0;
}

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

.qhd-subs__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-subs__devices-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgb(74 130 190 / 30%);
  border-radius: 10px;
  background-color: #0d1828;
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%);
}

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

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

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

.qhd-subs__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-subs__device-num {
  font-family: var(--qhd-font-title);
  font-size: 1.125rem;
}

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

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

.qhd-subs__device-input:checked + .qhd-subs__device-text {
  background-color: var(--qhd-subs-pink-strong);
}

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

/* Premium : segment choisi en or, texte sombre. */
.qhd-subs.is-premium .qhd-subs__device-input:checked + .qhd-subs__device-text {
  background-color: var(--qhd-subs-gold);
  color: #06070b;
}

.qhd-subs.is-premium .qhd-subs__device-input:checked + .qhd-subs__device-text .qhd-subs__device-unit {
  color: #06070b;
}

.qhd-subs__device-input:focus-visible + .qhd-subs__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-subs__device-text {
    flex-direction: row;
    gap: 6px;
  }

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

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

/* --- Grilles de cartes ----------------------------------------------------- */

.qhd-subs__grid {
  display: grid;
  gap: 18px;
  margin-block-start: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  text-align: start;
}

/* display: grid écraserait l'attribut hidden : on le rétablit explicitement. */
.qhd-subs__grid[hidden] {
  display: none;
}

.qhd-subs__grid--essentiel {
  --plan: var(--qhd-subs-pink);
  --plan-strong: var(--qhd-subs-pink-strong);
  --plan-ink: #ffffff;
}

.qhd-subs__grid--premium {
  --plan: var(--qhd-subs-gold);
  --plan-strong: var(--qhd-subs-gold);
  --plan-ink: #06070b;
}

.qhd-subs__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(74 130 190 / 30%);
  border-radius: 13px;
  background-color: #0d1828;
  box-shadow: 0 16px 36px rgb(0 0 0 / 28%);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.qhd-subs__card:hover {
  border-color: rgb(74 130 190 / 55%);
}

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

.qhd-subs__duration {
  margin: 0;
  padding: 22px 20px 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem); /* 20 → 22 px */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--plan);
}

.qhd-subs__price {
  margin: 6px 0 0;
  padding: 0 20px 18px;
  font-family: var(--qhd-font-title);
  font-size: clamp(2rem, 1.8rem + 0.5vw, 2.375rem); /* 32 → 38 px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
}

/* Bande promotionnelle pleine largeur. */
.qhd-subs__promo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 10px 14px;
  background-color: var(--plan-strong);
  color: var(--plan-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

/* Chaque morceau reste entier : jamais « 100$ » séparé de « PRIX ORIGINAL ». */
.qhd-subs__promo > span {
  white-space: nowrap;
}

.qhd-subs__promo > span + span {
  padding-inline-start: 10px;
  border-inline-start: 1.5px solid currentColor;
}

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

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

.qhd-subs__features {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 11px;
  margin: 18px 0 0;
  padding: 0 22px;
  list-style: none;
}

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

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

/* Bouton pleine largeur, poussé en bas : alignés d'une carte à l'autre. */
.qhd-subs__cta {
  inline-size: calc(100% - 44px);
  min-block-size: 48px;
  margin: 24px 22px 22px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  background-color: var(--plan-strong);
  color: var(--plan-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  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-subs a.qhd-subs__cta {
  text-decoration: none;
}

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

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

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

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

/* Cartes plus étroites entre 1025 et 1279 px : bande resserrée pour tenir
   sur une ligne. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .qhd-subs__promo {
    gap: 4px 8px;
    padding-inline: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }

  .qhd-subs__promo > span + span {
    padding-inline-start: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qhd-subs__card,
  .qhd-subs__cta,
  .qhd-subs__switch,
  .qhd-subs__switch-thumb,
  .qhd-subs__toggle-label,
  .qhd-subs__device-text {
    transition: none;
  }
}

/* ==========================================================================
   Section 02 « chaînes » (sections/abonnements-chaines.php)
   --------------------------------------------------------------------------
   Fond : règle partagée avec la section 01 (.qhd-subs::before, plus haut) ;
   pleine largeur comme la section 01. Grand panneau bleu nuit, titre,
   texte, puis carrousel : zone de défilement native (scroll-snap) encadrée de
   deux flèches. Visibles : 2,6 cartes en mobile, 4 en tablette, 7 dès 1025 px.
   Mots-symboles fictifs en HTML/CSS : aucune image, aucune marque réelle.
   ========================================================================== */

.qhd-chan {
  --qhd-chan-gap: 10px;
  --qhd-chan-visible: 2.6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.75rem, 2.5rem + 2.5vw, 5.5rem); /* 60 → 88 px */
  background-color: #06070b;
}

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

.qhd-chan__panel {
  padding: clamp(28px, 1.2rem + 2vw, 48px) clamp(14px, 0.5rem + 1.5vw, 28px);
  border: 1px solid rgb(50 130 220 / 28%);
  border-radius: 16px;
  background-color: rgb(4 15 28 / 70%);
  box-shadow:
    0 0 40px rgb(56 110 240 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
  text-align: center;
}

.qhd-chan__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.15;
  letter-spacing: -0.03em;
  color: #f7f7f8;
  text-wrap: balance;
}

.qhd-chan__accent {
  color: var(--qhd-subs-pink, #f24a67);
  white-space: nowrap;
}

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

/* --- Carrousel ------------------------------------------------------------- */

/* Mobile : zone pleine largeur, flèches centrées en dessous (sinon elles
   mangeraient la moitié de la place des cartes). Dès 768 px : flèches de
   part et d'autre. */
.qhd-chan__carousel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block-start: clamp(1.75rem, 1.5rem + 0.6vw, 2.25rem);
}

.qhd-chan__carousel > .qhd-chan__viewport {
  flex: 1 1 100%;
  order: -1;
}

.qhd-chan__viewport {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px;
  scrollbar-width: none;
  border: 1px solid rgb(60 110 170 / 22%);
  border-radius: 14px;
  background-color: rgb(3 10 20 / 65%);
}

.qhd-chan__viewport::-webkit-scrollbar {
  display: none;
}

/* Le reset du thème parent (contour noir + halo blanc, spécificité 0,2,1)
   l'emporterait sur .qhd-chan__viewport:focus-visible : on monte d'un cran. */
.qhd-chan .qhd-chan__viewport:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

.qhd-chan__track {
  display: flex;
  gap: var(--qhd-chan-gap);
  margin: 0;
  padding: 10px;
  list-style: none;
}

/* Largeur calculée pour afficher --qhd-chan-visible cartes dans la zone. */
.qhd-chan__item {
  display: flex;
  flex: 0 0 calc((100% - (var(--qhd-chan-visible) - 1) * var(--qhd-chan-gap)) / var(--qhd-chan-visible));
  align-items: center;
  justify-content: center;
  min-block-size: 92px;
  margin: 0;
  padding: 10px 8px;
  border: 1px solid rgb(60 110 170 / 20%);
  border-radius: 11px;
  background-color: #07111d;
  scroll-snap-align: start;
}

/* --- Boutons ----------------------------------------------------------------
   Masqués sans script (hidden) : le carrousel reste utilisable au doigt et au
   clavier. Désactivés en bout de course. */

.qhd-chan__arrow {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgb(120 180 255 / 50%);
  border-radius: 50%;
  background-color: rgb(12 30 50 / 95%);
  color: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

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

.qhd-chan__arrow:hover:not(:disabled) {
  border-color: var(--qhd-subs-pink, #f24a67);
  background-color: rgb(24 48 76 / 95%);
}

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

.qhd-chan__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- Mots-symboles fictifs ---------------------------------------------------
   Compositions typographiques originales, toutes en Inter (police du site) :
   deux mots, deux traitements, une couleur d'univers chacun. */

.qhd-chan__wordmark {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 0.28em;
  font-family: var(--qhd-font-title);
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.1875rem); /* 15 → 19 px */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  color: #ffffff;
}

/* Nord Sport : blanc lourd + cyan fin espacé. */
.qhd-chan__wordmark--nord > span:last-child { color: #4fd1e8; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.qhd-chan__wordmark--nord > span:first-child { text-transform: uppercase; }

/* Québec Ciné : petit surtitre, grand mot rouge corail. */
.qhd-chan__wordmark--cine { flex-direction: column; align-items: center; }
.qhd-chan__wordmark--cine > span:first-child { font-size: 0.62em; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #c9d0dc; }
.qhd-chan__wordmark--cine > span:last-child { font-size: 1.2em; color: #ff5b67; }

/* vision kids : minuscules arrondies, « kids » en pastille jaune. */
.qhd-chan__wordmark--kids { align-items: center; font-weight: 700; }
.qhd-chan__wordmark--kids > span:last-child { padding: 0.12em 0.45em; border-radius: 999px; background-color: #ffd23f; color: #1a1400; }

/* Info 360 : « 360 » cerclé magenta. */
.qhd-chan__wordmark--info { align-items: center; text-transform: uppercase; }
.qhd-chan__wordmark--info > span:last-child { padding: 0.1em 0.35em; border: 2px solid #e0469a; border-radius: 999px; color: #e0469a; }

/* Grand Écran : fin très espacé + gras orange. */
.qhd-chan__wordmark--ecran { flex-direction: column; align-items: center; text-transform: uppercase; }
.qhd-chan__wordmark--ecran > span:first-child { font-weight: 300; letter-spacing: 0.35em; font-size: 0.7em; }
.qhd-chan__wordmark--ecran > span:last-child { color: #ff982e; letter-spacing: 0.04em; }

/* docs plus : minuscules vertes, « plus » discret. */
.qhd-chan__wordmark--docs { color: #34d399; font-weight: 800; }
.qhd-chan__wordmark--docs > span:last-child { font-weight: 400; color: #a7f3d0; }

/* Family TV : violet + « TV » en boîte. */
.qhd-chan__wordmark--family { align-items: center; color: #b18cff; }
.qhd-chan__wordmark--family > span:last-child { padding: 0.05em 0.3em; border-radius: 4px; background-color: #b18cff; color: #120a24; font-size: 0.85em; }

/* Nova Play : dégradé bleu-violet sur « Nova ». */
.qhd-chan__wordmark--nova > span:first-child { background-image: linear-gradient(90deg, #569af0, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; }
.qhd-chan__wordmark--nova > span:last-child { font-weight: 500; color: #c9d0dc; }

/* Zénith Sport : italique rose + fin blanc. */
.qhd-chan__wordmark--zenith { font-style: italic; text-transform: uppercase; }
.qhd-chan__wordmark--zenith > span:first-child { color: #f24a67; }
.qhd-chan__wordmark--zenith > span:last-child { font-weight: 400; }

/* Aurore Séries : dégradé rose-orangé, deux lignes. */
.qhd-chan__wordmark--aurore { flex-direction: column; align-items: center; }
.qhd-chan__wordmark--aurore > span:first-child { background-image: linear-gradient(90deg, #ff5b67, #ffb86b); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.1em; }
.qhd-chan__wordmark--aurore > span:last-child { font-size: 0.66em; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #ffd9c2; }

/* Cap Musique : « CAP » bloc cyan, « Musique » fin. */
.qhd-chan__wordmark--cap { align-items: center; }
.qhd-chan__wordmark--cap > span:first-child { padding: 0.08em 0.3em; border-radius: 4px; background-color: #65d2f3; color: #04141d; text-transform: uppercase; }
.qhd-chan__wordmark--cap > span:last-child { font-weight: 500; }

/* Boréal Live : vert glacier + « LIVE » rouge espacé. */
.qhd-chan__wordmark--boreal > span:first-child { color: #7ee8c7; }
.qhd-chan__wordmark--boreal > span:last-child { color: #ff4d5e; font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase; }

/* Horizon Info : bleu sur deux lignes, soulignement. */
.qhd-chan__wordmark--horizon { flex-direction: column; align-items: center; color: #6fa8ff; text-transform: uppercase; letter-spacing: 0.06em; }
.qhd-chan__wordmark--horizon > span:last-child { padding-block-start: 0.1em; border-block-start: 2px solid #6fa8ff; font-size: 0.7em; letter-spacing: 0.3em; color: #ffffff; }

/* Fleuve Docs : bleu-vert + fin. */
.qhd-chan__wordmark--fleuve > span:first-child { color: #38bdf8; }
.qhd-chan__wordmark--fleuve > span:last-child { font-weight: 400; color: #bae6fd; }

/* --- 768 px : 4 cartes ; 1025 px : 7 cartes, flèches plus grandes ---------- */

@media (min-width: 768px) {
  .qhd-chan {
    --qhd-chan-visible: 4;
  }

  .qhd-chan__carousel {
    flex-wrap: nowrap;
  }

  .qhd-chan__carousel > .qhd-chan__viewport {
    flex: 1 1 auto;
    order: 0;
  }

  .qhd-chan__arrow {
    inline-size: 50px;
    block-size: 50px;
  }
}

@media (min-width: 1025px) {
  .qhd-chan {
    --qhd-chan-visible: 7;
  }

  .qhd-chan__item {
    min-block-size: 100px;
  }
}

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

/* ==========================================================================
   Section 03 « FAQ » (sections/abonnements-faq.php)
   --------------------------------------------------------------------------
   Fond : règle partagée avec les sections 01 et 02 (.qhd-subs::before, plus
   haut) ; pleine largeur comme elles. En-tête centré, accordéons sur deux
   colonnes dès 1025 px (1 à 5 à gauche, 6 à 10 à droite ; une colonne en
   dessous, ordre 1 à 10), bandeau contact, rangée de confiance.
   Accordéons : assets/js/pages/abonnements.js. Sans script, les réponses
   restent affichées (classe .is-ready posée par le script).
   ========================================================================== */

.qhd-sfaq {
  --qhd-sfaq-pink: #f24a67;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(3.75rem, 2.5rem + 2.5vw, 5.5rem) clamp(4.5rem, 3rem + 3vw, 6.5rem);
  background-color: #06070b;
}

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

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

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

.qhd-sfaq__eyebrow {
  display: inline-block;
  margin: 0;
  padding-block-end: 6px;
  border-block-end: 2px solid rgb(242 74 103 / 55%);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qhd-sfaq-pink);
}

.qhd-sfaq__title {
  margin: 14px 0 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.3rem + 1.9vw, 3rem); /* 30 → 48 px */
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
}

.qhd-sfaq__accent {
  color: var(--qhd-sfaq-pink);
}

.qhd-sfaq__intro {
  max-inline-size: 900px;
  margin: 16px auto 0;
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); /* 15 → 18 px */
  line-height: 1.6;
  color: #c8cfda;
  text-wrap: pretty;
}

/* --- Accordéons ------------------------------------------------------------- */

.qhd-sfaq__grid {
  display: grid;
  gap: 12px;
  margin-block-start: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.qhd-sfaq__column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-inline-size: 0;
}

.qhd-sfaq__item {
  border: 1px solid rgb(50 110 180 / 30%);
  border-radius: 13px;
  background-color: #071522;
  transition: border-color 0.2s ease;
}

.qhd-sfaq__item:hover,
.qhd-sfaq__item:has([aria-expanded="true"]) {
  border-color: rgb(242 74 103 / 40%);
}

.qhd-sfaq__heading {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Bouton pleine largeur : zone cliquable = toute la barre. */
.qhd-sfaq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  inline-size: 100%;
  min-block-size: 62px;
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #f4f6f9;
  font-family: var(--qhd-font-title);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 → 17 px */
  font-weight: 700;
  line-height: 1.4;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

/* Le reset du thème parent colore et encadre les boutons au survol / focus :
   on rétablit le style de la barre. */
.qhd-sfaq .qhd-sfaq__button:hover,
.qhd-sfaq .qhd-sfaq__button:focus {
  background: transparent;
  color: #ffffff;
}

.qhd-sfaq .qhd-sfaq__button:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 2px;
  box-shadow: none;
}

.qhd-sfaq__icon {
  flex: 0 0 auto;
  color: var(--qhd-sfaq-pink);
}

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

.qhd-sfaq__button[aria-expanded="true"] .qhd-sfaq__icon-v {
  transform: rotate(90deg);
}

/* Réponses : visibles tant que le script n'a pas pris la main (sans JS,
   rien n'est caché), puis pilotées par l'attribut hidden. */
.qhd-sfaq:not(.is-ready) .qhd-sfaq__answer {
  display: block;
}

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

.qhd-sfaq__answer {
  padding: 0 20px 18px;
  animation: qhd-sfaq-in 0.24s ease;
}

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

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

.qhd-sfaq__link {
  color: var(--qhd-sfaq-pink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

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

@keyframes qhd-sfaq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* --- Bandeau contact ---------------------------------------------------------- */

.qhd-sfaq__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-inline-size: 1040px;
  margin: clamp(2.25rem, 1.8rem + 1.2vw, 3rem) auto 0;
  padding: 24px 22px;
  border: 1px solid rgb(60 120 190 / 28%);
  border-radius: 16px;
  background-color: #0a1827;
  text-align: center;
}

.qhd-sfaq__contact-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 58px;
  block-size: 58px;
  border-radius: 50%;
  background-color: var(--qhd-sfaq-pink);
  color: #ffffff;
  box-shadow: 0 8px 22px rgb(242 74 103 / 28%);
}

.qhd-sfaq__contact-content {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.qhd-sfaq__contact-title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); /* 18 → 22 px */
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

.qhd-sfaq__contact-text {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #bbc4d1;
}

/* Bouton rose : 19 px gras (« grand texte » WCAG), fond #E63759 comme les
   boutons de la section 01. */
.qhd-sfaq__contact-cta {
  flex: 0 0 auto;
  inline-size: 100%;
  min-block-size: 54px;
  padding: 8px 30px;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background-color: #e63759;
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 10px 26px rgb(242 74 103 / 25%);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.qhd-sfaq a.qhd-sfaq__contact-cta {
  text-decoration: none;
}

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

/* --- Rangée de confiance ------------------------------------------------------ */

.qhd-sfaq__trust {
  display: grid;
  gap: 24px;
  max-inline-size: 1240px;
  margin: clamp(2rem, 1.6rem + 1vw, 2.75rem) auto 0;
  padding: 0;
  list-style: none;
}

.qhd-sfaq__trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.qhd-sfaq__trust-icon {
  flex: 0 0 auto;
  color: var(--qhd-sfaq-pink);
}

.qhd-sfaq__trust-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qhd-sfaq__trust-title {
  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.3;
  color: #f4f6f9;
}

.qhd-sfaq__trust-text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: #aeb7c5;
}

/* --- 768 px : bandeau horizontal, confiance sur trois colonnes -------------- */

@media (min-width: 768px) {
  .qhd-sfaq__contact {
    flex-direction: row;
    gap: 20px;
    padding: 24px 28px;
    text-align: start;
  }

  .qhd-sfaq__contact-cta {
    inline-size: auto;
  }

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

  .qhd-sfaq__trust-item {
    justify-content: center;
    padding-inline: 16px;
  }

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

/* --- 1025 px : accordéons sur deux colonnes ---------------------------------- */

@media (min-width: 1025px) {
  .qhd-sfaq__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
  }
}

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

  .qhd-sfaq__item,
  .qhd-sfaq__icon-v,
  .qhd-sfaq__contact-cta {
    transition: none;
  }
}