/* L'accueil (choix de la région) : le fond d'affiches, puis les billets des régions.
   Les couleurs viennent des jetons ; les polices des essais sont celles de designs-fonts.css (chargée avec la barre). */

/* Le fond : la tuile des affiches du MUR (une seule image, refaite par « wall:backdrop »), estompée, de sous l'en-tête
   jusqu'au pied de page, qui reste plein : aucun vide entre les deux. La tuile se répète sans couture. */
.sfond-zone { position: relative; isolation: isolate; overflow-x: hidden; overflow-x: clip; padding-bottom: var(--space-10); }
body.simple:has(.sfond-zone) .sfoot { margin-top: 0; }
.sfond { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6; background: var(--fond, none) center top / 2000px auto repeat; }
@media (max-width: 640px) { .sfond { background-image: var(--fond-petit, none); background-size: 600px auto; } }
.sfond-zone .szones__a { background: var(--color-ground); }
/* Pas de ligne verticale le long du contenu (le fond d'affiches la remplace). */
body.simple .sfond-zone main.shell::before { display: none; }
/* Au téléphone, sans cette ligne, le contenu reprend la même marge des deux côtés. */
@media (max-width: 760px) { body.simple .sfond-zone main.shell { padding-left: var(--space-4); } }

.sacc { padding-top: var(--space-7); }
/* Ni titre ni mot d'introduction à l'écran (ils restent pour les lecteurs d'écran). */
.sacc__hero { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* — Les billets : une région par billet, le chiffre de la semaine sur le talon. Tout se règle par variables posées sur le
   « li » : papier, encre, largeur et côté du talon, polices, forme (masque), angle, numéro, code-barres. Une variation ne fait
   que changer ces variables, pour tous les billets ou billet par billet (nth-child). — */
.sacc[data-billet] .szones { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); counter-reset: billet; }
.sacc[data-billet] li {
  --t: 5.75rem; --paper: var(--color-ground); --ink: var(--color-ink);
  --line: color-mix(in srgb, var(--ink) 38%, var(--paper)); --pre-ink: color-mix(in srgb, var(--ink) 72%, var(--paper));
  --stub-bg: transparent; --stub-ink: currentColor;
  --f-big: "Oswald", sans-serif; --f-small: "Space Mono", monospace; --f-num: var(--f-big);
  --big-size: 1.5rem; --big-w: 600; --big-case: uppercase; --big-ls: 0; --num-size: 2.1rem;
  --cols: var(--t) minmax(0, 1fr); --wk-col: 1; --nm-col: 2; --nx: var(--t); --perf-r: 2px dashed var(--line); --perf-l: 0;
  --mask: radial-gradient(circle 10px at var(--nx) 0, transparent 97%, black), radial-gradient(circle 10px at var(--nx) 100%, transparent 97%, black); --comp: intersect; --b-r: 10px; --rot: 0deg; --dx: 0px; --dy: 0px; --shadow: none; --serial: none; --bar: none;
  max-width: none; counter-increment: billet; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); filter: var(--shadow);
}
.sacc[data-billet] .szones__a { position: relative; display: grid; grid-template-columns: var(--cols); gap: 0; height: 100%; padding: 0; border: 0; border-radius: var(--b-r); background: var(--paper); color: var(--ink); mask: var(--mask); mask-composite: var(--comp); transition: transform var(--motion-fast); }
.sacc[data-billet] .szones__a:hover { transform: translateY(-3px); }
.sacc[data-billet] .szones__week { grid-column: var(--wk-col); grid-row: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: var(--space-3) var(--space-1); border-radius: 0; border-right: var(--perf-r); border-left: var(--perf-l); background: var(--stub-bg); color: var(--stub-ink); font-family: var(--f-small); font-size: 0.625rem; text-transform: uppercase; text-align: center; line-height: 1.2; }
.sacc[data-billet] .szones__week b { font-family: var(--f-num); font-weight: 700; font-size: var(--num-size); line-height: 1; color: inherit; }
.sacc[data-billet] .szones__a strong { grid-column: var(--nm-col); grid-row: 1; align-self: center; margin: 0; padding: var(--space-4); font-weight: 400; }
.sacc[data-billet] .szones__pre { font-family: var(--f-small); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pre-ink); }
.sacc[data-billet] .szones__big { font-family: var(--f-big); font-weight: var(--big-w); font-size: var(--big-size); line-height: 1.08; text-transform: var(--big-case); letter-spacing: var(--big-ls); overflow-wrap: break-word; }
/* Le numéro du billet (en haut) et le code-barres (en bas) : absents tant que la variation ne les demande pas. */
.sacc[data-billet] .szones__a::after { content: var(--serial); position: absolute; top: 6px; right: 12px; font-family: var(--f-small); font-size: 0.5625rem; letter-spacing: 0.12em; opacity: 0.65; }
.sacc[data-billet] .szones__a::before { content: ""; position: absolute; right: 12px; bottom: 8px; width: 4.5rem; height: 12px; background: var(--bar); opacity: 0.8; pointer-events: none; }

/* Pêle-mêle très penché : chaque billet de travers, à son angle. */
.sacc[data-billet] li { --shadow: drop-shadow(0 3px 5px color-mix(in srgb, black 28%, transparent)); }
.sacc[data-billet] li:nth-child(7n+1) { --rot: -7deg; }
.sacc[data-billet] li:nth-child(7n+2) { --rot: 5deg; }
.sacc[data-billet] li:nth-child(7n+3) { --rot: -3deg; }
.sacc[data-billet] li:nth-child(7n+4) { --rot: 9deg; }
.sacc[data-billet] li:nth-child(7n+5) { --rot: -5deg; }
.sacc[data-billet] li:nth-child(7n+6) { --rot: 3deg; }
.sacc[data-billet] li:nth-child(7n+7) { --rot: -10deg; }
.sacc[data-billet] .szones { gap: var(--space-7) var(--space-6); padding: var(--space-4); }