/* Gazette de Noël — Another Night Off · direction « Nuit d'hiver » (piste A, choisie le 29/10/2026). */

:root {
  --bg: #0a1324; --fg: #f4ecdc; --muted: #a9b5c9; --accent: #dcb860; --on-accent: #0a1324;
  --line: rgba(244, 236, 220, .16); --card: rgba(255, 255, 255, .035);
  --font-title: 'EB Garamond', Georgia, serif; --font-body: 'Work Sans', system-ui, sans-serif;
  --radius: 14px; --radius-photo: 10px;
  --grid-line: rgba(244, 236, 220, .07); --grid-fg: #e9e0cd;
  --hl-fill: rgba(220, 184, 96, .2); --hl-stroke: rgba(220, 184, 96, .75);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; position: relative; overflow-x: hidden;
  color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(130% 55% at 50% 0%, rgba(40, 64, 116, .75) 0%, rgba(40, 64, 116, 0) 62%),
    linear-gradient(180deg, #0a1324 0%, #0e1a33 55%, #0a1324 100%);
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.titre { font-family: var(--font-title); font-style: italic; font-weight: 400; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.entete {
  position: relative; z-index: 2; max-width: 1040px; margin: 0 auto;
  padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo {
  display: block; width: min(46vw, 190px); aspect-ratio: 1111 / 192; background: var(--fg);
  -webkit-mask: url(img/logo-texte.png) center / contain no-repeat;
          mask: url(img/logo-texte.png) center / contain no-repeat;
}
.langues { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.langues button {
  border: 0; background: none; padding: 6px 11px; border-radius: 999px;
  font: 600 12px/1 var(--font-body); letter-spacing: .1em; color: var(--muted);
}
.langues button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.contenu { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 18px; }

/* ── Une ─────────────────────────────────────────────────────────────────── */
.une { text-align: center; padding: 40px 0 28px; }
.mono {
  width: 34px; aspect-ratio: 144 / 238; margin: 0 auto 18px; background: var(--accent);
  -webkit-mask: url(img/monogramme.png) center / contain no-repeat;
          mask: url(img/monogramme.png) center / contain no-repeat;
}
.surtitre {
  margin: 0 0 12px; font: 600 11px/1.4 var(--font-body);
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent);
}
.surtitre::before, .surtitre::after { content: "✦"; margin: 0 .9em; letter-spacing: 0; }
.une h1 { margin: 0; font-size: clamp(54px, 16vw, 116px); line-height: .95; letter-spacing: -.01em; }
.une__intro { max-width: 30em; margin: 18px auto 0; color: var(--muted); font-size: 17px; }
.sommaire { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 540px; margin: 30px auto 0; }
.sommaire a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  text-decoration: none; text-align: left;
}
.sommaire span:last-child { font-size: 21px; line-height: 1.15; }
.no { font: 600 11px/1 var(--font-body); letter-spacing: .2em; color: var(--accent); }

/* ── Sections de jeu ─────────────────────────────────────────────────────── */
.jeu { padding: 44px 0 28px; scroll-margin-top: 12px; }
.jeu__tete { text-align: center; max-width: 36em; margin: 0 auto 22px; }
.jeu__tete .no { display: block; margin-bottom: 10px; letter-spacing: .28em; }
.jeu__tete h2 { margin: 0; font-size: clamp(38px, 10.5vw, 62px); line-height: 1; }
.jeu__tete p { margin: 12px 0 0; color: var(--muted); }

/* ── Photo des 7 erreurs ─────────────────────────────────────────────────── */
.photo { margin: 0; }
.photo__cadre {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-photo); background: #111;
  box-shadow: 0 0 0 1px rgba(220, 184, 96, .45), 0 24px 60px rgba(0, 0, 0, .55); touch-action: pan-y pinch-zoom;
}
.photo__toile {
  --s: 1; position: absolute; inset: 0; transform-origin: 0 0;
  transition: transform .75s cubic-bezier(.22, .8, .2, 1); will-change: transform;
}
.photo__toile img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; }
.pin {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 700 13px/28px var(--font-body); text-align: center;
  box-shadow: 0 0 0 2px rgba(10, 19, 36, .55), 0 3px 10px rgba(0, 0, 0, .35);
  transform: scale(calc(1 / var(--s))); transition: opacity .3s, transform .75s cubic-bezier(.22, .8, .2, 1);
}
.photo.zoom .pin { opacity: 0; pointer-events: none; }
.photo__nav, .photo__fermer {
  position: absolute; z-index: 2; color: #fff; background: rgba(10, 10, 14, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.photo__nav { left: 50%; bottom: 10px; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; }
.photo__nav button, .photo__fermer { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; font-size: 20px; line-height: 36px; }
.photo__nav button { background: rgba(255, 255, 255, .12); color: #fff; }
.photo__fermer { top: 10px; right: 10px; font-size: 15px; }
.photo__etiquette { font: 600 13px/1 var(--font-body); padding: 0 6px; min-width: 9em; text-align: center; white-space: nowrap; }
.photo.zoom .photo__nav { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.photo.zoom .photo__fermer { opacity: 1; pointer-events: auto; }
.photo figcaption { margin-top: 12px; text-align: center; font-size: 14px; font-style: italic; color: var(--muted); }
.pastilles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.pastilles button {
  min-width: 38px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  font: 600 15px/1 var(--font-body);
}
.pastilles button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Mots mêlés ──────────────────────────────────────────────────────────── */
.mots-meles { display: grid; gap: 22px; align-items: start; }
@media (min-width: 860px) { .mots-meles { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.grille { position: relative; background: #121c33; border-radius: var(--radius); padding: 10px; } /* opaque : la neige passe derrière */
.grille svg { display: block; width: 100%; height: auto; overflow: visible; }
.grille__lignes { fill: none; stroke: var(--grid-line); stroke-width: 2; }
.lettre {
  font-family: var(--font-body); font-size: 54px; font-weight: 500; fill: var(--grid-fg);
  text-anchor: middle; dominant-baseline: central; transition: fill .25s, opacity .25s;
}
.trait rect {
  fill: var(--hl-fill); stroke: var(--hl-stroke); stroke-width: 3;
  transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: opacity .25s, fill .25s;
}
.grille.vu .trait rect { animation: trace .6s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
@keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.grille.focus .trait:not(.actif) rect { opacity: .12; }
.grille.focus .trait.actif rect { fill: var(--accent); }
.grille.focus .lettre { opacity: .4; }
.grille.focus .lettre.on { opacity: 1; fill: var(--on-accent); font-weight: 700; }

.mots__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mot {
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  font: 600 12.5px/1 var(--font-body); letter-spacing: .08em;
}
.mot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.definition {
  margin-top: 16px; min-height: 5.2em; padding: 14px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.definition strong { display: block; margin-bottom: 2px; color: var(--fg); font-family: var(--font-title); font-style: italic; font-weight: 400; font-size: 23px; line-height: 1.2; }

/* ── Pied ────────────────────────────────────────────────────────────────── */
.pied { position: relative; z-index: 1; text-align: center; padding: 56px 18px 72px; }
.pied .mono { width: 40px; margin-bottom: 16px; }
.pied p { max-width: 24em; margin: 0 auto 16px; font-size: 25px; line-height: 1.3; }
.pied a { font: 600 12px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-decoration: none; }

/* ── Neige ───────────────────────────────────────────────────────────────── */
.neige { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.flocon {
  position: absolute; top: -12px; width: var(--t); height: var(--t); border-radius: 50%;
  background: #fff; opacity: var(--o); animation: tombe var(--d) linear var(--r) infinite;
}
@keyframes tombe { from { transform: translate3d(0, -4vh, 0); } to { transform: translate3d(var(--x), 106vh, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .neige { display: none; }
  .trait rect { transform: none; }
  .grille.vu .trait rect { animation: none; }
  .photo__toile, .pin { transition: none; }
}