/* ============================================================
   louelafête — Pages « pack » (une page par lot de location)
   ============================================================
   À charger APRÈS style.css ET apple-theme.css, comme les
   correctifs mobile. Cette feuille suit les conventions de la
   surcouche Apple, pas celles de style.css seul :

     · filets en var(--hairline) (#e0e0e0), jamais var(--bordure)
     · sections claires en var(--parchemin) (#f5f5f7), et c'est le
       CHANGEMENT DE COULEUR qui sépare — pas une bordure
     · pas d'ombre portée, sauf sur les cartes photo
     · titres en tracking négatif (letter-spacing < 0)
     · surtitres en casse normale : la surcouche a explicitement
       retiré les majuscules et l'interlettrage des kickers
     · boutons : rien à écrire, .btn est déjà en pilule 17px

   Elle n'ajoute que ce qui n'existe nulle part ailleurs : le fil
   d'Ariane, la fiche produit en deux colonnes, le détail du
   matériel et le bandeau d'appel final.
   ============================================================ */

/* ===== FIL D'ARIANE =====
   Le « Accueil › Les packs › Nuit Blanche » sous le menu. Il sert
   deux fois : au visiteur pour se repérer, et à Google qui
   l'affiche à la place de l'URL dans ses résultats. */
.ariane {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 104px 24px 0;
  font-size: 14px;
  letter-spacing: -.1px;
  color: var(--texte-doux);
}
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ariane a:hover { color: var(--primaire); }
/* Le chevron de séparation, posé en CSS et non au clavier : les
   lecteurs d'écran ne l'annoncent pas, ce qui est voulu. */
.ariane li + li::before { content: "›"; margin-right: 8px; color: var(--hairline); }
.ariane [aria-current="page"] { color: var(--texte); font-weight: 600; }

/* ===== FICHE PRODUIT =====
   Deux colonnes sur ordinateur : la photo à gauche, l'argumentaire
   et le prix à droite. Une seule colonne sous 900 px, la photo en
   premier — c'est elle qui vend. */
.fiche {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 30px 24px 90px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 52px;
  align-items: start;
}
.fiche__media { position: relative; }

/* La colonne photo est plus courte que la colonne prix : environ
   200 px d'écart, qui laissaient un grand vide sous les vignettes.
   `sticky` le comble sans toucher aux photos : le carrousel suit la
   lecture et arrive en bas en même temps que l'argumentaire.
   Uniquement en deux colonnes — empilé, ça n'aurait aucun sens. */
@media (min-width: 901px) {
  .fiche__media { position: sticky; top: 88px; }
}
.fiche__media img {
  width: 100%;
  /* height:auto est INDISPENSABLE, pas décoratif. La balise <img> porte
     width="1000" height="590" (nécessaires pour réserver la place et
     éviter que la page sursaute au chargement). Ces attributs valent
     une hauteur fixe de 590 px, et `aspect-ratio` est ignoré tant que
     les DEUX dimensions sont définies. Sans cette ligne, la photo
     s'affiche en 590 px de haut quelle que soit la largeur. */
  height: auto;
  border-radius: var(--radius);
  /* Les photos de pack n'ont pas toutes le même format (le Jour J est
     un portrait, le Nuit Blanche un paysage). Cadre commun + recadrage
     au centre : la page garde la même allure d'un pack à l'autre, et
     la hauteur ne saute pas au chargement. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Seule ombre de la page : la même que les cartes photo d'accueil,
     reprise à l'identique d'apple-theme.css. */
  box-shadow: rgba(0,0,0,.22) 3px 5px 30px 0;
}
/* Badge « Populaire », repris tel quel de la grille d'accueil. */
.fiche__badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--accent);
  color: var(--fond-sombre);
  font-size: 13px; font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
}

/* Le surtitre réutilise .section__kicker (casse normale, 15px) : on
   ne redéfinit ici que la couleur, le reste vient de la surcouche. */
.fiche .section__kicker { color: var(--primaire); margin-bottom: 10px; }
.fiche__titre { font-size: 44px; line-height: 1.06; letter-spacing: -1.1px; margin-bottom: 16px; }
.fiche__accroche { font-size: 21px; line-height: 1.4; color: var(--texte-doux); margin-bottom: 28px; }

/* Bloc prix : l'information que l'œil cherche en premier. Filet fin
   et fond blanc, sans ombre — le contraste suffit. */
.fiche__prix {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--fond-blanc);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}
/* > strong, et non strong : le chevron limite les 38 px au prix
   lui-meme. Sans lui, le << 2e jour offert >> de la petite ligne du
   bas heritait de la meme taille, se posait au milieu de sa phrase et
   faisait exploser le cadre. */
.fiche__prix > strong {
  font-family: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  font-size: 38px; letter-spacing: -1px; color: var(--primaire);
  line-height: 1;
}
.fiche__prix span { color: var(--texte-doux); font-size: 15px; }
.fiche__prix em {
  font-style: normal; color: var(--texte-doux);
  font-size: 14px; line-height: 1.5; width: 100%;
}
/* Dans la petite ligne, la mise en avant reste une mise en avant :
   meme taille que sa phrase, simplement plus appuyee. */
.fiche__prix em strong {
  font-family: inherit; font-size: inherit; letter-spacing: 0;
  font-weight: 600; color: var(--primaire);
}

.fiche__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

/* Les réassurances sous les boutons (caution rendue, sans engagement,
   remise en main propre). Icônes SVG de trait, jamais d'emoji. */
.fiche__points { list-style: none; display: grid; gap: 13px; }
.fiche__points li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--texte-doux); }
.fiche__points svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--primaire); margin-top: 1px; }

/* ===== FICHE PRODUIT DÉTAILLÉE (pages appareil) =====
   Deux colonnes : la description rédigée à gauche, la liste des
   caractéristiques à droite. La <fiche> du haut est blanche et la
   section <inclus> qui suit est parchemin ; ce bloc reste blanc, et
   c'est un filet en haut qui le sépare de la fiche — deux surfaces
   parchemin collées l'une à l'autre ne se sépareraient plus. */
.detail { border-top: 1px solid var(--hairline); }
.detail__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 78px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px;
  align-items: start;
}
.detail__p { font-size: 17px; line-height: 1.6; color: var(--texte-doux); margin-top: 16px; }

/* La liste des caractéristiques. Filet entre chaque ligne, aucun
   fond : c'est un tableau de spécifications, pas une carte. */
.detail__specs { border-top: 1px solid var(--hairline); }
.detail__specs > div {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px;
  padding: 13px 2px; border-bottom: 1px solid var(--hairline);
}
.detail__specs dt { font-size: 14px; color: var(--texte-doux); letter-spacing: -.1px; }
.detail__specs dd { font-size: 15px; font-weight: 600; letter-spacing: -.1px; line-height: 1.4; }

/* Sous 900 px la fiche du haut passe déjà en une colonne : ce bloc
   suit, la description d'abord, les caractéristiques ensuite. */
@media (max-width: 900px) {
  .detail__inner { grid-template-columns: 1fr; gap: 34px; padding: 56px 24px; }
}
/* Sur téléphone, 168 px d'intitulé ne laissent plus rien à la
   valeur : les deux passent l'un sous l'autre. */
@media (max-width: 520px) {
  .detail__specs > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ===== CE QUI EST INCLUS =====
   Le détail du matériel. C'est la section qui fait exister la page
   aux yeux de Google : elle contient les mots que les gens tapent
   (« machine à fumée », « stroboscope », « laser »).
   Fond parchemin, sans bordure : le changement de couleur fait le
   séparateur, comme la FAQ et la bande de confiance. */
.inclus { background: var(--parchemin); }

/* Deux colonnes : les appareils à gauche, la vidéo verticale à
   droite. `minmax(0, 1fr)` et non `1fr` : sans le minimum à zéro,
   la colonne refuse de descendre sous la largeur de son contenu. */
.inclus__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 96px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px;
  align-items: start;
}
.inclus__col { min-width: 0; }

/* ── La tête d'affiche ──
   Un appareil porte le pack à lui seul : il a droit à une grande
   photo et à une carte pleine largeur. Les quatre autres suivent
   en 2 × 2. Hiérarchie plutôt qu'alignement : l'œil sait par où
   commencer, ce que cinq vignettes identiques ne disaient pas. */
.vedette {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  background: var(--fond-blanc); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden; margin: 28px 0 14px;
}
.vedette__img {
  width: 300px; height: 100%; min-height: 200px;
  object-fit: cover; display: block;
}
.vedette__txt {
  padding: 22px 24px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.vedette__tags { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.badge--or {
  background: var(--accent); color: var(--texte);
  font-size: 13px; font-weight: 600; border-radius: 9999px; padding: 3px 10px;
}
.vedette__nom {
  font-family: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  font-size: 27px; font-weight: 700; letter-spacing: -.7px;
  line-height: 1.1; margin: 0;
}
.vedette__desc {
  font-size: 16px; line-height: 1.5; color: var(--texte-doux);
  margin: 0; text-wrap: pretty;
}

/* ── Les quatre autres : 2 × 2, photo à gauche du texte ──
   La photo en médaillon plutôt qu'en bandeau au-dessus : la carte
   reste courte et les quatre gardent la même hauteur. */
.inclus__grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.appareil {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px;
  background: var(--fond-blanc); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.appareil__img {
  width: 68px; flex: 0 0 68px; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 12px; background: var(--parchemin);
}
.appareil__txt { min-width: 0; }
.appareil__nom {
  font-family: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -.4px; margin: 0;
}
.appareil__qte {
  font-family: 'Instrument Sans', 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--primaire); background: rgba(91, 84, 201, .08);
  border-radius: 9999px; padding: 3px 10px; margin-left: 6px; vertical-align: 2px;
}
.appareil__desc {
  font-size: 14px; line-height: 1.45; color: var(--texte-doux);
  margin: 4px 0 0; text-wrap: pretty;
}

/* Le nom d'un appareil, sur une page pack, mène à sa page. Souligné
   au survol seulement : quinze noms soulignés d'un coup transformeraient
   la liste en annuaire. */
.lien-appareil { color: inherit; text-decoration: none; }
.lien-appareil:hover { color: var(--primaire); text-decoration: underline; text-underline-offset: 3px; }
.lien-appareil:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; border-radius: 4px; }

/* ── PAGES APPAREIL : les packs qui contiennent l'appareil ──
   Les pages « louer-… » réutilisent .inclus__grille / .appareil, mais
   chaque carte y est un lien vers une page pack. Un lien étiré plutôt
   qu'un <a> englobant : la carte contient déjà un <h3>, et un titre
   avalé par un lien perd son poids de titre pour les lecteurs d'écran.

   Une seule colonne : ces cartes sont des destinations, pas un
   inventaire. Sur deux colonnes elles se lisent comme une liste de
   pièces détachées, ce qu'elles ne sont pas. */
.inclus__grille--packs { grid-template-columns: 1fr; }
.appareil--lien { position: relative; transition: border-color .2s ease, transform .2s ease; }
.appareil--lien:hover { border-color: var(--primaire); transform: translateY(-1px); }
/* Le texte du lien ne doit pas s'afficher — il double le titre de la
   carte — mais doit rester lisible par un lecteur d'écran. D'où
   l'indentation hors cadre plutôt que display:none, qui le retirerait
   aussi de l'arbre d'accessibilité. */
.appareil__lien {
  position: absolute; inset: 0; border-radius: inherit;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.appareil--lien:focus-within { border-color: var(--primaire); }
.appareil__lien:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; }
/* La flèche : le seul repère visuel qui dit « ceci s'ouvre ». */
.appareil--lien::after {
  content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 22px; line-height: 1; color: var(--texte-doux);
}
.appareil--lien .appareil__txt { padding-right: 18px; }

/* La précaution ou la limite propre à un appareil (photosensibilité,
   montage, ordinateur nécessaire). Dite ici plutôt que dans la fiche :
   c'est une réserve, pas un argument. */
.inclus__note {
  margin-top: 16px; padding: 14px 16px;
  background: var(--fond-blanc); border: 1px solid var(--hairline);
  border-left: 3px solid var(--primaire); border-radius: var(--radius);
  font-size: 14px; line-height: 1.5; color: var(--texte-doux);
}

/* 760 px : la tête d'affiche passe en photo au-dessus du texte,
   et les quatre cartes s'empilent. */
@media (max-width: 760px) {
  .vedette { grid-template-columns: 1fr; margin-top: 20px; }
  .vedette__img { width: 100%; height: 170px; min-height: 0; }
  .vedette__txt { padding: 14px 16px; }
  .vedette__nom { font-size: 22px; }
  .vedette__desc { font-size: 14px; line-height: 1.45; }
  .inclus__grille { grid-template-columns: 1fr; gap: 10px; }
  .appareil { align-items: center; gap: 12px; padding: 12px; }
  .appareil__img { width: 64px; flex: 0 0 64px; }
  .appareil__nom { font-size: 17px; }
}

/* ===== PAGES VILLE =====
   Une page par commune desservie. Pas de photo : le texte est le
   contenu, et une page locale sans visuel propre n'a rien à mettre
   en grand format. On garde donc le rythme des autres pages —
   en-tête blanc, catalogue sur parchemin, conseils en blanc,
   bandeau d'appel sombre — mais avec une colonne de lecture
   étroite : du texte sur 1180 px de large ne se lit pas. */
.ville { max-width: var(--max-width); margin: 0 auto; padding: 26px 24px 70px; }
.ville__inner { max-width: 720px; }
.ville__titre { font-size: 42px; line-height: 1.08; letter-spacing: -1.1px; margin-bottom: 22px; }
.ville__intro { font-size: 19px; line-height: 1.5; color: var(--texte-doux); margin-bottom: 16px; }
.ville__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Le catalogue : deux listes de liens, pas des cartes. Sur une page
   ville, la photo de chaque appareil a déjà sa page — ici on veut
   la liste la plus lisible possible, et le maillage. */
.ville__catalogue { max-width: var(--max-width); margin: 0 auto; padding: 84px 24px; }
.ville__sous-titre { font-size: 19px; font-weight: 700; letter-spacing: -.4px; margin: 34px 0 14px; }
.ville__liste { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ville__liste--pieces { grid-template-columns: 1fr 1fr 1fr; }
/* Vignette + texte cote a cote : la photo aide a reconnaitre
   l'appareil bien plus vite que son nom, et garde la ligne courte. */
.ville__liste a {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px;
  background: var(--fond-blanc);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s ease;
}
.ville__liste a:hover { border-color: var(--primaire); transform: translateY(-2px); }
/* flex-shrink: 0 sinon la vignette se fait ecraser par un nom long. */
.ville__vignette {
  flex: 0 0 52px; width: 52px; height: 52px;
  border-radius: 9px; overflow: hidden;
  background: var(--parchemin);
}
.ville__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* min-width: 0 : sans lui, un nom long deborde de la carte au lieu
   de passer a la ligne (regle des enfants de flex). */
.ville__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Photo d'en-tete de la commune. Elle est FACULTATIVE : posee par
   outils/photos-villes.py seulement si le fichier existe. width et
   height sont dans le HTML pour que la place soit reservee avant le
   chargement — sans eux, le texte sous la photo saute a l'arrivee. */
.ville__photo {
  max-width: var(--max-width); margin: 0 auto; padding: 0 24px 6px;
}
.ville__photo img {
  width: 100%; height: clamp(180px, 34vw, 340px);
  object-fit: cover; display: block;
  border-radius: 16px; border: 1px solid var(--hairline);
}
/* La legende porte la mention d'auteur exigee par la licence des
   photos (voir images/villes/CREDITS.txt). Discrete, mais lisible :
   une mention qu'on ne peut pas lire ne vaut pas mention. */
.ville__credit {
  font-size: 12.5px; color: var(--texte-doux); opacity: .8;
  margin-top: 8px; text-align: right; line-height: 1.4;
}
.ville__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 520px) { .ville__credit { text-align: left; } }

@media (max-width: 520px) { .ville__photo { padding: 0 20px 4px; } }

.ville__nom  { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.ville__meta { font-size: 13px; color: var(--texte-doux); }

/* Les conseils propres à la commune : colonne étroite, corps de
   texte confortable. C'est le bloc qu'un habitant lit vraiment. */
.ville-conseils__inner { max-width: var(--max-width); margin: 0 auto; padding: 84px 24px; }
.ville-conseils__inner .section__title { max-width: 720px; }
.ville-conseils__p { max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--texte-doux); margin-top: 18px; }

/* Les étapes, sur parchemin : elles ferment la page avant le
   bandeau d'appel, et le changement de surface fait le séparateur. */
.ville-etapes { background: var(--parchemin); }
.ville-etapes__inner { max-width: var(--max-width); margin: 0 auto; padding: 84px 24px; }
.ville-etapes__liste { list-style: none; counter-reset: etape; display: grid; gap: 20px; margin-top: 30px; max-width: 760px; }
.ville-etapes__liste li { counter-increment: etape; position: relative; padding-left: 46px; font-size: 16px; line-height: 1.55; color: var(--texte-doux); }
/* Le numéro est posé en CSS : les lecteurs d'écran lisent déjà une
   liste ordonnée, ils n'ont pas besoin qu'on le leur répète. */
.ville-etapes__liste li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--primaire);
  background: var(--fond-blanc);
  border: 1px solid var(--hairline);
  border-radius: 50%;
}
.ville-etapes__liste strong { display: block; color: var(--texte); font-weight: 600; margin-bottom: 2px; }

/* La liste des communes du pied de page est stylée dans style.css :
   elle apparaît sur TOUTES les pages, y compris l'accueil, qui ne
   charge pas cette feuille. */

@media (max-width: 860px) {
  .ville__titre { font-size: 32px; letter-spacing: -.8px; }
  .ville__intro { font-size: 17px; }
  .ville { padding: 20px 24px 54px; }
  .ville__catalogue,
  .ville-conseils__inner,
  .ville-etapes__inner { padding: 58px 24px; }
  .ville__liste,
  .ville__liste--pieces { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ville__liste,
  .ville__liste--pieces { grid-template-columns: 1fr; }
  /* Côte à côte, les deux boutons tombent sous 160 px et leur texte
     passe sur deux lignes. Empilés, ils gardent leur ligne unique. */
  .ville__actions { flex-direction: column; }
  .ville__actions .btn { width: 100%; }
}

/* ===== BANDEAU D'APPEL FINAL =====
   Section sombre : le rythme clair ↔ sombre de la surcouche. */
.rappel { background: var(--fond-sombre); color: var(--texte-clair); text-align: center; }
.rappel__inner { max-width: 720px; margin: 0 auto; padding: 96px 24px; }
.rappel h2 { font-size: 36px; letter-spacing: -.6px; margin-bottom: 14px; }
.rappel p { color: var(--texte-clair-2); font-size: 19px; line-height: 1.45; margin-bottom: 30px; }

/* ===== RESPONSIVE =====
   Un seul point de bascule : la fiche passe en une colonne quand
   deux colonnes deviennent trop étroites pour rester lisibles. */
@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; gap: 32px; padding-bottom: 60px; }
  .fiche__titre { font-size: 34px; letter-spacing: -.8px; }
  .fiche__accroche { font-size: 18px; }
  .ariane { padding-top: 90px; }
  .inclus__inner, .rappel__inner { padding-top: 70px; padding-bottom: 70px; }
}
@media (max-width: 560px) {
  .fiche__titre { font-size: 28px; letter-spacing: -.6px; }
  .fiche__prix > strong { font-size: 32px; }
  .rappel h2 { font-size: 27px; }
  /* Boutons pleine largeur : plus faciles à viser au pouce. */
  .fiche__actions .btn { width: 100%; text-align: center; }
}

/* ============================================================
   CARROUSEL DE LA FICHE PRODUIT
   ============================================================
   Choix technique : le défilement est natif (scroll-snap), pas
   simulé en JavaScript. Conséquences directes :
     · le glissement au doigt marche tout seul sur mobile, avec
       l'inertie exacte du système — impossible à imiter en JS ;
     · sans JS, le carrousel reste une bande d'images que l'on
       fait défiler : rien ne disparaît ;
     · la molette horizontale et le clavier fonctionnent d'office.
   Le JS ne sert qu'au confort : les flèches, les vignettes et
   l'indicateur de position.
   ============================================================ */

.carrousel { position: relative; }

/* La piste : les vues côte à côte, une seule visible à la fois.
   scroll-snap-type colle la vue au bord à la fin du geste. */
.carrousel__piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  /* Masque la barre de défilement : le carrousel a ses propres
     repères (vignettes + flèches), une barre ferait doublon. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }

.carrousel__vue {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
}
.carrousel__vue img {
  width: 100%;
  /* Même piège que la photo principale : les attributs width/height
     de la balise valent une taille fixe et neutralisent aspect-ratio
     tant que height n'est pas remis à auto. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: rgba(0,0,0,.22) 3px 5px 30px 0;
}

/* Légende posée sur le bas de l'image. Le dégradé garantit la
   lisibilité quelle que soit la photo dessous. */
.carrousel__legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 18px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(35,33,53,0) 0%, rgba(35,33,53,.82) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.2px;
}

/* ── Flèches ── */
.carrousel__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;            /* 44px : cible tactile minimale */
  display: grid; place-items: center;
  border: none; border-radius: 9999px;  /* pilule, comme les boutons Apple */
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--fond-sombre);
  cursor: pointer;
  box-shadow: rgba(0,0,0,.18) 0 2px 12px;
  transition: transform .12s ease, opacity .2s ease;
}
.carrousel__fleche:active { transform: translateY(-50%) scale(.94); }
.carrousel__fleche svg { width: 22px; height: 22px; }
.carrousel__fleche--prec { left: 12px; }
.carrousel__fleche--suiv { right: 12px; }
/* En bout de course, la flèche s'efface au lieu de disparaître :
   la position des repères ne saute pas. */
.carrousel__fleche[disabled] { opacity: 0; pointer-events: none; }

/* ── Vignettes ──
   Préférées aux points : sur une fiche produit, le visiteur veut
   choisir l'appareil qu'il va voir, pas deviner. */
.carrousel__vignettes {
  display: flex; gap: 10px;
  /* fit-content + marges automatiques : quand les vignettes tiennent
     sous la photo, la bande fait leur largeur et se centre ; quand il
     y en a trop, max-width la ramene au cadre et elle redevient une
     bande qui defile, alignee a gauche. justify-content: center ferait
     mieux en apparence mais rendrait les premieres inatteignables :
     un contenu centre qui deborde sort par la gauche, ou aucun
     defilement ne va le chercher. */
  width: fit-content; max-width: 100%; margin: 14px auto 0;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.carrousel__vignettes::-webkit-scrollbar { display: none; }
.carrousel__vignette {
  flex: 0 0 74px;
  padding: 0; border: 2px solid transparent; border-radius: 12px;
  background: none; cursor: pointer; line-height: 0;
  opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
}
.carrousel__vignette img { width: 100%; height: 56px; object-fit: cover; border-radius: 10px; }
.carrousel__vignette:hover { opacity: .85; }
.carrousel__vignette[aria-current="true"] { opacity: 1; border-color: var(--primaire); }

/* Compteur « 2 / 6 » : repère de position quand on glisse au doigt. */
.carrousel__compteur {
  position: absolute; top: 12px; right: 12px;
  background: rgba(35,33,53,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 13px; font-weight: 600;
  padding: 5px 11px; border-radius: 9999px;
}

/* Sur écran tactile, les flèches encombrent : le doigt suffit.
   On les retire et on laisse les vignettes et le compteur. */
@media (hover: none) {
  .carrousel__fleche { display: none; }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .carrousel__piste { scroll-behavior: auto; }
  .carrousel__fleche, .carrousel__vignette { transition: none; }
}

/* ============================================================
   SECTION « INCLUS » — DEUX COLONNES
   ============================================================
   À gauche les appareils, à droite une vidéo du lot en action.
   La vidéo est au format vertical 9/16 : c'est celui des reels
   Instagram, donc une vidéo déjà publiée se réutilise telle
   quelle, sans recadrage.
   ============================================================ */
/* ── La colonne vidéo ──
   sticky : la vidéo reste visible pendant qu'on parcourt la
   liste des appareils, sur les écrans assez hauts pour ça. */
.inclus__video { position: sticky; top: 88px; }
.inclus__video video,
.inclus__video .inclus__video-vide {
  width: 100%;
  /* height: auto sinon les attributs width/height de la balise <video>
     imposent une hauteur fixe et neutralisent aspect-ratio. */
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  display: block;
  object-fit: cover;
  background: var(--fond-sombre);
  box-shadow: rgba(0,0,0,.22) 3px 5px 30px 0;
}
/* ── Vidéo tournée à l'horizontale ──
   Le 9/16 est la règle ici, mais une prise de vue paysage qu'on y
   force perd son sujet : object-fit: cover en rogne les deux tiers.
   Elle garde donc son propre cadre ; la colonne, elle, ne bouge pas. */
.inclus__video--paysage video { aspect-ratio: 16 / 9; }

/* ── Le lecteur minimal (js/lecteur-video.js) ──
   Deux boutons, pas de barre de progression : ces videos durent
   dix secondes et tournent en boucle, il n'y a rien a chercher
   dedans. Les commandes natives ajouteraient une duree, un volume
   et un menu de telechargement, soit trois sorties de route. */
.lecteur { position: relative; display: block; }
.lecteur__barre {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; gap: 8px;
  opacity: .35;
  transition: opacity .18s ease;
}
.lecteur:hover .lecteur__barre,
.lecteur:focus-within .lecteur__barre,
.lecteur--en-pause .lecteur__barre { opacity: 1; }
.lecteur__bouton {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(20, 18, 32, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lecteur__bouton:hover { background: rgba(20, 18, 32, .82); }
.lecteur__bouton svg { width: 20px; height: 20px; }

/* En plein ecran le cadre occupe l'ecran entier : la video n'a plus
   de proportion imposee, elle s'inscrit dedans sans etre rognee. */
.lecteur:fullscreen { background: #000; display: grid; place-items: center; }
.lecteur:fullscreen video {
  width: 100%; height: 100%;
  aspect-ratio: auto; object-fit: contain;
  border-radius: 0; box-shadow: none;
}
.lecteur:-webkit-full-screen video { aspect-ratio: auto; object-fit: contain; }

/* Sur un ecran tactile il n'y a pas de survol : les boutons restent
   lisibles en permanence, sinon ils seraient introuvables. */
@media (hover: none) {
  .lecteur__barre { opacity: .85; }
}

/* L'emplacement en attente de vidéo. Volontairement sobre : il
   doit se voir sans avoir l'air d'une erreur de chargement. */
.inclus__video-vide {
  display: grid !important;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--texte-clair-2);
  border: 1px dashed rgba(255,255,255,.22);
}
.inclus__video-vide svg { width: 40px; height: 40px; color: var(--primaire-vif); }
.inclus__video-vide strong { color: #fff; font-size: 16px; font-weight: 600; display: block; }
.inclus__video-vide span { font-size: 14px; line-height: 1.45; }
.inclus__video-legende { margin-top: 12px; font-size: 14px; color: var(--texte-doux); text-align: center; }

@media (max-width: 900px) {
  /* Une seule colonne : les appareils d'abord, la vidéo ensuite.
     On annule le sticky, qui n'a plus de sens empilé. */
  .inclus__inner { grid-template-columns: 1fr; gap: 30px; }
  .inclus__video { position: static; max-width: 300px; margin: 0 auto; }
  .inclus__video--paysage { max-width: 480px; }
}

/* ============================================================
   CORRECTIF DE DÉBORDEMENT — min-width: 0
   ============================================================
   Sans ces lignes, la page déborde de 143 px sur un écran de
   375 px et se met à défiler horizontalement.

   Pourquoi : un élément de grille ou de flexbox a `min-width:auto`
   par défaut, ce qui l'empêche de devenir plus étroit que son
   contenu. La bande de vignettes mesure 6 × 74 px + 5 × 10 px de
   gouttière = 494 px de contenu minimum. Elle imposait donc 494 px
   à toute la colonne, malgré son `overflow-x: auto` — cette
   propriété autorise le défilement, elle n'autorise pas le
   rétrécissement.

   `min-width: 0` lève ce plancher : la piste peut alors rétrécir
   à la largeur disponible et son contenu défile, comme prévu.
   ============================================================ */
.fiche__media,
.fiche__infos,
.carrousel,
.carrousel__piste,
.carrousel__vignettes,
.inclus__inner > * { min-width: 0; }

/* ============================================================
   AVIS DE CE PACK — uniquement les avis du lot de la page
   ============================================================
   Fond crème entre le parchemin de « ce qui est inclus » et le
   nuit du bandeau final : trois fonds qui s'enchaînent, le
   changement de couleur sert de séparateur (pas de trait).

   La section est `hidden` dans le HTML et n'est révélée par le
   script que s'il existe au moins un vrai avis pour ce lot.
   Aucun faux avis, jamais : voir le commentaire du script.
   ============================================================ */
.avis-pack { background: var(--fond-clair); }
.avis-pack__inner { max-width: var(--max-width); margin: 0 auto; padding: 96px 24px; }
.avis-pack__tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.avis-pack__note { display: flex; align-items: center; gap: 14px; }
.avis-pack__compte { font-size: 15px; color: var(--texte-doux); }
.etoiles { color: var(--accent); font-size: 15px; letter-spacing: 1px; }
.avis-pack__tete .etoiles { font-size: 17px; }
.lien-tout {
  font-size: 17px; font-weight: 600; letter-spacing: -.374px;
  color: var(--primaire); text-decoration: none;
}
.lien-tout:hover { color: #4a44ad; }

.avis-pack__grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.avis-carte {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 24px;
  background: var(--fond-blanc); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.avis-carte__haut {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.avis-carte__verif {
  font-size: 13px; font-weight: 600; color: #3d7a55;
  background: rgba(61, 122, 85, .08); border-radius: 9999px; padding: 4px 10px;
}
.avis-carte__txt {
  font-size: 16px; line-height: 1.5; color: var(--texte);
  margin: 0; text-wrap: pretty;
}
.avis-carte__bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.avis-carte__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 13px; font-weight: 600; color: var(--texte-doux);
  background: var(--parchemin); border-radius: 9999px; padding: 4px 10px;
}
.tag--pack { color: var(--primaire); background: rgba(91, 84, 201, .08); }
.avis-carte__meta { font-size: 14px; color: var(--texte-doux); }
.avis-pack__cta { display: none; }

/* Un ou deux avis : on borne la largeur pour ne pas étirer deux
   cartes sur toute la page — ça se verrait plus que ça ne rassure. */
.avis-pack__grille:has(> :last-child:nth-child(-n+2)) { max-width: 780px; }

@media (max-width: 900px) {
  .avis-pack__inner { padding-top: 70px; padding-bottom: 70px; }
}
@media (max-width: 760px) {
  .avis-pack__inner { padding-left: 20px; padding-right: 20px; }
  .avis-pack__tete { margin-bottom: 18px; }
  .avis-pack__note { flex-wrap: wrap; gap: 8px; }
  .lien-tout { display: none; }                    /* remplacé par le bouton du bas */
  .avis-pack__grille { grid-template-columns: 1fr; gap: 10px; }
  .avis-carte { padding: 16px 18px; }
  .avis-carte__txt { font-size: 15px; line-height: 1.47; }
  .avis-carte:nth-child(n+3) { display: none; }    /* deux avis, puis le bouton */
  .avis-pack__cta {
    display: flex; width: 100%; min-height: 48px;
    align-items: center; justify-content: center; margin-top: 10px;
  }
}