/* ==========================================================================
   QUÉBEC HD — pages/tutoriel-dinstallation.css
   Styles spécifiques à la page « Tutoriel d'installation » (slug
   « tutoriel-dinstallation », ID 21). Une feuille par page, jamais par
   section. Les composants réutilisables (typographie, boutons, focus)
   restent dans general.css.

   Namespaces utilisés ici :
   - .qhd-tutorial-hero-*   (section sections/tutoriel-hero.php)
   - .qhd-tutorial-devices-*, .qhd-tutorial-device-*
                            (section sections/tutoriel-appareils.php)
   - .qhd-tutorial-dynamic-*  (section sections/tutoriel-guide.php)
   - .qhd-tutorial-assistance-*, .qhd-tutorial-benefit-*
                            (section sections/tutoriel-assistance.php)
   ========================================================================== */

/* ==========================================================================
   Section 01 « hero » (sections/tutoriel-hero.php)
   --------------------------------------------------------------------------
   Texte à gauche (≈ 46 %), image à droite (≈ 54 %) dès 1025 px ; une
   colonne en dessous (texte, puis image).
   Fond : même système que les pages Test IPTV gratuit, Contact et Liste des
   chaînes — base #06070B, halo bleu à gauche, halo magenta à droite, mêmes
   teintes et intensités, sur ::before / ::after qui « respirent » très
   lentement.
   Animations (toutes en CSS, coupées par prefers-reduced-motion) :
   - halos : dérive de quelques pour cent, 16 s et 19 s, alternate ;
   - apparition au chargement : texte, puis image ;
   - pulses brefs et décalés : lueur autour des appareils (11 s), icônes des
     repères (une à la fois, 9 s).
   Image : aucun agrandissement au survol (il ré-échantillonne l'image et la
   rend floue).
   ========================================================================== */

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

.qhd-tutorial-hero {
  --qhd-tutorial-pink: #f24a67;
  --qhd-tutorial-blue: #2294ff;
  --qhd-tutorial-pulse-rest: 0 0 5px rgb(34 148 255 / 16%);
  --qhd-tutorial-pulse-peak: 0 0 12px rgb(34 148 255 / 45%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(2.5rem, 1rem + 4vw, 5.5rem) clamp(2.5rem, 1rem + 4vw, 5rem); /* 40 → 88 / 40 → 80 px */
  background-color: #06070b;
}

/* Halos : mêmes teintes et intensités que les autres pages. Débordent de
   6 % pour que la dérive ne découvre jamais un bord ; fondu en bas. */
.qhd-tutorial-hero::before,
.qhd-tutorial-devices::before,
.qhd-tutorial-dynamic::before,
.qhd-tutorial-assistance::before,
.qhd-tutorial-hero::after,
.qhd-tutorial-devices::after,
.qhd-tutorial-dynamic::after,
.qhd-tutorial-assistance::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 96%);
  will-change: transform, opacity;
}

.qhd-tutorial-hero::before,
.qhd-tutorial-devices::before,
.qhd-tutorial-dynamic::before,
.qhd-tutorial-assistance::before {
  background-image:
    radial-gradient(30% 60% at 3% 42%, rgb(37 99 235 / 42%), rgb(37 99 235 / 10%) 45%, transparent 75%),
    radial-gradient(22% 34% at 2% 92%, rgb(37 99 235 / 22%), transparent 72%);
  animation: qhd-tutorial-halo-blue 16s ease-in-out infinite alternate;
}

.qhd-tutorial-hero::after,
.qhd-tutorial-devices::after,
.qhd-tutorial-dynamic::after,
.qhd-tutorial-assistance::after {
  background-image:
    radial-gradient(30% 55% at 97% 26%, rgb(214 36 120 / 38%), rgb(214 36 120 / 9%) 45%, transparent 75%);
  animation: qhd-tutorial-halo-pink 19s ease-in-out infinite alternate;
}

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

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

/* Une colonne : texte, image (ordre du HTML). */
.qhd-tutorial-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

.qhd-tutorial-hero__content {
  min-inline-size: 0;
  animation: qhd-tutorial-rise 0.7s ease-out both;
}

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

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

.qhd-tutorial-hero__breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #e7ebf2;
}

/* Séparateur « › » dessiné, non lu par les lecteurs d'écran. */
.qhd-tutorial-hero__breadcrumb li + li::before {
  content: "›";
  color: #6f7c96;
  font-size: 1.1em;
}

.qhd-tutorial-hero .qhd-tutorial-hero__breadcrumb a {
  color: #c7ced8;
  text-decoration: none;
}

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

.qhd-tutorial-hero .qhd-tutorial-hero__breadcrumb a:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
}

/* --- Label, titre, texte --------------------------------------------------- */

.qhd-tutorial-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--qhd-tutorial-pink);
}

.qhd-tutorial-hero__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 3px;
  border-radius: 3px;
  background-color: var(--qhd-tutorial-pink);
}

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

.qhd-tutorial-hero__accent {
  color: var(--qhd-tutorial-pink);
}

.qhd-tutorial-hero__description {
  max-inline-size: 650px;
  margin: 22px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 → 19 px */
  line-height: 1.65;
  color: #cbd2dd;
}

/* --- Repères --------------------------------------------------------------- */

.qhd-tutorial-hero__trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.qhd-tutorial-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #e5e9f0;
}

.qhd-tutorial-hero__trust-icon {
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  color: var(--qhd-tutorial-blue);
  filter: drop-shadow(var(--qhd-tutorial-pulse-rest));
  animation: qhd-tutorial-soft-blink 9s ease-in-out 1s infinite;
}

.qhd-tutorial-hero__trust-item:nth-child(2) .qhd-tutorial-hero__trust-icon { animation-delay: 4s; }
.qhd-tutorial-hero__trust-item:nth-child(3) .qhd-tutorial-hero__trust-icon { animation-delay: 7s; }

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

.qhd-tutorial-hero__media {
  position: relative;
  min-inline-size: 0;
  animation: qhd-tutorial-slide 0.75s ease-out 0.1s both;
}

/* Lumière bleue autour des appareils, pulse occasionnel. */
.qhd-tutorial-hero__media::before {
  content: "";
  position: absolute;
  inset: 5% 8%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(45% 45% at 40% 55%, rgb(37 99 235 / 26%), transparent 70%),
    radial-gradient(35% 40% at 80% 40%, rgb(214 36 120 / 16%), transparent 70%);
  opacity: 0.8;
  animation: qhd-tutorial-glow 11s ease-in-out 5s infinite;
}

@keyframes qhd-tutorial-glow {
  0%, 76%, 100% { opacity: 0.8; }
  79% { opacity: 1; }
  82% { opacity: 0.85; }
}

.qhd-tutorial-hero__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
  object-position: center;
  /* Bords fondus dans le fond : le fichier n'a pas de transparence
     (fichier non modifié). */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 12%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
  mask-composite: intersect;
  filter:
    drop-shadow(0 20px 50px rgb(0 105 255 / 15%))
    drop-shadow(0 0 32px rgb(242 30 105 / 10%));
  transition: transform 0.45s ease;
}

/* Mention décorative (absente de l'image), en haut à droite. */
.qhd-tutorial-hero__side-copy {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-end: 3%;
  margin: 0;
  padding-block-end: 8px;
  font-family: var(--qhd-font-title);
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.25rem); /* 15 → 20 px */
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  color: #ffffff;
  text-shadow: 0 2px 12px rgb(6 7 11 / 80%);
  rotate: -4deg;
  pointer-events: none;
}

.qhd-tutorial-hero__side-copy::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 70%;
  block-size: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, transparent, var(--qhd-tutorial-pink));
}

/* --- Animations ------------------------------------------------------------ */

@keyframes qhd-tutorial-rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes qhd-tutorial-slide {
  from { opacity: 0; translate: 18px 0; }
  to { opacity: 1; translate: 0 0; }
}

/* Pulse occasionnel : repos, puis un éclat doux (≈ 300 ms). */
@keyframes qhd-tutorial-soft-blink {
  0%, 74%, 100% {
    opacity: 0.88;
    filter: drop-shadow(var(--qhd-tutorial-pulse-rest));
  }
  77.5% {
    opacity: 1;
    filter: drop-shadow(var(--qhd-tutorial-pulse-peak));
  }
  81% {
    opacity: 0.88;
    filter: drop-shadow(var(--qhd-tutorial-pulse-rest));
  }
}

/* --- 600 px : trois repères côte à côte, séparés --------------------------- */

@media (min-width: 600px) {
  /* Colonnes égales : le texte passe à la ligne au besoin, les trois
     repères restent sur la même rangée. */
  .qhd-tutorial-hero__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

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

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

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

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

@media (min-width: 1025px) {
  .qhd-tutorial-hero__inner {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    gap: clamp(2.5rem, 0rem + 3vw, 3.5rem); /* 40 → 56 px */
    min-block-size: 620px;
  }

  /* Image pleine largeur à droite : la colonne s'étend jusqu'au bord de la
     fenêtre (la section coupe le surplus). */
  .qhd-tutorial-hero__media {
    margin-inline-end: calc((min(100vw - (var(--qhd-gutter) * 2), 1240px) - 100vw) / 2);
  }

  /* Bord droit collé à la fenêtre : seuls les bords gauche, haut et bas
     sont fondus dans le fond. */
  .qhd-tutorial-hero__image {
    max-inline-size: none;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 16%, #000 100%),
      linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0, #000 16%, #000 100%),
      linear-gradient(180deg, transparent 0, #000 8%, #000 88%, transparent 100%);
  }

  /* Mention décorative : suit le bord du contenu, pas celui de la fenêtre. */
  .qhd-tutorial-hero__side-copy {
    inset-inline-end: calc((100vw - min(100vw - (var(--qhd-gutter) * 2), 1240px)) / 2 * 0.5 + 1%);
  }

  .qhd-tutorial-hero__trust-icon {
    inline-size: 34px;
    block-size: 34px;
  }
}

/* Petits ordinateurs : icône au-dessus du texte dans chaque repère. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .qhd-tutorial-hero__trust-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
  }
}

/* --- Mobile : halos plus doux, pulses plus discrets ------------------------ */

@media (max-width: 767px) {
  .qhd-tutorial-hero {
    --qhd-tutorial-pulse-rest: 0 0 4px rgb(34 148 255 / 12%);
    --qhd-tutorial-pulse-peak: 0 0 8px rgb(34 148 255 / 30%);
  }

  .qhd-tutorial-hero::before,
  .qhd-tutorial-devices::before,
  .qhd-tutorial-dynamic::before,
  .qhd-tutorial-assistance::before,
  .qhd-tutorial-hero::after,
  .qhd-tutorial-devices::after,
  .qhd-tutorial-dynamic::after,
  .qhd-tutorial-assistance::after {
    animation-name: qhd-tutorial-halo-fade;
  }

  .qhd-tutorial-hero::before,
  .qhd-tutorial-devices::before,
  .qhd-tutorial-dynamic::before,
  .qhd-tutorial-assistance::before {
    background-image:
      radial-gradient(60% 28% at 0% 22%, rgb(37 99 235 / 32%), rgb(37 99 235 / 7%) 45%, transparent 75%),
      radial-gradient(50% 18% at 0% 90%, rgb(37 99 235 / 18%), transparent 72%);
  }

  .qhd-tutorial-hero::after,
  .qhd-tutorial-devices::after,
  .qhd-tutorial-dynamic::after,
  .qhd-tutorial-assistance::after {
    background-image:
      radial-gradient(60% 24% at 100% 8%, rgb(214 36 120 / 30%), rgb(214 36 120 / 7%) 45%, transparent 75%);
  }

  /* Image trop petite : la mention décorative masquerait les appareils. */
  .qhd-tutorial-hero__side-copy {
    display: none;
  }
}

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

/* Mouvement réduit : design statique, contenu entièrement visible. */
@media (prefers-reduced-motion: reduce) {
  .qhd-tutorial-hero::before,
  .qhd-tutorial-devices::before,
  .qhd-tutorial-dynamic::before,
  .qhd-tutorial-assistance::before,
  .qhd-tutorial-hero::after,
  .qhd-tutorial-devices::after,
  .qhd-tutorial-dynamic::after,
  .qhd-tutorial-assistance::after,
  .qhd-tutorial-hero__content,
  .qhd-tutorial-hero__media,
  .qhd-tutorial-hero__media::before,
  .qhd-tutorial-hero__trust-icon {
    animation: none;
  }

  .qhd-tutorial-hero__image {
    transition: none;
  }

}

/* ==========================================================================
   Section 02 « Choisissez votre appareil » (sections/tutoriel-appareils.php)
   --------------------------------------------------------------------------
   H2 et introduction centrés, dix cartes-boutons : 2 colonnes (1 sous
   360 px), 3 dès 768 px (la dixième au centre), 5 dès 1025 px.
   Carte active : bordure cyan doublée, halo, pastille « check ».
   « Box MAG » : sélectionnable comme les autres (« Non pris en charge »).
   Fond de section : règles partagées avec le hero (plus haut).
   Sélection : script assets/js/pages/tutoriel-dinstallation.js.
   Animations (coupées par prefers-reduced-motion) :
   - titre et cartes : apparition à l'entrée dans l'écran (CSS) ;
   - nouvelle carte active : halo cyan bref (0,4 s).
   ========================================================================== */

.qhd-tutorial-devices {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5rem); /* 40 → 72 / 48 → 80 px */
  background-color: #06070b;
}

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

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

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

.qhd-tutorial-devices__accent {
  color: #f24a67;
}

/* Petites lignes cyan à gauche et rose à droite (décoratives). */
.qhd-tutorial-devices__title::before,
.qhd-tutorial-devices__title::after {
  content: "";
  display: inline-block;
  inline-size: 44px;
  block-size: 3px;
  border-radius: 3px;
  vertical-align: middle;
}

.qhd-tutorial-devices__title::before {
  margin-inline-end: 18px;
  background-image: linear-gradient(90deg, transparent, var(--qhd-cyan));
}

.qhd-tutorial-devices__title::after {
  margin-inline-start: 18px;
  background-image: linear-gradient(90deg, #f24a67, transparent);
}

.qhd-tutorial-devices__intro {
  max-inline-size: 760px;
  margin: 12px auto 34px;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 px */
  line-height: 1.6;
  text-align: center;
  color: #c8cfd9;
}

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

.qhd-tutorial-devices__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Réinitialise les styles de bouton du thème parent (fond, couleur #c36 au
   survol, majuscules, bordure). */
.qhd-tutorial-devices .qhd-tutorial-device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: 195px;
  margin: 0;
  padding: 18px 12px;
  border: 1px solid rgb(30 125 220 / 48%);
  border-radius: 16px;
  background-color: rgb(5 20 35 / 90%);
  color: #ffffff;
  font-family: var(--qhd-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.qhd-tutorial-devices .qhd-tutorial-device:hover,
.qhd-tutorial-devices .qhd-tutorial-device:focus {
  background-color: rgb(5 20 35 / 90%);
  color: #ffffff;
}

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

.qhd-tutorial-device__media {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 90px;
}

/* Photo fournie (4:3, fond sombre) : vignette arrondie, ratio conservé.
   Deux classes : Elementor impose « img { height: auto; max-width: 100% } »
   avec une spécificité plus forte qu'une classe seule. */
.qhd-tutorial-device .qhd-tutorial-device__image {
  display: block;
  inline-size: auto;
  max-inline-size: 90%;
  block-size: 100%;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
}

.qhd-tutorial-device__title {
  display: block;
  margin-block-start: 12px;
  font-family: var(--qhd-font-title);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem); /* 16 → 19 px */
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.qhd-tutorial-device__description {
  display: block;
  margin-block-start: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #bfc8d8;
}

/* Pastille « check » en haut à droite : visible sur la carte active. */
.qhd-tutorial-device__check {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background-color: #17c8ff;
  color: #06070b;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.25s ease, scale 0.25s ease;
}

/* --- Carte active ---------------------------------------------------------- */

.qhd-tutorial-devices .qhd-tutorial-device.is-active {
  border-color: #17c8ff;
  background-color: rgb(6 30 52 / 98%);
  box-shadow:
    inset 0 0 0 1px #17c8ff,
    0 0 0 1px rgb(23 200 255 / 28%),
    0 0 22px rgb(0 150 255 / 23%),
    0 0 34px rgb(242 30 105 / 6%);
}

.qhd-tutorial-device.is-active .qhd-tutorial-device__check {
  opacity: 1;
  scale: 1;
}

/* Halo cyan bref à la sélection (classe posée par le script). */
.qhd-tutorial-device.is-flash {
  animation: qhd-tutorial-device-flash 0.4s ease-out;
}

@keyframes qhd-tutorial-device-flash {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.12) drop-shadow(0 0 14px rgb(23 200 255 / 45%)); }
  100% { filter: brightness(1); }
}

/* --- Survol (pointeur fin) ------------------------------------------------- */

@media (hover: hover) {
  .qhd-tutorial-devices .qhd-tutorial-device:hover {
    transform: translateY(-3px);
    border-color: rgb(242 74 103 / 52%);
    box-shadow: 0 10px 30px rgb(0 100 220 / 8%);
  }

  .qhd-tutorial-devices .qhd-tutorial-device.is-active:hover {
    border-color: #17c8ff;
    box-shadow:
      inset 0 0 0 1px #17c8ff,
      0 0 0 1px rgb(23 200 255 / 28%),
      0 0 22px rgb(0 150 255 / 23%),
      0 0 34px rgb(242 30 105 / 6%);
  }

  .qhd-tutorial-devices .qhd-tutorial-device.is-active:hover {
    background-color: rgb(6 30 52 / 98%);
  }
}

/* --- Apparition à l'entrée dans l'écran ------------------------------------ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qhd-tutorial-devices__title,
    .qhd-tutorial-devices__intro {
      animation: qhd-tutorial-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .qhd-tutorial-device {
      animation: qhd-tutorial-rise-12 linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    .qhd-tutorial-device:nth-child(2) { animation-range: entry 2% entry 57%; }
    .qhd-tutorial-device:nth-child(3) { animation-range: entry 4% entry 59%; }
    .qhd-tutorial-device:nth-child(4) { animation-range: entry 6% entry 61%; }
    .qhd-tutorial-device:nth-child(5) { animation-range: entry 8% entry 63%; }
    .qhd-tutorial-device:nth-child(6) { animation-range: entry 10% entry 65%; }
    .qhd-tutorial-device:nth-child(7) { animation-range: entry 12% entry 67%; }
    .qhd-tutorial-device:nth-child(8) { animation-range: entry 14% entry 69%; }
    .qhd-tutorial-device:nth-child(9) { animation-range: entry 16% entry 71%; }
    .qhd-tutorial-device:nth-child(10) { animation-range: entry 18% entry 73%; }

    /* La carte sélectionnée garde son halo de sélection prioritaire. */
    .qhd-tutorial-device.is-flash {
      animation: qhd-tutorial-device-flash 0.4s ease-out;
    }
  }
}

@keyframes qhd-tutorial-rise-12 {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes qhd-tutorial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- 768 px : 3 colonnes (3 + 3 + 3 + 1, la dixième au centre) ------------- */

@media (min-width: 768px) {
  .qhd-tutorial-devices__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .qhd-tutorial-device:last-child {
    grid-column: 2;
  }

  .qhd-tutorial-devices .qhd-tutorial-device {
    min-block-size: 225px;
    padding: 20px 16px;
  }

  .qhd-tutorial-device__media {
    block-size: 105px;
  }
}

/* --- 1025 px : 5 colonnes × 2 ---------------------------------------------- */

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

  .qhd-tutorial-device:last-child {
    grid-column: auto;
  }

  .qhd-tutorial-devices .qhd-tutorial-device {
    min-block-size: 240px;
    padding: 20px 18px;
  }

  .qhd-tutorial-device__media {
    block-size: 112px;
  }
}

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Lignes décoratives masquées : le titre peut passer sur deux lignes. */
  .qhd-tutorial-devices__title::before,
  .qhd-tutorial-devices__title::after {
    display: none;
  }

  .qhd-tutorial-device__media {
    block-size: 84px;
  }
}

@media (max-width: 359px) {
  .qhd-tutorial-devices__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mouvement réduit : sélection intacte, aucune animation. */
@media (prefers-reduced-motion: reduce) {
  .qhd-tutorial-device,
  .qhd-tutorial-device.is-flash,
  .qhd-tutorial-device__check {
    animation: none;
    transition: none;
  }

  .qhd-tutorial-devices .qhd-tutorial-device:hover {
    transform: none;
  }
}

/* ==========================================================================
   Section 03 « guide dynamique » (sections/tutoriel-guide.php)
   --------------------------------------------------------------------------
   Masquée au chargement (attribut hidden : aucune hauteur, aucun espace).
   Après le premier choix d'appareil, le script retire hidden puis ajoute
   .is-visible : la carte apparaît en fondu + montée de 14 px (0,55 s).
   Une seule zone visible à la fois — chargement, message « bientôt
   disponible » ou tutoriel — avec un fondu court (0,22 s) entre deux.
   Contenu Gutenberg des tutoriels : styles scopés sous
   .qhd-tutorial-dynamic__content (aucune règle globale).
   Hauteur libre : chaque tutoriel définit la sienne.
   Fond de section : règles partagées avec le hero (plus haut).
   Tout est instantané si l'utilisateur réduit les animations.
   ========================================================================== */

.qhd-tutorial-dynamic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 8px clamp(3rem, 2rem + 3vw, 5rem); /* bas : 48 → 80 px */
  background-color: #06070b;
  /* En-tête fixe : le défilement s'arrête sous lui. */
  scroll-margin-top: 110px;
}

/* hidden doit l'emporter sur tout display éventuel. */
.qhd-tutorial-dynamic[hidden],
.qhd-tutorial-dynamic [data-qhd-tguide-loading][hidden],
.qhd-tutorial-dynamic [data-qhd-tguide-fallback][hidden],
.qhd-tutorial-dynamic [data-qhd-tguide-article][hidden],
.qhd-tutorial-dynamic [data-qhd-tguide-excerpt][hidden],
.qhd-tutorial-dynamic [data-qhd-tguide-video][hidden] {
  display: none;
}

.qhd-tutorial-dynamic__inner {
  inline-size: calc(100% - 32px);
  max-inline-size: 1240px;
  margin: 0 auto;
  padding: 22px 20px;
  border: 1px solid rgb(30 125 220 / 50%);
  border-radius: 20px;
  background-color: rgb(4 16 30 / 94%);
  box-shadow:
    0 15px 45px rgb(0 90 220 / 8%),
    0 0 30px rgb(242 30 105 / 6%);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.55s ease, translate 0.55s ease;
}

.qhd-tutorial-dynamic.is-visible .qhd-tutorial-dynamic__inner {
  opacity: 1;
  translate: 0 0;
}

/* Zones : chargement, message, tutoriel (une seule visible). */
.qhd-tutorial-dynamic__loading,
.qhd-tutorial-dynamic__fallback,
.qhd-tutorial-dynamic__guide {
  min-inline-size: 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.qhd-tutorial-dynamic__loading.is-shown,
.qhd-tutorial-dynamic__fallback.is-shown,
.qhd-tutorial-dynamic__guide.is-shown {
  opacity: 1;
}

.qhd-tutorial-dynamic__fallback:focus,
.qhd-tutorial-dynamic__title:focus {
  outline: none;
}

/* --- Chargement ------------------------------------------------------------ */

.qhd-tutorial-dynamic__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 36px 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #cbd2dd;
}

/* Cercle bleu / rose qui tourne. */
.qhd-tutorial-dynamic__spinner {
  flex: 0 0 auto;
  inline-size: 28px;
  block-size: 28px;
  border: 3px solid rgb(38 198 255 / 22%);
  border-block-start-color: #26c6ff;
  border-inline-end-color: #f24a67;
  border-radius: 50%;
  animation: qhd-tutorial-spin 0.9s linear infinite;
}

@keyframes qhd-tutorial-spin {
  to { rotate: 1turn; }
}

/* --- Message « bientôt disponible » ---------------------------------------- */

.qhd-tutorial-dynamic__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 28px 12px;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20 px */
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  color: #e5e9f0;
}

.qhd-tutorial-dynamic__fallback-icon {
  color: #26c6ff;
  filter: drop-shadow(0 0 8px rgb(38 198 255 / 22%));
}

/* --- En-tête du tutoriel --------------------------------------------------- */

.qhd-tutorial-dynamic__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-block-end: 26px;
  padding-block-end: 22px;
  border-block-end: 1px solid rgb(30 125 220 / 26%);
}

.qhd-tutorial-dynamic__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); /* 30 → 44 px */
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.qhd-tutorial-dynamic__excerpt {
  max-inline-size: 820px;
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16 → 18 px */
  line-height: 1.6;
  color: #cbd2dd;
}

/* Boutons d'en-tête : page complète du tutoriel (lien interne), puis vidéo.
   Le conteneur disparaît de la mise en page quand les deux sont masqués. */
.qhd-tutorial-dynamic__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.qhd-tutorial-dynamic__actions:not(:has(> a:not([hidden]))) {
  display: none;
}

.qhd-tutorial-dynamic__page {
  gap: 10px;
  min-block-size: 48px;
  padding: 8px 22px;
  border: 1px solid transparent;
  background-color: #f24a67;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgb(242 74 103 / 28%);
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__page,
.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__page:visited {
  color: #08090d;
  text-decoration: none;
}

@media (hover: hover) {
  .qhd-tutorial-dynamic a.qhd-tutorial-dynamic__page:hover {
    background-color: #ff5c78;
    color: #08090d;
  }
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__page:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
}

.qhd-tutorial-dynamic__page[hidden],
.qhd-tutorial-dynamic__video[hidden] {
  display: none;
}

@media (max-width: 479px) {
  .qhd-tutorial-dynamic__actions > a {
    inline-size: 100%;
  }
}

.qhd-tutorial-dynamic__video {
  gap: 10px;
  min-block-size: 48px;
  padding: 8px 22px;
  border: 1px solid rgb(25 145 255 / 85%);
  background-color: transparent;
  font-size: 1rem;
  font-weight: 700;
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__video {
  color: #ffffff;
  text-decoration: none;
}

@media (hover: hover) {
  .qhd-tutorial-dynamic a.qhd-tutorial-dynamic__video:hover {
    border-color: #f24a67;
    background-color: rgb(242 74 103 / 10%);
    color: #ffffff;
  }
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__video:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
}

/* --- Contenu Gutenberg (scopé) --------------------------------------------- */

.qhd-tutorial-dynamic__content {
  min-inline-size: 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* 16 → 17 px */
  line-height: 1.7;
  color: #cbd2dd;
  overflow-wrap: anywhere;
}

.qhd-tutorial-dynamic__content > * + * {
  margin-block-start: 1.1em;
}

.qhd-tutorial-dynamic__content > :first-child {
  margin-block-start: 0;
}

.qhd-tutorial-dynamic__content h2,
.qhd-tutorial-dynamic__content h3,
.qhd-tutorial-dynamic__content h4 {
  margin-block: 1.6em 0.5em;
  font-family: var(--qhd-font-title);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.qhd-tutorial-dynamic__content h2 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); }
.qhd-tutorial-dynamic__content h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.qhd-tutorial-dynamic__content h4 { font-size: 1.125rem; }

.qhd-tutorial-dynamic__content p {
  margin-block-end: 0;
}

.qhd-tutorial-dynamic__content ul,
.qhd-tutorial-dynamic__content ol {
  margin-inline: 0;
  padding-inline-start: 1.4em;
}

.qhd-tutorial-dynamic__content li + li {
  margin-block-start: 0.45em;
}

.qhd-tutorial-dynamic__content ol li::marker {
  font-weight: 800;
  color: #26c6ff;
}

.qhd-tutorial-dynamic__content ul li::marker {
  color: #f24a67;
}

.qhd-tutorial-dynamic__content strong {
  color: #ffffff;
}

.qhd-tutorial-dynamic__content a:not(.wp-block-button__link) {
  color: #20afff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.qhd-tutorial-dynamic__content a:not(.wp-block-button__link):hover {
  color: #f24a67;
}

.qhd-tutorial-dynamic__content a:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 2px;
}

/* Images et captures : jamais plus larges que le guide. */
.qhd-tutorial-dynamic__content img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 12px;
}

.qhd-tutorial-dynamic__content .wp-block-image img {
  border: 1px solid rgb(30 125 220 / 30%);
}

.qhd-tutorial-dynamic__content figure {
  margin-inline: 0;
}

.qhd-tutorial-dynamic__content figcaption {
  margin-block-start: 8px;
  font-size: 0.875rem;
  color: #9fb0c4;
  text-align: center;
}

.qhd-tutorial-dynamic__content iframe,
.qhd-tutorial-dynamic__content video {
  max-inline-size: 100%;
  border-radius: 12px;
}

.qhd-tutorial-dynamic__content blockquote {
  margin-inline: 0;
  padding: 14px 18px;
  border-inline-start: 3px solid #f24a67;
  border-radius: 0 10px 10px 0;
  background-color: rgb(242 74 103 / 6%);
  color: #e5e9f0;
}

.qhd-tutorial-dynamic__content hr {
  border: 0;
  border-block-start: 1px solid rgb(30 125 220 / 26%);
}

.qhd-tutorial-dynamic__content table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.qhd-tutorial-dynamic__content th,
.qhd-tutorial-dynamic__content td {
  padding: 8px 12px;
  border: 1px solid rgb(30 125 220 / 30%);
}

@media (min-width: 768px) {
  .qhd-tutorial-dynamic__inner {
    inline-size: calc(100% - 40px);
    padding: 30px;
  }
}

@media (min-width: 1025px) {
  .qhd-tutorial-dynamic__inner {
    inline-size: min(100% - (var(--qhd-gutter) * 2), 1240px);
    padding: 34px;
  }
}

/* Mouvement réduit : affichage immédiat, cercle de chargement fixe. */
@media (prefers-reduced-motion: reduce) {
  .qhd-tutorial-dynamic__inner,
  .qhd-tutorial-dynamic__loading,
  .qhd-tutorial-dynamic__fallback,
  .qhd-tutorial-dynamic__guide {
    transition: none;
  }

  .qhd-tutorial-dynamic__inner {
    translate: 0 0;
  }

  .qhd-tutorial-dynamic__spinner {
    animation: none;
  }

  .qhd-tutorial-dynamic__fallback-icon {
    filter: none;
  }
}
/* ==========================================================================
   Section 04 « support, avantages, essai » (sections/tutoriel-assistance.php)
   --------------------------------------------------------------------------
   Trois panneaux empilés : support (icône | texte | bouton), avantages
   (en-tête + 5 éléments : 1 colonne, 2 dès 600 px, 3 dès 768 px, 5 dès
   1025 px avec séparateurs), essai (Play | texte | bouton). Sous 1025 px,
   les boutons passent sous le texte ; sous 768 px, tout est en une colonne.
   Fond de section : règles partagées avec le hero (plus haut).
   Animations (coupées par prefers-reduced-motion) :
   - panneaux et avantages : apparition à l'entrée dans l'écran (CSS) ;
   - pulses doux et décalés : casque (10 s), bouton support (11 s),
     Play (12 s), bouton essai (10 s).
   ========================================================================== */

.qhd-tutorial-assistance {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(2.25rem, 1.75rem + 1.5vw, 2.75rem) clamp(3.5rem, 2rem + 4vw, 5rem); /* 36 → 44 / 56 → 80 px */
  background-color: #06070b;
}

.qhd-tutorial-assistance__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: min(100% - (var(--qhd-gutter) * 2), 1240px);
}

/* --- Panneaux (base commune) ----------------------------------------------- */

.qhd-tutorial-assistance__panel {
  min-inline-size: 0;
  padding: 22px 20px;
  border: 1px solid rgb(30 125 220 / 52%);
  border-radius: 20px;
  background-color: rgb(4 18 34 / 90%);
  /* Accent très léger : bleu à gauche, rose à droite. */
  box-shadow:
    -10px 0 26px -18px rgb(30 125 220 / 55%),
    10px 0 26px -18px rgb(242 30 105 / 45%);
}

.qhd-tutorial-assistance__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); /* 24 → 32 px */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.qhd-tutorial-assistance__text {
  max-inline-size: 700px;
  margin: 8px 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.6;
  color: #cbd2dd;
}

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

.qhd-tutorial-assistance__cta {
  gap: 10px;
  inline-size: 100%;
  min-block-size: 58px;
  padding: 10px 24px;
  border: 0;
  background-image: linear-gradient(90deg, #e92376, #ff3d67);
  font-size: 1.1875rem; /* 19 px gras : texte « grand » au sens WCAG */
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgb(242 74 103 / 22%);
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

/* Le thème parent souligne et colore les liens du contenu. */
.qhd-tutorial-assistance a.qhd-tutorial-assistance__cta {
  color: #ffffff;
  text-decoration: none;
}

.qhd-tutorial-assistance__cta-icon,
.qhd-tutorial-assistance__cta-arrow {
  flex: 0 0 auto;
}

.qhd-tutorial-assistance__cta-arrow {
  transition: transform var(--qhd-duration) var(--qhd-ease);
}

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

.qhd-tutorial-assistance a.qhd-tutorial-assistance__support-cta {
  animation: qhd-tutorial-cta-pulse 11s ease-in-out 6s infinite;
}

.qhd-tutorial-assistance a.qhd-tutorial-assistance__trial-cta {
  animation: qhd-tutorial-cta-pulse 10s ease-in-out 2s infinite;
}

@keyframes qhd-tutorial-cta-pulse {
  0%, 78%, 100% { box-shadow: 0 12px 30px rgb(242 74 103 / 22%); }
  81% { box-shadow: 0 12px 30px rgb(242 74 103 / 22%), 0 0 24px rgb(242 74 103 / 42%); }
  84% { box-shadow: 0 12px 30px rgb(242 74 103 / 22%); }
}

@media (hover: hover) {
  .qhd-tutorial-assistance a.qhd-tutorial-assistance__cta:hover {
    color: #ffffff;
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 30px rgb(242 74 103 / 22%), 0 0 22px rgb(242 30 105 / 18%);
  }

  .qhd-tutorial-assistance a.qhd-tutorial-assistance__cta:hover .qhd-tutorial-assistance__cta-arrow {
    transform: translateX(3px);
  }
}

/* --- Panneau 01 : support --------------------------------------------------- */

.qhd-tutorial-assistance__support,
.qhd-tutorial-assistance__trial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 18px;
}

.qhd-tutorial-assistance__support-content,
.qhd-tutorial-assistance__trial-content {
  min-inline-size: 0;
}

.qhd-tutorial-assistance__support-icon {
  inline-size: 64px;
  block-size: 64px;
  color: #f6248d;
  filter: drop-shadow(0 0 12px rgb(246 36 141 / 20%));
  animation: qhd-tutorial-headset-pulse 10s ease-in-out 1s infinite;
}

@keyframes qhd-tutorial-headset-pulse {
  0%, 78%, 100% { filter: drop-shadow(0 0 12px rgb(246 36 141 / 20%)); }
  81.5% { filter: drop-shadow(0 0 18px rgb(246 36 141 / 45%)); }
  85% { filter: drop-shadow(0 0 12px rgb(246 36 141 / 20%)); }
}

/* --- Panneau 02 : avantages ------------------------------------------------ */

.qhd-tutorial-assistance__benefits {
  border-color: rgb(30 125 220 / 42%);
  background-color: rgb(4 18 34 / 88%);
}

.qhd-tutorial-assistance__benefits-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.qhd-tutorial-assistance__benefits-icon {
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  color: #26c6ff;
  filter: drop-shadow(0 0 8px rgb(38 198 255 / 18%));
}

.qhd-tutorial-assistance__benefits .qhd-tutorial-assistance__title {
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); /* 22 → 28 px */
}

.qhd-tutorial-assistance__benefits .qhd-tutorial-assistance__text {
  margin-block-start: 4px;
  color: #c8d1de;
}

.qhd-tutorial-assistance__benefits-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.qhd-tutorial-benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-inline-size: 0;
  margin: 0;
  padding: 12px 4px;
}

.qhd-tutorial-benefit__icon {
  inline-size: 44px;
  block-size: 44px;
  color: #159bff;
  filter: drop-shadow(0 0 8px rgb(21 155 255 / 16%));
}

.qhd-tutorial-benefit__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
  margin: 0;
}

.qhd-tutorial-benefit__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.35;
  color: #ffffff;
}

.qhd-tutorial-benefit__text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: #bec8d6;
}

/* --- Panneau 03 : essai ---------------------------------------------------- */

.qhd-tutorial-assistance__trial {
  background-image: radial-gradient(circle at 80% 50%, rgb(242 30 105 / 10%), transparent 40%);
  border-color: rgb(30 125 220 / 48%);
}

.qhd-tutorial-assistance__trial-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  block-size: 72px;
  border: 2px solid rgb(20 160 255 / 85%);
  border-radius: 20px;
  color: #199cff;
  box-shadow: 0 0 18px rgb(20 160 255 / 15%);
  animation: qhd-tutorial-play-pulse 12s ease-in-out 8s infinite;
}

@keyframes qhd-tutorial-play-pulse {
  0%, 80%, 100% { box-shadow: 0 0 18px rgb(20 160 255 / 15%); }
  83% { box-shadow: 0 0 26px rgb(20 160 255 / 38%); }
  86% { box-shadow: 0 0 18px rgb(20 160 255 / 15%); }
}

/* --- Apparition à l'entrée dans l'écran ------------------------------------ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .qhd-tutorial-assistance__panel {
      animation: qhd-tutorial-rise-14 linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    .qhd-tutorial-assistance__benefits { animation-range: entry 4% entry 49%; }
    .qhd-tutorial-assistance__trial { animation-range: entry 8% entry 53%; }

    .qhd-tutorial-benefit {
      animation: qhd-tutorial-fade linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .qhd-tutorial-benefit:nth-child(2) { animation-range: entry 3% entry 63%; }
    .qhd-tutorial-benefit:nth-child(3) { animation-range: entry 6% entry 66%; }
    .qhd-tutorial-benefit:nth-child(4) { animation-range: entry 9% entry 69%; }
    .qhd-tutorial-benefit:nth-child(5) { animation-range: entry 12% entry 72%; }
  }
}

@keyframes qhd-tutorial-rise-14 {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* --- 600 px : avantages sur 2 colonnes, boutons à leur largeur ------------- */

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

  .qhd-tutorial-assistance__cta {
    inline-size: auto;
  }
}

/* --- 768 px : icône | texte, bouton dessous ; avantages sur 3 colonnes ----- */

@media (min-width: 768px) {
  .qhd-tutorial-assistance__panel {
    padding: 28px;
  }

  .qhd-tutorial-assistance__support,
  .qhd-tutorial-assistance__trial {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px 28px;
  }

  .qhd-tutorial-assistance__support-cta,
  .qhd-tutorial-assistance__trial-cta {
    grid-column: 2;
  }

  .qhd-tutorial-assistance__support-icon {
    inline-size: 72px;
    block-size: 72px;
  }

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

/* --- 1025 px : trois zones sur une ligne ; 5 avantages séparés ------------- */

@media (min-width: 1025px) {
  .qhd-tutorial-assistance__panel {
    padding: 30px 32px;
  }

  .qhd-tutorial-assistance__support,
  .qhd-tutorial-assistance__trial {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 34px;
  }

  .qhd-tutorial-assistance__support-cta,
  .qhd-tutorial-assistance__trial-cta {
    grid-column: auto;
    padding-inline: 36px;
  }

  .qhd-tutorial-assistance__support-icon {
    inline-size: 80px;
    block-size: 80px;
  }

  .qhd-tutorial-assistance__trial-icon {
    inline-size: 82px;
    block-size: 82px;
  }

  .qhd-tutorial-assistance__benefits-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-block-start: 30px;
  }

  .qhd-tutorial-benefit {
    gap: 14px;
    padding: 12px 16px;
  }

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

  .qhd-tutorial-benefit + .qhd-tutorial-benefit {
    border-inline-start: 1px solid rgb(30 125 220 / 28%);
  }

  .qhd-tutorial-benefit__icon {
    inline-size: 42px;
    block-size: 42px;
  }
}

@media (min-width: 1280px) {
  .qhd-tutorial-benefit__icon {
    inline-size: 48px;
    block-size: 48px;
  }
}

/* Mouvement réduit : design statique, contenu entièrement visible. */
@media (prefers-reduced-motion: reduce) {
  .qhd-tutorial-assistance__support-icon,
  .qhd-tutorial-assistance__trial-icon,
  .qhd-tutorial-assistance a.qhd-tutorial-assistance__support-cta,
  .qhd-tutorial-assistance a.qhd-tutorial-assistance__trial-cta {
    animation: none;
  }

  .qhd-tutorial-assistance__cta,
  .qhd-tutorial-assistance__cta-arrow {
    transition: none;
  }

  .qhd-tutorial-assistance a.qhd-tutorial-assistance__cta:hover,
  .qhd-tutorial-assistance a.qhd-tutorial-assistance__cta:hover .qhd-tutorial-assistance__cta-arrow {
    transform: none;
  }
}

/* ==========================================================================
   Section 03 — composants des tutoriels (contenu Gutenberg des « Tutoriels
   IPTV »). Leurs styles sont dans general.css (partagés avec les pages
   individuelles des tutoriels) ; ne restent ici que le défilement et le lien
   « Retour aux appareils ». Rappel des classes posées
   sur les blocs dans l'éditeur (Avancé › Classes CSS additionnelles) :
   - qhd-guide-cover   : image de couverture (bloc Image) ;
   - qhd-guide-facts   : repères rapides (bloc Liste, « libellé en gras
                         + valeur » par élément) ;
   - qhd-guide-step    : carte d'étape (bloc Groupe) ; son titre (Titre H3)
                         commence par <span class="qhd-guide-step__num"> ;
   - qhd-guide-note + qhd-guide-note--info | --tip | --security
                       : encadré (bloc Groupe) ;
   - qhd-guide-shot    : capture d'écran (bloc Image) ;
   - qhd-guide-section-title : titre de section (Dépannage, FAQ) ;
   - qhd-guide-table   : tableau (bloc Tableau) ;
   - qhd-guide-faq     : question / réponse (bloc Détails) ;
   - qhd-guide-source  : mention de source discrète (bloc Paragraphe).
   Plus le lien « Retour aux appareils » du conteneur.
   ========================================================================== */

/* Défilement vers la grille : s'arrête sous l'en-tête fixe. */
.qhd-tutorial-devices {
  scroll-margin-top: 90px;
}

.qhd-tutorial-dynamic__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 18px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__back {
  color: #c7ced8;
  text-decoration: none;
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__back:hover {
  color: #ffffff;
}

.qhd-tutorial-dynamic a.qhd-tutorial-dynamic__back:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Composants des guides (étapes, encadrés, chemins, tableaux, FAQ…) :
   déplacés dans general.css, partagés avec les pages individuelles des
   tutoriels (sélecteur :is(.qhd-tutorial-dynamic__content, .qhd-guide-content)). */