/* alphaware, page accueil.
   Traduction en classes des styles inline de « alphaware Accueil.dc.html ».
   Les valeurs (couleurs, tailles, rayons, transitions) sont celles de la
   maquette : le handoff demande une reproduction fidèle. */

/* Décor de fond, sous le contenu, non interactif. Le damier et la lueur sont
   plus hauts que sur le paiement, la maquette de l'accueil a ses valeurs. */
.deco-grid,
.deco-glow {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.deco-grid {
  top: 0;
  height: 900px;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 62% at 50% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%);
  mask-image: radial-gradient(120% 62% at 50% 0%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 78%);
}

/* Une seule lueur, en left/right: 0 pour ne pas déborder horizontalement. */
.deco-glow {
  top: -320px;
  height: 760px;
  background: radial-gradient(590px 380px at 50% 50%, var(--glow-accueil), transparent);
}

/* Colonne de contenu. content-box volontaire : la maquette limite la zone de
   contenu à 1080px, les 32px de marge viennent en plus. */
.wrap {
  position: relative;
  box-sizing: content-box;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
}

/* Le mot de la marque porte un alpha grec, absent des polices du site : il
   retombe sur une police système, nommée dans --titre-marque pour que la
   retombée soit la même d'une machine à l'autre. Voir base.css. */
.nav__brand {
  font: 700 18px var(--titre-marque);
  letter-spacing: -.03em;
  color: var(--text-strong);
}

.nav__brand:hover { color: var(--accent-text) }

/* Les liens font 18px de haut avec leur seul texte, sous le minimum de 24
   pour une cible de pointage. Le rembourrage vertical les y porte sans rien
   changer à l'allure de la barre. */
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font: 400 14px var(--texte);
  color: var(--text-2);
}

.nav__cta {
  font: 500 13.5px var(--texte);
  color: var(--bg);
  background: var(--btn-light);
  padding: 9px 18px;
  border-radius: 100px;
  white-space: nowrap;
}

.nav__cta:hover {
  color: var(--bg);
  background: var(--btn-light-hover);
}

/* Boutons partagés */
.btn-solid,
.btn-ghost {
  font: 500 15px var(--texte);
  border-radius: 100px;
  white-space: nowrap;
}

.btn-solid {
  color: var(--bg);
  background: var(--btn-light);
  padding: 15px 30px;
}

.btn-solid:hover {
  color: var(--bg);
  background: var(--btn-light-hover);
}

.btn-ghost {
  color: var(--text-ghost);
  border: 1px solid var(--bd-ghost);
  padding: 14px 26px;
}

.btn-ghost:hover {
  color: var(--text-ghost);
  border-color: var(--bd-ghost-hover);
}

/* Titre */
.hero {
  padding: 104px 0 0;
  text-align: center;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  font: 400 12.5px var(--texte);
  color: var(--text-pill);
  border: 1px solid var(--bd-card);
  border-radius: 100px;
  padding: 7px 15px;
}

.hero__title {
  margin: 26px auto 0;
  max-width: 19ch;
  font: 600 66px/1.04 var(--titre);
  letter-spacing: -.04em;
  color: var(--text-strong);
  text-wrap: balance;
}

.hero__sub {
  margin: 22px auto 0;
  max-width: 52ch;
  font: 400 16.5px/1.7 var(--texte);
  color: var(--text-2);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* La garantie, en pastille sous les deux boutons du hero. Même dessin que
   celle des cartes de plan, voir fiche.css : c'est la même promesse, elle doit
   se reconnaître d'une page à l'autre. */
.hero__note.garantie {
  /* flex et non inline-flex : un élément de ligne ignore les marges auto. Le
     hero est centré par text-align, mais la pastille doit l'être par sa boîte
     pour ne pas se coller à gauche. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 22px auto 0;
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--ok-bd);
  border-radius: 999px;
  background: var(--ok-bg);
  font: 600 12.5px/1.3 var(--texte);
  color: var(--ok);
}

/* Le bouclier suit la couleur du texte et se met à l'échelle avec lui. */
.garantie__icone {
  flex: none;
  width: 15px;
  height: 15px;
}

.hero__note {
  margin-top: 20px;
  font: 400 13.5px var(--texte);
  color: var(--text-4);
}

/* En-tête de section */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.sec-title {
  font: 600 30px var(--titre);
  letter-spacing: -.03em;
  color: var(--text-strong);
}

.sec-title--center { text-align: center }

.sec-sub {
  margin-top: 8px;
  font: 400 14.5px var(--texte);
  color: var(--text-3);
}

.sec-sub--center {
  margin: 8px auto 0;
  max-width: 48ch;
  text-align: center;
}

/* Catalogue */
.jeux {
  padding: 92px 0 0;
  scroll-margin-top: 24px;
}

.filtres {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.filtre {
  font: 500 13px var(--texte);
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--bd-field);
  border-radius: 100px;
  padding: 8px 14px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.filtre:hover { border-color: var(--bd-card-hover) }

.filtre.is-active {
  color: var(--bg);
  background: var(--btn-light);
  border-color: var(--btn-light);
}

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}

/* Carte de jeu. La maquette utilise une div cliquable, ici un vrai lien vers
   la fiche du jeu : même rendu, mais utilisable au clavier, ouvrable dans un
   nouvel onglet et annoncé comme un lien. */
.jeu {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  border: 1px solid var(--bd-card-soft);
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
}

/* Décalage de l'entrée sur la position dans la rangée, la grille se remplit
   de gauche à droite. La bannière du pack occupe la première case, les rangées
   de jeux commencent donc au deuxième enfant. Les seuils suivent les colonnes
   du responsive. */
.grille > :nth-child(3n) { --i: 1 }
.grille > :nth-child(3n + 1) { --i: 2 }

@media (max-width: 900px) {
  .grille > :nth-child(3n), .grille > :nth-child(3n + 1) { --i: 0 }
  .grille > :nth-child(2n + 1) { --i: 1 }
}

@media (max-width: 640px) {
  .grille > * { --i: 0 }
}

.jeu:hover { border-color: var(--bd-card-hover) }
.jeu:hover .jeu__cta { color: var(--accent-text) }

/* Bannière du pack. C'était une barre plate posée au dessus d'une grille de
   cartes illustrées, elle faisait vide par comparaison. Elle tient en trois
   colonnes, le texte, les treize jaquettes et le prix, chacune sur son fond :
   rien ne passe derrière les montants. */
.banniere {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 172px;
  padding: 26px 30px;
  /* Bord transparent : c'est le dégradé conique de la dernière couche de fond
     qui le remplit, les couches au dessus s'arrêtant à la boîte de
     rembourrage. */
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    radial-gradient(64% 150% at 10% 0%, var(--accent-bd-soft), transparent 62%) padding-box,
    linear-gradient(115deg, var(--surface-accent), var(--shot-bas) 70%) padding-box,
    conic-gradient(from var(--tour, 0deg),
      var(--accent-fill), var(--accent-text), var(--accent-fill),
      rgba(120, 110, 190, .3), var(--accent-fill)) border-box;
  animation: tourne 7s linear infinite;
  box-shadow: 0 26px 60px -36px var(--accent-fill);
}

/* Au survol le liseré s'accélère, seul repère à donner : sa couleur vient
   déjà du dégradé. */
.banniere:hover { animation-duration: 3.2s }

/* Les treize jaquettes en éventail, entre le texte et le prix. Elles ont
   remplacé une scène ESP en fil de fer qui ne se voyait pas sur ce fond, et
   dont les étiquettes de joueurs tombaient sur le prix barré. Elles vivent
   dans leur propre colonne et non en fond : plus rien ne repasse derrière les
   montants, c'est ce qui les rendait illisibles. */
.banniere__pile {
  display: flex;
  align-items: flex-start;
  flex-shrink: 1;
  min-width: 0;
}

.banniere__carte {
  /* Compressible : l'éventail demande une largeur fixe que les petits écrans
     n'ont pas, et comme la bannière est une case de la grille du catalogue,
     c'est toute la grille qu'elle élargissait avec elle. En cédant quelques
     pixels par carte, il tient partout sans palier supplémentaire. */
  flex: 0 1 60px;
  min-width: 0;
  height: 80px;
  border: 1px solid var(--bd-card);
  border-radius: 8px;
  background: var(--field);
  overflow: hidden;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .9);
  /* Un peu retenues au repos : treize jaquettes à pleine lumière se
     disputeraient l'oeil avec le prix, qui est ce qu'on vient lire. */
  filter: brightness(.85);
  transition: filter .4s var(--ease);
  /* L'inclinaison vient d'en bas : une carte pivotant sur son centre
     s'enfoncerait dans sa voisine. */
  transform-origin: 50% 100%;
}

/* Elles se chevauchent, comme un jeu de cartes étalé : c'est le nombre qui se
   lit, pas chaque jaquette. L'ordre du document suffit à les empiler. */
.banniere__carte + .banniere__carte { margin-left: -32px }

.banniere__jaquette {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Au survol la couleur remonte de gauche à droite. Le décalage est posé par
   des règles nth-child : la politique de contenu du site interdit les styles
   inline, donc pas de --i écrit depuis le script. */
.banniere:hover .banniere__carte { filter: none }

/* L'arc et le décalage du survol, carte par carte. La politique de contenu
   du site interdit les styles inline, --i compris : c'est nth-child qui les
   pose, comme pour l'entrée des cartes du catalogue. */
.banniere__carte:nth-child(1) {
  transform: translateY(7.0px) rotate(-5.00deg);
  transition-delay: 0.000s;
}
.banniere__carte:nth-child(2) {
  transform: translateY(4.9px) rotate(-4.17deg);
  transition-delay: 0.035s;
}
.banniere__carte:nth-child(3) {
  transform: translateY(3.1px) rotate(-3.33deg);
  transition-delay: 0.070s;
}
.banniere__carte:nth-child(4) {
  transform: translateY(1.8px) rotate(-2.50deg);
  transition-delay: 0.105s;
}
.banniere__carte:nth-child(5) {
  transform: translateY(0.8px) rotate(-1.67deg);
  transition-delay: 0.140s;
}
.banniere__carte:nth-child(6) {
  transform: translateY(0.2px) rotate(-0.83deg);
  transition-delay: 0.175s;
}
.banniere__carte:nth-child(7) {
  transform: translateY(0.0px) rotate(0.00deg);
  transition-delay: 0.210s;
}
.banniere__carte:nth-child(8) {
  transform: translateY(0.2px) rotate(0.83deg);
  transition-delay: 0.245s;
}
.banniere__carte:nth-child(9) {
  transform: translateY(0.8px) rotate(1.67deg);
  transition-delay: 0.280s;
}
.banniere__carte:nth-child(10) {
  transform: translateY(1.8px) rotate(2.50deg);
  transition-delay: 0.315s;
}
.banniere__carte:nth-child(11) {
  transform: translateY(3.1px) rotate(3.33deg);
  transition-delay: 0.350s;
}
.banniere__carte:nth-child(12) {
  transform: translateY(4.9px) rotate(4.17deg);
  transition-delay: 0.385s;
}
.banniere__carte:nth-child(13) {
  transform: translateY(7.0px) rotate(5.00deg);
  transition-delay: 0.420s;
}

.banniere__corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  /* La description tenait sur une ligne et poussait l'éventail hors de la
     bannière. Elle passe sur deux, le texte garde sa colonne. */
  max-width: 262px;
  flex-shrink: 0;
}

/* Le pack ne se voyait pas : même fond, même cadre et même rayon que les
   treize cartes posées dessous. Il se distingue maintenant par trois choses,
   un liseré qui tourne, un prix barré face au sien, et un badge qui annonce
   l'écart. */
/* Le bord devient transparent et le fond s'arrête à la boîte de rembourrage :
   le dégradé qui tourne derrière n'affleure alors que sur l'épaisseur du
   bord. `overflow` a dû sauter, il aurait rogné ce liseré ; c'est la scène qui
   arrondit ses propres coins. */

/* Liseré animé. Le dégradé conique n'est pas posé sur un élément derrière la
   bannière mais dans son bord : les couches de fond de la bannière s'arrêtent
   à la boîte de rembourrage, le conique va jusqu'à la boîte de bordure, et il
   n'affleure donc que sur l'épaisseur du bord. Aucune superposition à régler,
   contrairement à un pseudo-élément qu'il fallait glisser sous un fond qui
   n'était pas opaque, et qui transparaissait donc au travers.
   C'est l'angle qui tourne, pas l'élément : faire tourner un rectangle de
   mille pixels sur deux cents fait balayer ses coins sur toute la page. La
   propriété est déclarée pour être animable, un angle n'étant pas interpolable
   autrement ; là où la déclaration n'est pas comprise, le liseré reste fixe. */
@property --tour {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


@keyframes tourne {
  to { --tour: 360deg }
}

.banniere__badge {
  font: 500 12px var(--texte);
  color: var(--accent-text);
  border: 1px solid var(--accent-bd-mid);
  border-radius: 100px;
  padding: 4px 11px;
}

.banniere__nom {
  font: 600 26px var(--titre);
  letter-spacing: -.03em;
  color: var(--text-strong);
}

.banniere__desc {
  font: 400 14px/1.6 var(--texte);
  color: var(--text-2);
}

.banniere__droite {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

/* Le prix ne se comprime pas : c'est lui qu'on vient lire. C'est l'éventail
   qui cède la largeur quand la fenêtre se resserre. */

.banniere__prix {
  font: 600 26px var(--titre);
  letter-spacing: -.035em;
  color: var(--text-strong);
  white-space: nowrap;
}

.banniere__cta {
  font: 500 14px var(--texte);
  color: var(--text-strong);
  background: var(--accent);
  border-radius: 100px;
  padding: 12px 22px;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.banniere:hover .banniere__cta { background: var(--accent-hover) }

.jeu__media {
  position: relative;
  display: block;
  height: 212px;
  background: var(--field);
  overflow: hidden;
}

/* Visuel du jeu quand il existe, sinon c'est le placeholder .shot qui occupe
   la place. Le rognage évite de dépendre du format fourni. */
.jeu__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

.jeu:hover .jeu__img { transform: scale(1.05) }

.jeu__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: 16px 18px;
}

.jeu__nom {
  font: 600 17px var(--titre);
  letter-spacing: -.02em;
  color: var(--text-card);
}

.jeu__desc {
  font: 400 13px/1.55 var(--texte);
  color: var(--text-3);
  flex: 1;
}

.jeu__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--bd-inner);
}

.jeu__prix {
  font: 400 12.5px var(--texte);
  color: var(--text-4);
}

.jeu__cta {
  font: 500 12.5px var(--texte);
  color: var(--link);
}

/* Questions */
.faq {
  padding: 92px 0 0;
  scroll-margin-top: 24px;
}

.faq__list {
  max-width: 720px;
  margin: 24px auto 0;
}

.faq__item { border-top: 1px solid var(--bd) }

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 20px 0;
  text-align: left;
}

.faq__item.is-open .faq__q { padding-bottom: 12px }

.faq__label {
  font: 500 16px var(--texte);
  color: var(--text-alt);
  transition: color .2s ease;
}

/* Le survol d'une question dit qu'elle s'ouvre au clic. */
.faq__q:hover .faq__label { color: var(--text-strong) }
.faq__q:hover .faq__signe { color: var(--accent-text) }

.faq__signe {
  font: 400 17px var(--texte);
  color: var(--text-3);
}

.faq__r {
  max-width: 58ch;
  padding-bottom: 20px;
  font: 400 14.5px/1.75 var(--texte);
  color: var(--text-2);
}

/* Appel final */
.cta {
  margin-top: 92px;
  padding: 44px 0;
  border-top: 1px solid var(--bd);
  text-align: center;
}

.cta__title {
  font: 600 34px var(--titre);
  letter-spacing: -.035em;
  color: var(--text-strong);
}

.cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* Pied de page */
.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 40px;
  font: 400 13px var(--texte);
  color: var(--text-foot);
}

.foot__links {
  display: flex;
  gap: 20px;
}

/* Portage responsive. La maquette est pensée desktop : catalogue en 2 colonnes
   puis 1, titre réduit, conteneur en 0 20px. */

/* Les trois colonnes de la bannière demandent 1100px pour tenir. En dessous,
   c'est l'éventail qui passe à la ligne, pas le prix qui se comprime : le
   montant est ce qu'on vient lire, il ne cède rien. Il gagne au passage toute
   la largeur, ce qui lui va mieux qu'une colonne étroite. */
@media (max-width: 1100px) {
  .banniere { flex-wrap: wrap }

  .banniere__corps {
    max-width: none;
    flex: 1 1 auto;
  }

  .banniere__droite { order: 2 }

  .banniere__pile {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }
}
@media (max-width: 900px) {
  .grille { grid-template-columns: repeat(2, 1fr) }

  .banniere { padding: 24px 24px }
  .banniere__nom, .banniere__prix { font-size: 23px }
  .hero { padding-top: 76px }
  .hero__title { font-size: 50px }
  .jeux, .faq { padding-top: 76px }
  .cta { margin-top: 76px }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px }
  /* Cibles tactiles : ces liens faisaient 16 à 20px de haut au doigt. Le fil
     d'Ariane de la fiche reste tel quel, c'est un lien dans une ligne de texte. */
  .nav__links a, .foot__links a { padding: 10px 0 }
  .nav__brand { padding: 8px 0 }

  /* La bannière passe en colonne : le texte, l'éventail des treize jaquettes,
     puis le prix et son bouton en bas, là où le pouce arrive. À 350px de large
     son texte et son bloc de prix ne tenaient plus côte à côte.
     Ce bloc vivait plus haut dans la feuille, avant les règles de base de la
     bannière : à spécificité égale la dernière écrite gagne, et la base
     l'écrasait. Les cartes gardaient leurs 60px sur un téléphone et
     l'éventail poussait la bannière à 438px dans un conteneur de 390. */
  .banniere {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px 20px;
    /* Le repli du palier 1100 est annulé : dans une colonne, wrap ne renvoie
       pas à la ligne mais crée une deuxième colonne, et les trois blocs se
       retrouvaient côte à côte, l'éventail sortant de l'écran. */
    flex-wrap: nowrap;
  }

  .banniere__corps { max-width: none }

  .banniere__pile {
    order: 2;
    /* Idem : en colonne, une base de 100 % vaut la hauteur, pas la largeur. */
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }

  /* Treize cartes de 44px chevauchées de 26 font 260px : elles tiennent dans
     les 310px d'un téléphone étroit sans rien pousser. */
  .banniere__carte { flex-basis: 44px; height: 59px }
  .banniere__carte + .banniere__carte { margin-left: -26px }

  .banniere__droite {
    order: 3;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
  }

  /* Le bouton passe sous le prix et prend la largeur. Sur une seule ligne, le
     montant barré, sa remise et le bouton demandaient 303px pour 280
     disponibles à 360px de large, et la bannière élargissait la grille. */
  .banniere__cta {
    flex: 1 0 100%;
    padding: 13px 20px;
    text-align: center;
  }

  .nav {
    height: auto;
    padding: 16px 0;
    flex-wrap: wrap;
    gap: 14px;
  }

  .nav__links {
    gap: 16px;
    font-size: 13px;
    flex-wrap: wrap;
  }

  .grille { grid-template-columns: 1fr }

  .hero { padding-top: 56px }
  .hero__title { font-size: 40px }
  .hero__sub { font-size: 15.5px }

  .sec-title { font-size: 26px }
  .cta__title { font-size: 28px }

  .btn-solid { padding: 14px 24px }
  .btn-ghost { padding: 13px 22px }

  .faq__label { font-size: 15px }

  .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Cibles de pointage. Le texte seul donnait 16 à 20px de haut : sous les 24px
   qu'une cible doit faire au minimum, on rate le lien une fois sur deux. Le
   rembourrage agrandit la zone cliquable sans déplacer le texte. */
.nav__links a:not(.nav__cta) { padding: 4px 2px }
.nav__brand { padding: 3px 0 }
.foot__links a { padding: 5px 2px }


/* Nom du jeu, écrit en grand directement sur la jaquette. Il vivait sous
   l'image en 15px et se perdait entre la description et le prix : sur une
   grille de treize, c'est pourtant le premier repère qu'on cherche.
   Aucune boîte autour, la lisibilité vient d'un voile dégradé posé sur le bas
   de l'image et d'une ombre portée. Une plaque encadrée faisait étiquette
   collée, le titre doit appartenir à l'illustration. */
.jeu__media::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 11, .82) 78%);
  pointer-events: none;
}

.jeu__plaque {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 11px;
  z-index: 1;
  font: 700 27px/1.05 var(--titre);
  letter-spacing: -.035em;
  color: var(--text-strong);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  /* Un nom long ne doit pas casser la vignette sur deux lignes. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform .35s var(--ease);
}

/* Le titre monte d'un cheveu au survol, avec la carte. */
.jeu:hover .jeu__plaque { transform: translateY(-2px) }

@media (max-width: 900px) {
  .jeu__plaque { font-size: 24px }
}

@media (prefers-reduced-motion: reduce) {
  .jeu:hover .jeu__plaque { transform: none }
}


/* Liseré animé. Un dégradé conique tourne derrière la bannière et n'affleure
   que sur l'épaisseur du bord, la bannière ayant son propre fond par dessus.
   Il tourne lentement : c'est un repère, pas un gyrophare. */


@media (prefers-reduced-motion: reduce) {
  .banniere { animation: none }
}

/* Le texte du badge est celui du fond du site, pas du blanc : blanc sur
   --accent-fill ne donne que 3,9 pour 1, sous le seuil exigé à cette taille.
   Le fond sombre dessus en donne 5,0. */
.banniere__badge {
  border-color: var(--accent-fill-bd);
  background: var(--accent-fill);
  color: var(--bg);
  font-weight: 600;
}

/* Prix, en deux temps : le montant à l'unité barré, puis celui du pack. */
.banniere__prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.banniere__avant {
  font: 500 15px var(--texte);
  color: var(--text-4);
  text-decoration-thickness: 1px;
}

/* La remise, collée au montant qu'elle concerne. Elle vivait dans le badge, en
   haut à gauche, où elle prenait la place de ce que le pack vend vraiment.
   Texte sombre : blanc sur --accent-fill ne donne que 3,9 pour 1. */
.banniere__remise {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--bg);
  font: 700 12px/1.4 var(--texte);
  white-space: nowrap;
}

.banniere__montant {
  font: 700 30px var(--titre);
  letter-spacing: -.035em;
  color: var(--text-strong);
  white-space: nowrap;
}

.banniere__cta {
  padding: 11px 20px;
  border-radius: 100px;
  background: var(--btn-light);
  font: 600 14px var(--texte);
  color: var(--bg);
  white-space: nowrap;
}

.banniere:hover .banniere__cta { background: var(--btn-light-hover) }

@media (max-width: 640px) {
  .banniere__montant { font-size: 26px }
  .banniere__prix { gap: 8px }
}