/* ==========================================================================
   QUÉBEC HD — general.css
   Socle partagé : tokens --qhd-*, typographie, composants et états.
   Chargé sur toutes les pages, avant la feuille spécifique à la page.

   Règles du projet :
   - tous les sélecteurs sont préfixés qhd- ou portés par .qhd-theme ;
   - on ne neutralise jamais globalement les styles d'Elementor ou de WordPress ;
   - aucun @import, aucun fichier tokens.css séparé.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices — auto-hébergées, aucun CDN
   --------------------------------------------------------------------------
   Inter Variable (SIL OFL 1.1, fichier et licence dans assets/fonts/) est
   active. Inter Tight n'est pas disponible localement : la pile des titres
   retombe sur Inter, avec approche serrée. Pour l'activer, déposer
   assets/fonts/inter-tight-variable.woff2 et décommenter le second bloc.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2-variations"),
       url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/*
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-variable.woff2") format("woff2-variations"),
       url("../fonts/inter-tight-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fonds et surfaces */
  --qhd-bg: #08090d;
  --qhd-surface: #12141c;
  --qhd-surface-raised: #1b1e29;

  /* Texte */
  --qhd-text: #f5f5f7;
  --qhd-text-secondary: #bcc0cb;
  --qhd-text-muted: #949bae;
  --qhd-title-muted: #9697a3;

  /* Traits */
  --qhd-border: #303544;
  --qhd-control-border: #747d92;

  /* Accent principal des petits éléments (stickers, points) : texte sombre dessus. */
  --qhd-accent: #ec3655;

  /* Accents issus du logo */
  --qhd-pink: #ff00b8;
  --qhd-coral: #ff5b67;
  --qhd-orange: #ff982e;
  --qhd-yellow: #ffe34a;
  --qhd-violet: #673acb;
  --qhd-blue: #569af0;
  --qhd-cyan: #65d2f3;

  /* États */
  --qhd-success: #72d9aa;
  --qhd-error: #ff9cb5;

  /* Dégradés */
  --qhd-gradient-warm: linear-gradient(115deg, var(--qhd-pink), var(--qhd-coral) 42%, var(--qhd-orange) 78%, var(--qhd-yellow));
  --qhd-gradient-cool: linear-gradient(135deg, var(--qhd-violet), var(--qhd-blue) 65%, var(--qhd-cyan));

  /* Polices — Inter Tight retombe sur Inter (auto-hébergée) tant qu'elle manque. */
  --qhd-font-title: "Inter Tight", "Inter", Arial, Helvetica, sans-serif;
  --qhd-font-body: "Inter", Arial, Helvetica, sans-serif;

  /* Échelle d'espacement */
  --qhd-space-1: 4px;
  --qhd-space-2: 8px;
  --qhd-space-3: 12px;
  --qhd-space-4: 16px;
  --qhd-space-5: 24px;
  --qhd-space-6: 32px;
  --qhd-space-7: 48px;
  --qhd-space-8: 64px;
  --qhd-space-9: 96px;
  --qhd-space-10: 128px;

  /* En-tête : hauteur de la barre, reprise par le contenu qu'elle surplombe. */
  --qhd-header-h: 88px;

  /* Mise en page */
  --qhd-maxw: 1280px;
  --qhd-maxw-stage: 1440px;
  --qhd-gutter: 20px;
  --qhd-section-gap: clamp(4rem, 1.6rem + 8vw, 8rem); /* 64 → 128 px */

  /* Verre — réglé contre le vrai fond : les couleurs derrière restent visibles. */
  --qhd-glass-bg: rgb(18 20 28 / 56%);
  --qhd-glass-bg-strong: rgb(18 20 28 / 82%); /* textes longs, formulaires */
  --qhd-glass-border: rgb(255 255 255 / 14%);
  --qhd-glass-border-top: rgb(255 255 255 / 34%);
  --qhd-glass-blur: 26px;
  --qhd-glass-radius: 28px;
  --qhd-glass-padding: 32px;
  --qhd-glass-shadow: 0 30px 70px rgb(0 0 0 / 42%), 0 2px 6px rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 12%);

  /* Rayons */
  --qhd-radius-field: 12px;
  --qhd-radius-pill: 999px;

  /* Transitions */
  --qhd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --qhd-duration: 180ms;
}

@media (max-width: 767px) {
  :root {
    --qhd-header-h: 72px;
  }
}

@media (min-width: 768px) {
  :root {
    --qhd-gutter: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --qhd-gutter: 48px;
  }
}

/* --------------------------------------------------------------------------
   2. Racine du projet
   -------------------------------------------------------------------------- */

body.qhd-theme {
  background-color: var(--qhd-bg);
  color: var(--qhd-text-secondary);
  font-family: var(--qhd-font-body);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ancres : compense un header fixe de 88 px (72 px en mobile). */
.qhd-theme [id] {
  scroll-margin-top: 104px;
}

@media (max-width: 767px) {
  .qhd-theme [id] {
    scroll-margin-top: 88px;
  }
}

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */

.qhd-section {
  position: relative;
  box-sizing: border-box;
  padding-block: var(--qhd-section-gap);
}

.qhd-section *,
.qhd-section *::before,
.qhd-section *::after {
  box-sizing: border-box;
}

.qhd-container {
  width: min(100% - (var(--qhd-gutter) * 2), var(--qhd-maxw));
  margin-inline: auto;
}

.qhd-container--stage {
  width: min(100% - (var(--qhd-gutter) * 2), var(--qhd-maxw-stage));
}

.qhd-stack > * + * {
  margin-block-start: var(--qhd-space-5);
}

/* --------------------------------------------------------------------------
   4. Typographie
   Toutes les valeurs sont fluides entre 480 px et 1280 px de large.
   -------------------------------------------------------------------------- */

.qhd-h1,
.qhd-h2,
.qhd-h3,
.qhd-h4 {
  font-family: var(--qhd-font-title);
  color: var(--qhd-text);
  margin: 0;
  text-wrap: balance;
}

.qhd-h5,
.qhd-h6 {
  font-family: var(--qhd-font-body);
  color: var(--qhd-text);
  margin: 0;
}

.qhd-h1 {
  font-size: clamp(2.25rem, 1.1rem + 6vw, 5.5rem); /* 36 px à 320, ~42 px à 390, 88 px dès 1180 */
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.qhd-h2 {
  font-size: clamp(2.125rem, 1rem + 3.75vw, 4rem); /* 34 → 64 px */
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.qhd-h3 {
  font-size: clamp(1.625rem, 1.25rem + 1.25vw, 2.25rem); /* 26 → 36 px */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.qhd-h4 {
  font-size: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem); /* 22 → 28 px */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.qhd-h5 {
  font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 18 → 20 px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.qhd-h6 {
  font-size: clamp(1rem, 0.925rem + 0.25vw, 1.125rem); /* 16 → 18 px */
  font-weight: 600;
  line-height: 1.35;
}

/* Partie atténuée d'un grand titre : teinte stable, jamais un texte transparent. */
.qhd-title-muted {
  color: var(--qhd-title-muted);
}

.qhd-lead {
  margin: 0;
  font-size: clamp(1.125rem, 0.975rem + 0.5vw, 1.375rem); /* 18 → 22 px */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: var(--qhd-text-secondary);
}

.qhd-text {
  margin: 0;
  font-size: clamp(1rem, 0.925rem + 0.25vw, 1.125rem); /* 16 → 18 px */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--qhd-text-secondary);
}

.qhd-measure {
  max-width: 62ch;
}

.qhd-caption {
  margin: 0;
  font-size: 0.875rem; /* 14 px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--qhd-text-muted);
}

.qhd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--qhd-space-2);
  margin: 0;
  font-size: 0.75rem; /* 12 px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qhd-text);
}

.qhd-eyebrow--pill {
  padding: var(--qhd-space-2) var(--qhd-space-4);
  border: 1px solid var(--qhd-border);
  border-radius: var(--qhd-radius-pill);
  background-color: var(--qhd-surface-raised);
}

.qhd-eyebrow__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background-color: var(--qhd-accent);
  box-shadow: 0 0 0 3px rgb(236 54 85 / 22%);
  flex: 0 0 auto;
}

/* Pastille d'accent : #EC3655, texte blanc (choix de direction artistique).
   Le ratio blanc/#EC3655 est d'environ 3,8:1 : la graisse 700 et l'ombre
   portée compensent perceptuellement, mais AA n'est pas atteint sous 18,66 px.
   Réservée aux libellés courts et décoratifs. */
.qhd-eyebrow--accent {
  padding: 8px 16px;
  border-radius: var(--qhd-radius-pill);
  background-color: var(--qhd-accent);
  color: #ffffff;
  font-size: 0.6875rem; /* 11 px */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgb(120 12 30 / 45%);
  box-shadow: 0 8px 22px rgb(236 54 85 / 26%);
}

/* --------------------------------------------------------------------------
   5. Verre
   -------------------------------------------------------------------------- */

.qhd-glass {
  position: relative;
  border: 1px solid var(--qhd-glass-border);
  border-top-color: var(--qhd-glass-border-top);
  border-radius: var(--qhd-glass-radius);
  padding: var(--qhd-glass-padding);
  background-color: var(--qhd-glass-bg);
  /* Léger voile plus clair en haut : la lumière semble traverser le verre. */
  background-image: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 0%) 42%);
  box-shadow: var(--qhd-glass-shadow);
  -webkit-backdrop-filter: blur(var(--qhd-glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--qhd-glass-blur)) saturate(135%);
}

/* Verre renforcé : textes longs, formulaires, tout contenu à lire. */
.qhd-glass--strong {
  background-color: var(--qhd-glass-bg-strong);
}


/* --------------------------------------------------------------------------
   6. Boutons et liens
   -------------------------------------------------------------------------- */

.qhd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qhd-space-3);
  min-block-size: 56px;
  padding: 10px var(--qhd-space-5);
  border: 1px solid transparent;
  border-radius: var(--qhd-radius-pill);
  font-family: var(--qhd-font-body);
  font-size: 0.9375rem; /* 15 px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--qhd-duration) var(--qhd-ease),
    background-color var(--qhd-duration) var(--qhd-ease),
    border-color var(--qhd-duration) var(--qhd-ease);
}

/* Blanc cassé, pas blanc pur : moins dur sur un fond sombre. */
.qhd-btn--primary {
  background-color: var(--qhd-text);
  color: var(--qhd-bg);
  box-shadow: 0 10px 26px rgb(0 0 0 / 26%);
}

.qhd-btn--primary:hover {
  background-color: #ffffff;
}

.qhd-btn--secondary {
  background-color: var(--qhd-surface);
  color: var(--qhd-text);
  border-color: var(--qhd-control-border);
}

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

.qhd-btn--secondary:hover {
  background-color: var(--qhd-surface-raised);
}

/* Bouton d'accent : #EC3655, texte sombre (ratio ≈ 5,9:1). */
.qhd-btn--accent {
  background-color: var(--qhd-accent);
  color: var(--qhd-bg);
  box-shadow: 0 10px 26px rgb(236 54 85 / 28%);
}

.qhd-btn--accent:hover {
  background-color: #f24a67;
}

.qhd-btn--accent .qhd-btn__icon {
  background-color: rgb(8 9 13 / 16%);
  color: var(--qhd-bg);
}

/* Bouton fantôme : fond sombre translucide, contour clair fin, texte clair. */
.qhd-btn--ghost {
  background-color: rgb(10 10 22 / 42%);
  color: var(--qhd-text);
  border-color: rgb(255 255 255 / 24%);
  box-shadow: 0 10px 26px rgb(0 0 0 / 20%);
}

.qhd-btn--ghost:hover {
  background-color: rgb(10 10 22 / 58%);
  border-color: rgb(255 255 255 / 38%);
}

/* Bouton à flèche : cercle distinct à droite, décoratif, dans le même lien. */
.qhd-btn--arrow {
  padding-inline-end: 8px;
}

/* Destination pas encore définie : le bouton reste visible mais inerte.
   Le reset du thème parent impose `color: inherit` aux <a> sans href
   (spécificité 0,2,1) : on rétablit explicitement la couleur du composant. */
a.qhd-btn:not([href]):not([tabindex]) {
  color: var(--qhd-text);
  cursor: default;
}

.qhd-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  color: currentColor;
}

.qhd-btn--primary .qhd-btn__icon {
  background-color: var(--qhd-bg);
  color: var(--qhd-text);
}

.qhd-btn--ghost .qhd-btn__icon,
.qhd-btn--secondary .qhd-btn__icon {
  background-color: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 26%);
}

.qhd-link {
  color: var(--qhd-cyan);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* --------------------------------------------------------------------------
   6 bis. En-tête de site (section header.php)
   --------------------------------------------------------------------------
   Transparent, affiché sur toutes les pages via `wp_body_open`. Il occupe sa
   place dans le flux : le contenu d'une page ordinaire n'est jamais recouvert.

   La superposition est à l'initiative de la section qui la veut : c'est elle
   qui remonte sous l'en-tête, par une marge négative, et qui réserve la
   hauteur correspondante en padding (voir .qhd-hero dans pages/home.css).
   Aucun positionnement absolu : rien à corriger pour la barre
   d'administration ni pour les conteneurs Elementor.
   Non fixe au défilement dans cette version.
   -------------------------------------------------------------------------- */

.qhd-header {
  position: relative;
  z-index: 5;
  font-family: var(--qhd-font-body);
}

/* Voile de lisibilité : sombre en haut, éteint vers le bas, sans limite
   visible. Calque décoratif indépendant — il ne touche ni au logo ni aux
   liens et n'intercepte aucun clic. */
.qhd-header__scrim {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 210px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    rgb(4 5 10 / 84%) 0%,
    rgb(4 5 10 / 62%) 30%,
    rgb(4 5 10 / 30%) 62%,
    rgb(4 5 10 / 0%) 100%
  );
}

.qhd-header__inner {
  display: flex;
  align-items: center;
  gap: var(--qhd-space-5);
  min-block-size: var(--qhd-header-h);
}

/* Logo : largeur fixée, proportions conservées. */
.qhd-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.qhd-header__logo-img {
  display: block;
  inline-size: 180px;
  max-inline-size: none;
  block-size: auto;
}

.qhd-header__logo-text {
  font-family: var(--qhd-font-title);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--qhd-text);
}

/* Bloc navigation + bouton. Sur ordinateur, la liste se centre dans l'espace
   restant et pousse le bouton au bord droit. */
.qhd-header__panel {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: var(--qhd-space-5);
}

.qhd-header__nav {
  margin-inline: auto;
}

.qhd-header__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw - 8px, 30px); /* 14 px à 1280, 22 px à 1920 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.qhd-header__list > li {
  margin: 0;
}

.qhd-header__list a {
  display: inline-block;
  padding-block: 6px;
  font-size: 0.9375rem; /* 15 px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--qhd-text);
  text-decoration: none;
  white-space: nowrap; /* un libellé ne se coupe jamais sur deux lignes */
  transition: color var(--qhd-duration) var(--qhd-ease);
}

/* Entre 1280 et 1599 px : logo et libellés un peu plus compacts pour que les
   huit entrées et le bouton tiennent sur une ligne. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .qhd-header__logo-img {
    inline-size: 150px;
  }

  .qhd-header__inner,
  .qhd-header__panel {
    gap: var(--qhd-space-4);
  }

  .qhd-header__list a {
    font-size: 0.875rem; /* 14 px */
  }
}

.qhd-header__list a:hover,
.qhd-header__list .current-menu-item > a,
.qhd-header__list .current_page_item > a,
.qhd-header__list .current-menu-ancestor > a {
  color: var(--qhd-accent);
}

/* Bouton d'essai : plus compact que ceux du hero, même langage graphique. */
.qhd-header__cta {
  flex: 0 0 auto;
  min-block-size: 47px;
  padding: 6px 8px 6px 20px;
  gap: var(--qhd-space-2);
}

.qhd-header__cta .qhd-btn__icon {
  inline-size: 31px;
  block-size: 31px;
}

/* Texte et flèche en blanc (demande client), comme les pastilles d'accent :
   graisse 700 et ombre portée légère. Blanc sur #EC3655 ≈ 3,8:1 (AA non
   atteint sous 18,66 px en gras) — choix de direction artistique assumé. */
.qhd-header a.qhd-header__cta,
.qhd-header a.qhd-header__cta:hover {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(120 12 30 / 45%);
}

.qhd-header .qhd-header__cta .qhd-btn__icon {
  color: #ffffff;
}

/* Bouton d'ouverture : masqué sur ordinateur. */
.qhd-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-start: auto;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 14px;
  background-color: rgb(10 10 22 / 42%);
  color: var(--qhd-text);
  cursor: pointer;
}

.qhd-header__toggle:hover {
  border-color: rgb(255 255 255 / 40%);
}

/* Trois barres, croix à l'ouverture. */
.qhd-header__burger,
.qhd-header__burger::before,
.qhd-header__burger::after {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform var(--qhd-duration) var(--qhd-ease),
    opacity var(--qhd-duration) var(--qhd-ease);
}

.qhd-header__burger {
  position: relative;
}

.qhd-header__burger::before,
.qhd-header__burger::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.qhd-header__burger::before {
  inset-block-start: -6px;
}

.qhd-header__burger::after {
  inset-block-start: 6px;
}

.qhd-header__toggle[aria-expanded="true"] .qhd-header__burger {
  background-color: transparent;
}

.qhd-header__toggle[aria-expanded="true"] .qhd-header__burger::before {
  transform: translateY(6px) rotate(45deg);
}

.qhd-header__toggle[aria-expanded="true"] .qhd-header__burger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   En-tête — mobile et tablette : panneau déroulant opaque
   Seuil 1280 px : le menu compte huit entrées (dont « Revendeur ») et ne
   tient plus sur une ligne en dessous. Même seuil dans general.js.
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  .qhd-header__logo-img {
    inline-size: 140px;
  }

  .qhd-header__toggle {
    display: inline-flex;
  }

  .qhd-header__panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: var(--qhd-gutter);
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--qhd-space-4);
    padding: var(--qhd-space-5);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 22px;
    /* Fond franc : rien du contenu ne doit transparaître derrière les liens. */
    background-color: rgb(8 9 13 / 98%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 28px 64px rgb(0 0 0 / 55%);
  }

  .qhd-header__panel[data-open="true"] {
    display: flex;
  }

  .qhd-header__nav {
    margin-inline: 0;
  }

  .qhd-header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .qhd-header__list a {
    display: block;
    padding-block: 12px;
    font-size: 1rem;
  }

  .qhd-header__list > li + li {
    border-block-start: 1px solid rgb(255 255 255 / 10%);
  }

  /* Le bouton d'essai reste distinct des liens. */
  .qhd-header__cta {
    justify-content: center;
    inline-size: 100%;
  }
}

/* --------------------------------------------------------------------------
   7. Champs de formulaire (opaques, jamais floutés)
   -------------------------------------------------------------------------- */

.qhd-field-label {
  display: block;
  margin-block-end: var(--qhd-space-2);
  font-size: 0.875rem; /* 14 px */
  font-weight: 500;
  line-height: 1.5;
  color: var(--qhd-text);
}

.qhd-field {
  display: block;
  inline-size: 100%;
  min-block-size: 52px;
  padding: 14px 16px;
  border: 1px solid var(--qhd-control-border);
  border-radius: var(--qhd-radius-field);
  background-color: var(--qhd-surface);
  color: var(--qhd-text);
  font-family: var(--qhd-font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

textarea.qhd-field {
  min-block-size: 160px;
  resize: vertical;
}

.qhd-field::placeholder {
  color: var(--qhd-text-muted);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   8. États et accessibilité (limités à nos composants)
   -------------------------------------------------------------------------- */

/* Le reset du thème parent impose un contour noir + halo blanc (spécificité
   0,2,1) : on reprend la main sur notre périmètre, sans toucher au reste. */
.qhd-section :focus-visible,
.qhd-header :focus-visible,
a.qhd-btn:focus-visible,
.qhd-link:focus-visible,
.qhd-field:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 3px;
  box-shadow: none;
}

.qhd-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.qhd-status {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.qhd-status--success {
  color: var(--qhd-success);
}

.qhd-status--error {
  color: var(--qhd-error);
}

/* --------------------------------------------------------------------------
   9. Replis
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --qhd-glass-radius: 20px;
    --qhd-glass-padding: 24px;
    --qhd-glass-blur: 16px;
  }
}

/* Sans backdrop-filter : surface opaque, lisibilité garantie. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .qhd-glass {
    background-color: var(--qhd-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qhd-btn,
  .qhd-glass {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   10. Enseignes néon (composant partagé)
   --------------------------------------------------------------------------
   Calque décoratif posé dans une section (.qhd-neons, rendu par
   qhd_neon_layer() en PHP), animé par assets/js/neons.js : le script choisit
   le mot, la couleur et une place libre (jamais sur le contenu) ; ce bloc ne
   fait que le dessin et la « vie » d'une enseigne : grésillement à
   l'allumage, lueur stable, léger vacillement, extinction.
   Utilisé par : accueil section 03, page Abonnements section 02.
   Seulement transform et opacity : animé par le GPU.
   -------------------------------------------------------------------------- */

.qhd-neons {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.62;
  contain: strict;
}

.qhd-neon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0));
}

.qhd-neon.is-on {
  animation: qhd-neon-life 5s linear forwards;
}

.qhd-neon::before {
  content: attr(data-label);
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 0.55em;
  font-family: var(--qhd-font-title);
  font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03em;
  white-space: nowrap;
  /* Cœur du tube presque blanc, halo de la couleur. */
  color: color-mix(in srgb, var(--c) 35%, #ffffff);
  text-shadow:
    0 0 4px var(--c),
    0 0 12px var(--c),
    0 0 28px var(--c);
}

/* Une enseigne sur trois est encadrée d'un tube. */
.qhd-neon--framed::before {
  border: 1.5px solid color-mix(in srgb, var(--c) 70%, #ffffff);
  box-shadow: 0 0 10px var(--c), inset 0 0 8px color-mix(in srgb, var(--c) 60%, transparent);
}

/* Couleurs du logo. */
.qhd-neon--c1 { --c: var(--qhd-cyan); }
.qhd-neon--c2 { --c: var(--qhd-coral); }
.qhd-neon--c3 { --c: var(--qhd-pink); }
.qhd-neon--c4 { --c: #a07bff; }
.qhd-neon--c5 { --c: var(--qhd-yellow); }
.qhd-neon--c6 { --c: var(--qhd-orange); }
.qhd-neon--c7 { --c: var(--qhd-blue); }

/* Allumage en deux grésillements, lueur, vacillement, extinction.
   Jamais plus de deux éclats par seconde. */
@keyframes qhd-neon-life {
  0% { opacity: 0; }
  4% { opacity: 0.85; }
  7% { opacity: 0.2; }
  11% { opacity: 1; }
  68% { opacity: 1; }
  71% { opacity: 0.5; }
  74% { opacity: 0.95; }
  86% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Mouvement réduit : enseignes fixes (placées une seule fois par le script),
   sans clignoter. */
@media (prefers-reduced-motion: reduce) {
  .qhd-neon.is-on {
    animation: none;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   11. Pied de page (sections/footer.php, rendu sur tout le site)
   --------------------------------------------------------------------------
   Bandeau « Méthodes de paiement », puis logo + accroche et colonnes de
   liens (1 colonne, 2 dès 600 px, 4 dès 1025 px), puis copyright et liens
   légaux. Fond sombre uni, filets bleutés ; accents roses sur les puces.
   -------------------------------------------------------------------------- */

.qhd-footer {
  --qhd-footer-pink: #f24a67;
  --qhd-footer-line: rgb(30 120 210 / 22%);
  border-block-start: 1px solid var(--qhd-footer-line);
  background-color: #05060a;
  color: #c8cfd9;
  font-family: var(--qhd-font-body);
}

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

/* --- Méthodes de paiement -------------------------------------------------- */

.qhd-footer__payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-block: 20px;
  border-block-end: 1px solid var(--qhd-footer-line);
}

.qhd-footer__payments-title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.qhd-footer__payments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qhd-footer__payment {
  margin: 0;
  padding: 5px 12px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 6px;
  background-color: rgb(255 255 255 / 5%);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #e6e9ef;
}

/* Logo fourni (SVG transparent, cadre commun 2,4:1) : petite carte blanche
   uniforme, indispensable aux logos sombres (Apple Pay, Google Pay) ;
   couleurs d'origine des marques. */
.qhd-footer__payment--logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 5px;
  border-color: rgb(255 255 255 / 70%);
  border-radius: 5px;
  background-color: #ffffff;
}

/* Taille réduite (52 × 22 px, même rapport 2,4:1 que le cadre des SVG). */
.qhd-footer__payment-logo {
  display: block;
  inline-size: 52px;
  block-size: 22px;
  object-fit: contain;
}

/* --- Colonnes -------------------------------------------------------------- */

.qhd-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
}

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

.qhd-footer .qhd-footer__logo {
  display: inline-block;
  text-decoration: none;
}

.qhd-footer__logo-img {
  display: block;
  inline-size: 150px;
  block-size: auto;
}

.qhd-footer__logo-text {
  font-family: var(--qhd-font-title);
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
}

.qhd-footer__tagline {
  max-inline-size: 280px;
  margin: 22px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #aeb8c9;
}

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

.qhd-footer__title {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

.qhd-footer__links {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.qhd-footer__links li {
  margin: 0;
}

/* Puce « › » rose dessinée, non lue par les lecteurs d'écran. */
.qhd-footer .qhd-footer__link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #e4e7ed;
  text-decoration: none;
  transition: color 0.2s ease;
}

.qhd-footer__links .qhd-footer__link::before,
.qhd-footer__legal-list .qhd-footer__link::before {
  content: "›";
  flex: 0 0 auto;
  color: var(--qhd-footer-pink);
}

.qhd-footer__link-value {
  overflow-wrap: anywhere;
}

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

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

/* --- Réseaux sociaux (affichés seulement si une URL est renseignée) -------- */

.qhd-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.qhd-footer__socials li {
  margin: 0;
}

.qhd-footer .qhd-footer__social {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 8px;
  background-color: rgb(255 255 255 / 5%);
  color: #ffffff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.qhd-footer .qhd-footer__social:hover {
  border-color: var(--qhd-footer-pink);
  background-color: rgb(242 74 103 / 14%);
  color: #ffffff;
}

/* --- Bas de page ----------------------------------------------------------- */

.qhd-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 20px 26px;
  border-block-start: 1px solid var(--qhd-footer-line);
}

.qhd-footer__copyright {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #aeb8c9;
}

.qhd-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qhd-footer__legal-list li {
  margin: 0;
}

/* --- 600 px : deux colonnes ------------------------------------------------ */

@media (min-width: 600px) {
  .qhd-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}

/* --- 1025 px : logo + trois colonnes sur une ligne ------------------------- */

@media (min-width: 1025px) {
  /* Une colonne égale par bloc présent (les colonnes vides sont masquées). */
  .qhd-footer__main {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 40px;
  }

  .qhd-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qhd-footer .qhd-footer__link,
  .qhd-footer .qhd-footer__social {
    transition: none;
  }
}


/* ==========================================================================
   Composants des tutoriels IPTV (contenu Gutenberg des « Tutoriels IPTV »)
   --------------------------------------------------------------------------
   Partagés par deux affichages d'un même tutoriel :
   - la zone dynamique de la page « Tutoriel d'installation »
     (.qhd-tutorial-dynamic__content, sections/tutoriel-guide.php) ;
   - la page individuelle d'un tutoriel (.qhd-guide-content,
     sections/tutoriel-article-page.php).
   Classes posées sur les blocs dans l'éditeur (Avancé › Classes CSS
   additionnelles) : qhd-guide-cover, qhd-guide-facts, qhd-guide-step
   (+ qhd-guide-step__num dans le titre H3), qhd-guide-note (+ --info, --tip,
   --warning, --security), qhd-guide-path, qhd-guide-shot,
   qhd-guide-section-title, qhd-guide-table, qhd-guide-faq, qhd-guide-source.
   ========================================================================== */
/* Groupes Gutenberg : pleine largeur du guide (annule la largeur de contenu
   du thème sur les mises en page « contraintes »). */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .wp-block-group > * {
  max-inline-size: none;
}

/* Couverture. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-cover img {
  inline-size: 100%;
  border: 1px solid rgb(30 125 220 / 35%);
}

/* Repères rapides : trois pastilles. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ul.qhd-guide-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  list-style: none;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ul.qhd-guide-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgb(30 125 220 / 40%);
  border-radius: 12px;
  background-color: rgb(6 24 44 / 80%);
  color: #cbd2dd;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ul.qhd-guide-facts li::marker {
  content: none;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ul.qhd-guide-facts strong {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #26c6ff;
}

/* Carte d'étape. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-step {
  margin-block-start: 22px;
  padding: 20px 18px;
  border: 1px solid rgb(30 125 220 / 45%);
  border-radius: 16px;
  background-color: rgb(6 22 40 / 70%);
  box-shadow: -8px 0 24px -18px rgb(30 125 220 / 55%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-step > :first-child {
  margin-block-start: 0;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-step__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 12px;
}

/* Numéro d'étape : texte réel, cercle bleu → violet → rose. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-step__num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #2294ff, #7b4dff 55%, #f24a67);
  box-shadow: 0 0 14px rgb(34 148 255 / 25%);
  font-size: 1.125rem;
  font-weight: 800;
  color: #ffffff;
}

/* Encadrés. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note {
  margin-block-start: 16px;
  padding: 14px 18px;
  border: 1px solid rgb(30 125 220 / 25%);
  border-inline-start: 4px solid #26c6ff;
  border-radius: 12px;
  background-color: rgb(8 30 52 / 70%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note p {
  margin: 0;
  color: #d9dfe8;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note strong {
  color: #26c6ff;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note--security {
  border-inline-start-color: #f24a67;
  background-color: rgb(40 12 26 / 55%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note--security strong {
  color: #ff7a93;
}

/* Attention (orange) et conseil (rose). */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note--warning {
  border-inline-start-color: #ff9f43;
  background-color: rgb(46 28 8 / 55%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note--warning strong {
  color: #ffb870;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note--tip {
  border-inline-start-color: #f24a67;
  background-color: rgb(40 12 26 / 45%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-note--tip strong {
  color: #ff7a93;
}

/* Chemin de menus : Paramètres › Mon Fire TV › … (liste ordonnée). */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  list-style: none;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path li::marker {
  content: none;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path li + li::before {
  content: "›";
  color: #26c6ff;
  font-weight: 800;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path li {
  padding: 0;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path li > * ,
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ol.qhd-guide-path li {
  line-height: 1.3;
}
/* Captures : pleine largeur de la carte. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-shot img {
  inline-size: 100%;
}

/* Titres de section (Dépannage, FAQ). */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-section-title {
  margin-block-start: 34px;
}

/* Tableau de dépannage. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-table {
  margin-inline: 0;
  overflow-x: auto;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-table table {
  display: table;
  inline-size: 100%;
  min-inline-size: 520px;
  border-collapse: collapse;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-table th {
  background-color: rgb(7 21 38 / 100%);
  font-weight: 700;
  color: #ffffff;
  text-align: start;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-table td:first-child {
  font-weight: 600;
  color: #ffffff;
}

/* FAQ (bloc Détails). */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-faq {
  margin-block-start: 10px;
  border: 1px solid rgb(30 120 210 / 45%);
  border-radius: 12px;
  background-color: rgb(5 20 35 / 90%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-faq summary {
  padding: 16px 20px;
  font-weight: 700;
  color: #f4f6fa;
  cursor: pointer;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-faq summary:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: -3px;
  border-radius: 12px;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-faq summary::marker {
  color: #26c6ff;
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-faq[open] {
  border-color: rgb(242 74 103 / 38%);
}

:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-faq p {
  margin: 0;
  padding: 0 20px 16px;
}

/* Source : discrète, en fin de tutoriel. */
:is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-source {
  margin-block-start: 34px;
  font-size: 0.8125rem;
  color: #8d9bb0;
}

@media (min-width: 768px) {
  /* Autant de colonnes que de repères (3 ou 4), sur une seule rangée. */
  :is(.qhd-tutorial-dynamic__content, .qhd-guide-content) ul.qhd-guide-facts {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
  }

  :is(.qhd-tutorial-dynamic__content, .qhd-guide-content) .qhd-guide-step {
    padding: 26px 28px;
  }
}