/* Semaine GTA Online — complète home.css (jetons, topbar, footer). Mobile d'abord : 1 colonne, 2 sur tablette, 3 sur PC.
   DA « Newswire » : noir pur, blocs rectangulaires collés à 2 px, images recadrées pleines, étiquettes jaunes posées sur
   l'image, titres condensés, listes en tableau. Toutes les couleurs, rayons et polices sont des tokens (bloc :root). */

/* Police de titres hébergée en local (fonts/, licence OFL, fichier dans semaine/templates/fonts) : Bebas Neue, une seule
   graisse, capitales uniquement (les minuscules sont rendues en capitales). Pour changer de police de titres, un seul
   token : --font-title. */
@font-face {
  font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/bebas-neue-latin.woff2') format('woff2');
}

:root {
  /* ---- polices et titres ---- */
  --font-title: 'Bebas Neue', var(--sans);
  --font-body: var(--sans);
  --title-tracking: 0.06em;
  --gap: 2px;
  --tile-gap: 12px;
  --radius: 10px;

  /* ---- surfaces : noir, deux gris de bloc, un filet ---- */
  --page: #000;
  --veil: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.84) 50%, rgba(0, 0, 0, 0.9) 100%);
  --card: #0a0a0a;
  --card-alt: #0e0e0e;
  --tint: #121212;
  --tint-hover: #1c1c1c;
  --line: #262626;
  --line-strong: #3a3a3a;
  --media-shade: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.75));
  --hero-shade: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.92) 100%);
  --fb-icon-sat: 0%; --fb-icon-light: 76%; --fb-glow-sat: 0%; --fb-glow-light: 50%; --fb-glow-alpha: 0.1;
  --fb-sat: 0%; --fb-light: 10%; --fb-sat-2: 0%; --fb-light-2: 6%;

  /* ---- texte ---- */
  --text-strong: #fff;
  --text-body: #d9d9d9;
  --text-muted: #8c8c8c;
  --text-dim: #8c8c8c;

  /* ---- accents : un seul jaune (étiquettes, dates, actif) ; blanc pour les remises et le multiplicateur ---- */
  --yellow: #fcaf17;
  --yellow-ink: #000;
  --green: #8fd14f;
  --gold: var(--yellow);
  --gold-soft: rgba(252, 175, 23, 0.6);
  --accent: var(--yellow);
}

body { font-family: var(--font-body); background: var(--page); }
/* fond : vue de Los Santos au coucher du soleil, pré-floutée et légèrement désaturée, sous un voile noir ; pseudo-élément
   fixe (background-attachment: fixed est ignoré ou saccadé sur iPhone) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--veil), url('images/background/city-720.webp') center / cover no-repeat, var(--page);
}
@media (min-width: 768px) {
  body::before { background: var(--veil), url('images/background/city-1920.webp') center / cover no-repeat, var(--page); }
}
.topbar { background: var(--page); border-bottom: 1px solid var(--line); }
/* logo de la chaîne (C et étoile, blanc sur transparent) à la place de Cliffford, menu et pied de page */
.brand-logo { width: 30px; height: 30px; }
.footer-logo { width: 24px; height: 24px; }
/* logo GTA Online centré dans le menu du haut (image large sur fond noir, rognée ; 28 px de haut, 36 px sur PC) */
.topbar-logo { height: 20px; width: auto; max-width: 100%; min-width: 0; margin: 0 auto; object-fit: contain; flex: 0 1 auto; }
.content.wk { max-width: 1240px; padding: 0 1rem 3rem; }

/* ---- réseaux dans le menu du haut : mêmes icônes rondes que le pied de page, un peu plus petites ---- */
.topbar-social { gap: 0.4rem; flex: none; }
.topbar-social .social-icon { width: 36px; height: 36px; }
.topbar-social .social-icon svg { width: 17px; height: 17px; }
/* logo GTA Online centré sur la page, pas entre la marque et les réseaux (largeurs différentes) : 3 colonnes, les deux
   latérales de même largeur. Sous 640 px, la place manque pour réserver la largeur des réseaux des deux côtés. */
@media (min-width: 640px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .topbar .brand { justify-self: start; }
  .topbar-social { justify-self: end; }
  .topbar-logo { margin: 0; }
}

/* ---- visuels tagués : image recadrée pleine, ou fond de remplacement (gris teinté + icône) ---- */
.art { position: relative; overflow: hidden; background: #111; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* sans image : même ambiance que la tuile vide (fines hachures sous un halo doré, anneau doré, logo Rockstar atténué) ;
   l'étoile (.fb-star) ne sert plus qu'à l'en-tête de la semaine sans image */
.art-fb {
  display: grid; place-items: center; color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(252, 175, 23, 0.14), rgba(252, 175, 23, 0.03) 45%, transparent 75%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #151515, #0b0b0b);
}
/* le logo et le filigrane gardent leur taille (la règle .art img les mettrait à 100 %) */
.art-fb .empty-logo { width: 52px; height: 52px; object-fit: contain; }
.art-fb .empty-watermark { width: auto; height: 150%; }
/* vignettes sans image (listes, blocs Rotation) : l'étoile des activités, centrée, sur le fond sombre */
/* case de l'étoile : cadre dessiné par-dessus (::after), sans bordure qui réduirait l'intérieur de 2 px ; l'étoile de
   32 px tombe ainsi sur des pixels entiers à 100, 125, 150 et 200 % (marges égales de chaque côté) */
.art-fb-star, .art-fb-star.mini-art { display: grid; place-items: center; border: 0; background: linear-gradient(180deg, #161616, #0b0b0b); }
.art-fb-star::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.06); pointer-events: none; }
.art-fb-star .fb-star { width: 32px; height: 32px; object-fit: contain; opacity: 0.85; }
.heist-art.art-fb-star .fb-star { width: 18px; height: 18px; }
.art-fb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 60%);
}
.fb-star { width: 72px; height: 72px; object-fit: contain; opacity: 0.85; image-rendering: auto; }

/* ---- bandeau : image pleine largeur, titre énorme en bas à gauche, logo GTA Online en haut à droite ---- */
/* bandeau de mise à jour (au-dessus de l'en-tête de la semaine) : fines hachures sous un dégradé doré, liseré doré à
   gauche, anneau lumineux avec le logo Rockstar doré, étiquette jaune + titre Bebas, compte à rebours à droite (semaine.js) */
.update-banner {
  position: relative; display: flex; align-items: center; gap: 0.9rem; margin: var(--tile-gap) 0 0; padding: 0.65rem 1rem 0.65rem 1.1rem;
  overflow: hidden; border: 1px solid rgba(252, 175, 23, 0.22); border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(252, 175, 23, 0.14), rgba(252, 175, 23, 0.03) 45%, transparent 75%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #151515, #0b0b0b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.update-banner::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #ffd27a, var(--yellow) 50%, #b87a08); }
/* logo Rockstar sans anneau : net et doré (même hauteur que l'ancien anneau, le bandeau ne grandit pas), et un grand R★
   en filigrane, très atténué, coupé par le bord gauche, fondu dans le dégradé */
.update-ring { flex: none; display: grid; place-items: center; width: 40px; height: 40px; position: relative; z-index: 1; }
.update-logo { width: 30px; height: 30px; object-fit: contain; filter: url(#tint-gold); }
.update-watermark { position: absolute; left: -26px; top: 50%; width: 130px; height: 130px; transform: translateY(-50%) rotate(-8deg); opacity: 0.09; filter: url(#tint-gold); pointer-events: none; }
.update-banner > :not(.update-watermark) { position: relative; }
.update-main { flex: none; display: flex; flex-direction: column; gap: 0.1rem; }
.update-kicker { margin: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); }
.update-title { margin: 0; font-family: var(--font-title); font-size: 1.45rem; letter-spacing: 0.04em; line-height: 1; color: var(--text-strong); white-space: nowrap; }
.update-sub { flex: 1; min-width: 0; margin: 0 0 0 0.4rem; padding-left: 0.9rem; border-left: 1px solid var(--line); font-size: 0.8rem; line-height: 1.4; color: var(--text-dim); }
.update-countdown { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; margin-left: auto; }
.update-countdown[hidden] { display: none; }
.update-cd-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.update-cd-value { font-family: var(--font-title); font-size: 1.45rem; letter-spacing: 0.04em; line-height: 1; color: var(--yellow); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) { .update-sub { display: none; } }
@media (max-width: 639px) {
  .update-banner { gap: 0.7rem; padding: 0.55rem 0.8rem 0.55rem 0.9rem; }
  .update-ring { width: 34px; height: 34px; }
  .update-logo { width: 26px; height: 26px; }
  .update-watermark { width: 110px; height: 110px; left: -24px; }
  .update-title, .update-cd-value { font-size: 1.15rem; }
  .update-kicker, .update-cd-label { font-size: 0.625rem; letter-spacing: 0.08em; }
  .update-kicker, .update-cd-label { line-height: 1.1; }
}
/* téléphones étroits (moins de 390 px) : texte un peu réduit et compte à rebours seul, sans « Prochaine dans » */
@media (max-width: 389px) {
  .update-banner { gap: 0.55rem; padding-right: 0.7rem; }
  .update-title { font-size: 1.02rem; letter-spacing: 0.02em; }
  .update-cd-value { font-size: 1.05rem; }
  .update-kicker { font-size: 0.625rem; letter-spacing: 0.05em; }
  .update-cd-label { display: none; }
}

.wk-hero {
  display: flex; flex-direction: column; justify-content: flex-end; position: relative; isolation: isolate; z-index: 1;
  margin: var(--tile-gap) 0 0; background: rgba(10, 10, 10, 0.72); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
/* avec une image : bandeau opaque, image de la semaine entière (16:9) au-dessus du texte sur mobile, à droite sur PC */
.wk-hero.has-img { background: #0c0c0c; }
.wk-hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wk-hero-body { padding: 1.2rem 1.25rem 1rem; }
.wk-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1.2rem; }
.wk-hero .kicker { margin: 0; font-family: var(--font-title); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--yellow); }
.kicker-line { display: none; }
.wk-title { margin: 0 0 0.15rem; font-family: var(--font-title); font-size: 3rem; font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; color: var(--text-strong); }
.wk-dates { margin: 0 0 0.3rem; font-family: var(--font-title); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.wk-intro { margin: 0; max-width: 72ch; color: var(--text-strong); font-size: 0.95rem; line-height: 1.42; }
@media (max-width: 639px) { .wk-hero .kicker { display: none; } }


/* ---- titres de section (Braquages) ---- */
.sec { margin-top: calc(var(--tile-gap) * 2); }
.sec-head { display: flex; align-items: center; gap: 0.8rem; margin: 0; padding: 0 0.2rem 0.6rem; }
.sec-head::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sec-head h2 { margin: 0; font-family: var(--font-title); font-size: 1.3rem; font-weight: 400; letter-spacing: var(--title-tracking); text-transform: uppercase; }
.sec-icon { display: none; }

.grid { display: grid; gap: var(--tile-gap); grid-template-columns: 1fr; }

/* ---- badges : rectangles pleins, blanc ou jaune, texte noir ---- */
.pill {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.55rem; white-space: nowrap;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.pill-plus { padding: 0.12rem 0.45rem; color: var(--yellow-ink); background: var(--yellow); }
/* HSW : bouclier (SVG non modifié) + texte « HSW » en gras, espacés, sur une pastille noire ; 18 px de haut, 20 px sur PC */
/* badge HSW : le logo « Hao's Premium Test Ride » seul, transparent (il porte son propre contour), ombre légère */
.pill-hsw { padding: 0; background: none; border: 0; cursor: help; }
.hsw-logo { display: block; height: 34px; width: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
/* badge Benny's : le logo seul, transparent, sans fond ni bordure (il porte déjà son propre contour) */
.pill-bennys { padding: 0; background: none; border: 0; cursor: help; }
.bennys-logo { display: block; height: 38px; width: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* remise et multiplicateur : verre gris translucide, liseré clair, coins légèrement arrondis, texte blanc */
.pill-discount, .pill-mult {
  color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 4px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pill-discount { font-size: 0.64rem; }
.pill-mult { font-size: 0.78rem; gap: 0.4rem; max-width: 11rem; white-space: normal; text-align: center; line-height: 1.2; }
/* récompense en toutes lettres (ex. « Vitesse d'approvisionnement ») : plus petite que le multiplicateur */
.pill-mult .mult-text { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; }
.pill-mult .cur { margin: 0; width: 16px; height: 16px; }
.pill-kind { color: var(--text-strong); background: #000; border: 1px solid #fff; font-size: 0.72rem; }

/* logos GTA$ et RP dans les titres et badges : hauteur du texte, 20 px au minimum, liseré clair pour ressortir sur
   les fonds sombres comme sur les images (les logos sont des disques pleins : l'ombre suit leur contour) */
.cur {
  display: inline-block; width: max(1.15em, 20px); height: max(1.15em, 20px); margin: 0 0.08em; vertical-align: middle;
  border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.55);
}
/* logo GTA+ à la place du mot, partout (badges, accroches, listes) : calé sur la hauteur du texte, largeur auto ;
   le PNG (292×206) reste net jusqu'au Retina 3× */
.plus-logo { display: inline-block; height: 1.2em; width: auto; margin: 0 0.15em; vertical-align: middle; }
.pill-plus .plus-logo { height: 1.15rem; margin: 0; }
.plus-nb { white-space: nowrap; }

/* ---- les 6 tuiles fixes du haut : mosaïque collée à 2 px, label jaune posé sur l'image, 1 colonne sur mobile (hauteur
   au contenu), 2 sur tablette et 3 sur PC à hauteur commune ; image 16:9 recadrée, textes coupés, pied aligné en bas ---- */
.tiles { display: grid; grid-template-columns: 1fr; gap: var(--tile-gap); margin-top: var(--tile-gap); }
/* fond arrondi comme la tuile : sinon ses coins carrés apparaissent en noir autour des languettes mobiles (fond de ville) */
.tile-slot { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--page); border-radius: var(--radius); }
.tile-slot .tile { flex: 1; }
.tile-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tile-slot .feat-title { position: absolute; top: 0; left: 0; z-index: 2; }
.feat-title {
  margin: 0; padding: 0.3rem 0.65rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow-ink); background: var(--yellow);
}
/* l'étiquette épouse le coin arrondi de la tuile en haut à gauche, et s'arrondit légèrement côté image */
.tile-slot .feat-title { border-radius: var(--radius) 0 4px 0; }

.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tile-media { position: relative; flex: none; aspect-ratio: 16 / 9; }
.tile-media .art { position: absolute; inset: 0; }
.tile-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--media-shade); }
.tile-badges { position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 1; display: flex; align-items: center; gap: 0.5rem; }
.tile-badges:empty { display: none; }
/* bandeau « GRATUIT » des véhicules gratuits (SVG de lib.mjs) : 30 % de la largeur de l'image, calé dans le coin bas droit,
   au-dessus du voile ; le texte défile d'une unité (130 unités SVG) et un reflet balaie la bande, sauf si l'utilisateur
   demande moins d'animations (bandeau fixe). Les badges de ces tuiles passent en haut à droite. */
.ribbon { position: absolute; right: 0; bottom: 0; z-index: 2; width: 30%; height: auto; aspect-ratio: 1; pointer-events: none; font-family: var(--font-title); }
.tile.has-ribbon .tile-badges { bottom: auto; top: 0.8rem; }
/* deux passages puis arrêt (WCAG 2.2.2 : pas d'animation sans fin à côté du texte) ; la fin du défilement retombe sur
   l'état de départ, le bandeau s'immobilise donc sans saut */
.ribbon-text { animation: ribbon-scroll 4s linear 2; }
.ribbon-shine { animation: ribbon-shine 4s ease-in-out 2; }
@keyframes ribbon-scroll { to { transform: translateX(-130px); } }
@keyframes ribbon-shine { from { transform: translateX(-260px) skewX(-20deg); } to { transform: translateX(260px) skewX(-20deg); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon-text, .ribbon-shine { animation: none; }
  .ribbon-shine { display: none; }
}
.tile .pill-kind { position: absolute; left: 0.8rem; bottom: 0.8rem; z-index: 1; }
/* véhicules gratuits : logo du lieu (roue de la fortune, emblème LS ; webp transparents) dans le coin haut droit du corps
   de la tuile, à côté du titre et du classement (pas de badge texte sur l'image) */
.tile-body { position: relative; }
.tile-kind-logo { position: absolute; right: 1rem; top: 0.9rem; width: 52px; height: auto; }
.tile-kind-logo ~ h3, .tile-kind-logo ~ .tile-label, .tile-kind-logo ~ .rank, .tile-kind-logo ~ .tile-value { padding-right: 68px; }
@media (min-width: 960px) { .tile-kind-logo { width: 56px; } }

/* tuile vide : croix fine sur le fond gris, texte centré */
/* tuile vide : fond sombre à fines hachures sous un halo doré, logo Rockstar doré dans un anneau lumineux, titre et
   rappel de la prochaine mise à jour, centrés */
.empty-art {
  position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(252, 175, 23, 0.14), rgba(252, 175, 23, 0.03) 45%, transparent 75%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #151515, #0b0b0b);
}
/* même traitement que le bandeau : logo Rockstar net et doré (sans anneau), grand R★ en filigrane coupé par le bord
   gauche, fondu dans le dégradé doré */
.empty-ring { position: relative; z-index: 1; display: grid; place-items: center; }
.empty-logo { width: 52px; height: 52px; object-fit: contain; filter: url(#tint-gold); }
.empty-watermark {
  position: absolute; left: -14%; top: 50%; width: auto; height: 150%; aspect-ratio: 1; object-fit: contain;
  transform: translateY(-50%) rotate(-8deg); opacity: 0.09; filter: url(#tint-gold); pointer-events: none;
}
.tile-empty .tile-body { justify-content: center; align-items: center; gap: 0.35rem; text-align: center; }
/* tuile ① : récompense en plus de GTA$ et RP (« + Réputation LSCM »), en petit sous le titre */
.tile-extra { margin: -0.2rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--yellow); }
.empty-title { margin: 0; font-family: var(--font-title); font-size: 1.55rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.05; color: var(--text-strong); }
.empty-text { margin: 0; max-width: 26ch; font-size: 0.8rem; line-height: 1.4; color: var(--text-dim); }

.mult { position: absolute; left: 0.95rem; bottom: 0.6rem; z-index: 1; display: flex; align-items: baseline; gap: 0.55rem; }
.mult b { font-family: var(--font-title); font-size: 3.6rem; font-weight: 400; line-height: 1; letter-spacing: 0.01em; color: var(--text-strong); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.mult span { font-size: 1rem; font-weight: 800; color: var(--text-strong); }
/* bonus spécial : badge texte (« GARANTIE ») à la place de « 2X $ & RP », plus petit pour tenir sur la tuile */
.mult-special b { font-size: 2.6rem; letter-spacing: 0.04em; }
.mult .cur { width: 1.5rem; height: 1.5rem; margin: 0 0.3rem; vertical-align: baseline; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65), 0 3px 10px rgba(0, 0, 0, 0.6); }
.mult .cur:first-child { margin-left: 0; }
.pill-xl {
  position: absolute; left: 0.85rem; bottom: 0.8rem; z-index: 1; padding: 0.3rem 0.6rem;
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
}
/* centrage optique : la boîte du texte est rognée à la hauteur des majuscules (la police système laisse plus de place
   au-dessus qu'en dessous), padding recalculé pour garder la même hauteur de pastille (30 px) */
@supports (text-box: trim-both cap alphabetic) {
  .pill-xl { display: block; text-box: trim-both cap alphabetic; padding-block: 0.47rem; }
}

/* corps : titre sur 2 lignes au plus, accroche sur 3, pied (condition, récompense, bouton) poussé en bas */
.tile-body { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--line); }
.tile h3 {
  margin: 0; font-family: var(--font-title); font-size: 1.7rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.05;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* prix d'une tuile, sur sa ligne sous le nom, dans la police des titres, en vert dollar */
.tile-pricing { margin: -0.2rem 0 0; font-family: var(--font-title); font-size: 1.45rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.1; white-space: nowrap; }
.tile-price { color: #35d07f; white-space: nowrap; }
/* prix en promo, même rendu partout : ancien prix barré en gris, prix réduit en vert, petit badge de remise */
.is-sale { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.35em; }
.price-was { color: var(--text-dim); font-weight: 400; font-size: 0.8em; text-decoration-thickness: 1px; }
.price-now { color: #35d07f; }
.price-badge { font-size: 0.55em; padding: 0.15em 0.45em; letter-spacing: 0.06em; align-self: center; }
.tile-price.is-sale .price-badge { display: none; }
.tile-price.is-sale { flex-wrap: nowrap; }
.tile .tile-task { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; -webkit-line-clamp: 3; }
.tile-task-icon { margin-right: 0.45em; }
.tile-label { margin: -0.25rem 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pitch { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--text-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.platforms { margin: 0; font-size: 0.75rem; color: var(--text-dim); }
.tile-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.2rem; }
.tile-foot:empty { display: none; }
.condition {
  margin: 0; padding: 0.45rem 0.65rem; display: flex; flex-direction: column; gap: 0.05rem;
  font-size: 0.85rem; font-weight: 700; line-height: 1.35; color: var(--text-strong); background: var(--tint); border: 1px solid var(--line-strong); border-radius: 6px;
}
.condition > span:first-child { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); }
.condition-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hsw-note { margin: 0; font-size: 0.74rem; color: var(--text-dim); }

/* ---- sections de listes (catégories) sous les tuiles : blocs collés, en-têtes jaunes, rangées alternées ---- */
.feats { display: grid; grid-template-columns: 1fr; gap: var(--tile-gap); margin-top: calc(var(--tile-gap) * 2); }
.feat { display: flex; flex-direction: column; min-width: 0; }
.feat > .feat-title { display: flex; align-items: center; gap: 0.8rem; padding: 0 0.2rem 0.6rem; font-family: var(--font-title); font-weight: 400; letter-spacing: var(--title-tracking); color: var(--text-strong); background: none; font-size: 1.3rem; }
.feat > .feat-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.feat-list { display: flex; flex-direction: column; gap: var(--tile-gap); }
.feat-list:empty { display: none; }
.block { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.block-title {
  margin: 0; display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem;
  font-family: var(--font-title); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow);
  background: var(--tint); border-bottom: 1px solid var(--line);
}
.block-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 1rem 0.95rem; }
.rows-list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 1rem 0.7rem 0.75rem; border-top: 1px solid #1a1a1a; }
.row:first-child { border-top: 0; }
.row:nth-child(even) { background: var(--card-alt); }
.row > p { flex: 1; margin: 0; display: flex; flex-direction: column; font-size: 0.86rem; line-height: 1.4; color: var(--text-body); }
.row .dim { font-size: 0.72rem; color: var(--text-dim); }
/* listes paginées (semaine.js) : lignes hors page masquées, sélecteur de pages en pied de bloc */
.row.is-paged-out { display: none; }
.pager { display: flex; align-items: center; gap: 0.35rem; padding: 0.6rem 1rem; background: var(--tint); border-top: 1px solid var(--line); }
.pager-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 0.5rem;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-body); cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); border-radius: 4px;
}
.pager-btn:hover:not(:disabled) { color: var(--text-strong); border-color: var(--yellow); }
.pager-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.pager-btn[aria-current] { color: var(--yellow-ink); background: var(--yellow); border-color: var(--yellow); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-btn .chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.pager-btn .chev-prev { margin-left: 3px; transform: rotate(135deg); }
.pager-btn .chev-next { margin-right: 3px; transform: rotate(-45deg); }
/* flèches ‹ › en haut à droite du titre du bloc (même pagination) */
.pager-mini { margin: -0.3rem -0.4rem -0.3rem auto; display: inline-flex; gap: 0.3rem; }
.pager-mini .pager-btn { min-width: 26px; height: 26px; padding: 0; }
.pager-info { margin-left: auto; font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.row-main b { font-size: 0.88rem; }
/* gain d'une course, discret sous le titre ; avec un bonus : base barrée et montant multiplié en vert */
/* icônes des courses : course premium en rose, contre-la-montre (normal et HSW) en mauve (filtres SVG de la page) */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.race-premium_race .mini-art img { filter: url(#tint-pink); }
.race-time_trial .mini-art img, .race-time_trial_hsw .mini-art img { filter: url(#tint-purple); }
/* centrage optique (cadre du dessin centré, mais masse visuelle à gauche : pièce ronde de la course premium, bouclier du HSW) */
.race-premium_race .mini-art img { transform: translate(1.5px, -0.6px); }
.race-time_trial_hsw .mini-art img { transform: translateX(1px); }
.race-gain { font-size: 0.74rem; color: var(--text-dim); }
.race-gain .price-was { font-size: 1em; }
.race-gain-boost { font-weight: 800; color: #35d07f; }
/* prix remisé sous le nom, en vert dollar */
.row-price { font-size: 0.8rem; font-weight: 700; color: #35d07f; }
.row-price.is-sale .price-badge { display: none; }
.row-price .price-was { font-size: 0.72rem; }
.row-end { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
/* dans les listes, le logo HSW est réduit pour s'aligner sur la hauteur de la pastille de remise */
.row .hsw-logo { height: 22px; }
.row .bennys-logo { height: 24px; }
/* téléphone : remise au-dessus, logo HSW / Benny's en dessous, pour laisser la largeur au nom et au prix */
@media (max-width: 639px) {
  .row-end { flex-direction: column; align-items: flex-end; gap: 0.4rem; }
  .row-end .pill-discount { order: -1; }
}
.row .rank-num { font-size: 0.85rem; }
.row .rank-num span, .row .rank-class { font-size: 0.72rem; }
.mini-art { flex: none; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.06); }
/* contenu limité sans image : tuile sombre, fine bordure dorée et reflet doré ; icône noir et blanc ~60 %, jamais agrandie */
.limited-art {
  display: grid; place-items: center; background: linear-gradient(135deg, #1c1a14, #0e0e0e 60%); border: 0;
  box-shadow: inset 0 0 0 2px rgba(252, 175, 23, 0.12), inset 0 10px 14px -10px rgba(252, 175, 23, 0.35);
}
/* cadre doré par-dessus (::after) : il ne réduit pas l'intérieur de la case, l'icône reste centrée au pixel près */
.limited-art::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(252, 175, 23, 0.55); pointer-events: none; animation: inherit; }
/* taille entière (pas 60 %) : marges égales au pixel près dans la case de 46 px */
.limited-art img { width: 32px; height: 32px; object-fit: contain; image-rendering: auto; }
/* bloc « contenu limité » : bordure dorée, et la tuile de l'icône de chaque ligne pulse en doré (décalé d'une ligne à
   l'autre) ; figé si l'utilisateur demande moins d'animations */
.block-limited { border-color: rgba(252, 175, 23, 0.45); }
.block-limited .block-title { color: var(--yellow); border-bottom-color: rgba(252, 175, 23, 0.3); }
/* gras « **…** » du texte d'un item limité : blanc franc sur le gris du texte */
.row-limited > p { display: block; }
.row-limited strong { font-weight: 700; color: var(--text-strong); }
.row-limited .limited-art { animation: limited-pulse 3.6s ease-in-out infinite; }
.row-limited:nth-child(2) .limited-art { animation-delay: 0.6s; }
.row-limited:nth-child(3) .limited-art { animation-delay: 1.2s; }
.row-limited:nth-child(4) .limited-art { animation-delay: 1.8s; }
@keyframes limited-pulse {
  0%, 100% { border-color: rgba(252, 175, 23, 0.55); box-shadow: inset 0 0 0 2px rgba(252, 175, 23, 0.12), inset 0 10px 14px -10px rgba(252, 175, 23, 0.35), 0 0 0 rgba(252, 175, 23, 0); }
  25% { border-color: rgba(255, 224, 140, 0.95); box-shadow: inset 0 0 0 2px rgba(252, 175, 23, 0.3), inset 0 10px 14px -10px rgba(252, 175, 23, 0.6), 0 0 14px rgba(252, 175, 23, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .row-limited .limited-art { animation: none; }
}
/* ligne cliquable (miniature avec image) : toute la ligne ouvre la visionneuse ; bouton miniature sans habillage */
.row.is-zoomable { cursor: pointer; }
.row.is-zoomable:hover { background: var(--tint-hover); }
.row.is-zoomable:hover .mini-art { border-color: var(--yellow); }
button.art-zoom { padding: 0; cursor: pointer; background: #111; font: inherit; color: inherit; }
button.art-zoom:focus-visible { border-color: var(--yellow); outline: none; }
/* visionneuse : dialog natif, image sur fond noir, légende en Bebas Neue */
.zoom { max-width: min(96vw, 1200px); max-height: 96vh; padding: 0; border: 1px solid var(--line-strong); background: #000; color: var(--text-body); }
.zoom::backdrop { background: rgba(0, 0, 0, 0.85); }
.zoom-media { position: relative; user-select: none; }
.zoom-img { -webkit-user-drag: none; }
/* la croix et les flèches restent au-dessus du calque de l'image */
.zoom-close, .zoom-nav { z-index: 2; }
.zoom-img { display: block; max-width: min(96vw, 1200px); max-height: calc(96vh - 3.2rem); width: auto; height: auto; }
/* badges (HSW) posés en bas à droite de l'image agrandie */
.zoom-badges { position: absolute; right: 0.8rem; bottom: 0.8rem; display: flex; gap: 0.4rem; }
.zoom-badges:empty { display: none; }
.zoom-cap { margin: 0; padding: 0.7rem 1rem; font-family: var(--font-title); font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); border-top: 1px solid var(--line); }
.zoom-cap:empty { display: none; }
.zoom-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 40px; height: 40px; padding: 0; font-size: 1.6rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, 0.6); border: 1px solid var(--line-strong); cursor: pointer; }
/* ligne de course avec vidéo : cliquable, petit triangle de lecture à droite ; lecteur 16:9 dans la dialog */
.row-video { cursor: pointer; }
.row-video:hover { background: var(--tint-hover); }
.row-video:hover .mini-art { border-color: var(--yellow); }
.row-play { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #000; border: 1px solid var(--line-strong); }
.row-video:hover .row-play { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
a.row-play { text-decoration: none; }
a.row-play:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.zoom-video { width: min(96vw, 1100px); }
.video-frame { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.zoom-close:hover { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); }
/* flèches de galerie : à mi-hauteur de l'image, même habillage que la croix ; masquées hors galerie et en bout de liste */
.zoom-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  color: #fff; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer;
}
.zoom-prev { left: 0.6rem; }
.zoom-next { right: 0.6rem; }
.zoom-nav:hover, .zoom-nav:focus-visible { background: var(--yellow); color: var(--yellow-ink); border-color: var(--yellow); outline: none; }
.zoom-nav[hidden] { display: none; }

.reward {
  margin: 0; padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.1rem;
  font-weight: 800; color: var(--text-strong); background: var(--tint); border: 1px solid var(--line-strong);
}
/* étiquette « Récompense » ; le texte (avec son gras **…**) est dans .reward-text, d’un seul tenant */
.reward > span:first-child { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); }

.v-type { margin: 0; font-size: 0.8rem; color: var(--text-dim); }
/* véhicule gratuit : prix normal du véhicule, sous le classement */
.tile-value { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.tile-value span { color: var(--text-strong); font-weight: 700; white-space: nowrap; }
.v-type::first-letter { text-transform: uppercase; }

/* classement : la place et la taille de la classe, en texte seulement (une place n'est pas un pourcentage) */
.rank { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.45rem; }
/* palier du classement : top 5 = or + étoile, première moitié = orange + « = », seconde moitié = rouge + flèche bas ;
   la place prend la couleur du palier, le reste de la ligne reste gris */
.rank-icon { display: inline-flex; align-items: center; margin-right: -0.25rem; font-size: 0.95em; font-weight: 900; line-height: 1; }
.rank-icon svg { position: relative; top: 0.1em; }
.rank-num { font-size: 1.15rem; font-weight: 900; color: var(--text-strong); }
.rank-top { --tier: #f2c94c; }
.rank-mid { --tier: #f0963c; }
.rank-low { --tier: #e5484d; }
.rank-icon, .rank-num { color: var(--tier, var(--text-strong)); }
.rank-num span { font-size: 0.8rem; font-weight: 700; color: var(--text-dim); }
.rank-sep { margin: 0 0.15em; opacity: 0.6; }
.rank-class { font-size: 0.8rem; color: var(--text-dim); }

/* ---- braquages ---- */
.heist { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.heist-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.95rem 0.6rem 0.6rem; background: var(--tint); border-bottom: 1px solid var(--line); }
.heist-art { flex: none; width: 36px; height: 36px; }
button.heist-art { border: 1px solid var(--line); }
button.heist-art:hover { border-color: var(--yellow); }
.heist h3 { margin: 0; font-family: var(--font-title); font-size: 1.2rem; font-weight: 400; letter-spacing: 0.02em; }
.heist-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.95rem 0.95rem; }
.heist-body .big { margin: 0; font-size: 1.05rem; font-weight: 800; }
/* tableaux du Kortz Center : vignettes portrait 3:4 à cadre doré fin, titre en dessous ; clic = image en grand */
.paintings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.painting { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.painting-art { display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; background: #111; border: 1px solid #c9a24a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.5); cursor: pointer; }
.painting-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.painting-art:hover, .painting-art:focus-visible { border-color: var(--yellow); outline: none; }
.painting-title { font-size: 0.74rem; line-height: 1.3; color: var(--text-body); }

.label { margin: 0.15rem 0 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
/* véhicules à l'essai : une rangée par garage, logo dans une case fixe à gauche (centré dans sa case, et la case centrée
   verticalement sur la hauteur de la rangée, même quand les puces tiennent sur plusieurs lignes), nom et puces à droite ;
   filet entre les garages */
.garages { gap: 0; padding-top: 0.25rem; padding-bottom: 0.4rem; }
.garage { display: grid; grid-template-columns: 64px 1fr; gap: 0.9rem; align-items: center; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.garage:first-child { border-top: 0; }
.garage-badge { display: grid; place-items: center; width: 64px; height: 44px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; }
/* l'image remplit tout l'intérieur du cadre : le logo y est déjà centré (images « -cadre ») */
.garage-badge img { display: block; width: 100%; height: 100%; }
.garage-main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.garage-main .label { margin: 0.2rem 0 0; color: var(--text-body); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* puces : petites, verre gris translucide léger, liseré fin, coins arrondis */
.chips li {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 0.75rem; font-size: 0.78rem; line-height: 1; color: var(--text-body);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 5px;
}
/* véhicule à l'essai avec photo : la puce est un bouton ; petite icône appareil photo grise après le nom, jaune au survol */
.chip-photo { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0; font: inherit; line-height: 1; color: var(--text-body); background: none; border: 0; cursor: pointer; }
.chip-photo svg { width: 12px; height: 12px; color: var(--text-muted); transition: color 0.15s ease; }
.chips li:has(.chip-photo:hover), .chips li:has(.chip-photo:focus-visible) { border-color: rgba(252, 175, 23, 0.6); background: rgba(252, 175, 23, 0.08); }
.chips li:has(.chip-photo:hover) .chip-photo, .chips li:has(.chip-photo:focus-visible) .chip-photo { color: var(--text-strong); }
.chips li:has(.chip-photo:hover) .chip-photo svg, .chips li:has(.chip-photo:focus-visible) .chip-photo svg { color: var(--yellow); }
.chip-photo:focus-visible { outline: none; }
/* légende de la visionneuse avec classement : nom puis la ligne de classement, sur la même ligne */
.zoom-cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1rem; }
.zoom-cap .rank { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.zoom-price { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #35d07f; }
/* magasin du véhicule, poussé tout à droite de la légende (sous les prix sur mobile) */
.zoom-shop { margin-left: auto; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-dim); text-align: right; }
.zoom-shop-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 0.2rem; }
.zoom-shop-sep { margin: 0 0.1rem; color: var(--text-muted); }
.deal { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
/* même taille que les pastilles de remise des promotions (pas de largeur minimale) */
.deal .pill-discount { flex: none; justify-content: center; }
.deal .pill-plus { flex: none; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line); font-size: 0.86rem; }
.rows li:last-child { border-bottom: 0; }
.rows span { color: var(--text-dim); }

.footer { margin-top: calc(var(--tile-gap) * 3); background: var(--page); border-top-color: var(--line); }
.footer .sep { color: var(--line-strong); }

/* ---- mobile et tablette (blocs empilés) : chaque bloc de liste replié sur son premier élément, flèche en pied de bloc ---- */
.block-fold { display: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 959px) {
  .block.is-folded .fold-hidden, .block.is-folded .pager, .block.is-folded .pager-mini { display: none; }
  /* titres des blocs (« Toutes les promos »…) plus grands, lisibles sur téléphone */
  .block-title { font-size: 1rem; padding-block: 0.65rem; }
  /* titres de section (Bonus, Promotions, Autres, Rotation) centrés et plus grands, filets dégradés de part et d'autre */
  .feat > .feat-title, .sec-head { justify-content: center; padding: 0.5rem 0 0.9rem; }
  .feat > .feat-title, .sec-head h2 { font-size: 1.75rem; letter-spacing: 0.08em; }
  .feat > .feat-title::before, .sec-head::before { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
  .feat > .feat-title::after, .sec-head::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
  /* poignée (40 px, facile au pouce) : pastille ronde centrée à cheval sur le bord bas du bloc (le bouton suit le bloc dans .feat-list : sa marge
     haute annule l'écart de la liste et la moitié de sa hauteur), jaune au survol ; le bloc garde un peu d'air en bas */
  .block.has-fold { padding-bottom: 0.8rem; }
  .block-fold {
    position: relative; z-index: 1; display: flex; align-self: center; margin: calc(-1 * var(--tile-gap) - 20px) 0 0; padding: 0;
    color: var(--text-body); cursor: pointer; background: none; border: 0; border-radius: 50%;
  }
  .block-fold:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
  .fold-knob {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #262626, var(--card) 70%); border: 1px solid var(--line-strong);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  /* bloc « Contenu limité » (bord doré) : pastille au bord doré aussi */
  .block-limited + .block-fold .fold-knob { border-color: rgba(252, 175, 23, 0.45); }
  .block-fold:hover .fold-knob { color: var(--yellow); border-color: var(--yellow); box-shadow: 0 2px 10px rgba(252, 175, 23, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  .block-fold:active .fold-knob { transform: scale(0.92); }
  .block-fold .chev { width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.3s ease, margin 0.3s ease; }
  .block-fold[aria-expanded="true"] .chev { margin-top: 4px; transform: rotate(-135deg); }
}

/* ---- tablette ---- */
/* ---- téléphone : tuiles repliées en languettes (semaine.js ajoute .has-tabs), un clic déplie la tuile complète,
   pour consulter la semaine d'un coup d'œil en pleine partie. Sans JavaScript, sur tablette et sur PC : tuiles entières. ---- */
.tile-tab { display: none; }
@media (max-width: 639px) {
  .tiles.has-tabs { gap: 6px; }
  /* titres des tuiles masqués visuellement (la languette les remplace), gardés pour la navigation par titres */
  .tiles.has-tabs .tile-slot > .feat-title { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* languette : texte à gauche, image de la tuile sur la moitié droite, fondue vers la gauche dans le fond de la carte
     (même masque que l'en-tête), chiffre clé et chevron posés sur l'image en verre translucide */
  .tiles.has-tabs .tile-tab {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 68px;
    padding: 0.55rem 0.8rem 0.55rem 0.95rem; font: inherit; text-align: left; color: var(--text-strong); cursor: pointer;
    background: linear-gradient(90deg, #121212, var(--card) 55%); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .tiles.has-tabs .tile-tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
  .tab-thumb { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; pointer-events: none; }
  .tab-thumb img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
  }
  /* languette d'un emplacement vide : même ambiance que la tuile vide (hachures, halo doré, logo Rockstar atténué), fondue vers la gauche */
  .tab-empty-art {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 40% 95% at 74% 50%, rgba(252, 175, 23, 0.07), transparent 70%),
      repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 10px),
      linear-gradient(90deg, #0e0e0e, #161616);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
  }
  .tab-thumb .tab-empty-logo {
    position: absolute; top: 50%; right: 3.6rem; width: 30px; height: 30px; object-fit: contain; opacity: 0.45;
    transform: translateY(-50%); filter: url(#tint-gold); -webkit-mask-image: none; mask-image: none;
  }
  .tab-main { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
  .tab-label { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); }
  .tab-text {
    font-family: var(--font-title); font-size: 1.22rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1.05; color: var(--text-strong);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .tab-empty { color: var(--text-muted); }
  .tab-text .cur { width: 1rem; height: 1rem; vertical-align: -0.12em; }
  .tab-text .plus-logo { height: 1rem; vertical-align: -0.15em; }
  /* logo du lieu (roue de la fortune, emblème LS) à côté du nom du véhicule gratuit */
  .tab-text .tab-logo { width: 1.35rem; height: 1.35rem; margin-left: 0.4rem; vertical-align: -0.2em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
  .tab-badge {
    position: relative; z-index: 1; flex: none; padding: 0.25rem 0.5rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
    color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  /* pastille du chevron : verre sombre, bord clair et ombre portée, lisible sur n'importe quelle image ; jaune une fois ouverte */
  .tab-knob {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: 0.15rem;
    color: #fff; border-radius: 50%; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  }
  .tile-tab .chev {
    width: 9px; height: 9px; margin-top: -4px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.3s ease, margin 0.3s ease;
  }
  .tile-tab[aria-expanded="true"] .chev { margin-top: 4px; transform: rotate(-135deg); }
  .tile-tab[aria-expanded="true"] .tab-knob { color: var(--yellow-ink); background: var(--yellow); border-color: var(--yellow); }
  /* hauteur pilotée par l'effet slide (semaine.js) : pas de flex qui l'écraserait */
  .tiles.has-tabs .tile-wrap { flex: none; }
  .tiles.has-tabs .tile-slot.is-collapsed .tile-wrap { display: none; }
  /* tuile dépliée : collée sous sa languette */
  .tiles.has-tabs .tile-slot:not(.is-collapsed) .tile-tab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--yellow); }
  .tiles.has-tabs .tile-slot:not(.is-collapsed) .tile { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}

@media (min-width: 640px) {
  /* PC : texte à gauche, image à droite sur toute la hauteur, fondu vers le fond sombre à la jonction */
  .wk-hero.has-img { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: end; min-height: 320px; }
  .wk-hero.has-img .wk-hero-img { height: 100%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
  .wk-hero.has-img .wk-hero-body { order: -1; }
  .wk-title { font-size: 4.4rem; }
  .wk-hero-body { padding: 1.2rem 1.4rem 1rem; }
  .content.wk { padding: 0 1.25rem 3rem; }
  .grid-heists { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}
/* ---- PC : 6 tuiles en 2 rangées de 3, puis les 3 listes côte à côte dans la même mosaïque ---- */
@media (min-width: 960px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--tile-gap); }
  .grid-heists { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .hsw-logo { height: 38px; }
  .topbar-logo { height: 24px; }
  .wk-hero-body { padding: 1.2rem 1.7rem 1rem; }
}
@media (max-width: 760px) {
  .topbar { padding: 0.7rem 1rem; }
  .brand-name { font-size: 0.85rem; }
  .topbar-logo { height: 18px; }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
}

/* ---- téléphone : petits libellés (remises, étiquettes, prix d'un lieu…) jamais sous 11 px ---- */
@media (max-width: 639px) {
  .pill-discount, .tab-label, .label, .condition > span:first-child, .reward > span:first-child, .zoom-shop-label,
  .pill-mult .mult-text { font-size: 0.7rem; }
}