/* Hub Trente-Sept : imprimerie / tampon, raccord avec le monogramme « 37. ».
   Aucune police externe. Angles nets partout, vermillon réservé au logo et au bouton JOUER,
   le point carré du logo sert de motif (rubriques, encoches des tickets). */
:root {
  --papier: #f3ead8;
  --ticket: #fffaf0;
  --encre: #1d1a16;
  --encre-douce: #5b534a;
  --vermillon: #e0452b;
  /* Grotesque condensée système : monoline et angles francs, comme le tracé du « 37. ». */
  --titre: "Avenir Next Condensed", "DIN Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  /* Deux épaisseurs seulement : le filet (cadres) et la barre (rappel de la barre du 3 et du 7). */
  --filet: 2px;
  --barre: 6px;
  --ombre: 4px;
  --point: 12px; /* le point carré du logo, en motif (rubriques, encoches) */
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  max-width: 560px;
  min-height: 100vh;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.4 var(--mono);
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: var(--filet) solid var(--encre); outline-offset: 3px; }

/* En-tête : le monogramme « 37. » (hub/logo/37-monogramme.svg), frappé comme un tampon au tap.
   Au repos il est droit (logo de marque) ; la frappe garde le petit angle du tampon. */
.entete {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tampon texte" "langues langues";
  gap: 6px 16px; align-items: center;
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: var(--barre) solid var(--encre);
}
.entete-texte { grid-area: texte; }
.entete h1 { margin: 0; font: 700 32px/1 var(--titre); font-stretch: condensed; letter-spacing: .01em; text-transform: uppercase; }
.entete p { margin: 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--encre-douce); }
.tampon {
  grid-area: tampon;
  --tampon-duree: .34s;  /* réglages de la frappe */
  --tampon-hauteur: 1.22; /* échelle au départ (le tampon « tombe » vers la page) */
  display: block;
  width: 84px; min-height: 56px;
  padding: 0; border: 0; background: transparent;
  color: var(--vermillon);
  mix-blend-mode: multiply;
}
.monogramme { display: block; width: 100%; height: auto; overflow: visible; }
.monogramme-point { transform-box: fill-box; transform-origin: 50% 100%; }
.tampon.frappe { animation: frappe var(--tampon-duree) cubic-bezier(.2, .9, .3, 1.4); }
.tampon.frappe .monogramme-point { animation: point calc(var(--tampon-duree) * .9) cubic-bezier(.2, .9, .3, 1.6) calc(var(--tampon-duree) * .55) both; }
@keyframes frappe {
  0% { transform: rotate(4deg) scale(var(--tampon-hauteur)); opacity: .45; }
  55% { transform: rotate(-2deg) scale(.95); opacity: 1; }
  100% { transform: rotate(0) scale(1); }
}
/* Le point final tombe en dernier, comme le coup de tampon qui signe. */
@keyframes point {
  0% { transform: scale(0); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
/* Langues : un seul bloc segmenté, angles nets. */
.langues { grid-area: langues; justify-self: end; display: flex; margin-top: -2px; }
.langues button, .graphismes button {
  min-width: 44px; min-height: 36px;
  border: var(--filet) solid var(--encre);
  background: var(--ticket);
  border-radius: 0;
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.langues button + button { margin-left: calc(-1 * var(--filet)); }
.langues button[aria-pressed="true"], .graphismes button[aria-pressed="true"] { background: var(--encre); color: var(--ticket); }

/* Tickets : même cadre pour tous, seule la vignette appartient au jeu.
   Encoches en V (angles nets) au lieu de rondes. */
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 44px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 0;
  background: var(--ticket);
  border: var(--filet) solid var(--encre);
  border-radius: 0;
  box-shadow: var(--ombre) var(--ombre) 0 var(--encre);
  text-decoration: none;
  overflow: hidden;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
/* Appui : le ticket s'enfonce dans son ombre, comme une presse. */
a.ticket:active { transform: translate(calc(var(--ombre) - 1px), calc(var(--ombre) - 1px)); box-shadow: 1px 1px 0 var(--encre); }
.talon {
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: var(--filet) dashed var(--encre);
  margin: -10px 0;
  font-weight: 700;
}
.talon::before, .talon::after {
  content: ""; position: absolute; left: calc(44px - var(--point) / 2 - 1px);
  width: var(--point); height: var(--point);
  background: var(--papier); border: var(--filet) solid var(--encre);
  transform: rotate(45deg); /* encoche en V : poinçon à angles nets */
}
.talon::before { top: calc(var(--point) / -2 - 1px); }
.talon::after { bottom: calc(var(--point) / -2 - 1px); }
.talon-n { font-size: 10px; letter-spacing: .04em; }
.talon b { font: 700 26px/1 var(--titre); font-stretch: condensed; }
.vignette { width: 64px; height: 64px; border-radius: 0; border: var(--filet) solid var(--encre); object-fit: cover; background: var(--papier); }
.textes { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
/* Statut en étiquette encrée (le vermillon reste au logo et à JOUER). */
.meta > span { white-space: nowrap; }
.etiquette { padding: 2px 5px 1px; background: var(--encre); color: var(--ticket); font-weight: 700; letter-spacing: .08em; }
.titre { font: 700 21px/1.05 var(--titre); font-stretch: condensed; letter-spacing: .01em; text-transform: uppercase; }
.accroche { font-size: 13px; color: var(--encre-douce); }
.fleche { font: 700 24px/1 var(--titre); }

/* Dernier jeu, en grand */
.ticket-grand { grid-template-columns: 52px 1fr; padding: 14px 14px 14px 0; margin-bottom: 32px; }
.ticket-grand .talon { margin: -14px 0; }
.ticket-grand .talon::before, .ticket-grand .talon::after { left: calc(52px - var(--point) / 2 - 1px); }
.ticket-grand .talon b { font-size: 36px; }
.corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vignette-grande { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
/* Capture pensée pour le grand encart (4:3) : moins haute, rien de coupé. */
.vignette-grande.vignette-large { aspect-ratio: 4 / 3; }
.ticket-grand .titre { font-size: 34px; line-height: 1; }
.ticket-grand .accroche { font-size: 15px; color: var(--encre); }
.jouer {
  margin-top: 4px;
  display: block; text-align: center;
  padding: 15px 14px 13px;
  background: var(--vermillon); color: var(--ticket);
  border: var(--filet) solid var(--encre); border-radius: 0;
  box-shadow: var(--ombre) var(--ombre) 0 var(--encre);
  font: 700 28px/1 var(--titre); font-stretch: condensed; letter-spacing: .14em;
}
/* Le ticket entier est le lien : à l'appui, JOUER s'enfonce aussi. */
a.ticket-grand:active .jouer { box-shadow: 1px 1px 0 var(--encre); transform: translate(2px, 2px); }

/* Liste : rubrique ouverte par le point carré du logo */
.rubrique { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: var(--filet) solid var(--encre); }
.rubrique::before { content: ""; width: 10px; height: 10px; background: var(--encre); flex: none; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ticket-bientot { grid-template-columns: 44px auto 1fr; border-style: dashed; box-shadow: none; background: transparent; }
.vignette-vide { display: flex; align-items: center; justify-content: center; border-style: dashed; font: 700 22px var(--titre); color: var(--encre-douce); }
.anecdote { margin: 32px 0 0; font-size: 12px; color: var(--encre-douce); text-align: center; }
.erreur { padding: 16px; border: var(--filet) dashed var(--encre); }

/* Pied : même barre que l'en-tête, la page est « encadrée » */
.pied { margin-top: 28px; padding-top: 14px; border-top: var(--barre) solid var(--encre); font-size: 12px; color: var(--encre-douce); }
.graphismes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.graphismes span { margin-right: 4px; font-weight: 700; color: var(--encre); }
.pied p { margin: 12px 0 0; }

/* Économie : aucune animation ni transition */
.eco *, .eco *::before, .eco *::after { animation: none !important; transition: none !important; }
.eco .tampon { mix-blend-mode: normal; }