/* Bobine : page d'accueil publique.
   Mêmes tokens que l'appli (copiés de app.css, ne pas diverger) :
   --salle #1c1517 fond, --pellicule #2b2225 surfaces, --velours #8e1f2f marque,
   --ampoule #ffc85a seul accent d'action, --ecran #eceef0 texte, --faisceau #93c8d8 temps.
   Limelight pour la marque et les titres, Barlow pour le texte.
   La carte et le sachet reprennent les styles de index.html et app.css, en copie : la page
   ne charge ni app.css ni app.js. */
@font-face { font-family: "Limelight"; src: url("fonts/limelight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --salle: #1c1517;
  --pellicule: #2b2225;
  --velours: #8e1f2f;
  --ampoule: #ffc85a;
  --ecran: #eceef0;
  --faisceau: #93c8d8;
  --gris: #a99c9e;
  --trait: #3c3033;
  --marquise: "Limelight", "Iowan Old Style", Georgia, serif;
  --texte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cond: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
  --marge: 18px;
  --colonne: 1120px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--salle); }
/* Zones sûres de l’iPhone (viewport-fit=cover) : encoche en paysage, Dynamic Island, barre d’accueil */
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--salle);
  color: var(--ecran);
  font: 400 17px/1.55 var(--texte);
}
img { max-width: 100%; }
a { color: var(--ecran); text-underline-offset: 3px; }
a:hover { color: var(--ampoule); }
:focus-visible { outline: 2px solid var(--ampoule); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h2 { font: 400 clamp(28px, 6.4vw, 44px)/1.12 var(--marquise); color: var(--ampoule); letter-spacing: 0.005em; }
h3 { font: 700 19px/1.3 var(--texte); color: var(--ecran); }
p { margin: 0 0 0.9em; max-width: 62ch; }

/* ---------- En-tête ---------- */
.entete {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 14px var(--marge) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.entete-logo { display: block; line-height: 0; padding: 6px 0; }
.entete-logo img { width: 128px; height: auto; aspect-ratio: 1500 / 420; }
.entete-compte { font: 600 15px/1 var(--texte); color: var(--gris); padding: 12px 0; }

/* ---------- Ouverture : le booster ---------- */
.ouverture {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 10px var(--marge) 56px;
  display: grid;
  grid-template-areas: "texte" "scene" "actions";
}
.ouverture-texte { grid-area: texte; }
.ouverture h1 {
  font: 400 clamp(33px, 9.4vw, 64px)/1.04 var(--marquise);
  color: var(--ecran);
  max-width: 13ch;
  margin-top: 8px;
}
.chapeau { margin: 12px 0 0; color: var(--gris); font-size: 16px; line-height: 1.45; max-width: 40ch; }
.ouverture-actions { grid-area: actions; }

.bouton-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 8px;
  background: var(--ampoule);
  color: var(--salle);
  font: 700 19px/1 var(--texte);
  text-decoration: none;
}
/* Mêmes couleurs dans tous les états (lien visité, appui, focus) : le bouton ne doit jamais paraître éteint */
.bouton-principal:link, .bouton-principal:visited, .bouton-principal:active, .bouton-principal:focus {
  background: var(--ampoule);
  color: var(--salle);
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
}
.bouton-principal:hover { background: #ffd47c; color: var(--salle); }
.ouverture-note { margin: 12px 0 0; font-size: 15px; color: var(--gris); }
.ouverture-invite { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--ampoule); background: var(--pellicule); color: #ddd4d5; font-size: 15px; line-height: 1.45; text-align: left; }
.ouverture-note a { font-weight: 600; }
.scene-legende { margin: 22px 0 0; font-size: 14px; color: var(--gris); }
.lien-bouton {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  min-height: 24px;
  color: var(--ecran);
  font: 600 14px var(--texte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--ampoule); }
.lien-bouton[aria-disabled] { color: var(--gris); cursor: default; }

.scene {
  grid-area: scene;
  position: relative;
  height: 222px;
  margin: 6px calc(var(--marge) * -1) 4px;
  overflow: hidden;
}
.eventail { position: absolute; inset: 0; }

/* Le sachet (copie du booster de l'appli, variante gratuite) */
.sachet {
  --w: 150px;
  --metal-clair: #d6edf2;
  --metal-fonce: #4f8796;
  --encre: #062631;
  --teinte: var(--faisceau);
  --lettrage: #f2fbff;
  --bande: #2e6f80;
  --bande-texte: var(--ecran);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  aspect-ratio: 5 / 8;
  margin: calc(var(--w) * -0.8) 0 0 calc(var(--w) * -0.5);
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.55));
  z-index: 10;
}
.seal {
  position: relative;
  z-index: 2;
  height: 6.5%;
  flex: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1.5px, rgba(0, 0, 0, 0.2) 1.5px 3px),
    linear-gradient(180deg, var(--metal-clair), var(--metal-fonce) 60%, var(--metal-clair));
}
.seal-top {
  clip-path: polygon(0 20%, 4% 0, 8% 20%, 12% 0, 16% 20%, 20% 0, 24% 20%, 28% 0, 32% 20%, 36% 0, 40% 20%, 44% 0, 48% 20%, 52% 0, 56% 20%, 60% 0, 64% 20%, 68% 0, 72% 20%, 76% 0, 80% 20%, 84% 0, 88% 20%, 92% 0, 96% 20%, 100% 0, 100% 100%, 0 100%);
  transform-origin: 85% 100%;
  transition: transform 0.7s cubic-bezier(.3,.7,.3,1), opacity 0.7s ease;
}
.seal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 96% 100%, 92% 80%, 88% 100%, 84% 80%, 80% 100%, 76% 80%, 72% 100%, 68% 80%, 64% 100%, 60% 80%, 56% 100%, 52% 80%, 48% 100%, 44% 80%, 40% 100%, 36% 80%, 32% 100%, 28% 80%, 24% 100%, 20% 80%, 16% 100%, 12% 80%, 8% 100%, 4% 80%, 0 100%);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.pack-face { position: relative; flex: 1; overflow: hidden; background: var(--encre); transition: transform 0.6s ease, opacity 0.6s ease; }
.pack-face::before, .pack-face::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  z-index: 3;
  background-color: rgba(10, 6, 7, 0.82);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14'%3E%3Crect x='2.5' y='3.5' width='5' height='7' rx='1.4' fill='%23eceef0' fill-opacity='.85'/%3E%3C/svg%3E");
  background-size: 100% auto;
  background-repeat: repeat-y;
}
.pack-face::before { left: 0; }
.pack-face::after { right: 0; }
.collage { position: absolute; inset: -6%; filter: grayscale(1) contrast(1.2); }
.collage img { position: absolute; width: 54%; aspect-ratio: 2 / 3; object-fit: cover; }
.collage img:nth-child(1) { left: -2%; top: 2%; transform: rotate(-9deg); }
.collage img:nth-child(2) { left: 44%; top: -4%; transform: rotate(7deg); }
.collage img:nth-child(3) { left: 20%; top: 30%; transform: rotate(-3deg); z-index: 1; }
.collage img:nth-child(4) { left: 56%; top: 40%; transform: rotate(10deg); }
.collage img:nth-child(5) { left: -8%; top: 58%; transform: rotate(6deg); }
.collage img:nth-child(6) { left: 34%; top: 68%; transform: rotate(-8deg); z-index: 1; }
.duo-dark { position: absolute; inset: 0; background: var(--encre); mix-blend-mode: lighten; }
.duo-light { position: absolute; inset: 0; background: var(--teinte); mix-blend-mode: multiply; }
.veil { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 34% at 50% 48%, rgba(0, 0, 0, 0.7), transparent 78%); }
.pillow {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 22%, rgba(255, 255, 255, 0.06) 50%, transparent 78%, rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.35));
}
.label {
  position: absolute;
  inset: 0 9%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pack-ed { font: 600 calc(var(--w) * 0.058)/1 var(--texte); color: var(--ecran); letter-spacing: 0.04em; margin-bottom: calc(var(--w) * 0.02); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.pack-logo {
  font: 400 calc(var(--w) * 0.215)/1 var(--marquise);
  color: var(--lettrage);
  -webkit-text-stroke: calc(var(--w) * 0.004) rgba(0, 0, 0, 0.6);
  text-shadow: 0 calc(var(--w) * 0.012) 0 rgba(0, 0, 0, 0.75), 0 0 calc(var(--w) * 0.06) rgba(0, 0, 0, 0.7);
}
.pack-stripe {
  align-self: stretch;
  margin: calc(var(--w) * 0.03) -12% 0;
  padding: calc(var(--w) * 0.025) 0;
  background: var(--bande);
  color: var(--bande-texte);
  border-top: 1px solid var(--metal-clair);
  border-bottom: 1px solid var(--metal-clair);
  font: 700 calc(var(--w) * 0.06)/1 var(--texte);
}
.pack-n { position: absolute; bottom: 5%; left: 0; right: 0; z-index: 2; text-align: center; font: 600 calc(var(--w) * 0.05)/1 var(--texte); color: var(--ecran); opacity: 0.85; }

.sachet.dechire .seal-top { transform: translate(18%, -170%) rotate(14deg); opacity: 0; }
.sachet.dechire .pack-face, .sachet.dechire .seal-bottom { transform: translateY(30%) scale(0.92); opacity: 0; transition: transform 0.55s ease 0.25s, opacity 0.55s ease 0.25s; }
.sachet.parti { visibility: hidden; }

/* L'éventail : cinq cartes posées en arc. --x et --r donnés par accueil.js */
.pose {
  --z: 0.44;
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: calc(262px * var(--z));
  aspect-ratio: 63 / 88;
  margin-left: calc(262px * var(--z) * -0.5);
  transform-origin: 50% 130%;
  transform: translateX(var(--x)) rotate(var(--r));
  transition: transform 0.6s cubic-bezier(.2,.8,.3,1.1), opacity 0.4s ease;
}
.pose.centre { --z: 0.5; z-index: 5; }
.pose.range { transform: translateY(-46px) scale(0.6); opacity: 0; }
.retourne {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
}
.retourne-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.3,.6,.3,1);
}
.retourne.face .retourne-inner { transform: rotateY(180deg); }
.dos, .recto {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: calc(14px * var(--z));
}
.recto { transform: rotateY(180deg); }
.recto .card { zoom: var(--z); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.dos {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(227, 180, 72, 0.25) 28% 29%, transparent 29% 38%, rgba(227, 180, 72, 0.18) 38% 39%, transparent 39%),
    repeating-linear-gradient(45deg, #4a121c 0 8px, #3e0f18 8px 16px);
  border: 4px solid #2b2225;
  box-shadow: inset 0 0 0 2px rgba(255, 200, 90, 0.45), 0 10px 24px rgba(0, 0, 0, 0.5);
}
.dos span {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--salle);
  border: 2px solid var(--ampoule);
  color: var(--ampoule);
  font: 400 calc(262px * var(--z) * 0.13)/1 var(--marquise);
}
.retourne.face.eclat .recto { animation: eclat 2.2s ease-out; border-radius: 14px; }
@keyframes eclat {
  0% { box-shadow: 0 0 70px 20px rgba(234, 246, 255, 0.85); }
  100% { box-shadow: 0 0 0 0 rgba(234, 246, 255, 0); }
}

/* ---------- La carte (copie de index.html + app.css) ---------- */
.card {
  --fc: #6d7480;
  --fc-dark: #2c3038;
  --fc-ink: #fff;
  --frame: #3a3d45;
  width: 262px;
  aspect-ratio: 63 / 88;
  border-radius: 14px;
  padding: 9px;
  background: var(--frame);
  position: relative;
  text-align: left;
  font: 15px/1.45 var(--texte);
}
.card .face {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--fc-dark), #121318 70%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.f-animation  { --fc: #2bb3a3; --fc-dark: #123e3b; }
.f-frisson    { --fc: #c8323c; --fc-dark: #3e1418; }
.f-imaginaire { --fc: #7f5be0; --fc-dark: #261c48; }
.f-action     { --fc: #e57a28; --fc-dark: #45240f; }
.f-comedie    { --fc: #e6c23a; --fc-dark: #403612; --fc-ink: #1c1a10; }
.f-drame      { --fc: #3f7fd0; --fc-dark: #142a45; }
.r-commune { --frame: #3b3e46; }
.r-peu-commune { background: linear-gradient(145deg, #e7ecf2, #8d97a6 45%, #dfe5ee 60%, #7b8494); }
.r-rare { background: linear-gradient(145deg, #f8df8a, #b07d1d 40%, #f3cf6a 58%, #8a5c10); }
.r-rare .face { box-shadow: inset 0 0 0 1px rgba(248, 223, 138, 0.6); }
.r-legendaire { background: conic-gradient(from var(--a, 0deg), #fff3d1, #ffc85a, #93c8d8, #eceef0, #ffc85a, #fff3d1); animation: tourne 6s linear infinite; }
.r-legendaire .face { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tourne { to { --a: 360deg; } }

.namebar { display: flex; align-items: center; gap: 8px; padding: 5px 7px; background: var(--fc); color: var(--fc-ink); }
.cost {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 17px/1 var(--cond);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.title {
  font: 700 15px/1.15 var(--serif);
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.title.long { font-size: 13px; }
.title.xlong { font-size: 11.5px; }
.year { font: 600 11px/1 var(--cond); opacity: 0.8; }
.art {
  margin: 5px 6px 0;
  aspect-ratio: 16 / 9;
  flex: none;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background: var(--fc-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 25%; }
.art.fond img { object-position: 50% 50%; }
.art .placeholder {
  position: absolute;
  inset: 0;
  background: var(--fc);
  color: var(--fc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  font: 800 22px/1.05 var(--serif);
}
.print-stamp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  background: rgba(10, 10, 14, 0.8);
  color: #f3e3b0;
  font: 600 9.5px/1.2 var(--texte);
  letter-spacing: 0.02em;
  text-align: center;
}
.bas { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.typeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 5px 6px 0;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ecran);
  border-left: 4px solid var(--fc);
  font: 600 11px/1.2 var(--cond);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rar { display: flex; align-items: center; gap: 5px; }
.gem { flex: none; width: 11px; height: 11px; display: inline-block; }
.gem.commune { background: #2b2d33; border: 1px solid #9aa0aa; border-radius: 50%; }
.gem.peu-commune { background: #c9d1dc; transform: rotate(45deg); width: 9px; height: 9px; }
.gem.rare { background: #e9b949; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 12px; height: 14px; }
.gem.legendaire { background: conic-gradient(#fff3d1, #ffc85a, #93c8d8, #eceef0, #fff3d1); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 14px; height: 14px; }
.rules {
  flex: 1 1 auto;
  min-height: 0;
  margin: 5px 6px 0;
  padding: 6px 8px;
  background: #ece6d8;
  color: #1d1b17;
  border-radius: 3px;
  font: 11px/1.3 var(--texte);
  overflow: hidden;
}
.rules p { margin: 0; }
.rules b { font: 700 11.5px var(--texte); }
.rules .meta { margin: 6px 0 0; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, 0.15); color: #5d574c; font-style: italic; font-size: 10px; }
.stats { display: flex; align-items: center; gap: 5px; padding: 5px 7px 6px; }
.stat { display: flex; align-items: baseline; gap: 3px; padding: 3px 7px 2px; border-radius: 4px; font: 700 17px/1 var(--cond); color: #fff; }
.stat small { font: 600 9px/1 var(--cond); letter-spacing: 0.08em; opacity: 0.85; }
.stat.atk { background: #b8322f; }
.stat.def { background: #2f6db8; }
.stat.pv  { background: #2f8f55; }
.set { margin-left: auto; font: 600 9.5px/1.1 var(--cond); color: var(--gris); text-align: right; letter-spacing: 0.04em; }

.card.full-art .face { background: #0d0a0b; }
.card.full-art .art { position: absolute; inset: 0; margin: 0; border-radius: 8px; z-index: 0; box-shadow: none; aspect-ratio: auto; }
.card.full-art .art img { object-position: 50% 0; }
.card.full-art .bas {
  flex: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-top: 56px;
  background: linear-gradient(180deg, rgba(13, 10, 11, 0), rgba(13, 10, 11, 0.9) 34%, rgba(13, 10, 11, 0.97));
}
.card.full-art .rules { flex: none; background: transparent; color: #f2eee8; padding: 3px 8px 0; }
.card.full-art .rules .caps { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.full-art .rules b { color: #fff; }
.card.full-art .namebar { position: relative; z-index: 2; background: rgba(13, 10, 11, 0.84); color: var(--ecran); border-bottom: 2px solid var(--fc); }
.card.full-art .typeline { background: rgba(255, 255, 255, 0.1); color: var(--ecran); }
.card.full-art .set { color: #cfc5bc; }
.card.full-art .print-stamp { position: static; background: none; color: #f3e3b0; padding: 0 8px 3px; text-align: left; }

/* ---------- Rareté ---------- */
.rarete {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 56px var(--marge);
  border-top: 1px solid var(--trait);
  display: grid;
  gap: 32px;
}
.rarete-texte p { color: var(--ecran); }
.rarete-texte h2 { margin-bottom: 18px; max-width: 16ch; }
.classement h3, .hausse h3 { margin-bottom: 10px; }
.classement-liste { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.classement-liste li {
  counter-increment: rang;
  display: grid;
  grid-template-columns: 26px 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--trait);
}
.classement-liste li::before {
  content: counter(rang);
  grid-row: 1 / 3;
  font: 400 22px/1 var(--marquise);
  color: var(--gris);
  text-align: right;
}
.classement-liste li.classement-vide { display: block; color: var(--gris); }
.classement-liste li.classement-vide::before { content: none; }
.classement-liste img {
  grid-row: 1 / 3;
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--pellicule);
}
.classement-film { font-weight: 600; line-height: 1.25; }
.classement-film small { font-weight: 400; color: var(--gris); font-size: 14px; margin-left: 6px; }
.classement-vues { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); font-variant-numeric: tabular-nums; }
.classement-vues i { display: block; height: 6px; border-radius: 3px; background: var(--ampoule); min-width: 4px; }
.classement-date { margin-top: 10px; font-size: 14px; color: var(--gris); }

.hausse-intro { color: var(--gris); font-size: 15px; }
.hausse-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hausse-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--pellicule);
  font-size: 15px;
  line-height: 1.25;
}
.hausse-liste img { width: 30px; height: 45px; object-fit: cover; border-radius: 2px; }
.hausse-liste b { font-weight: 600; display: block; }
.hausse-liste span { color: var(--faisceau); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- Tampon ---------- */
.tampon {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 56px var(--marge);
  border-top: 1px solid var(--trait);
  display: grid;
  gap: 28px;
  justify-items: start;
}
.tampon-carte { justify-self: center; min-height: calc(262px * 88 / 63); }
.tampon-carte .card { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.tampon-texte h2 { margin-bottom: 18px; }

/* ---------- Programme ---------- */
.programme {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 56px var(--marge) 0;
  border-top: 1px solid var(--trait);
}
.programme h2 { margin-bottom: 20px; }
.seances { margin: 0; }
.seance { padding: 16px 0; border-bottom: 2px dotted var(--trait); }
.seance:last-child { border-bottom: 0; }
.seance dt { font: 700 20px/1.3 var(--texte); color: var(--ampoule); margin-bottom: 4px; }
.seance dd { margin: 0; max-width: 58ch; }
.seance-rodage dt { color: var(--ecran); }
.rodage {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--gris);
  border-radius: 4px;
  font: 600 13px/1.4 var(--texte);
  color: var(--gris);
  vertical-align: 3px;
}
.album { margin: 28px calc(var(--marge) * -1) 0; overflow: hidden; }
.album figcaption { padding: 10px var(--marge) 0; font-size: 14px; color: var(--gris); }
.album-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  grid-auto-rows: 81px;
  gap: 6px;
  height: calc(81px * 3 + 12px);
  overflow: hidden;
  padding: 0 var(--marge);
}
.album-grille img, .album-grille span {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--pellicule);
}
.album-grille .manque { filter: grayscale(1) brightness(0.35); }

/* ---------- Gratuit ---------- */
.gratuit {
  max-width: var(--colonne);
  margin: 56px auto 0;
  padding: 56px var(--marge) 64px;
  border-top: 1px solid var(--trait);
}
.gratuit h2 { margin-bottom: 18px; max-width: 18ch; }
.taux { border-collapse: collapse; margin: 20px 0 6px; min-width: 260px; font-variant-numeric: tabular-nums; }
.taux caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.taux th, .taux td { padding: 7px 0; border-bottom: 1px solid var(--trait); text-align: left; font-weight: 400; }
.taux td { text-align: right; padding-left: 40px; font-weight: 600; }
.taux-note { font-size: 15px; color: var(--gris); margin-bottom: 28px; }
.gratuit .bouton-principal { display: inline-flex; }

/* ---------- Pied ---------- */
.pied {
  border-top: 1px solid var(--trait);
  padding: 26px var(--marge) 34px;
  color: var(--gris);
  font-size: 14px;
  line-height: 1.5;
}
.pied p { max-width: var(--colonne); margin: 0 auto 10px; }
.pied a { color: var(--ecran); }
.pied-tmdb img { display: inline-block; vertical-align: 0; margin-right: 8px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pied-liens a { padding: 6px 0; }

/* ---------- Pages légales ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 32px var(--marge) 64px; }
.legal h1 { font: 400 clamp(32px, 8vw, 48px)/1.1 var(--marquise); color: var(--ampoule); margin-bottom: 24px; }
.legal h2 { font: 700 21px/1.3 var(--texte); color: var(--ecran); margin: 36px 0 10px; }
.legal ul { padding-left: 1.2em; margin: 0 0 0.9em; max-width: 62ch; }
.legal li { margin-bottom: 6px; }
.legal code { font: 600 15px var(--texte); color: var(--ampoule); }
.legal-chapeau { font-size: 19px; color: var(--ecran); }
.legal-maj { margin-top: 40px; font-size: 14px; color: var(--gris); }
.legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; line-height: 1.4; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--trait); }
.legal-table th { color: var(--gris); font-weight: 600; }
.legal-table td:first-child { font-weight: 600; }
@media (max-width: 599px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--trait); }
  .legal-table td { display: block; padding: 2px 0; border: 0; }
  .legal-table td:last-child { color: var(--gris); }
}
.pied-liens a[aria-current] { color: var(--ampoule); }

/* ---------- Écrans larges ---------- */
@media (min-width: 760px) {
  :root { --marge: 32px; }
  .entete { padding-top: 22px; }
  .entete-logo img { width: 160px; }
  .ouverture {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "texte scene" "actions scene";
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .ouverture-texte { align-self: end; }
  .ouverture-actions { align-self: start; padding-top: 30px; }
  .bouton-principal { display: inline-flex; }
  .scene { height: 470px; margin: 0; overflow: visible; }
  .sachet { --w: 230px; }
  .pose { --z: 0.68; bottom: 40px; }
  .pose.centre { --z: 0.78; }
  .chapeau { font-size: 18px; }

  .rarete {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 64px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .hausse { grid-column: 1 / -1; }
  .tampon {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 72px;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .tampon-carte { justify-self: start; margin-left: 40px; }
  .tampon-carte .card { transform: rotate(-3deg); zoom: 1.15; }
  .programme { padding-top: 80px; }
  .seances { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .seance:nth-last-child(2) { border-bottom: 0; }
  .album { margin-left: 0; margin-right: 0; }
  .album figcaption { padding-left: 0; }
  .album-grille { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); grid-auto-rows: 99px; height: calc(99px * 2 + 6px); padding: 0; }
  .gratuit { margin-top: 80px; padding-top: 80px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: 72px; align-items: start; }
  .gratuit-taux { padding-top: 14px; }
  .gratuit-taux .taux { margin-top: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sachet, .seal-top, .seal-bottom, .pack-face, .pose, .retourne-inner { transition: none !important; }
  .r-legendaire, .retourne.face.eclat .recto { animation: none !important; }
}

/* Conditions générales : encadré « l’essentiel » et version (sans style en ligne, CSP) */
.cgu-essentiel { border: 1px solid var(--trait); border-left: 3px solid var(--ampoule); padding: 16px 20px 6px; margin: 8px 0 12px; }
.cgu-essentiel h2 { margin-top: 0; }
.cgu-version { font-size: 15px; color: var(--gris); }