/* ==========================================================================
   QUÉBEC HD — pages/ville.css
   Gabarit des pages de référencement local par ville : « IPTV Montréal »
   (slug « iptv-montreal ») et « IPTV Laval » (slug « iptv-laval »). Les
   deux pages suivent le même gabarit : une seule feuille pour ce type de
   page (comme blog-article.css pour les articles), jamais par section.
   Typographie, boutons, verre, tarifs et focus viennent de general.css.

   Namespace : .qhd-city-*  (sections/montreal-*.php, sections/laval-*.php)
   Fond uni, verre pour les encadrés, accent #EC3655.
   Décor et animations (demandés par le client) :
   - enseignes néon du composant partagé (general.css section 10,
     assets/js/neons.js) dans le hero, l'appel à l'action et la FAQ ;
   - deux halos localisés (photo du hero, panneau d'appel à l'action) qui
     « respirent » lentement ;
   - entrée échelonnée du hero, apparition au défilement (CSS seul,
     animation-timeline: view()), survols, ouverture douce de la FAQ.
   Performance : seulement transform et opacity animés (GPU), aucun filtre
   de flou, content-visibility sur les sections hors écran, verre sans
   backdrop-filter là où rien n'est derrière. Tout mouvement est coupé par
   prefers-reduced-motion: reduce.
   ========================================================================== */

/* Contexte d'empilement : le calque néon (z-index -1) reste dans sa section,
   derrière le contenu. */
.qhd-city-hero,
.qhd-city-cta,
.qhd-city-faq {
  isolation: isolate;
}

/* Halos localisés : couleurs du logo, derrière le contenu, jamais sur le
   texte. Dégradés à plusieurs paliers (doux sans filtre de flou, donc peints
   une seule fois) ; seule l'opacité est animée.
   Le panneau en verre (backdrop-filter) crée son propre contexte : son halo
   est porté par le conteneur, pour rester derrière lui et être flouté. */
.qhd-city-hero__media,
.qhd-city-cta .qhd-container {
  position: relative;
}

.qhd-city-hero__media::before,
.qhd-city-cta .qhd-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Halo autour de la photo : rose en haut à gauche, orangé en bas à droite. */
.qhd-city-hero__media::before {
  inset: -14%;
  background-image:
    radial-gradient(42% 42% at 24% 26%, rgb(255 0 184 / 42%), rgb(255 0 184 / 16%) 45%, transparent 75%),
    radial-gradient(42% 42% at 78% 76%, rgb(255 152 46 / 36%), rgb(255 152 46 / 12%) 45%, transparent 75%);
}

.qhd-city-cta .qhd-container::before {
  inset: -18% 6%;
  background-image:
    radial-gradient(38% 55% at 24% 50%, rgb(103 58 203 / 34%), rgb(103 58 203 / 12%) 45%, transparent 75%),
    radial-gradient(38% 55% at 76% 50%, rgb(101 210 243 / 24%), rgb(101 210 243 / 8%) 45%, transparent 75%);
}

/* --------------------------------------------------------------------------
   Bandes LED « chaos » (sections 02 « local » et 03 « conseils ») — demandé
   par le client
   --------------------------------------------------------------------------
   Lignes lumineuses désordonnées, à des angles différents, qui se croisent
   derrière les cartes. Deux calques masqués (les couleurs ne sont peintes
   qu'une fois) :
   - ::before : quatre lignes fixes teintées du dégradé du logo (rose → corail
     → orangé → jaune → violet → bleu → cyan), avec halo ;
   - ::after : deux autres lignes, plus brillantes, qui grésillent par
     sursauts irréguliers (seule l'opacité est animée : GPU).
   À l'arrêt hors écran (content-visibility) et pour prefers-reduced-motion.
   Jamais derrière du texte (voir plus bas). */

.qhd-city-led {
  isolation: isolate;
  overflow: clip;
  /* Lignes fixes : cœur de 2 px + halo de 14 px. */
  --led-static:
    linear-gradient(7deg, transparent calc(14% - 1px), #000 calc(14% - 1px) calc(14% + 1px), transparent calc(14% + 1px)),
    linear-gradient(7deg, transparent calc(14% - 7px), rgb(0 0 0 / 30%) calc(14% - 7px) calc(14% + 7px), transparent calc(14% + 7px)),
    linear-gradient(171deg, transparent calc(83% - 1px), #000 calc(83% - 1px) calc(83% + 1px), transparent calc(83% + 1px)),
    linear-gradient(171deg, transparent calc(83% - 7px), rgb(0 0 0 / 30%) calc(83% - 7px) calc(83% + 7px), transparent calc(83% + 7px)),
    linear-gradient(79deg, transparent calc(23% - 1px), #000 calc(23% - 1px) calc(23% + 1px), transparent calc(23% + 1px)),
    linear-gradient(79deg, transparent calc(23% - 7px), rgb(0 0 0 / 30%) calc(23% - 7px) calc(23% + 7px), transparent calc(23% + 7px)),
    linear-gradient(101deg, transparent calc(71% - 1px), #000 calc(71% - 1px) calc(71% + 1px), transparent calc(71% + 1px)),
    linear-gradient(101deg, transparent calc(71% - 7px), rgb(0 0 0 / 30%) calc(71% - 7px) calc(71% + 7px), transparent calc(71% + 7px));
  /* Lignes qui grésillent. */
  --led-flash:
    linear-gradient(3deg, transparent calc(27% - 1px), #000 calc(27% - 1px) calc(27% + 1px), transparent calc(27% + 1px)),
    linear-gradient(3deg, transparent calc(27% - 7px), rgb(0 0 0 / 30%) calc(27% - 7px) calc(27% + 7px), transparent calc(27% + 7px)),
    linear-gradient(115deg, transparent calc(12% - 1px), #000 calc(12% - 1px) calc(12% + 1px), transparent calc(12% + 1px)),
    linear-gradient(115deg, transparent calc(12% - 7px), rgb(0 0 0 / 30%) calc(12% - 7px) calc(12% + 7px), transparent calc(12% + 7px));
}

/* Lignes fixes : couleurs du logo, fondues vers le haut et le bas. */
.qhd-city-led::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    linear-gradient(180deg, var(--qhd-bg), transparent 8%, transparent 92%, var(--qhd-bg)),
    linear-gradient(115deg, var(--qhd-pink), var(--qhd-coral) 20%, var(--qhd-orange) 36%, var(--qhd-yellow) 48%, var(--qhd-violet) 62%, var(--qhd-blue) 80%, var(--qhd-cyan));
  -webkit-mask-image: var(--led-static);
  mask-image: var(--led-static);
}

/* Lignes qui grésillent : cœur presque blanc teinté rose et cyan. */
.qhd-city-led::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  background-image:
    linear-gradient(180deg, var(--qhd-bg), transparent 8%, transparent 92%, var(--qhd-bg)),
    linear-gradient(65deg, #ffd1f0, #ffffff 45%, #c9f3ff);
  -webkit-mask-image: var(--led-flash);
  mask-image: var(--led-flash);
}

/* Les rails ne passent jamais derrière du texte : l'en-tête de la section a
   un fond plein (débordant de 16 px) et les encadrés « conseils » sont
   opaques. */
.qhd-city-led .qhd-city-head {
  inline-size: fit-content;
  max-inline-size: 100%;
  background-color: var(--qhd-bg);
  box-shadow: 0 0 0 16px var(--qhd-bg);
}

.qhd-city-tip.qhd-glass {
  background-color: var(--qhd-surface);
}

/* Titre : le nom de la ville en couleur d'accent. */
.qhd-city-hero__accent {
  color: var(--qhd-accent);
}

/* --------------------------------------------------------------------------
   Performance
   -------------------------------------------------------------------------- */

/* Sections sous la ligne de flottaison : le navigateur ne les met en page et
   ne les peint qu'à l'approche de l'écran. La taille réservée évite les
   sauts de la barre de défilement. Jamais sur une section à enseignes néon :
   neons.js la mesure au chargement. */
.qhd-city-lazy {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Verre sans flou d'arrière-plan là où seul le fond uni est derrière :
   même rendu, beaucoup moins de travail au défilement. */
.qhd-city-tip.qhd-glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Rythme vertical plus serré que le défaut : pages longues. */
.qhd-city-section {
  padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 4.5rem);
}

/* Contenus de texte courant des sections. */
.qhd-city-card p,
.qhd-city-tip p {
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); /* 15 → 17 px */
  line-height: 1.65;
  color: var(--qhd-text-secondary);
}

/* Espacement régulier entre les enfants directs des cartes. */
.qhd-city-card > *,
.qhd-city-tip > * {
  margin-block: 0;
}

.qhd-city-card > * + *,
.qhd-city-tip > * + * {
  margin-block-start: 16px;
}

/* En-tête de section : titre puis introduction. */
.qhd-city-head {
  display: grid;
  gap: 14px;
  margin-block-end: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

/* Boutons : en ligne, retour à la ligne si l'espace manque. */
.qhd-city-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.qhd-city-section .qhd-city-actions .qhd-btn--accent {
  color: var(--qhd-bg);
}

.qhd-city-section .qhd-city-actions .qhd-btn--ghost {
  color: var(--qhd-text);
}

.qhd-city-section a:focus-visible,
.qhd-city-section summary:focus-visible {
  outline: 3px solid var(--qhd-cyan);
  outline-offset: 4px;
  box-shadow: none;
}

/* ==========================================================================
   Section 01 « hero » (sections/montreal-hero.php)
   --------------------------------------------------------------------------
   Une colonne en mobile (texte puis image) ; texte ≈ 55 % et image ≈ 45 %
   dès 1024 px. Encadré « En bref » en verre sous la grille : 1 / 2 / 5
   colonnes.
   ========================================================================== */

/* Le hero passe sous l'en-tête (règle du README des sections) : son contenu
   commence sous le dégradé décoratif de l'en-tête (.qhd-header__scrim,
   210 px), qui sinon assombrirait le haut du titre. */
.qhd-city-hero {
  margin-block-start: calc(-1 * var(--qhd-header-h));
  padding-block-start: calc(var(--qhd-header-h) + clamp(4.5rem, 4rem + 1.5vw, 5.5rem));
}

/* Les enseignes ne s'allument jamais derrière le menu. */
.qhd-city-hero .qhd-neons {
  inset-block-start: calc(var(--qhd-header-h) + 8px);
}

.qhd-city-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.qhd-city-hero__content > * + * {
  margin-block-start: 20px;
}

.qhd-city-hero__title {
  margin-block-start: 20px;
}

.qhd-city-hero__lead strong {
  font-weight: 600;
  color: var(--qhd-text);
}

.qhd-city-hero__media {
  min-inline-size: 0;
}

.qhd-city-hero__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--qhd-glass-border);
  border-radius: var(--qhd-glass-radius);
  box-shadow: var(--qhd-glass-shadow);
}

/* --- En bref --------------------------------------------------------------- */

.qhd-city-facts {
  margin-block-start: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.qhd-city-facts__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qhd-accent);
}

.qhd-city-facts__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 28px;
  margin: 18px 0 0;
}

.qhd-city-facts__item {
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--qhd-accent);
}

.qhd-city-facts__item dt {
  font-family: var(--qhd-font-title);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--qhd-text);
}

.qhd-city-facts__item dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--qhd-text-secondary);
}

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

@media (min-width: 1024px) {
  .qhd-city-hero__grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: clamp(2.5rem, 1rem + 3vw, 4rem);
  }

  .qhd-city-facts__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Section 02 « local » (sections/montreal-local.php)
   --------------------------------------------------------------------------
   Quatre cartes : une colonne en mobile, deux dès 768 px. La carte sport
   porte l'image en tête.
   ========================================================================== */

.qhd-city-local__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.qhd-city-card {
  min-inline-size: 0;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border: 1px solid var(--qhd-border);
  border-radius: 20px;
  background-color: var(--qhd-surface);
}

.qhd-city-card__title {
  margin: 0;
}

.qhd-city-card__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  margin-block-end: 18px;
}

.qhd-city-card__image + .qhd-city-card__title {
  margin-block-start: 0;
}

/* Puces « › » d'accent, non lues par les lecteurs d'écran. */
.qhd-city-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qhd-city-list li {
  position: relative;
  margin: 0;
  padding-inline-start: 1.4em;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.6;
  color: var(--qhd-text-secondary);
}

.qhd-city-list li::before {
  content: "›";
  position: absolute;
  inset-inline-start: 0.2em;
  font-weight: 700;
  color: var(--qhd-accent);
}

/* Débits recommandés : deux pastilles. */
.qhd-city-speeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.qhd-city-speeds div {
  padding: 12px 14px;
  border: 1px solid var(--qhd-border);
  border-radius: 12px;
  background-color: var(--qhd-surface-raised);
}

.qhd-city-speeds dt {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--qhd-text-muted);
}

.qhd-city-speeds dd {
  margin: 2px 0 0;
  font-family: var(--qhd-font-title);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--qhd-text);
}

/* Petit intitulé au-dessus des étiquettes et des liens de contact. */
.qhd-city-card .qhd-city-card__label,
.qhd-city-tip .qhd-city-card__label {
  margin-block-start: 22px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qhd-accent);
}

.qhd-city-card .qhd-city-card__label + ul,
.qhd-city-tip .qhd-city-card__label + ul {
  margin-block-start: 10px;
}

/* Catégories du catalogue : étiquettes. */
.qhd-city-chips,
.qhd-city-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.qhd-city-chips li,
.qhd-city-contact li {
  margin: 0;
}

.qhd-city-chips li {
  padding: 6px 12px;
  border: 1px solid var(--qhd-border);
  border-radius: var(--qhd-radius-pill);
  background-color: var(--qhd-surface-raised);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--qhd-text);
}

/* Contact : pastilles cliquables, 44 px de haut (cible tactile). */
.qhd-city-local .qhd-city-contact__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 8px 16px;
  border: 1px solid rgb(236 54 85 / 55%);
  border-radius: var(--qhd-radius-pill);
  background-color: rgb(236 54 85 / 10%);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--qhd-text);
  text-decoration: none;
  transition: background-color var(--qhd-duration) var(--qhd-ease), border-color var(--qhd-duration) var(--qhd-ease);
}

.qhd-city-local .qhd-city-contact__link:hover {
  border-color: var(--qhd-accent);
  background-color: rgb(236 54 85 / 22%);
  color: #ffffff;
}

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

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

/* ==========================================================================
   Section 03 « conseils » (sections/montreal-conseils.php)
   --------------------------------------------------------------------------
   Deux encadrés de verre : empilés en mobile, côte à côte dès 1024 px.
   ========================================================================== */

.qhd-city-tips__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.qhd-city-tip__number {
  margin: 0;
  font-family: var(--qhd-font-title);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--qhd-accent);
}

.qhd-city-tip .qhd-h4 {
  margin-block-start: 10px;
}

/* --- Carnet « Ma liste à vérifier » (encadré 02) ---------------------------
   Bloc-notes en pointillés ; chaque ligne a une case qui se coche. Coches
   visibles d'emblée ; avec le défilement CSS (plus bas), elles se cochent
   une à une à l'entrée dans l'écran. */

/* Encadrés en colonne : le carnet se cale en bas de sa carte, alignée sur sa
   voisine (l'espace libre passe au-dessus du carnet, 16 px au minimum). */
.qhd-city-tip {
  display: flex;
  flex-direction: column;
}

.qhd-city-tip > p:has(+ .qhd-city-todo) {
  margin-block-end: 16px;
}

.qhd-city-tip > .qhd-city-todo {
  margin-block-start: auto;
}

.qhd-city-todo {
  padding: 18px 20px;
  border: 1.5px dashed rgb(236 54 85 / 45%);
  border-radius: 16px;
  background-color: rgb(236 54 85 / 5%);
}

.qhd-city-tip .qhd-city-todo__title,
.qhd-city-trial .qhd-city-todo__title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qhd-accent);
}

.qhd-city-todo__list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.qhd-city-todo__list li {
  position: relative;
  margin: 0;
  padding-inline-start: 34px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 22px;
  color: var(--qhd-text);
}

/* Case : carré arrondi rempli de la couleur d'accent. */
.qhd-city-todo__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 22px;
  block-size: 22px;
  border: 1.5px solid var(--qhd-accent);
  border-radius: 7px;
  background-color: var(--qhd-accent);
  box-sizing: border-box;
}

/* Coche : deux bordures d'un rectangle tourné. */
.qhd-city-todo__list li::after {
  content: "";
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 8px;
  inline-size: 6px;
  block-size: 11px;
  border: solid var(--qhd-bg);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

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

/* ==========================================================================
   Section 04 « forfaits » (sections/montreal-forfaits.php)
   --------------------------------------------------------------------------
   Composant partagé « tarifs » (general.css section 13) : en-tête et note
   centrés sur la grille de cartes.
   ========================================================================== */

.qhd-city-plans__head {
  justify-items: center;
  text-align: center;
}

.qhd-city-plans__note {
  max-inline-size: 62ch;
  margin: 24px auto 0;
  text-align: center;
}

/* ==========================================================================
   Section 05 « liste de vérification » (sections/montreal-checklist.php)
   --------------------------------------------------------------------------
   Cinq étapes en cartes numérotées : 1 / 2 / 5 colonnes, puis un conseil.
   ========================================================================== */

.qhd-city-check__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: qhd-city-check;
}

.qhd-city-check__list li {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--qhd-border);
  border-radius: 16px;
  background-color: var(--qhd-surface);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qhd-text-secondary);
  counter-increment: qhd-city-check;
}

.qhd-city-check__list li::before {
  content: counter(qhd-city-check);
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  margin-block-end: 12px;
  border-radius: 50%;
  background-color: var(--qhd-accent);
  font-family: var(--qhd-font-title);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  color: var(--qhd-bg);
}

.qhd-city-check__tip {
  margin: 20px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--qhd-border);
  border-inline-start: 3px solid var(--qhd-cyan);
  border-radius: 14px;
  background-color: var(--qhd-surface);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qhd-text-secondary);
}

.qhd-city-check__tip strong {
  color: var(--qhd-text);
}

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

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

/* ==========================================================================
   Section 06 « appel à l'action » (sections/montreal-cta.php)
   ========================================================================== */

.qhd-city-cta__panel {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.qhd-city-cta__panel .qhd-city-actions {
  justify-content: center;
  margin-block-start: 8px;
}

/* ==========================================================================
   Section 07 « FAQ » (sections/montreal-faq.php)
   --------------------------------------------------------------------------
   Accordéons natifs <details> : signe « + » dessiné, tourné à l'ouverture.
   ========================================================================== */

.qhd-city-faq__inner {
  max-inline-size: 900px;
}

.qhd-city-faq__list {
  display: grid;
  gap: 12px;
}

.qhd-city-faq__item {
  border: 1px solid var(--qhd-border);
  border-radius: 16px;
  background-color: var(--qhd-surface);
}

.qhd-city-faq__item[open] {
  border-color: rgb(236 54 85 / 45%);
}

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

.qhd-city-faq__question::-webkit-details-marker {
  display: none;
}

.qhd-city-faq__question::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid var(--qhd-control-border);
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--qhd-text);
  transition: transform var(--qhd-duration) var(--qhd-ease);
}

.qhd-city-faq__item[open] .qhd-city-faq__question::after {
  transform: rotate(45deg);
  border-color: var(--qhd-accent);
  color: var(--qhd-accent);
}

.qhd-city-faq__answer {
  margin: 0;
  padding: 0 20px 20px;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  color: var(--qhd-text-secondary);
}

.qhd-city-faq__updated {
  margin-block-start: 20px;
}

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

/* ==========================================================================
   Gabarit IPTV Laval (sections/laval-*.php) — mises en page propres
   --------------------------------------------------------------------------
   La page Laval reprend les composants ci-dessus (hero, cartes, bandes LED,
   tarifs, carnet, FAQ, appel à l'action) et ajoute : section sport en deux
   colonnes, panneau « connexion », « Qui regarde quoi », trois étapes et
   grand carnet d'essai.
   ========================================================================== */

/* --- « Qui regarde quoi » (carte famille) ---------------------------------- */

.qhd-city-who {
  display: grid;
  gap: 10px;
  margin: 0;
}

.qhd-city-who__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--qhd-border);
  border-radius: 12px;
  background-color: var(--qhd-surface-raised);
}

.qhd-city-who dt {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--qhd-accent);
}

.qhd-city-who dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--qhd-text-secondary);
}

@media (min-width: 480px) {
  .qhd-city-who__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
  }
}

/* --- Sport : texte et photo en deux colonnes ------------------------------- */

.qhd-city-sport {
  isolation: isolate;
}

.qhd-city-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.qhd-city-split__content > * {
  margin-block: 0;
}

.qhd-city-split__content > * + * {
  margin-block-start: 18px;
}

.qhd-city-split__media {
  position: relative;
  min-inline-size: 0;
}

/* Halo froid derrière la photo (dégradés seuls, sans flou). */
.qhd-city-split__media::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(42% 42% at 26% 28%, rgb(103 58 203 / 40%), rgb(103 58 203 / 14%) 45%, transparent 75%),
    radial-gradient(42% 42% at 76% 74%, rgb(101 210 243 / 32%), rgb(101 210 243 / 10%) 45%, transparent 75%);
}

.qhd-city-split__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--qhd-glass-border);
  border-radius: var(--qhd-glass-radius);
  box-shadow: var(--qhd-glass-shadow);
}

.qhd-city-chips--sport li {
  border-color: rgb(236 54 85 / 55%);
  background-color: rgb(236 54 85 / 10%);
}

@media (min-width: 1024px) {
  .qhd-city-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 1rem + 3vw, 4rem);
  }
}

/* --- Panneau « connexion Internet » ---------------------------------------- */

/* Rien n'est derrière le verre : flou d'arrière-plan inutile. */
.qhd-city-net__panel.qhd-glass {
  display: grid;
  gap: 24px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.qhd-city-net__text > * {
  margin-block: 0;
}

.qhd-city-net__text > * + * {
  margin-block-start: 14px;
}

.qhd-city-net__speeds,
.qhd-city-net__panel .qhd-city-net__tip {
  margin: 0;
}

@media (min-width: 900px) {
  .qhd-city-net__panel.qhd-glass {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(2rem, 1rem + 2vw, 3rem);
  }

  .qhd-city-net__tip {
    grid-column: 1 / -1;
  }
}

/* --- Trois étapes d'installation ------------------------------------------- */

.qhd-city-step__title {
  display: block;
  margin-block-end: 4px;
  font-family: var(--qhd-font-title);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--qhd-text);
}

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

/* --- Grand carnet d'essai -------------------------------------------------- */

.qhd-city-trial__inner {
  max-inline-size: 820px;
}

.qhd-city-todo--large {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.qhd-city-todo--large .qhd-city-todo__list {
  gap: 16px;
  margin-block-start: 16px;
}

.qhd-city-todo--large .qhd-city-todo__list li {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.5;
}

/* ==========================================================================
   Animations et survols
   --------------------------------------------------------------------------
   Uniquement transform, translate et opacity (composités par le GPU). Le
   titre H1 et la photo du hero ne sont jamais rendus invisibles (aucun
   retard de l'affichage principal, LCP) : ils glissent ou zooment seulement.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Entrée du hero, échelonnée ----------------------------------------- */

  .qhd-city-hero__content > * {
    animation: qhd-city-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .qhd-city-hero__content > :nth-child(2) { animation-delay: 0.06s; }
  .qhd-city-hero__content > :nth-child(3) { animation-delay: 0.14s; }
  .qhd-city-hero__content > :nth-child(4) { animation-delay: 0.22s; }
  .qhd-city-hero__content > :nth-child(5) { animation-delay: 0.3s; }

  .qhd-city-hero__title {
    animation-name: qhd-city-slide-only;
  }

  /* Photo : zoom sans fondu ni délai (élément le plus grand de l'écran :
     comptée dès qu'elle est peinte). */
  .qhd-city-hero__media {
    animation: qhd-city-scale-only 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .qhd-city-facts {
    animation: qhd-city-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.38s both;
  }

  /* --- Bandes LED « chaos » : grésillement irrégulier ----------------------- */

  .qhd-city-led::after {
    animation: qhd-city-led-chaos 7.3s steps(1, end) infinite;
    will-change: opacity;
  }

  /* Durée et départ différents : les deux sections ne grésillent jamais
     ensemble. */
  .qhd-city-tips::after,
  .qhd-city-steps::after {
    animation-duration: 5.9s;
    animation-delay: -2.1s;
  }

  /* --- Halos qui respirent ------------------------------------------------- */

  .qhd-city-hero__media::before,
  .qhd-city-cta .qhd-container::before {
    animation: qhd-city-breathe 7s ease-in-out infinite alternate;
    will-change: opacity;
  }

  .qhd-city-cta .qhd-container::before {
    animation-duration: 9s;
  }

  /* --- Survols --------------------------------------------------------------- */
  /* Propriété translate (et non transform) : les animations d'apparition
     gardent transform figé à la fin et annuleraient le survol. */

  .qhd-city-card,
  .qhd-city-check__list li,
  .qhd-city-facts__item,
  .qhd-city-faq__item {
    transition:
      translate var(--qhd-duration) var(--qhd-ease),
      border-color var(--qhd-duration) var(--qhd-ease),
      box-shadow var(--qhd-duration) var(--qhd-ease);
  }

  .qhd-city-card__image {
    transition: transform 0.6s var(--qhd-ease);
  }

  @media (hover: hover) {
    .qhd-city-card:hover,
    .qhd-city-check__list li:hover {
      translate: 0 -4px;
      border-color: rgb(236 54 85 / 45%);
      box-shadow: 0 18px 40px rgb(0 0 0 / 35%), 0 0 0 1px rgb(236 54 85 / 12%);
    }

    .qhd-city-card--sport:hover .qhd-city-card__image {
      transform: scale(1.03);
    }

    .qhd-city-facts__item:hover {
      translate: 4px 0;
    }

    .qhd-city-faq__item:hover {
      border-color: rgb(236 54 85 / 35%);
    }
  }

  /* L'image de la carte sport ne dépasse pas de ses coins arrondis au zoom. */
  .qhd-city-card--sport {
    overflow: hidden;
  }

  /* --- Ouverture douce des réponses de la FAQ ----------------------------- */

  .qhd-city-faq__item[open] .qhd-city-faq__answer {
    animation: qhd-city-rise 0.35s var(--qhd-ease) both;
  }

  /* --- Apparition au défilement (CSS seul, sans script) ------------------- */

  @supports (animation-timeline: view()) {
    .qhd-city-head,
    .qhd-city-split__media,
    .qhd-city-net__panel,
    .qhd-city-todo--large,
    .qhd-city-card,
    .qhd-city-tip,
    .qhd-pricing,
    .qhd-city-check__list li,
    .qhd-city-check__tip,
    .qhd-city-cta__panel,
    .qhd-city-faq__item {
      animation: qhd-city-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    /* Décalage léger d'un élément au suivant dans une même rangée. */
    .qhd-city-card:nth-child(2),
    .qhd-city-tip:nth-child(2),
    .qhd-city-check__list li:nth-child(2) { animation-range: entry 6% entry 51%; }
    .qhd-city-check__list li:nth-child(3) { animation-range: entry 12% entry 57%; }
    .qhd-city-check__list li:nth-child(4) { animation-range: entry 18% entry 63%; }
    .qhd-city-check__list li:nth-child(5) { animation-range: entry 24% entry 69%; }

    .qhd-city-cta__panel {
      animation-name: qhd-city-zoom;
    }

    /* Carnet : les cases se remplissent puis se cochent, une à une. */
    .qhd-city-todo__list li::before {
      animation: qhd-city-box-fill linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 40%;
    }

    .qhd-city-todo__list li::after {
      animation: qhd-city-tick linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 40%;
    }

    .qhd-city-todo__list li:nth-child(2)::before,
    .qhd-city-todo__list li:nth-child(2)::after { animation-range: entry 45% cover 45%; }
    .qhd-city-todo__list li:nth-child(3)::before,
    .qhd-city-todo__list li:nth-child(3)::after { animation-range: entry 60% cover 50%; }
    .qhd-city-todo__list li:nth-child(4)::before,
    .qhd-city-todo__list li:nth-child(4)::after { animation-range: entry 75% cover 55%; }
    .qhd-city-todo__list li:nth-child(5)::before,
    .qhd-city-todo__list li:nth-child(5)::after { animation-range: entry 90% cover 60%; }
  }
}

@keyframes qhd-city-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes qhd-city-slide-only {
  from { transform: translateY(18px); }
  to { transform: none; }
}

@keyframes qhd-city-zoom {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes qhd-city-scale-only {
  from { transform: scale(0.96); }
  to { transform: none; }
}

/* Case vide (contour) → case pleine. */
@keyframes qhd-city-box-fill {
  0%, 40% { background-color: transparent; }
  100% { background-color: var(--qhd-accent); }
}

/* La coche apparaît en grandissant, une fois la case remplie. */
@keyframes qhd-city-tick {
  0%, 55% { opacity: 0; transform: rotate(45deg) scale(0.3); }
  100% { opacity: 1; transform: rotate(45deg) scale(1); }
}

/* Sursauts irréguliers, jamais plus de deux éclats rapprochés. */
@keyframes qhd-city-led-chaos {
  0% { opacity: 0.85; }
  9% { opacity: 0.15; }
  11% { opacity: 0.9; }
  27% { opacity: 0.55; }
  31% { opacity: 0.95; }
  48% { opacity: 0.1; }
  52% { opacity: 0.8; }
  54% { opacity: 0.25; }
  57% { opacity: 1; }
  76% { opacity: 0.4; }
  83% { opacity: 0.9; }
  95% { opacity: 0.2; }
}

@keyframes qhd-city-breathe {
  from { opacity: 0.7; }
  to { opacity: 1; }
}