/* =====================================================================
   YARNHAM — DA « street / revente »
   Papier, encre, jaune de chantier. Étiquettes, tickets, stickers.
   ===================================================================== */

:root {
  --ink: #0c0c0b;
  --paper: #eeebe3;
  --paper-2: #e3dfd3;
  --white: #fbfaf6;
  --hi: #ffe600;
  --sale: #ff3b1c;
  --ok: #18b957;
  --violet: #7c3aed;

  --w-academy: #ff7a1a;
  --w-anime: #ff2e8b;
  --w-stream: #12c3e3;

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --muted: #5b574d;
  --card: var(--white);
  --rule: var(--ink);
  --shadow-c: var(--ink);
  --on-hi: var(--ink);

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bw: 2px;
  --line: var(--bw) solid var(--rule);
  --sh: 5px 5px 0 var(--shadow-c);
  --sh-lg: 9px 9px 0 var(--shadow-c);
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --hdr-h: 68px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0c0c0b;
  --bg-2: #171614;
  --fg: #eeebe3;
  --muted: #a8a397;
  --card: #151412;
  --rule: #eeebe3;
  --shadow-c: var(--hi);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden gagne toujours : un display posé plus loin ne doit pas réafficher un bloc masqué. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html.is-locked, html.is-locked body { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--hi); color: var(--ink); }
:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ------------------------------------------------------ */
.display {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.d-xxl { font-size: clamp(64px, 12.5vw, 196px); }
.d-xl  { font-size: clamp(52px, 8.6vw, 136px); }
.d-l   { font-size: clamp(42px, 6vw, 92px); }
.d-m   { font-size: clamp(32px, 4vw, 58px); }
.d-s   { font-size: clamp(24px, 2.6vw, 36px); line-height: 0.92; }
.mono { font-family: var(--f-mono); }
.kicker {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; max-width: 58ch; }
.muted { color: var(--muted); }
.mark { background: var(--hi); color: var(--ink); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.strike { text-decoration: line-through; text-decoration-thickness: 0.12em; text-decoration-color: var(--sale); }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  --b-bg: var(--card);
  --b-fg: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: var(--line);
  background: var(--b-bg);
  color: var(--b-fg);
  box-shadow: var(--sh);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 78%;
  font-variation-settings: "wdth" 78;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow-c); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--shadow-c); }
.btn--hi { --b-bg: var(--hi); --b-fg: var(--ink); border-color: var(--ink); }
.btn--ink { --b-bg: var(--ink); --b-fg: var(--paper); }
[data-theme="dark"] .btn--ink { --b-bg: var(--paper); --b-fg: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 14.5px; box-shadow: 3px 3px 0 var(--shadow-c); }
.btn--sm:hover { box-shadow: 5px 5px 0 var(--shadow-c); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-off { opacity: 0.5; pointer-events: none; }
.btn svg { flex-shrink: 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: var(--line);
  padding-bottom: 3px;
  cursor: pointer;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
}
.link-arrow svg { transition: transform 0.15s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Labels, stickers, tape ----------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: var(--line);
  background: var(--card);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--hi { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.tag--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-theme="dark"] .tag--ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tag--sale { background: var(--sale); color: #fff; border-color: var(--ink); }
.tag--ghost { background: transparent; }
/* Sur téléphone, une étiquette trop longue passe à la ligne au lieu d'élargir la page. */
@media (max-width: 640px) { .tag { white-space: normal; max-width: 100%; } }
.dot { display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex-shrink: 0; box-shadow: 0 0 0 2px var(--ink); }
.dot--live { animation: live 1.6s ease-in-out infinite; }
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: var(--line);
  background: var(--hi);
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  line-height: 0.9;
  font-size: 22px;
  transform: rotate(-12deg);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 3;
}
.sticker--burst { border-radius: 0; clip-path: polygon(50% 0%, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 90% 41%, 100% 54%, 87% 63%, 91% 80%, 74% 81%, 66% 96%, 52% 88%, 38% 99%, 30% 84%, 13% 88%, 14% 71%, 0% 61%, 10% 49%, 2% 33%, 18% 28%, 21% 11%, 37% 14%); border: 0; box-shadow: none; }

.tape {
  height: 26px;
  background: repeating-linear-gradient(-45deg, var(--hi) 0 18px, var(--ink) 18px 36px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.tape--thin { height: 12px; }

.barcode {
  height: 38px;
  background:
    repeating-linear-gradient(90deg,
      var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 8px,
      var(--fg) 8px 11px, transparent 11px 12px, var(--fg) 12px 13px, transparent 13px 17px,
      var(--fg) 17px 19px, transparent 19px 21px);
}

.halftone {
  background-image: radial-gradient(var(--ink) 1.3px, transparent 1.5px);
  background-size: 9px 9px;
}

/* ---------- Header ---------------------------------------------------- */
.ann {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 6px var(--gut);
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .ann { background: var(--hi); color: var(--ink); }
.ann--warning { background: var(--sale); color: #fff; }
.ann--success { background: var(--ok); color: var(--ink); }
.ann--stream { background: var(--w-stream); color: var(--ink); }
/* Incident en cours. Rouge plein et un battement lent : cette barre doit
   accrocher l'oeil de quelqu'un qui vient justement voir pourquoi il ne
   recoit plus rien. Le battement s'arrete si le systeme demande moins
   d'animation (voir la regle en fin de fichier). */
.ann--alert { background: var(--sale); color: #fff; animation: annpulse 2.4s ease-in-out infinite; }
.ann--alert a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ann--alert b { font-weight: 800; }
@keyframes annpulse {
  0%, 100% { background: #ff3b1c; }
  50%      { background: #ff5b40; }
}
.ann__txt { flex: 1; min-width: 0; }
.ann__txt a { font-weight: 700; }
.ann__x { background: none; border: 0; cursor: pointer; padding: 4px; opacity: 0.7; display: flex; }
.ann__x:hover { opacity: 1; }
.ann .tag { border-color: currentColor; background: transparent; color: inherit; font-size: 10.5px; padding: 2px 7px; }

.hdr {
  position: sticky;
  transition: box-shadow 0.18s ease;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: var(--line);
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--hdr-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark {
  width: 42px;
  height: 42px;
  border: var(--line);
  background: var(--hi);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.brand__mark img { width: 118%; max-width: none; margin-top: 12%; }
.brand__word {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.brand__word span { display: inline-block; animation: wave 6s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes wave {
  0%, 60%, 100% { color: currentColor; }
  8%  { color: #8b5cf6; }
  16% { color: #ec4899; }
  24% { color: #3b82f6; }
  32% { color: #06b6d4; }
  40% { color: #f59e0b; }
}
/* « Society » se pose après le mot comme un patch cousu : aplat jaune,
   lettres noires. C'est le seul aplat de couleur du bloc de gauche, et il ne
   change pas d'un theme a l'autre ni d'un fond a l'autre — l'enseigne se
   reconnait au premier coup d'oeil, en haut de page comme en pied. */
.brand__soc {
  font-style: normal;
  display: inline-block;
  margin-left: .24em;
  padding: 0 .16em .04em;
  background: var(--hi);
  color: var(--ink);
  -webkit-text-stroke: 0;
}
@media (max-width: 720px) { .brand__soc { display: none; } }
.brand__tag { display: block; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; line-height: 1; margin-top: 3px; }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav__a {
  position: relative;
  min-height: 40px;
  padding: 6px 11px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 80%;
  font-variation-settings: "wdth" 80;
  font-size: 15.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav__a:hover { border-color: var(--rule); background: var(--card); }
.nav__a[aria-current="page"] { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.nav__more { position: relative; }
.menu-pop {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: max-content;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--card);
  border: var(--line);
  box-shadow: var(--sh-lg);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  z-index: 70;
}
.menu-pop[hidden] { display: none; }
.menu-pop h6 { grid-column: 1 / -1; margin: 6px 0 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.menu-pop a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid transparent;
}
.menu-pop a:hover { border-color: var(--rule); background: var(--bg); }
.menu-pop a[aria-current="page"] { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.menu-pop .sw { width: 12px; height: 12px; border: 2px solid var(--ink); flex-shrink: 0; }

.hdr__act { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hdr__tools { display: flex; align-items: center; border: var(--line); }
.hdr__tools .icon-btn { border: 0; }
.hdr__tools .icon-btn + .icon-btn { border-left: var(--line); }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: var(--line);
  background: var(--card);
  cursor: pointer;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.icon-btn:hover { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.me-chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 12px 0 4px;
  border: var(--line); background: var(--card);
  text-decoration: none; font-weight: 700; font-size: 14px;
  max-width: 190px;
}
.me-chip img { width: 30px; height: 30px; border: 2px solid var(--ink); object-fit: cover; }
.me-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip:hover { background: var(--hi); color: var(--ink); }
.burger { display: none; }

.mnav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  overflow-y: auto;
  padding: 16px var(--gut) 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mnav[hidden] { display: none; }
.mnav__top { display: flex; align-items: center; justify-content: space-between; }
.mnav__list { display: flex; flex-direction: column; border-top: var(--line); }
.mnav__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px;
  border-bottom: var(--line);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}
.mnav__list a[aria-current="page"] { background: var(--hi); color: var(--ink); padding-left: 10px; }
.mnav__sub a { font-size: 24px; padding: 11px 2px; }
.mnav__label { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); margin-top: 8px; }

@media (max-width: 1080px) {
  .nav, .hdr__act .hide-md { display: none; }
  .burger { display: grid; }
  .hdr__in { justify-content: space-between; }
}
@media (max-width: 560px) {
  .hdr__act .hide-sm { display: none; }
  .brand__word { font-size: 30px; }
  :root { --hdr-h: 62px; }
}

/* ---------- Ticker ---------------------------------------------------- */
.ticker {
  display: flex;
  align-items: stretch;
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
[data-theme="dark"] .ticker { border-color: var(--paper); }
.ticker__label {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 0 18px;
  background: var(--hi);
  color: var(--ink);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-right: 2px solid var(--ink);
  z-index: 1;
}
.ticker__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 22px;
  border-right: 1px solid rgba(238, 235, 227, 0.2);
  white-space: nowrap;
  font-size: 14px;
}
.ticker__item b { font-family: var(--f-mono); color: var(--hi); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.ticker__item strong { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 18px; }
.ticker__item i { font-style: normal; font-family: var(--f-mono); font-size: 11px; opacity: 0.6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections -------------------------------------------------- */
.sec { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.sec--tight { padding: clamp(40px, 6vw, 72px) 0; }
.sec--ink { background: var(--ink); color: var(--paper); --fg: var(--paper); --rule: var(--paper); --card: #151412; --muted: #a8a397; --shadow-c: var(--hi); }
[data-theme="dark"] .sec--ink { background: #000; }
.sec--hi { background: var(--hi); color: var(--ink); --fg: var(--ink); --rule: var(--ink); --muted: #4a4535; --shadow-c: var(--ink); --card: var(--white); }
.sec--line { border-top: var(--line); }
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px 40px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sec-head__n { font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-head__n::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.sec-head p { max-width: 42ch; }
@media (max-width: 760px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.box {
  position: relative;
  background: var(--card);
  border: var(--line);
  box-shadow: var(--sh);
  padding: 24px;
}
.box--flat { box-shadow: none; }
.box--hi { background: var(--hi); color: var(--ink); --fg: var(--ink); --rule: var(--ink); --muted: #4a4535; }
.box--ink { background: var(--ink); color: var(--paper); --muted: #a8a397; }
[data-theme="dark"] .box--ink { background: #000; }
.box h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 26px; line-height: 0.98; text-transform: uppercase; margin-bottom: 10px; }
.box__ic {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: var(--line);
  background: var(--hi); color: var(--ink);
  margin-bottom: 18px;
}

/* ---------- Hang tag (alerte Vinted) ---------------------------------- */
.hangtag {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 30px 20px 16px;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px);
  font-size: 14px;
}
[data-theme="dark"] .hangtag { box-shadow: 6px 6px 0 var(--hi); }
.hangtag::before {
  content: "";
  position: absolute;
  top: 10px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.hangtag::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid var(--ink);
  clip-path: inherit;
  pointer-events: none;
}
.hangtag__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.hangtag__title { font-weight: 700; font-size: 15px; line-height: 1.25; margin-bottom: 6px; min-height: 2.5em; }
.hangtag__price {
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62;
  font-size: 58px; line-height: 0.9; letter-spacing: -0.01em;
}
.hangtag__rows { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 12px 0; padding: 10px 0; border-top: 1px dashed var(--ink); border-bottom: 1px dashed var(--ink); font-size: 13px; }
.hangtag__rows dt { font-family: var(--f-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.hangtag__rows dd { margin: 0; font-weight: 600; }
.hangtag__range { display: flex; gap: 3px; margin: 6px 0 4px; }
.hangtag__range i { flex: 1; height: 8px; border: 1.5px solid var(--ink); }
.hangtag__range i.on { background: var(--hi); }
.hangtag__foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 700; margin-top: 10px; }
.hangtag .barcode { height: 26px; margin-top: 12px; --fg: var(--ink); background:
  repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 17px, var(--ink) 17px 19px, transparent 19px 21px); }

/* ---------- Receipt (tarifs) ------------------------------------------ */
.receipt {
  position: relative;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 13.5px;
  padding: 26px 22px 34px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  box-shadow: 6px 0 0 var(--ink);
  --zz: 14px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
}
.receipt hr { border: 0; border-top: 2px dashed var(--ink); margin: 14px 0; }
.receipt__row { display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Forms ----------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: var(--line);
  background: var(--card);
  color: var(--fg);
  font: 500 15px var(--f-body);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--hi); outline-offset: 0; }
.switch { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.switch span { position: absolute; inset: 0; border: var(--line); background: var(--bg-2); transition: background 0.15s ease; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--fg); transition: transform 0.15s ease; }
.switch input:checked + span { background: var(--hi); }
.switch input:checked + span::after { transform: translateX(22px); background: var(--ink); }
.switch input:focus-visible + span { outline: 3px solid var(--hi); outline-offset: 2px; }

/* ---------- Modal ----------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(12, 12, 11, 0.72);
  animation: fade 0.18s ease;
}
.modal[hidden] { display: none; }
.modal__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  color: var(--fg);
  border: var(--line);
  box-shadow: var(--sh-lg);
  padding: 30px 26px 24px;
  animation: pop 0.2s ease;
}
.modal__x { position: absolute; top: 12px; right: 12px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 300;
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--hi);
  padding: 12px 18px;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px;
  box-shadow: 4px 4px 0 var(--hi);
}

/* ---------- Footer ---------------------------------------------------- */
.ftr { background: var(--ink); color: var(--paper); border-top: 2px solid var(--ink); --rule: var(--paper); --fg: var(--paper); --muted: #a8a397; --card: #151412; }
[data-theme="dark"] .ftr { background: #000; border-top-color: var(--paper); }
.ftr__big {
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62;
  font-size: clamp(88px, 23vw, 360px); line-height: 0.78; text-transform: uppercase; letter-spacing: -0.01em;
  margin: 0 0 -0.08em -0.03em; white-space: nowrap;
}
.ftr__big span { color: var(--hi); }
.ftr__cols { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; padding: 56px 0 40px; border-bottom: 1px solid rgba(238, 235, 227, 0.2); }
.ftr__cols h6 { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--hi); margin: 0 0 14px; }
.ftr__cols a { display: block; padding: 4px 0; text-decoration: none; font-weight: 500; opacity: 0.86; }
.ftr__cols a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 18px 0; border-top: 2px solid color-mix(in srgb, currentColor 25%, transparent); font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.ftr__legal a { text-decoration: none; opacity: 0.8; }
.ftr__legal a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; }
.ftr__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 28px; font-family: var(--f-mono); font-size: 12px; opacity: 0.75; }
@media (max-width: 860px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page transition ------------------------------------------- */
#view { min-height: 60vh; }
#view.is-entering { animation: enter 0.35s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }

.curtain {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: var(--c, var(--ink));
  color: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
}
.curtain.is-up { animation: curtainUp 1.25s cubic-bezier(0.8, 0, 0.2, 1) forwards; }
.curtain__word { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(64px, 14vw, 220px); line-height: 0.82; text-align: center; }
.curtain__word small { display: block; font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.3em; margin-bottom: 12px; }
@keyframes curtainUp {
  0% { transform: translateY(100%); }
  38%, 62% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

/* ---------- Lock screens ---------------------------------------------- */
.lock {
  position: fixed; inset: 0; z-index: 1000;
  overflow-y: auto;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column;
}
.lock__in { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 56px var(--gut); max-width: 980px; margin: 0 auto; width: 100%; }
.lock--legal .tape { background: repeating-linear-gradient(-45deg, var(--sale) 0 18px, var(--ink) 18px 36px); }
.lock__count { display: flex; gap: 10px; flex-wrap: wrap; }
.lock__count div { min-width: 86px; border: 2px solid var(--paper); padding: 12px 10px 10px; text-align: center; }
.lock__count b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 48px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.lock__count span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; opacity: 0.75; }

/* Écran d'attente : le décompte est le sujet, il passe en grand, et la trame
   de points donne du fond à ce qui était un écran noir. */
.lock--event { overflow-x: hidden; }
.lock__dots { position: absolute; inset: 0; opacity: 0.16; pointer-events: none; }
.lock--event .lock__in { max-width: 1120px; }
.lock__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .lock__grid { grid-template-columns: minmax(0, 1fr); } }
.lock__panel { border: 2px solid var(--paper); padding: clamp(18px, 2.4vw, 26px); background: rgba(255, 255, 255, 0.04); }
.lock--event .lock__in { position: relative; }
.lock__mascot { display: block; width: max-content; padding: 10px 18px 0; background-color: var(--hi); border: 2px solid var(--paper); }
.lock__mascot img { display: block; width: 130px; height: auto; }
.lock--event .lock__count { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.lock--event .lock__count div { min-width: 0; padding: 14px 12px 11px; background: rgba(255, 255, 255, 0.05); }
.lock--event .lock__count b { font-size: clamp(52px, 7vw, 92px); }
.lock--event .lock__count span { font-size: 11.5px; opacity: 0.85; }
.lock__when { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
/* Trois repères pour qui découvre Yarnham en tombant sur cet écran. */
.lock__perks { display: flex; flex-wrap: wrap; gap: 10px; }
.lock__perk { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid var(--paper); font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
@media (max-width: 560px) { .lock__perk { font-size: 11px; padding: 8px 10px; } .lock__mascot img { width: 104px; } }
/* Clin d'œil aux deux autres projets, en bas de l'écran d'attente. Chacun
   garde sa couleur, comme dans le menu et sur l'accueil. */
.lock__worlds { border-top: 2px solid rgba(238, 235, 227, 0.25); padding: 18px 0 22px; }
.lock__worlds .kicker { opacity: 0.65; }
.lock__worldrow { margin-top: 10px; gap: 10px; }
.lock__world { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 2px solid rgba(238, 235, 227, 0.35); font-size: 13.5px; }
.lock__world i { width: 12px; height: 12px; flex-shrink: 0; border: 2px solid var(--paper); }
.lock__world b { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 16px; }
.lock__world span { font-family: var(--f-mono); font-size: 11.5px; opacity: 0.8; }
.lock__worldnote { margin-top: 10px; font-size: 11.5px; opacity: 0.55; }

/* ---------- Utils ----------------------------------------------------- */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: var(--s, 16px); }
.center { text-align: center; }
.ghost-num { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; line-height: 0.8; -webkit-text-stroke: 2px var(--fg); color: transparent; }
.rule { height: 0; border-top: var(--line); }
.hide { display: none !important; }
@media (max-width: 760px) { .hide-mobile { display: none !important; } }
@media (min-width: 761px) { .only-mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .ticker__track { animation: none; }
}

/* ---------- Stat strip ------------------------------------------------ */
.statstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--line); background: var(--card); box-shadow: var(--sh); }
.statstrip__cell { padding: 20px 22px 18px; border-right: var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.statstrip__cell:last-child { border-right: 0; }
.statstrip__cell b { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: clamp(40px, 5vw, 68px); line-height: 0.88; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statstrip__ic { width: 34px; height: 34px; display: grid; place-items: center; background: var(--hi); color: var(--ink); border: var(--line); }
@media (max-width: 760px) {
  .statstrip { grid-template-columns: 1fr 1fr; }
  .statstrip__cell:nth-child(2) { border-right: 0; }
  .statstrip__cell:nth-child(-n+2) { border-bottom: var(--line); }
}

/* ---------- Page hero ------------------------------------------------- */
.phero { border-bottom: var(--line); padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.phero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.phero__side { position: relative; }
@media (max-width: 900px) { .phero__in { grid-template-columns: minmax(0, 1fr); } }
.phero .sec-head__n { color: var(--pc, currentColor); }

/* ---------- Home ------------------------------------------------------ */
.hero { position: relative; border-bottom: var(--line); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(44px, 6vw, 80px); }
.hero__title { margin: 22px 0 24px; }
.hero__title .mark { padding: 0 0.06em; }
.hero__lead b { font-weight: 800; }
.hero__visual { position: relative; min-height: 520px; }
.hero__block { position: absolute; right: 0; top: 0; width: 82%; aspect-ratio: 0.9; background: var(--hi); border: var(--line); box-shadow: var(--sh-lg); overflow: hidden; }
.hero__block .halftone { position: absolute; inset: 0; opacity: 0.16; }
.hero__block img { position: absolute; left: 50%; bottom: -3%; width: 84%; max-width: none; transform: translateX(-42%); filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.25)); }
.hero__block .display { position: absolute; left: 16px; top: 12px; font-size: clamp(54px, 7vw, 104px); color: var(--ink); opacity: 0.95; line-height: 0.8; }
.hero__tag { position: absolute; left: 0; bottom: 0; width: min(290px, 64%); z-index: 2; }
.hero__visual .sticker { right: -8px; bottom: 90px; }
.hero__sig { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.hero__sig::before { content: ""; width: 40px; height: 2px; background: currentColor; }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { min-height: 440px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 480px) { .hero__visual { min-height: 380px; } .hero__tag { width: 70%; } }

.alerts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
@media (max-width: 980px) { .alerts3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .alerts3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--rule); }
.step { padding: 26px 26px 30px 0; border-right: 2px solid var(--rule); }
.step + .step { padding-left: 26px; }
.step:last-child { border-right: 0; }
.step__n { font-size: clamp(90px, 11vw, 160px); margin-bottom: 18px; -webkit-text-stroke-color: var(--hi); }
.step h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 30px; line-height: 0.95; text-transform: uppercase; margin-bottom: 10px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step + .step { padding: 24px 0; border-right: 0; border-bottom: 2px solid var(--rule); }
}

.world { position: relative; border: var(--line); box-shadow: var(--sh); overflow: hidden; }
.world--academy { background: var(--w-academy); color: var(--ink); }
.world__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 2px solid var(--ink); font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }
.world__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.world__body > div { padding: 28px 26px 30px; }
.world__body > div + div { border-left: 2px solid var(--ink); background: rgba(255, 255, 255, 0.22); }
.world__mods { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.world__mods li { display: flex; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1.5px solid var(--ink); font-weight: 700; }
.world__mods li b { font-family: var(--f-mono); font-size: 12px; }
@media (max-width: 860px) { .world__body { grid-template-columns: minmax(0, 1fr); } .world__body > div + div { border-left: 0; border-top: 2px solid var(--ink); } }

.poster { position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 360px; padding: 24px; border: var(--line); box-shadow: var(--sh); text-decoration: none; color: var(--ink); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
/* Le titre monte sous les etiquettes ; le vide se retrouve en bas, occupe par
   le chiffre fantome. Avant, space-between le repartissait autour du titre. */
.poster > *:not(.halftone):not(.poster__ghost) { position: relative; z-index: 1; }
.poster__ghost { position: absolute; right: -14px; bottom: -16px; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: clamp(110px, 13vw, 200px); line-height: 0.7; color: rgba(0, 0, 0, 0.13); letter-spacing: -0.02em; pointer-events: none; user-select: none; }
.poster:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.poster--anime { background: var(--w-anime); }
.poster--stream { background: var(--w-stream); }
.poster .display { font-size: clamp(56px, 7vw, 108px); }
.poster__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.poster .halftone { position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; opacity: 0.2; }
.mini-cd { display: flex; gap: 6px; }
.mini-cd div { background: var(--ink); color: var(--paper); padding: 6px 8px 5px; text-align: center; min-width: 52px; }
.mini-cd b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 28px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.mini-cd span { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; }
/* Meme plaque, sans decompte : « 2027 · REPORTÉ », « EN LIGNE ». */
.mini-cd--flat div { min-width: 0; padding: 7px 12px 6px; }
.mini-cd--flat b { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 26px; font-size: 26px; }
.mini-cd--flat .dot--live { flex-shrink: 0; }

.srv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .srv { grid-template-columns: minmax(0, 1fr); } }

.join { text-align: center; }
.join .statstrip { max-width: 760px; margin: 34px auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.join .statstrip__cell:nth-child(3) { border-right: 0; }
.trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.trust span { display: inline-flex; gap: 7px; align-items: center; }

/* L'en-tête colle au haut de la page : c'est son conteneur qui est « sticky ». */
#hdr { position: sticky; top: 0; z-index: 50; }
.hdr { position: relative; }
:root.is-scrolled .hdr { box-shadow: 0 3px 0 var(--hi); }

.lbl-short { display: none; }
/* Le mot « Connexion » a cote de son icone : il disparait au premier cran de
   repli, pas a une largeur de fenetre fixe. Avec une @media, l'en-tete
   devenait PLUS large en agrandissant la fenetre (le mot revenait a 1341 px),
   et la barre se resserrait alors qu'il y avait plus de place : elle sautait
   d'un cran en s'elargissant. Les crans doivent rester monotones. */
.hdr--compact .hide-lg { display: none; }

/* La barre d'en-tête se replie toute seule.
   Sa largeur ne dépend pas que de la fenêtre : un pseudo long, l'anglais
   plus bavard que le français, un lien de plus, et le menu passait par-dessus
   les boutons de droite. app.js mesure ce que la barre demande après chaque
   rendu et pose un cran à la fois, du plus léger au plus radical :
     compact -> le bouton Discord perd sa phrase, il ne garde que le mot
     dense   -> tout se resserre, le nom rétrécit
     burger  -> le menu du haut disparaît au profit du menu en tiroir
   Aucun cran n'est posé tant que ça tient : à l'aise, l'en-tête ne bouge pas. */
.hdr--compact .lbl-long { display: none; }
/* Le pictogramme de « Mises a jour » coute une vingtaine de pixels : on les
   reprend sur les marges des liens des le premier cran, sinon la barre
   basculait au cran suivant sur un ecran ou elle tenait tres bien. */
.hdr--compact .nav__a { padding-left: 9px; padding-right: 9px; }
.hdr--compact .nav__a--snipe { margin-right: 7px; }
.hdr--compact .lbl-short { display: inline; }
.hdr--dense .hdr__in { gap: 12px; }
.hdr--dense .hdr__act { gap: 8px; }
.hdr--dense .nav__a { padding: 8px 6px; font-size: 14px; }
/* Au cran serre, l'enseigne et le bouton Snipe rendent aussi leurs marges :
   ce sont les deux plus larges, et c'est ce qui permet au menu du haut de
   tenir jusqu'a 1080 px au lieu de basculer en tiroir cent pixels plus tot. */
.hdr--dense .nav__a--snipe { margin-right: 3px; letter-spacing: .02em; }
.hdr--dense .brand__soc { margin-left: .16em; padding: 0 .1em .04em; }
.hdr--dense .brand__word { font-size: 30px; }
.hdr--burger .nav,
.hdr--burger .hdr__act .hide-md { display: none; }
.hdr--burger .burger { display: grid; }
.hero__title { font-size: clamp(50px, 7.4vw, 124px); }

.tag--wrap { white-space: normal; text-align: left; }

/* ---------- Le Bot (statut) ------------------------------------------- */
.bot-dot--ok { background: var(--ok); }
.bot-dot--work { background: var(--hi); }
.bot-dot--warn { background: #ff8a00; }
.bot-dot--off { background: var(--sale); }

.bot-sign-wrap { position: relative; display: flex; justify-content: center; padding-top: 44px; padding-bottom: 60px; }
.bot-string { position: absolute; top: 2px; left: 50%; width: min(420px, 100%); height: 80px; transform: translateX(-50%); color: var(--rule); overflow: visible; }
.bot-sign {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  margin-top: 30px;
  padding: 22px 24px 18px;
  background: var(--ink); color: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--shadow-c);
  transform: rotate(-2.5deg);
  transform-origin: 50% -40px;
  animation: swing 5s ease-in-out infinite;
  text-align: center;
}
[data-theme="dark"] .bot-sign { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@keyframes swing { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(1.5deg); } }
.bot-sign::before, .bot-sign::after { content: ""; position: absolute; top: -9px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); }
.bot-sign::before { left: 18%; }
.bot-sign::after { right: 18%; }
.bot-sign__top { display: flex; justify-content: center; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
.bot-sign__word { font-size: clamp(72px, 9vw, 128px); line-height: 0.82; margin: 14px 0 6px; }
.bot-sign--ok .bot-sign__word { color: var(--ok); }
.bot-sign--work .bot-sign__word { color: var(--hi); }
.bot-sign--warn .bot-sign__word { color: #ff8a00; }
.bot-sign--off .bot-sign__word { color: var(--sale); }
[data-theme="dark"] .bot-sign--work .bot-sign__word { color: var(--ink); background: var(--hi); padding: 0 8px; display: inline-block; }
.bot-sign__sub { font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.3em; opacity: 0.8; }
.bot-sign__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 2px dashed currentColor; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.bot-sign__foot b { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 30px; letter-spacing: 0; }
.bot-sign__mascot { position: absolute; left: calc(50% - min(210px, 50%) - 64px); bottom: 0; width: 128px; z-index: 2; transform: rotate(-6deg); }
@media (max-width: 900px) { .bot-sign__mascot { width: 64px; left: auto; right: 6px; top: -4px; bottom: auto; transform: rotate(8deg); } }

.svc-list { display: flex; flex-direction: column; border: var(--line); background: var(--card); box-shadow: var(--sh); }
.svc { padding: 18px 20px 14px; border-bottom: var(--line); }
.svc:last-child { border-bottom: 0; }
.svc__head { display: flex; align-items: center; gap: 14px; }
.svc__ic { width: 40px; height: 40px; margin: 0; flex-shrink: 0; }
.svc__name { flex: 1; min-width: 0; }
.svc__name h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 21px; line-height: 1; text-transform: uppercase; }
.svc__name p { font-size: 14px; margin-top: 3px; }
.svc__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.svc-state--ok { background: var(--ok); color: var(--ink); border-color: var(--ink); }
.svc-state--work { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.svc-state--warn { background: #ff8a00; color: var(--ink); border-color: var(--ink); }
.svc-state--off { background: var(--sale); color: #fff; border-color: var(--ink); }
.svc__bars { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 14px 0 6px; }
.svc__bars i { flex: 1; height: 38%; background: var(--fg); opacity: 0.14; min-width: 1px; }
.svc__bars i.is-operational, .svc-legend i.is-operational { height: 100%; background: var(--fg); opacity: 1; }
.svc__bars i.is-maintenance, .svc-legend i.is-maintenance { height: 100%; background: var(--hi); opacity: 1; box-shadow: inset 0 0 0 1px var(--ink); }
.svc__bars i.is-degraded, .svc-legend i.is-degraded { height: 100%; background: #ff8a00; opacity: 1; }
.svc__bars i.is-offline, .svc-legend i.is-offline { height: 100%; background: var(--sale); opacity: 1; }
.svc__foot { display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.svc__foot b { color: var(--fg); font-size: 12px; }
.svc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.svc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.svc-legend i { display: inline-block; width: 10px; height: 16px; background: var(--fg); opacity: 0.14; }
@media (max-width: 640px) {
  .svc__head { flex-wrap: wrap; }
  .svc__meta { width: 100%; justify-content: flex-start; padding-left: 54px; }
  .svc__bars { gap: 1px; }
}

.inc-list { display: flex; flex-direction: column; border-top: 2px solid var(--rule); }
.inc { display: grid; grid-template-columns: 190px 1fr auto; gap: 16px 28px; align-items: start; padding: 22px 0; border-bottom: 2px solid var(--rule); }
.inc__side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.inc__date { font-size: 12px; opacity: 0.75; }
.inc__body h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 26px; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
.inc__badge:not(.tag--sale) { background: transparent; color: inherit; }
/* La ligne d'un incident en cours ne doit pas se lire comme les autres :
   filet rouge a gauche, fond legerement teinte, titre en jaune. */
.inc--live { background: rgba(255, 59, 28, .09); box-shadow: inset 4px 0 0 var(--sale); padding-left: 16px; }
.inc--live .inc__body h3 { color: var(--hi); }
@media (max-width: 760px) { .inc { grid-template-columns: minmax(0, 1fr); } .inc__side { flex-direction: row; align-items: center; } }

/* ---------- Listes ---------------------------------------------------- */
.plain-list { list-style: none; margin: 0; padding: 0; border-top: var(--line); }
.plain-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: var(--line); font-weight: 600; }
.steps-list { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.steps-list li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.steps-list li::before { content: counter(s, decimal-leading-zero); flex-shrink: 0; width: 34px; height: 26px; display: grid; place-items: center; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); font-family: var(--f-mono); font-size: 12px; font-weight: 700; }

/* ---------- Tarifs ---------------------------------------------------- */
.speed { display: flex; flex-direction: column; gap: 18px; }
.speed__rows { display: flex; flex-direction: column; gap: 14px; }
.speed__label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.speed__label b { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 22px; text-transform: uppercase; }
.speed__label span { font-size: 12.5px; font-weight: 700; }
.speed__track { height: 18px; border: var(--line); background: var(--bg); }
.speed__track i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--fg) 0 6px, transparent 6px 10px); }
.speed__row.is-elite .speed__track i { background: var(--hi); box-shadow: inset -2px 0 0 var(--ink); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--line); box-shadow: var(--sh); padding: 26px 24px 22px; }
.plan--elite { background: var(--hi); color: var(--ink); --fg: var(--ink); --rule: var(--ink); --muted: #4a4535; --card: var(--white); box-shadow: var(--sh-lg); }
[data-theme="dark"] .plan--elite { border-color: var(--hi); }
.plan__sticker { top: -34px; right: -18px; width: 96px; height: 96px; font-size: 17px; background: var(--ink); color: var(--hi); }
.plan__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.plan__head .kicker { font-size: 13px; }
.plan__head .tag { white-space: normal; max-width: 100%; line-height: 1.3; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 6px; padding-bottom: 14px; border-bottom: 2px dashed var(--rule); }
.plan__price .display { font-size: clamp(76px, 7vw, 108px); line-height: 0.82; }
.plan__price .mono { font-weight: 700; font-size: 14px; }
.plan__loyalty { display: flex; gap: 8px; align-items: center; background: var(--ink); color: var(--hi); padding: 8px 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; margin-top: 8px; }
.plan__list { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; line-height: 1.35; }
.plan__list li svg { margin-top: 2px; flex-shrink: 0; }
.plan__list li.is-no { color: var(--muted); font-weight: 500; }
.plan__list li.is-no span { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.plan__foot { display: flex; flex-direction: column; gap: 10px; }
.plan__notice { font-size: 11.5px; text-align: center; }
.plan--veiled > :not(.plan__veil) { filter: grayscale(1); opacity: 0.35; }
.plan__veil { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.plan__tape { position: absolute; left: -20%; right: -20%; top: 21%; display: flex; gap: 0; transform: rotate(-14deg); background: repeating-linear-gradient(-45deg, var(--hi) 0 16px, var(--ink) 16px 32px); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 0; height: 44px; }
.plan__tape span { flex: 1; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; white-space: nowrap; background: var(--hi); color: var(--ink); margin: 7px 10px; }
.plan__veil-card { position: relative; z-index: 1; width: calc(100% - 36px); background: var(--card); border: var(--line); box-shadow: var(--sh); padding: 18px; margin-top: 150px; }
/* Le bouton ne doit jamais dépasser de l'encart quand la carte est étroite (3 colonnes vers 1024 px). */
.plan__veil-card .btn { max-width: 100%; white-space: normal; text-align: left; }
.plan__perday { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; }
/* Renvoi vers le comparatif : occupe le bas creux de la carte Free. */
.plan__more { align-self: flex-start; margin: 0 0 18px; padding: 0 0 3px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2px solid var(--rule); color: inherit; font-family: var(--f-mono); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.plan__more:hover { border-bottom-color: var(--hi); gap: 12px; }

.pay-note { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 16px 18px; border: var(--line); background: var(--card); }
.pay-note div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Snipe : le flux d'annonces -------------------------------- */
/* Dans la barre : la seule entrée qui porte une couleur, parce que c'est la
   seule qui bouge toute seule. */
/* Un lien avec pictogramme : meme gabarit que les autres, le picto se colle
   au mot. */
.nav__a--ic { display: inline-flex; align-items: center; gap: 7px; }
.nav__a--ic svg { flex-shrink: 0; opacity: .85; }
.nav__a--ic[aria-current="page"] svg { opacity: 1; }
/* La marque de la fenetre « Quoi de neuf » : carre jaune, filet noir, comme
   la tuile de l'enseigne. */
/* Les pastilles des lignes de la fenetre « Quoi de neuf ».
   Elles utilisaient .box__ic, dont la couleur de texte est l'encre noire :
   avec un fond rendu transparent en style en ligne, les pictogrammes etaient
   noirs sur fond noir, donc invisibles. Ici la couleur suit celle du texte,
   et seule la ligne « version » garde la tuile jaune. */
.upd__ic { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: var(--line); background: transparent; color: inherit; }
.upd__ic--hi { background: var(--hi); color: var(--ink); }
.upd__mark { display: grid; place-items: center; width: 46px; height: 46px; background: var(--hi); color: var(--ink); border: var(--line); box-shadow: var(--sh); }

.nav__a--snipe { display: inline-flex; align-items: center; gap: 8px; background: var(--sale); color: var(--white); border: 2px solid var(--ink); font-weight: 800; }
/* Snipe garde son rouge dans tous les cas, y compris sur sa propre page :
   c'est le seul bouton rouge du site, il perdait justement sa force la ou on
   en avait besoin. La page en cours se signale par un trait jaune a
   l'interieur du bouton, pas en l'eteignant. */
/* Snipe Elite : la pastille doree, collee au bouton rouge. Couleurs
   inversees (jaune sur noir au lieu de rouge sur blanc) et ombre rouge : les
   deux boutons se lisent comme une paire, sans se confondre. Le mot
   « Snipe » n'est pas repete — il est deja sur le bouton d'a cote, le nom
   complet reste dans l'intitule pour les lecteurs d'ecran. */
.nav__a--elite { display: inline-flex; align-items: center; gap: 6px; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); font-weight: 800; letter-spacing: .06em; box-shadow: 3px 3px 0 var(--sale); margin-right: 10px; transition: transform .14s ease; }
.nav__a--elite svg { flex-shrink: 0; }
.nav__a--elite:hover { background: var(--ink); color: var(--hi); border-color: var(--hi); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--sale); }
.nav__a--elite[aria-current="page"] { box-shadow: 3px 3px 0 var(--sale), inset 0 -4px 0 var(--sale); }
.hdr--dense .nav__a--elite { margin-right: 3px; letter-spacing: .02em; }
/* Deux classes : .mnav__snipe est declaree plus bas dans ce fichier et
   gagnait a specificite egale — le bouton Elite ressortait en rouge. */
.mnav__snipe.mnav__snipe--elite { background: var(--hi); color: var(--ink); box-shadow: 4px 4px 0 var(--sale); }
.mnav .mnav__snipe--elite[aria-current="page"] { background: var(--hi); color: var(--ink); box-shadow: 4px 4px 0 var(--sale), inset 0 -5px 0 var(--ink); }

/* Snipe doit sortir du lot : c'est le seul bouton rouge de la barre, et le
   seul qui porte un pictogramme. Ombre dure jaune — les deux couleurs de la
   maison posees l'une sur l'autre — viseur a la place du point, et un halo
   rouge qui respire pour dire que ca tourne en direct. Sur sa propre page, le
   halo s'arrete (on y est deja) et un trait blanc marque le dessous. */
.nav__a--snipe { margin-right: 10px; letter-spacing: .06em; box-shadow: 3px 3px 0 var(--hi); animation: snipe 2.6s ease-in-out infinite; transition: transform .14s ease; }
.nav__a--snipe svg { flex-shrink: 0; }
@keyframes snipe {
  0%, 100% { box-shadow: 3px 3px 0 var(--hi), 0 0 0 0 rgba(255, 59, 28, 0); }
  50%      { box-shadow: 3px 3px 0 var(--hi), 0 0 17px 3px rgba(255, 59, 28, .6); }
}
.nav__a--snipe:hover { background: var(--ink); color: var(--hi); animation: none; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--hi); }
.nav__a--snipe[aria-current="page"] { background: var(--sale); color: var(--white); animation: none; box-shadow: 3px 3px 0 var(--hi), inset 0 -4px 0 var(--white); }
[data-theme="dark"] .nav__a--snipe { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .nav__a--snipe { animation: none; } }
.mnav__snipe { display: flex; align-items: center; gap: 10px; background: var(--sale); color: var(--white); border: 2px solid var(--ink); padding: 12px 14px; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 26px; text-transform: uppercase; text-decoration: none; }
.mnav__snipe { box-shadow: 4px 4px 0 var(--hi); }
/* Dans le tiroir, la page en cours passe en jaune plein. Pour Snipe on garde
   le rouge : c'est son identite, et le jaune sur jaune effacerait son ombre.
   Selecteur plus specifique que la regle generale de la page en cours. */
.mnav .mnav__snipe[aria-current="page"] { background: var(--sale); color: var(--white); box-shadow: 4px 4px 0 var(--hi), inset 0 -5px 0 var(--white); }
.mnav__snipe svg { margin-left: auto; }

/* La barre de commande du flux. Un seul cadre : le compteur, la recherche qui
   prend toute la place libre, le pays, la pause. Sans ca, le compteur et la
   recherche flottaient dans deux boites separees avec un grand vide entre
   les deux sur un ecran large. */
.snipe-ctl { border: var(--line); background: var(--card); box-shadow: var(--sh); margin-bottom: 26px; }
.snipe-ctl__row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 13px 15px; }
.snipe-ctl__n { display: flex; align-items: baseline; gap: 9px; padding-right: 15px; border-right: 2px solid var(--rule); flex-shrink: 0; }
.snipe-ctl__n b { font-size: 30px; line-height: .9; }
.snipe-ctl__n span { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.snipe-ctl__new { flex-shrink: 0; }
.snipe-ctl__search { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; min-width: 0; height: 42px; padding: 0 13px; border: var(--line); background: var(--bg); }
.snipe-ctl__search svg { flex-shrink: 0; opacity: .6; }
.snipe-ctl__search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--fg); font-family: var(--f-mono); font-size: 13.5px; outline: none; }
.snipe-ctl__search input::-webkit-search-cancel-button { filter: grayscale(1); }
.snipe-ctl__search:focus-within { border-color: var(--hi); }
.snipe-ctl__sel { width: auto; flex: 0 1 180px; min-width: 140px; height: 42px; padding: 0 12px; font-size: 13px; }
.snipe-ctl__btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px; border: var(--line); background: var(--bg); color: var(--fg); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; flex-shrink: 0; }
.snipe-ctl__btn:hover { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.snipe-ctl__foot { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 9px 15px; border-top: 1.5px solid var(--rule); font-size: 11px; color: var(--muted); }
.snipe-ctl__foot span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 720px) {
  .snipe-ctl__n { border-right: 0; padding-right: 0; }
  .snipe-ctl__search { flex-basis: 100%; order: 3; }
  .snipe-ctl__sel, .snipe-ctl__btn { flex: 1 1 auto; order: 4; justify-content: center; }
}

/* Entrée de la page Snipe : plus courte que les autres. Le flux est le sujet,
   pas l'affiche — il doit apparaître sans avoir à faire défiler. */
.snipe-hero { padding: clamp(28px, 3.5vw, 52px) 0 clamp(26px, 3vw, 44px); }
/* line-height 0.86 fait cogner les accents de « REPÉRÉES » dans la ligne du
   dessus à cette taille : ici on laisse respirer. */
.snipe-hero__title { line-height: 0.95; }
/* Le flux suit de près : pas besoin de la respiration habituelle entre deux sections. */
.snipe-hero + .sec { padding-top: clamp(22px, 2.6vw, 38px); }
.snipe-live { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px; border: var(--line); background: var(--card); box-shadow: var(--sh); }
.snipe-live__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.snipe-live__last { font-size: 11.5px; opacity: .8; }
.snipe-live__big { display: flex; align-items: baseline; gap: 12px; padding-top: 4px; border-top: 2px dashed var(--rule); }
.snipe-live__big b { font-size: clamp(56px, 7vw, 104px); line-height: .82; }
.snipe-live__brands { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 2px dashed var(--rule); }
.snipe-live__brands .tag { font-size: 10.5px; }

/* Filtres : ils travaillent sur ce qui est déjà chargé, donc pas d'attente. */

.snipe-card__title a { color: inherit; text-decoration: none; }
.snipe-card__title a:hover { text-decoration: underline; }
/* Arrivé pendant que la page était ouverte. */
.snipe-card--new { border-color: var(--sale); }
.snipe-card__new { position: absolute; z-index: 2; left: 8px; top: 8px; background: var(--sale); color: var(--white); padding: 3px 8px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; }

/* Accueil de Snipe : une carte par marque, avec trois vignettes prises dans
   ses annonces — on voit de quoi il s'agit avant de cliquer. */
.snipe-block + .snipe-block { margin-top: clamp(36px, 5vw, 64px); }
.brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 18px; }
.brandcard { display: flex; flex-direction: column; background: var(--card); border: var(--line); box-shadow: var(--sh); text-decoration: none; color: inherit; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.brandcard:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.brandcard:hover .brandcard__thumbs img { opacity: .75; }
.brandcard__thumbs img { transition: opacity .15s ease; }
.brandcard__thumbs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; height: 116px; background: var(--bg); border-bottom: var(--line); }
.brandcard__rank { position: absolute; left: 0; top: 0; z-index: 2; padding: 4px 9px; background: var(--ink); color: var(--hi); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.brandcard__thumbs span { overflow: hidden; display: grid; place-items: center; }
.brandcard__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brandcard__thumbs > span:only-child, .brandcard__noimg { grid-column: 1 / -1; }
/* Le bas de la carte de marque, en trois etages de moins en moins forts :
   le nom, le compte, puis le pied. Avant, le nombre d'annonces etait a 34 px
   et la marque a 26 : dans une grille de huit, on lisait huit nombres et
   aucune marque. */
.brandcard__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 14px; flex: 1; }
.brandcard__name { margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 30px; line-height: .96; overflow-wrap: anywhere; }
.brandcard__n { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.brandcard__n b { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 16px; letter-spacing: 0; color: var(--fg); }
.brandcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1.5px solid var(--rule); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); transition: background .15s ease, color .15s ease; }
.brandcard__ago { display: inline-flex; align-items: center; gap: 6px; }
.brandcard__arrow { display: inline-flex; transition: transform .15s ease; }
.brandcard:hover .brandcard__foot { background: var(--hi); color: var(--ink); }
.brandcard:hover .brandcard__arrow { transform: translateX(3px); }
.snipe-back { font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.snipe-card__brand { text-decoration: none; color: inherit; }
.snipe-card__brand:hover { text-decoration: underline; }

.snipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.snipe-card { display: flex; flex-direction: column; background: var(--card); border: var(--line); box-shadow: var(--sh); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.snipe-card:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.snipe-card__ph { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--bg); border-bottom: var(--line); overflow: hidden; }
.snipe-card__ph img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.snipe-card__noimg { position: absolute; inset: 0; display: grid; place-items: center; }

/* La tuile de remplacement, quand le bot n'a pas rapporte de photo. Meme
   recette que l'enseigne : carre jaune, filet noir, mascotte cadree serre.
   Taille donnee au cas par cas par --noph. */
.noph {
  display: grid;
  place-items: center;
  width: var(--noph, 62px);
  height: var(--noph, 62px);
  background: var(--hi);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.noph img { width: 112%; max-width: none; height: auto; margin-top: 9%; display: block; }
/* Le prix par-dessus la photo, comme une étiquette agrafée. */
.snipe-card__price { position: absolute; z-index: 2; left: 8px; bottom: 8px; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); padding: 4px 9px; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 20px; line-height: 1.1; }
.snipe-card__body { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 10px; flex: 1; }
.snipe-card__brand { font-size: 10.5px; opacity: .75; }
.snipe-card__title { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.snipe-card__bits .tag { font-size: 10px; padding: 3px 7px; }
.snipe-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 13px; border-top: 1.5px solid var(--rule); }
.snipe-card__ago { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap; font-size: 11px; opacity: .8; }
/* Acheter : le bouton existe, la fonction non. Il est donc desactive pour de
   vrai (<button disabled>, annonce comme indisponible par les lecteurs
   d'ecran), en trait pointille et sans aucun effet au survol — rien ne doit
   laisser croire qu'il va se passer quelque chose. Le vrai bouton, celui qui
   ouvre l'annonce sur Vinted, reste au-dessus en jaune plein. */
/* Acheter : en rouge, la couleur de Snipe, avec les rayures du ruban de
   chantier par-dessus. Il se voit autant que le bouton jaune du dessus sans
   lui faire concurrence — deux couleurs differentes pour deux etats
   differents : le jaune marche, le rouge arrive. Texte en noir et pas en
   blanc : sur ce rouge, le noir donne 5,5 de contraste contre 4,2 pour le
   blanc, sous le minimum exige. */
.snipe-card__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-top: 1.5px solid var(--rule);
  /* Bouton desactive : c'est l'information la MOINS importante de la carte.
     En rouge raye pleine largeur, il devenait l'element le plus criard, et
     une grille de 20 annonces se transformait en mur de rayures. Il reste
     lisible, mais rendu a sa place dans la hierarchie. */
  background: var(--paper-2);
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: not-allowed;
}
.snipe-card__buy svg { flex-shrink: 0; }
/* « Bientot disponible » ne se masque jamais, a aucune largeur : sans cette
   mention, le bouton dirait juste « Acheter » et aurait l'air actif. Il se
   met a la ligne plutot que de disparaitre. */
.snipe-card__soon { padding: 2px 7px; border: 1.5px solid currentColor; background: transparent; font-size: 10px; letter-spacing: .08em; opacity: .85; }
.snipe-card__buy { flex-wrap: wrap; row-gap: 5px; }


/* ---------- Le titre d'une page de marque ------------------------------ */
/* Une photo par lettre, prise dans le flux de la marque. Chaque lettre a son
   propre fond, donc son propre cadrage : le nom devient une mosaique de ce
   que le bot vient de trouver. Le voile jaune et le contour d'encre tiennent
   le mot lisible, quelles que soient les photos qui tombent dedans. */
.bhero__word {
  display: flex; flex-wrap: wrap; column-gap: .22em; margin: 6px 0 0;
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%;
  font-variation-settings: "wdth" 62; font-size: clamp(58px, 11.5vw, 164px);
  line-height: .8; letter-spacing: -.02em; text-transform: uppercase;
}
/* Un mot = un groupe insecable. Le retour a la ligne se fait entre les
   groupes, jamais au milieu d'un mot. */
.bhero__grp { display: flex; }
.bhero__word--photo .bhero__grp span {
  /* Trois couches, du dessus vers le dessous : le voile jaune, la photo, puis
     un aplat jaune de secours. Si la photo meurt — et elles meurent, c'est le
     bug n°01 — la couche du dessous prend le relais et la lettre reste
     visible. Sans elle, une photo supprimee effacait une lettre du nom. */
  background-image: linear-gradient(var(--veil), var(--veil)), var(--shot), linear-gradient(var(--hi), var(--hi));
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 2.5px var(--fg);
  filter: contrast(1.1) saturate(1.08);
}
/* Sans photo, on garde l'encre : un titre ne disparait jamais. */
.bhero__word .bhero__grp span { color: var(--fg); }
.bhero__word--photo .bhero__grp span { color: transparent; }
/* Le rang, a cote de l'etiquette beta : ecrit seulement quand le serveur
   nous a donne le classement. */
.bhero__rank {
  padding: 4px 10px; background: var(--ink); color: var(--hi);
  font-family: var(--f-display); font-weight: 900; font-stretch: 75%;
  font-variation-settings: "wdth" 75; font-size: 14px; letter-spacing: .12em;
}
[data-theme="dark"] .bhero__rank { background: var(--hi); color: var(--ink); }
@media (max-width: 620px) {
  .bhero__word { font-size: clamp(50px, 16vw, 90px); }
  .bhero__word--photo .bhero__grp span { -webkit-text-stroke-width: 2px; }
}

/* ---------- L'affiche de la marque vedette ----------------------------- */
/* Une seule marque sort de la grille et prend toute la largeur. Le nom est
   ecrit en geant et REMPLI PAR LA PHOTO d'une annonce du flux : la marque est
   donc faite de ce que le bot vient de trouver, et elle change toute seule au
   fil de la journee. Sans photo, le mot repasse en jaune plein — on ne montre
   jamais un mot vide. */
.fbrand {
  position: relative; display: block; overflow: hidden; margin-bottom: 26px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  box-shadow: var(--sh-lg); text-decoration: none;
  --shadow-c: var(--hi); --rule: var(--paper); --muted: #a8a397;
}
[data-theme="dark"] .fbrand { background: #000; }
.fbrand__dots { position: absolute; inset: 0; opacity: .13; pointer-events: none; }
.fbrand__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 30px; align-items: end; padding: 28px 26px 22px; }
.fbrand__kick { color: var(--hi); }
.fbrand__word {
  display: block; margin: 8px 0 0;
  font-family: var(--f-display); font-weight: 900; font-stretch: 62%;
  font-variation-settings: "wdth" 62; font-size: clamp(62px, 12.5vw, 178px);
  line-height: .78; letter-spacing: -.015em; text-transform: uppercase;
  color: var(--hi);
}
/* Le remplissage photo ne s'applique que s'il y a vraiment une photo : la
   classe est posee par le JS, pas devinee par le CSS. Le contour jaune garde
   le mot lisible meme sur une photo claire ou chargee. */
.fbrand--photo .fbrand__word {
  /* Un voile jaune par-dessus la photo : sans lui, chaque lettre a sa propre
     couleur selon ce qui passe derriere et le mot se lit mal. Le voile tire
     tout vers le jaune de la maison, la photo reste reconnaissable dessous. */
  /* Meme filet de securite que le titre des pages marque : si la photo
     tombe, l'aplat jaune du dessous garde le mot entier. */
  background-image: linear-gradient(var(--veil), var(--veil)), var(--shot), linear-gradient(var(--hi), var(--hi));
  background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 2.5px var(--hi);
  filter: contrast(1.12) saturate(1.1);
}
.fbrand__lead { margin: 14px 0 0; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.fbrand__right { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 4px; }
.fbrand__n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fbrand__n b { font-size: clamp(38px, 5vw, 62px); line-height: .85; color: var(--hi); }
.fbrand__n span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fbrand__live { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.fbrand__cta { margin-top: 4px; }
/* Le tampon pose de travers, comme celui de la beta : il dit le rang sans
   prendre de place dans la mise en page. */
.fbrand__stamp {
  position: absolute; z-index: 3; top: 16px; right: -34px; transform: rotate(34deg);
  padding: 5px 44px; background: var(--hi); color: var(--ink);
  font-family: var(--f-display); font-weight: 900; font-stretch: 75%;
  font-variation-settings: "wdth" 75; font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
/* La bande defilante du bas : le nom repete, comme un bandeau de stade. */
.fbrand__band { position: relative; z-index: 2; overflow: hidden; border-top: 2px solid var(--hi); background: var(--hi); color: var(--ink); }
.fbrand__track { display: flex; align-items: center; width: max-content; animation: marquee 34s linear infinite; }
.fbrand__w { padding: 7px 0; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.fbrand__d { width: 7px; height: 7px; margin: 0 20px; background: var(--ink); flex-shrink: 0; }
.fbrand:hover .fbrand__cta { background: var(--paper); }
@media (prefers-reduced-motion: reduce) { .fbrand__track { animation: none; } }
@media (max-width: 860px) {
  .fbrand__in { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 18px 18px; align-items: start; }
  /* En travers, le tampon sort du cadre et « N°1 » se retrouve hors ecran
     sur telephone (vu en capture a 375 px). On le redresse : petite plaque
     droite dans le coin, le texte reste lisible. */
  .fbrand__stamp { top: 10px; right: 10px; transform: none; padding: 4px 11px; font-size: 12px; border: 2px solid var(--ink); }
  .fbrand__lead { max-width: none; }
}

/* ---------- Identite couleur des cartes d'annonces --------------------- */
/* Une teinte par categorie, posee sur de PETITES surfaces (pastille, filet,
   ombre au survol) et jamais en aplat : c'est ce qui permet d'etre colore
   sans fatiguer l'oeil sur une grille de vingt annonces. Les teintes sont
   volontairement de saturation proche, pour qu'aucune ne crie plus fort que
   les autres sur le fond papier. */
/* La palette est posee sur l'ATTRIBUT, pas sur la carte : la meme regle sert
   aux cartes du flux et aux pastilles de filtre. Cliquer « Vestes » et voir
   des cartes vertes, c'est la meme information dite deux fois — c'est ce qui
   fait tenir la grille ensemble.
   Le vert et l'orange ont ete assombris (#1d8b53 -> #1a7c4a, #c8651a ->
   #b25612) : sur l'etiquette pleine, le blanc dessus tombait sous 4,5 de
   contraste. Mesure apres coup : 5,2 et 5,0. */
.snipe-card, .subcat__chip { --cat: #6f6a5e; }
[data-cat="Chaussures"], [data-snipe-cat="Chaussures"] { --cat: #1f6fd0; }
[data-cat="Vestes"],     [data-snipe-cat="Vestes"]     { --cat: #1a7c4a; }
[data-cat="Pulls"],      [data-snipe-cat="Pulls"]      { --cat: #7448d0; }
[data-cat="T-shirts"],   [data-snipe-cat="T-shirts"]   { --cat: #b25612; }
[data-cat="Pantalons"],  [data-snipe-cat="Pantalons"]  { --cat: #0d7f8c; }
[data-cat="Shorts"],     [data-snipe-cat="Shorts"]     { --cat: #c23a68; }

/* Filet de couleur en tete de carte : discret au repos, il donne son rythme
   a la grille et rend une categorie reperable sans rien lire. */
.snipe-card { position: relative; }
.snipe-card::before {
  content: ""; position: absolute; z-index: 3; inset: 0 0 auto 0; height: 7px;
  background: var(--cat); opacity: 1; transition: height .15s ease;
}
.snipe-card:hover::before { height: 11px; }
/* L'ombre dure prend la couleur de la categorie au survol : la couleur
   apparait au moment ou l'on s'interesse a la carte, pas en permanence. */
.snipe-card:hover { box-shadow: 9px 9px 0 var(--cat); }

/* L'etiquette de categorie est posee SUR la photo, en haut a gauche, en face
   de « BETA » et au-dessus du prix : c'est le premier endroit ou l'oeil se
   pose, et il y a la place pour un pictogramme de 16 px — en dessous de cette
   taille un vetement au trait devient une tache (essaye a 11 et 13 px). */
.snipe-card__cat {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 7px; border: 2px solid var(--ink);
  background: var(--cat); color: #fff; box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.snipe-card__cat svg { flex-shrink: 0; }
/* La carte grandit un peu au survol : l'etiquette suit, sinon elle glisse
   toute seule sur l'image. */
.snipe-card:hover .snipe-card__cat { box-shadow: 4px 4px 0 var(--ink); }
/* Pastille et marque partagent une ligne : deux informations de meme rang,
   lues d'un seul coup d'oeil avant le titre. */
.snipe-card__meta { gap: 8px; align-items: center; flex-wrap: wrap; }

/* Sans categorie detectee : la carte reste neutre plutot que de porter une
   couleur qui ne veut rien dire. */
.snipe-card:not([data-cat]) .snipe-card__cat { display: none; }
.snipe-card:not([data-cat])::before { opacity: .25; }

/* Les pastilles de filtre portent la meme couleur que les cartes qu'elles
   font apparaitre : un liseré au repos, la couleur pleine une fois choisie.
   La pastille « Tout » n'a pas de categorie : elle garde le jaune du site. */
.subcat--live .subcat__chip[data-snipe-cat]:not([data-snipe-cat=""]) { border-left: 5px solid var(--cat); }
.subcat--live .subcat__chip[data-snipe-cat]:not([data-snipe-cat=""]) svg { color: var(--cat); flex-shrink: 0; }
.subcat--live .subcat__chip[data-snipe-cat]:not([data-snipe-cat=""]).is-on {
  background: var(--cat); color: #fff; border-color: var(--ink);
}
.subcat--live .subcat__chip.is-on[data-snipe-cat]:not([data-snipe-cat=""]) svg { color: #fff; }
.subcat--live .subcat__chip.is-on[data-snipe-cat]:not([data-snipe-cat=""]) .subcat__n { background: #fff; color: var(--cat); }

.snipe-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: clamp(40px, 7vw, 80px) 20px; border: 2px dashed var(--rule); background: var(--card); }
.snipe-empty__ic { opacity: .35; }
.snipe-empty__line { max-width: 52ch; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- Etiquette beta -------------------------------------------- */
/* La page Snipe est une vraie beta. L'etiquette passe en continu par les
   quatre accents de la maison et s'eclaire de la meme couleur : ca attire
   l'oeil sans rien recouvrir. Les quatre teintes sont assez claires pour
   garder le texte en noir du debut a la fin du cycle — la couleur change,
   la lisibilite non (contraste minimum mesure : 4,9 sur le magenta). */
/* ---------- Snipe Elite (page d'annonce) -------------------------------- */
/* Rouge Snipe pour l'identite, jaune pour la date : les deux couleurs de la
   maison, mais la date reste le seul aplat jaune de la page — c'est
   l'information que tout le monde vient chercher. */
.se-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); --fg: var(--paper); --rule: #3a3833; --muted: #a8a397; }
.se-hero__dots { position: absolute; inset: 0; opacity: .25; pointer-events: none; }
.se-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: clamp(46px, 7vw, 84px) 0; }
.se-tag { display: inline-flex; align-items: center; gap: 6px; }
.se-title { margin-top: 18px; }
.se-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 12px; color: var(--muted); }
.se-date { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 30px; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--sale); }
.se-date .kicker { color: var(--ink); opacity: .7; }
.se-date__m { font-size: clamp(38px, 5vw, 58px); line-height: .9; text-transform: uppercase; }
.se-date__y { font-size: clamp(30px, 4vw, 44px); line-height: .9; }
.se-date__note { margin-top: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
/* La maquette du flux Elite : un cadre qui imite la page Snipe, rempli de
   formes vides. Le rouge du cadre et l'etiquette « maquette » disent que ce
   n'est pas le vrai flux ; les cartes ne portent ni nom ni prix, donc rien a
   confondre avec une annonce. */
.se-prev { border: var(--line); background: var(--card); box-shadow: var(--sh); padding: clamp(20px, 3vw, 30px); }
.se-prev__head { display: flex; align-items: center; gap: 12px; }
.se-prev__title { margin: 10px 0 8px; }
.se-prev__lead { font-size: 14.5px; max-width: 60ch; }
.se-prev__frame { margin-top: 20px; padding: 14px; border: 2px dashed var(--sale); background: var(--bg); }
.se-prev__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: var(--line); background: var(--card); }
.se-prev__count { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.se-prev__count b { font-size: 24px; line-height: .9; color: var(--fg); }
.se-prev__search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; padding: 9px 12px; border: var(--line); font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.se-prev__btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: var(--line); font-family: var(--f-mono); font-size: 10.5px; color: var(--muted); }
.se-prev__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.se-prev__grid .gate__card { opacity: .5; }
.se-prev__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 11px; line-height: 1.6; color: var(--muted); max-width: 76ch; }
.se-prev__note svg { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 860px) { .se-prev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.se-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.se-card { border: var(--line); background: var(--card); box-shadow: var(--sh); padding: 22px; }
.se-card__ic { display: grid; place-items: center; width: 44px; height: 44px; background: var(--sale); color: var(--white); border: var(--line); }
.se-card h3 { margin: 16px 0 8px; font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 24px; line-height: 1; text-transform: uppercase; }
.se-card p { font-size: 14px; line-height: 1.55; }
.se-foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .se-hero__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .se-date { align-self: flex-start; }
  .se-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Les 24 dernieres heures ------------------------------------ */
/* Une case par heure, de la plus ancienne a gauche a l'heure en cours a
   droite. Les couleurs sont celles deja utilisees par l'historique des
   services, pour qu'on n'ait pas deux vocabulaires de couleurs sur la meme
   page. Une heure sans releve est creuse, pas verte. */
.hrs { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 4px; margin-top: 22px; }
.hrs__c { display: block; height: 52px; background: var(--rule); opacity: .35; }
.hrs__c.is-operational { background: var(--fg); opacity: 1; }
.hrs__c.is-maintenance { background: var(--hi); opacity: 1; box-shadow: inset 0 0 0 1px var(--ink); }
.hrs__c.is-degraded { background: #ff8a00; opacity: 1; }
.hrs__c.is-offline { background: var(--sale); opacity: 1; }
.hrs__c.is-gap { background: repeating-linear-gradient(135deg, var(--rule) 0 3px, transparent 3px 6px); opacity: .55; }
.hrs__axis { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11px; color: var(--muted); }
.hrs__sum { margin-top: 14px; font-size: 12px; font-weight: 700; }
@media (max-width: 720px) {
  .hrs { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
  .hrs__c { height: 38px; }
}

/* Le bouton « afficher plus » du flux. */
.snipe-more { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.snipe-more__n { font-size: 11px; color: var(--muted); }

/* ---------- Sous-categories d'une marque (a venir) --------------------- */
/* Tout ici est en pointille et en gris : c'est une maquette de ce qui
   arrive, posee a l'endroit exact ou les filtres apparaitront. Les pastilles
   sont de vrais <button disabled> — pas de faux boutons qui avalent le clic
   sans rien dire. */
.subcat { margin: -10px 0 26px; padding: 16px 16px 15px; border: var(--line); background: var(--card); box-shadow: var(--sh); }
.subcat__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.subcat__soon { display: inline-flex; align-items: center; gap: 5px; }
.subcat__row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
/* Les pastilles se voient : bordure pleine, texte a pleine couleur, fond de
   page — elles ont l'air de ce qu'elles seront. Le petit « bientot » colle a
   chacune pour qu'aucune ne passe pour active, et le bouton reste desactive
   pour de vrai. */
.subcat__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: var(--line);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: not-allowed;
}
.subcat__tick { padding: 1px 6px; background: var(--hi); color: var(--ink); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
/* Le jour ou le bot envoie les categories, les memes pastilles deviennent de
   vrais filtres : plus de « bientot », un compteur a la place, et celle qui
   est choisie passe en jaune. */
.subcat--live .subcat__chip { cursor: pointer; }
.subcat--live .subcat__chip:hover { border-color: var(--hi); }
.subcat--live .subcat__chip.is-on { background: var(--hi); color: var(--ink); border-color: var(--ink); }
/* Le compteur, inverse par rapport a la pastille : fond couleur du texte,
   texte couleur du fond. En thememe sombre, --rule et --fg valent tous les
   deux le papier : le chiffre etait ecrit en blanc sur blanc, invisible. En
   theme clair, les deux valent l'encre : noir sur noir, meme resultat. */
.subcat__n { padding: 1px 6px; background: var(--fg); color: var(--bg); font-size: 10px; font-weight: 700; }
.subcat__chip--none { border-style: dashed; color: var(--muted); }
/* Les gammes annoncees : sous les categories, separees par un filet, avec
   les memes pastilles inactives que le premier etat du bloc. */
.subcat__lines { margin-top: 16px; padding-top: 15px; border-top: 2px dashed var(--rule); }
/* Le curseur « interdit » doit gagner sur le « main » des pastilles actives :
   dans le bloc vivant, .subcat--live .subcat__chip est plus specifique que
   .subcat__chip--line, et les gammes affichaient une main alors qu'elles ne
   se cliquent pas. On vise l'attribut disabled, qui ne ment pas. */
.subcat__chip[disabled] { cursor: not-allowed; }
.subcat--live .subcat__chip[disabled] { cursor: not-allowed; }
.subcat--live .subcat__chip[disabled]:hover { border-color: var(--rule); }
.subcat--live .subcat__chip.is-on .subcat__n { background: var(--ink); color: var(--hi); }
/* Les gammes se pilotent une par une depuis le panneau admin. Celle qui est
   en ligne devient un vrai filtre — compteur, main, jaune quand elle est
   choisie. Les autres restent visibles mais grisees, avec l'etiquette de leur
   etat : une gamme qui deconne le dit, elle ne fait pas semblant d'attendre.
   « Indisponible » ne s'affiche pas du tout, c'est le but de cet etat. */
.subcat__chip.is-live { cursor: pointer; }
.subcat__chip.is-live:hover { border-color: var(--hi); }
.subcat__chip.is-live.is-on { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.subcat__chip.is-live.is-on .subcat__n { background: var(--ink); color: var(--hi); }
.subcat__chip--bug, .subcat__chip--maint { border-style: dashed; color: var(--muted); }
/* Encre et pas blanc sur le rouge : a 9,5 px, le blanc sur --sale tombe a
   3,56 de contraste (mesure), l'encre remonte a 5,4. Les grandes
   etiquettes du site gardent leur blanc, elles sont deux fois plus hautes. */
.subcat__chip--bug .subcat__tick { background: var(--sale); color: var(--ink); }
.subcat__chip--maint .subcat__tick { background: #ff8a00; color: var(--ink); }
.subcat__chip--clear { border-style: dashed; cursor: pointer; }
.subcat__chip--clear:hover { border-color: var(--sale); color: var(--sale); }
.subcat__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 11px; line-height: 1.55; color: var(--muted); max-width: 72ch; }
.subcat__note svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- Banc d'essai (signature beta) ------------------------------ */
/* Fond en papier millimetre : deux trames croisees a tres faible contraste.
   C'est ce qui donne l'air « version d'essai » sans rien recouvrir. Le mot
   BETA passe en filigrane derriere, en lettres creuses. */
.bench {
  position: relative;
  overflow: hidden;
  border-top: var(--line);
  border-bottom: var(--line);
  background-color: var(--card);
  /* La trame doit se deviner, pas se lire. A pleine force, les lignes
     passaient au milieu des mots et tout avait l'air barre : 22 % de la
     couleur des filets, et des carreaux plus larges. */
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--rule) 22%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--rule) 22%, transparent) 0 1px, transparent 1px 34px);
  background-position: center;
}
.bench__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr));
  gap: 26px;
  /* padding-block seulement : .wrap porte deja les marges laterales, et un
     raccourci « padding » les remettrait a zero — le bloc collerait aux
     bords de l'ecran sur telephone. */
  padding-block: 30px 32px;
}
/* Position relative sur les colonnes : le filigrane est en absolu, et un
   element positionne se peint au-dessus de ceux qui ne le sont pas. Sans ca,
   ses lettres creuses passaient par-dessus le texte. */
.bench__cell { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bench__cell + .bench__cell { padding-left: 26px; border-left: 2px dashed var(--rule); }
.bench__stage { font-size: 42px; line-height: .85; }
.bench__note { font-size: 11px; color: var(--muted); }
.bench__list { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.bench__list li { display: flex; align-items: flex-start; gap: 9px; }
.bench__list svg { flex-shrink: 0; margin-top: 3px; color: var(--ok); }
.bench__list--warn svg { color: var(--sale); }
.bench__you { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bench__cta { align-self: flex-start; font-size: 13px; }
@media (max-width: 1080px) {
  .bench__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  /* nth-of-type et pas nth-child : le filigrane est un <span> pose avant les
     colonnes, il decalait tout le comptage d'un cran. */
  .bench__cell:nth-of-type(even) { padding-left: 22px; }
  .bench__cell:nth-of-type(odd) { padding-left: 0; border-left: 0; }
}
/* Sur telephone, les quatre colonnes s'empilent : le bloc ferait un ecran
   entier avant le flux, alors que le flux est ce qu'on vient chercher. On
   resserre tout et on coupe le filigrane. */
@media (max-width: 620px) {
  .bench__in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 20px 22px; }
  .bench__cell { gap: 7px; }
  .bench__cell + .bench__cell { padding-left: 0; padding-top: 13px; border-left: 0; border-top: 2px dashed var(--rule); }
  .bench__stage { font-size: 32px; }
  .bench__list { gap: 6px; font-size: 13px; }
  .bench__you { font-size: 13px; }
}

/* ---------- Le journal des bugs ---------------------------------------- */
/* Un defaut par ligne : son numero, sa zone, ce qu'il fait, et ou il en est.
   Ecrit avant que le visiteur le trouve — c'est ce qui separe une beta
   assumee d'une page qui cache la poussiere. La pastille d'etat porte la
   couleur, le reste reste en noir et blanc pour rester lisible sur la trame
   quadrillee du banc. */
.bench__bugs { position: relative; z-index: 1; padding-block: 4px 30px; }
.bench__bugshead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; padding-top: 22px; border-top: 2px dashed var(--rule); }
.bench__bugsnote { margin: 0; font-size: 11px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.bugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bug {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 11px 13px; background: var(--bg); border: 2px solid var(--rule);
  border-left: 5px solid var(--cat, var(--rule));
}
.bug__n { align-self: center; font-size: 15px; font-weight: 700; color: var(--muted); }
.bug__txt { min-width: 0; }
.bug__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.bug__zone { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bug__title { font-size: 14px; font-weight: 800; line-height: 1.3; }
.bug__desc { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.bug__state {
  align-self: center; padding: 3px 8px; border: 2px solid var(--ink);
  background: var(--cat, var(--rule)); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
/* Les cinq etats, du plus actif au plus assume. « Pas pour la beta 1 » n'est
   pas un echec : c'est une decision, elle est donc grise et pas rouge. */
.bug[data-state="fixing"]     { --cat: #b25612; }
.bug[data-state="workaround"] { --cat: #1a7c4a; }
.bug[data-state="watched"]    { --cat: #0d7f8c; }
.bug[data-state="next"]       { --cat: #7448d0; }
.bug[data-state="wont"]       { --cat: #6f6a5e; }

/* ---------- La prochaine etape ----------------------------------------- */
/* Une bande a part, en encre : elle ne parle pas de ce qui tourne, mais de ce
   qui vient. Le mois est affiche sans jour — la regle du site : aucune date
   inventee. */
.bench__next {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: 26px; margin-bottom: 30px; padding: 20px 22px;
  background: var(--ink); color: var(--paper); box-shadow: var(--sh);
  /* Memes reglages que les sections en encre du site : l'ombre dure passe au
     jaune (sur du noir, une ombre encre ne se voit pas), et en theme sombre
     la bande passe au noir pur pour se detacher du fond #0c0c0b. */
  --shadow-c: var(--hi); --rule: var(--paper);
}
[data-theme="dark"] .bench__next { background: #000; }
.bench__nextid { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.bench__nextid .kicker { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.bench__nextstage { font-size: 40px; line-height: .85; }
.bench__nextwhen { display: inline-flex; align-items: center; gap: 6px; }
.bench__nextbody { min-width: 0; }
.bench__nextlead { margin: 0; font-size: 14.5px; line-height: 1.55; }
.bench__nextlist { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; }
.bench__nextlist li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.bench__nextlist svg { flex-shrink: 0; color: var(--hi); }
.bench__nextnote { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 11px; line-height: 1.6; color: color-mix(in srgb, var(--paper) 66%, transparent); max-width: 74ch; }
.bench__nextnote svg { flex-shrink: 0; margin-top: 2px; }
/* Les adaptations ecran viennent APRES les regles de base : a specificite
   egale, c'est la derniere ecrite qui gagne, media query ou pas. Placees plus
   haut dans le fichier, elles n'auraient rien fait du tout. */
@media (max-width: 1080px) { .bugs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .bench__next { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 16px 18px; }
  .bench__nextid { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .bench__nextstage { font-size: 30px; }
}
@media (max-width: 620px) {
  .bench__bugs { padding-bottom: 22px; }
  .bug { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .bug__state { grid-column: 2; justify-self: start; margin-top: 2px; }
}

/* Le compte a rebours de la prochaine version, dans sa plaque. */
.next__cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; width: 100%; }
.next__cd div { display: grid; justify-items: center; gap: 3px; padding: 7px 2px; background: var(--ink); color: var(--paper); }
.next__cd b { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 22px; line-height: 1; }
.next__cd span { font-family: var(--f-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; opacity: .75; }
.next__eta--out .next__month { font-size: clamp(26px, 3.4vw, 40px); line-height: 1; text-align: center; }
.tag--ok { background: var(--ok); color: var(--ink); border-color: var(--ink); }

/* L'etiquette beta sur la photo d'une annonce. Coin haut droit : le badge
   NEUF est a gauche, le prix en bas a gauche, la place est libre. */
.snipe-card__beta { position: absolute; z-index: 2; right: 10px; top: 10px; padding: 3px 7px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Les deux etiquettes du haut forment une paire : la categorie a gauche, la
   beta a droite. Elles etaient posees chacune de son cote sans se regarder —
   8 px contre 10 px du bord, et 20 px de haut contre 30. La bande du haut
   partait de travers. Meme retrait des deux bords, et la petite se centre sur
   la grande : 10 + 30/2 - 20/2 = 15. Sans categorie, la beta reste a 10 px,
   sinon elle flotterait toute seule trop bas. */
.snipe-card[data-cat] .snipe-card__beta { top: 15px; }

/* L'onglet vertical colle au bord gauche. Il double le lien vers le
   formulaire d'avis : c'est un rappel ET un raccourci. Masque sous 1100 px,
   ou il mangerait la largeur utile. */
.beta-rail {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding: 16px 7px;
  border: 2px solid var(--ink);
  border-left: 0;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  animation: beta-bg 8s linear infinite;
}
.beta-rail:hover { padding-left: 11px; }
@media (max-width: 1100px) { .beta-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .beta-rail { animation: none; background: #ffe600; } }

/* ---------- Tampon et bandeau collant (beta) --------------------------- */
/* Le tampon : pose de travers dans le coin du hero, lettres creuses dans un
   double filet, sur le meme cycle de couleurs que l'etiquette. Il est
   decoratif (aria-hidden) : l'information est deja ecrite en clair a cote. */
.beta-stamp {
  position: absolute;
  top: clamp(14px, 3vw, 34px);
  right: clamp(14px, 3vw, 40px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 9px 16px 7px;
  border: 3px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  transform: rotate(-8deg);
  pointer-events: none;
  animation: beta-ink 8s linear infinite;
}
.beta-stamp b { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 28px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.beta-stamp i { font-family: var(--f-mono); font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
@keyframes beta-ink {
  0%, 100% { color: #ffe600; }
  22%      { color: #ff3b1c; }
  46%      { color: #ff2e8b; }
  70%      { color: #12c3e3; }
}
@media (max-width: 900px) { .beta-stamp { display: none; } }

/* Le bandeau colle sous l'en-tete pendant tout le parcours du flux. Il est
   fin : il doit rappeler, pas manger l'ecran. */
.beta-sticky {
  position: sticky;
  top: var(--hdr-h);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px clamp(16px, 3vw, 40px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 700;
  animation: beta-bg 8s linear infinite;
}
.beta-sticky__tag { padding: 2px 9px; background: var(--ink); color: var(--paper); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; }
@media (max-width: 560px) { .beta-sticky span:last-child { font-size: 10.5px; line-height: 1.4; } }
@media (prefers-reduced-motion: reduce) {
  .beta-stamp, .beta-sticky { animation: none; }
  .beta-stamp { color: #ffe600; }
  .beta-sticky { background: #ffe600; }
}

/* ---------- Avis des membres ------------------------------------------ */
.say { margin-top: 34px; border: var(--line); background: var(--card); box-shadow: var(--sh); padding: clamp(20px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.say__title { margin: 8px 0 10px; }
.say__lead { font-size: 14.5px; line-height: 1.6; max-width: 46ch; }
.say__form { display: flex; flex-direction: column; gap: 12px; }
.say__field { min-height: 128px; resize: vertical; font-family: inherit; line-height: 1.5; }
.say__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.say__left { font-size: 11px; color: var(--muted); }
.say__who { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.say__msg { font-size: 13px; font-weight: 600; color: var(--sale); }
.say--done { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
.say__mark { display: grid; place-items: center; width: 54px; height: 54px; background: var(--ok); color: var(--ink); border: var(--line); }
@media (max-width: 860px) { .say { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Les memes avis, cote panneau staff. */
.adm-fb { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-height: 460px; overflow: auto; }
.adm-fb__row { border: var(--line); background: var(--bg); padding: 12px 14px; }
.adm-fb__who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.adm-fb__who b { font-size: 14px; }
.adm-fb__who span { font-size: 11px; color: var(--muted); }
.adm-fb__msg { margin-top: 6px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Porte d'entree du flux ------------------------------------ */
/* Les formes derriere la porte sont floutees et inertes : elles disent
   « il y a quelque chose ici » sans montrer de fausses annonces. Le panneau
   et les formes occupent la meme case de grille, le panneau au-dessus. */
.gate { position: relative; display: grid; border: var(--line); box-shadow: var(--sh); background: var(--card); overflow: hidden; }
.gate__ghosts,
.gate__panel { grid-area: 1 / 1; }
.gate__ghosts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  filter: blur(6px);
  opacity: .42;
  pointer-events: none;
  user-select: none;
}
.gate__card { border: var(--line); background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.gate__ph { display: grid; place-items: center; height: 86px; }
.gate__bars { display: flex; flex-direction: column; gap: 8px; }
.gate__bars i { display: block; height: 11px; background: var(--rule); }
.gate__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: clamp(36px, 6vw, 72px) 24px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: blur(2px);
}
.gate__title { max-width: 16ch; }
.gate__lead { max-width: 52ch; }
.gate__perks { display: flex; flex-direction: column; gap: 9px; text-align: left; font-size: 14.5px; }
.gate__perks li { display: flex; align-items: flex-start; gap: 10px; }
.gate__perks svg { flex-shrink: 0; margin-top: 3px; }
.gate__act { justify-content: center; gap: 12px; margin-top: 6px; }
.gate__create { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.gate__free { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
/* La mascotte garde la porte, coin bas droit, coupee par le cadre. Elle est
   decorative : sous 980 px elle mangerait la place du panneau, elle part. */
.gate__mascot { position: absolute; right: 18px; bottom: -14px; width: 132px; height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(6px 4px 0 var(--hi)); }
@media (max-width: 980px) { .gate__mascot { display: none; } }
@media (max-width: 760px) {
  .gate__ghosts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gate__act { flex-direction: column; align-items: stretch; width: 100%; max-width: 330px; }
}

.snipe-hero { position: relative; overflow: hidden; }
.snipe-kick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.beta-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  font-size: 17px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--hi);
  border: 2px solid var(--ink);
  /* L'eclat qui balaie l'etiquette est une IMAGE de fond, pas un element
     pose par-dessus : un pseudo-element aurait demande overflow:hidden, qui
     aurait rogne le halo. Ici le halo reste entier et l'eclat glisse dans la
     largeur du fond. */
  background-image: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .92) 47%, transparent 55%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  /* Trois rythmes qui ne tombent jamais ensemble : la couleur (8 s), la
     respiration (2,2 s) et l'eclat (3,4 s). C'est ce decalage qui fait qu'on
     ne voit pas la boucle. */
  animation: beta 8s linear infinite,
             beta-breathe 2.2s ease-in-out infinite,
             beta-shine 3.4s ease-in-out infinite;
}
/* « background-color » et pas « background » : le raccourci effacerait
   l'image de l'eclat a chaque etape. */
@keyframes beta {
  0%,   100% { background-color: #ffe600; box-shadow: 0 0 0 5px rgba(255, 230, 0, .26), 0 0 34px rgba(255, 230, 0, .95); }
  22%        { background-color: #ff3b1c; box-shadow: 0 0 0 5px rgba(255, 59, 28, .26), 0 0 34px rgba(255, 59, 28, .95); }
  46%        { background-color: #ff2e8b; box-shadow: 0 0 0 5px rgba(255, 46, 139, .26), 0 0 34px rgba(255, 46, 139, .95); }
  70%        { background-color: #12c3e3; box-shadow: 0 0 0 5px rgba(18, 195, 227, .26), 0 0 34px rgba(18, 195, 227, .95); }
}
@keyframes beta-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes beta-shine { 0% { background-position: 170% 0; } 60%, 100% { background-position: -70% 0; } }
/* L'eclair gresille comme un neon fatigue : deux coupures seches, puis il
   tient. En « steps », sans fondu — un fondu ferait clignotant de Noel. */
.beta-tag svg { animation: beta-bolt 3.2s steps(1, end) infinite; }
@keyframes beta-bolt { 0%, 7%, 14%, 100% { opacity: 1; } 4%, 11% { opacity: .12; } }
[data-theme="light"] .beta-tag { border-color: var(--ink); }
.beta-tag--sm { padding: 2px 8px; font-size: 11px; letter-spacing: .12em; border-width: 1.5px; vertical-align: middle; }

/* Le bandeau beta, en travers de la page. Il porte le meme cycle de couleurs
   que l'etiquette, sans le halo : sur toute la largeur, un halo baverait sur
   le contenu. Les deux animations demarrent au chargement de la page, donc
   l'etiquette et les bandeaux changent de couleur en meme temps. */
.beta-band {
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--hi);
  color: var(--ink);
  animation: beta-bg 8s linear infinite;
}
[data-theme="dark"] .beta-band { border-color: var(--ink); }
.beta-band__track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite; }
.beta-band__i {
  padding: 9px 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  font-size: 19px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.beta-band__d { width: 8px; height: 8px; margin: 0 22px; background: var(--ink); flex-shrink: 0; }
@keyframes beta-bg {
  0%,   100% { background: #ffe600; }
  22%        { background: #ff3b1c; }
  46%        { background: #ff2e8b; }
  70%        { background: #12c3e3; }
}
.beta-note {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--hi);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 54ch;
}
/* Une couleur qui bat en permanence peut gener — mal de tete, trouble de
   l'attention, epilepsie photosensible. Quand le systeme demande moins
   d'animation, l'etiquette reste jaune et allumee, sans cycle. */
@media (prefers-reduced-motion: reduce) {
  .beta-tag {
    animation: none; transform: none; background-image: none;
    box-shadow: 0 0 0 4px rgba(255, 230, 0, .22), 0 0 22px rgba(255, 230, 0, .75);
  }
  .beta-tag svg { animation: none; opacity: 1; }
  .ann--alert { animation: none; }
  .beta-band { animation: none; }
  .beta-band__track { animation: none; }
}

.snipe-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 26px; font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.snipe-notice svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- Boutique ------------------------------------------------- */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 860px) { .packs { grid-template-columns: minmax(0, 1fr); } }
.pack { position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--line); box-shadow: var(--sh); padding: 26px 24px 22px; }
/* Le pack conseille prend le jaune, comme l'offre Elite des Tarifs : le site
   ne doit avoir qu'une seule facon de dire « celui-la ». */
.pack--best { background: var(--hi); color: var(--ink); --fg: var(--ink); --rule: var(--ink); --muted: #4a4535; --card: var(--white); box-shadow: var(--sh-lg); }
[data-theme="dark"] .pack--best { border-color: var(--hi); }
.pack__sticker { top: -30px; right: -14px; width: 92px; height: 92px; font-size: 12px; background: var(--ink); color: var(--hi); }
@media (max-width: 560px) { .pack__sticker { right: -6px; top: -34px; width: 78px; height: 78px; font-size: 11px; } }
.pack__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed var(--rule); }
.pack__ic { display: grid; place-items: center; width: 40px; height: 40px; border: var(--line); background: var(--card); flex-shrink: 0; }
.pack__title { margin: 16px 0 10px; }
.pack__desc { font-size: 15px; line-height: 1.5; }
.pack__list { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pack__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; line-height: 1.35; }
.pack__list li svg { margin-top: 2px; flex-shrink: 0; }
.pack__buy { display: flex; flex-direction: column; gap: 12px; border-top: 2px dashed var(--rule); padding-top: 18px; }
.pack__price { display: flex; align-items: baseline; gap: 10px; }
.pack__price .display { font-size: clamp(48px, 5vw, 68px); line-height: 0.85; }
.pack__price .mono { font-weight: 700; font-size: 13px; }
.pack__note { font-size: 11.5px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.shop-tag { max-width: 420px; margin-left: auto; }
.shop-deliv { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 34px; align-items: start; }
@media (max-width: 860px) { .shop-deliv { grid-template-columns: minmax(0, 1fr); } }
.shop-steps { margin-top: 4px; }
.shop-sec { padding: 22px; font-size: 14.5px; line-height: 1.55; border-left: 5px solid var(--hi); }

.cmp-scroll { overflow-x: auto; border: var(--line); box-shadow: var(--sh); background: var(--card); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1.5px solid var(--rule); vertical-align: middle; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 22px; text-transform: uppercase; border-bottom: var(--line); background: var(--bg); }
.cmp tbody th { font-weight: 700; }
.cmp td { font-weight: 600; }
.cmp .is-elite { background: var(--hi); color: var(--ink); border-left: var(--line); border-right: var(--line); }
.cmp thead .is-elite { background: var(--ink); color: var(--hi); }
[data-theme="dark"] .cmp thead .is-elite { background: var(--hi); color: var(--ink); }
.cmp-yes { display: inline-flex; gap: 6px; align-items: center; }
.cmp-no { display: inline-flex; color: var(--sale); }
.cmp tbody tr:last-child td { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 22px; }
/* Colonne Premium : l'offre est fermee, le prix ne doit pas se lire comme une proposition. */
.cmp thead .tag { margin-left: 8px; vertical-align: middle; font-size: 10px; padding: 3px 7px; }
.cmp td.is-susp { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.5; }
/* FAQ des tarifs : meme bloc que la page Stream, mais au jaune de la maison. */
.faq--pay .st-q[open] .st-q__sign { background: var(--hi); color: var(--ink); }

/* Les variables composées se figent là où elles sont déclarées : chaque bloc qui
   change d'encre doit les redéclarer, sinon ses bordures gardent la couleur du haut. */
.sec--ink, .sec--hi, .plan--elite, .box--hi, .box--ink, .ftr, .world, .poster, .lock {
  --line: var(--bw) solid var(--rule);
  --sh: 5px 5px 0 var(--shadow-c);
  --sh-lg: 9px 9px 0 var(--shadow-c);
}
.receipt, .hangtag { --fg: var(--ink); --rule: var(--ink); }
@media (max-width: 560px) { .plan__sticker { right: -4px; top: -40px; width: 84px; height: 84px; font-size: 15px; } }

/* ---------- Mises à jour ---------------------------------------------- */
.chg-tag--open { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.chg-tag--launch { background: var(--violet); color: #fff; border-color: var(--ink); }
.chg-tag--new { background: var(--ink); color: var(--paper); border-color: var(--ink); }
[data-theme="dark"] .chg-tag--new { background: var(--paper); color: var(--ink); }
.chg-tag--better { background: var(--w-stream); color: var(--ink); border-color: var(--ink); }
.chg-tag--beta { background: #ff8a00; color: var(--ink); border-color: var(--ink); }
.tag--late { background: #ff8a00; color: var(--ink); border-color: var(--ink); }

.chg-latest {
  position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh-lg);
  padding: 22px 22px 18px; transform: rotate(2deg); transition: transform 0.15s ease;
  font: inherit; width: min(400px, 100%); justify-self: center;
}
.chg-latest:hover { transform: rotate(0deg) translateY(-3px); }
.chg-latest__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chg-latest__v { font-size: clamp(88px, 10vw, 140px); line-height: 0.8; }
.chg-latest__title { font-weight: 800; font-size: 18px; }
.chg-latest__date { font-size: 12.5px; }
.chg-latest .barcode { --fg: var(--ink); margin-top: 6px; height: 30px; }

.chg-band .ticker__item strong { font-size: 30px; color: var(--hi); }
.chg-band .ticker__item b { color: var(--paper); opacity: 0.5; }
.chg-band .ticker__track { animation-duration: 36s; }

.next { display: grid; grid-template-columns: minmax(0, 1fr) 280px; border: var(--line); background: var(--card); box-shadow: var(--sh-lg); }
.next__main { padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.next__versions { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.next__v { font-size: clamp(96px, 13vw, 190px); line-height: 0.78; }
.next__now { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; }
.next__now .mono { font-size: 20px; font-weight: 700; }
.next__eta { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px; background: var(--hi); color: var(--ink); border-left: var(--line); text-align: center; }
[data-theme="dark"] .next__eta { border-left-color: var(--hi); }
.next__month { font-size: 64px; line-height: 0.85; }
.next__year { font-size: 44px; line-height: 0.85; -webkit-text-stroke: 2px var(--ink); color: transparent; }
@media (max-width: 860px) { .next { grid-template-columns: minmax(0, 1fr); } .next__eta { border-left: 0; border-top: var(--line); } }

.hl { position: relative; overflow: hidden; background: var(--w-stream); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh); padding: 24px 24px 22px; }
[data-theme="dark"] .hl { box-shadow: 6px 6px 0 var(--hi); }
.hl__ghost { position: absolute; right: -8px; bottom: -28px; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 220px; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px rgba(12, 12, 11, 0.25); pointer-events: none; }
.hl .tag--ghost { border-color: var(--ink); color: var(--ink); }
.hl__note { font-size: 12.5px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--ink); max-width: 62ch; position: relative; }
/* Deux cartes de tete peuvent se suivre : la nouveaute, puis la mauvaise
   nouvelle. Celle-ci passe en rouge plein — on ne cache pas un arret de
   service dans une carte de la meme couleur que les bonnes nouvelles. */
.hl + .hl { margin-top: 16px; }
.hl--stop { background: var(--sale); color: #fff; }
.hl--stop .hl__ghost { -webkit-text-stroke-color: rgba(255, 255, 255, .35); }
.hl--stop .hl__note { border-top-color: rgba(255, 255, 255, .55); }
.soon-row.is-stop { box-shadow: inset 4px 0 0 var(--sale); padding-left: 16px; }
.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.teaser { border: var(--line); background: var(--card); padding: 18px; }
.teaser.is-major { box-shadow: var(--sh); background: var(--hi); color: var(--ink); --muted: #4a4535; }
.teaser h4 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 24px; line-height: 1; text-transform: uppercase; margin: 0; }
.teaser p { margin-top: 8px; font-size: 14.5px; }
@media (max-width: 860px) { .teasers { grid-template-columns: minmax(0, 1fr); } }

.soon-rows { border-top: 2px solid var(--rule); }
.soon-row { display: grid; grid-template-columns: 260px 1fr; gap: 12px 32px; padding: 24px 0; border-bottom: 2px solid var(--rule); }
.soon-row__when { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.soon-row__when .mono { font-size: 13px; }
.soon-row__when s { opacity: 0.55; }
.soon-row h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 30px; line-height: 0.95; text-transform: uppercase; margin: 0; }
.soon-row.is-late { background: repeating-linear-gradient(135deg, rgba(255, 138, 0, 0.08) 0 12px, transparent 12px 26px); }
@media (max-width: 760px) { .soon-row { grid-template-columns: minmax(0, 1fr); } }

.chg-index { list-style: none; margin: 0; padding: 0; border: var(--line); background: var(--card); box-shadow: var(--sh); }
.chg-index li + li { border-top: var(--line); }
.chg-row {
  width: 100%; display: grid; grid-template-columns: 118px 128px minmax(0, 1fr) 170px 28px; align-items: center; gap: 18px;
  min-height: 78px; padding: 12px 18px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.chg-row:hover, .chg-row:focus-visible { background: var(--hi); color: var(--ink); --muted: #4a4535; }
.chg-row__v { font-size: 34px; line-height: 1; }
.chg-row .chg-tag { justify-self: start; }
.chg-row__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chg-row__txt b { font-weight: 800; font-size: 16px; }
.chg-row__txt .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.chg-row__date { font-size: 12.5px; text-align: right; }
.chg-row__go { display: grid; place-items: center; transition: transform 0.15s ease; }
.chg-row:hover .chg-row__go { transform: translateX(4px); }
@media (max-width: 860px) {
  .chg-row { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "v tag date" "txt txt txt"; gap: 6px 12px; min-height: 0; padding: 12px 14px; }
  .chg-row__v { grid-area: v; font-size: 26px; }
  .chg-row .chg-tag { grid-area: tag; }
  .chg-row__txt { grid-area: txt; }
  .chg-row__date { grid-area: date; text-align: right; font-size: 11.5px; }
  .chg-row__go { display: none; }
  /* Le nowrap du bureau sert a tenir la rangee sur 78px dans la grille a
     5 colonnes. Ici la description occupe sa propre ligne pleine largeur :
     le garder coupait chaque resume au premier tiers, parfois en plein mot,
     sur la page dont c'est justement le contenu principal. */
  .chg-row__txt .muted { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

.chg-modal { position: relative; overflow: hidden; }
.chg-modal__date { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: var(--line); border-bottom: var(--line); }
.chg-modal__date b { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 26px; text-transform: uppercase; }
.chg-modal__nav { justify-content: space-between; position: relative; z-index: 1; }
.chg-modal__ghost { position: absolute; right: -6px; bottom: 48px; font-size: 130px; opacity: 0.12; pointer-events: none; }
.chg-latest__v, .next__v, .chg-row__v, .chg-modal__ghost { text-transform: none; }

/* ---------- Partenaires ----------------------------------------------- */
.door { position: relative; display: flex; flex-direction: column; gap: 16px; width: min(380px, 100%); justify-self: center; padding: 22px; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--hi); }
[data-theme="dark"] .door { border-color: var(--paper); }
.door__sign { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 2px solid var(--paper); text-align: center; }
.door__sign .display { font-size: clamp(44px, 5vw, 64px); color: var(--hi); }
.door__stamp { position: absolute; top: -18px; right: -14px; transform: rotate(9deg); background: var(--sale); color: #fff; border: 2px solid var(--ink); font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; padding: 6px 10px; }

.parcels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .parcels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .parcels { grid-template-columns: minmax(0, 1fr); } }
.parcel { display: flex; flex-direction: column; background: #d9c7a3; color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh); --fg: var(--ink); --rule: var(--ink); }
[data-theme="dark"] .parcel { box-shadow: 6px 6px 0 var(--hi); }
.parcel__head { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.parcel__body { flex: 1; display: grid; grid-template-columns: 78px 1fr; gap: 16px; align-items: start; margin: 12px; padding: 16px; background: var(--white); border: 2px solid var(--ink); }
.parcel__mark { width: 78px; height: 78px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--hi); }
.parcel__flag { font-size: 44px; line-height: 1; }
.parcel__from { font-size: 11px; margin-bottom: 6px; }
.parcel h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 26px; line-height: 0.95; text-transform: uppercase; margin: 0 0 8px; }
.parcel p { font-size: 14.5px; font-weight: 500; }
.parcel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 14px; }
.parcel__foot .barcode { flex: 1; height: 28px; max-width: 160px; }
.parcel__stamp { transform: rotate(-8deg); border: 3px solid var(--sale); color: var(--sale); font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 20px; text-transform: uppercase; padding: 2px 10px; letter-spacing: 0.04em; }

.feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); background: var(--w-anime); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh-lg); text-decoration: none; overflow: hidden; transition: transform 0.15s ease; --muted: #3a1a28; }
[data-theme="dark"] .feat { box-shadow: 9px 9px 0 var(--hi); }
.feat:hover { transform: translate(-3px, -3px); }
.feat__txt { display: flex; flex-direction: column; gap: 18px; padding: 30px 28px; }
.feat__title { font-size: clamp(64px, 8vw, 120px); line-height: 0.8; }
.feat__desc { font-weight: 600; font-size: 17px; max-width: 46ch; }
.feat__dates { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.feat__dates div { display: flex; flex-direction: column; gap: 4px; }
.feat__dates s { font-size: 34px; line-height: 1; opacity: 0.55; text-decoration-thickness: 3px; }
.feat__dates b { font-size: 56px; line-height: 0.85; }
.feat__arrow { padding-bottom: 8px; }
.feat__art { position: relative; border-left: 2px solid var(--ink); background: var(--ink); display: flex; align-items: flex-end; justify-content: center; min-height: 320px; }
.feat__art .halftone { position: absolute; inset: 0; background-image: radial-gradient(var(--w-anime) 1.4px, transparent 1.6px); opacity: 0.4; }
.feat__art img { position: relative; width: 78%; max-width: 300px; margin-bottom: -4%; }
@media (max-width: 860px) { .feat { grid-template-columns: minmax(0, 1fr); } .feat__art { border-left: 0; border-top: 2px solid var(--ink); min-height: 240px; } .feat__art img { width: 52%; } }

.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.slot { height: 120px; display: grid; place-items: center; border: 2px dashed var(--rule); color: var(--muted); }
@media (max-width: 640px) { .slots { grid-template-columns: minmax(0, 1fr); } .slot { height: 70px; } }

/* ---------- Mondes : barre propre ------------------------------------- */
.wbar { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--paper); border-bottom: 2px solid var(--ink); }
.wbar__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 62px; }
.wbar__brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; gap: 3px; }
.wbar__brand .display { font-size: 30px; }
.wbar__brand .kicker { font-size: 10px; opacity: 0.7; }
.wbar .btn { --b-bg: transparent; --b-fg: var(--paper); border-color: var(--paper); box-shadow: 3px 3px 0 var(--wc, var(--hi)); }

/* ---------- Yarnham Stream (cyan) ------------------------------------- */
.w-stream { --wc: var(--w-stream); }
.w-stream .wbar__brand b { color: var(--w-stream); font-weight: 900; }
.st-hero { background: var(--w-stream); color: var(--ink); border-bottom: 2px solid var(--ink); --fg: var(--ink); --rule: var(--ink); --card: var(--white); --line: 2px solid var(--ink); --sh: 5px 5px 0 var(--ink); --shadow-c: var(--ink); }
.st-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(44px, 6vw, 88px); }
.st-logo { font-size: clamp(76px, 12vw, 190px); line-height: 0.8; margin: 22px 0 14px; }
.st-logo span { color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.st-kind { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(24px, 2.6vw, 34px); text-transform: uppercase; }
.st-when { margin-top: 10px; font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .st-hero__in { grid-template-columns: minmax(0, 1fr); } }

.ticket { display: grid; grid-template-columns: minmax(0, 1fr) 96px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); transform: rotate(-2deg); --fg: var(--ink); }
.ticket__main { padding: 20px 22px 18px; border-right: 3px dashed var(--ink); position: relative; }
.ticket__main::before, .ticket__main::after { content: ""; position: absolute; right: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--w-stream); border: 2px solid var(--ink); }
.ticket__main::before { top: -15px; }
.ticket__main::after { bottom: -15px; }
.ticket__top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.ticket__title { font-size: clamp(38px, 4.4vw, 58px); margin: 14px 0; }
.ticket__open { font-size: 34px; color: var(--ink); background: var(--w-stream); padding: 6px 10px; }
.ticket__cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ticket__cd div { background: var(--ink); color: var(--w-stream); text-align: center; padding: 10px 4px 8px; }
.ticket__cd b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: clamp(34px, 4vw, 54px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.ticket__cd span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--paper); }
.ticket__bar { height: 14px; border: 2px solid var(--ink); margin-top: 16px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(12,12,11,.12) 9px 10px); }
.ticket__bar i { display: block; height: 100%; background: var(--ink); }
.ticket__ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; }
.ticket__stub { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 10px; }
.ticket__stubtxt { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 30px; }
.ticket__stub .barcode { width: 100%; height: 54px; }
@media (max-width: 520px) { .ticket { grid-template-columns: minmax(0, 1fr); transform: none; } .ticket__main { border-right: 0; border-bottom: 3px dashed var(--ink); } .ticket__main::before, .ticket__main::after { display: none; } .ticket__stub { flex-direction: row; } .ticket__stubtxt { writing-mode: horizontal-tb; transform: none; font-size: 26px; } .ticket__stub .barcode { width: 120px; height: 30px; } }

.st-statement { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 110px) 0; text-align: center; }
[data-theme="dark"] .st-statement { background: #000; }
.st-statement__big { font-size: clamp(40px, 6vw, 92px); color: var(--w-stream); max-width: 16ch; margin: 0 auto; }

.st-marquee { background: #000; color: var(--paper); padding: clamp(44px, 6vw, 80px) 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.st-sign { position: relative; margin: 20px auto; max-width: 900px; background: #151412; border: 4px solid var(--paper); padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 0 0 8px #151412, 0 0 0 10px var(--paper); }
.st-sign__date { font-size: clamp(110px, 20vw, 290px); line-height: 0.8; color: var(--w-stream); }
.st-bulbs { width: 100%; height: 14px; background: radial-gradient(circle, #ffe9a6 0 4px, #6b5a2a 4.5px 5px, transparent 5.5px) 0 50% / 26px 14px repeat-x; }
.st-bulbs { animation: bulbs 1.2s steps(2) infinite; }
@keyframes bulbs { 50% { background-position: 13px 50%; } }

.st-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-step { position: relative; overflow: hidden; border: var(--line); background: var(--card); padding: 18px 18px 22px; box-shadow: var(--sh); }
.st-step--now { background: var(--w-stream); color: var(--ink); --muted: #1d3b40; }
.st-step--done { opacity: 0.75; }
.st-step__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 700; }
.st-step h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; font-variation-settings: "wdth" 72; font-size: 28px; line-height: 0.95; text-transform: uppercase; margin: 0 0 10px; position: relative; }
.st-step p { position: relative; font-weight: 500; }
.st-step__n { position: absolute; right: -4px; bottom: -22px; font-size: 120px; opacity: 0.1; }
@media (max-width: 860px) { .st-steps { grid-template-columns: minmax(0, 1fr); } }
.st-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: var(--line); }
.st-fact { padding: 20px 20px 4px 0; display: flex; flex-direction: column; gap: 8px; }
.st-fact + .st-fact { padding-left: 20px; border-left: var(--line); }
.st-fact b { font-size: 40px; line-height: 0.9; }
@media (max-width: 760px) { .st-facts { grid-template-columns: minmax(0, 1fr); } .st-fact + .st-fact { padding-left: 0; border-left: 0; border-top: var(--line); } }

/* Decompte en clair : la pastille passe au rouge le jour meme. */
.st-tags { gap: 10px; align-items: center; margin-bottom: 8px; }
.st-chip { font-weight: 700; letter-spacing: 0.08em; }
.st-chip--now { background: var(--sale); color: var(--white); border-color: var(--sale); }
.st-note { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--w-stream); background: var(--card); font-size: 14.5px; max-width: 46ch; }
.st-note .kicker { font-size: 10.5px; }

.st-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .st-faq { grid-template-columns: minmax(0, 1fr); } }
.st-faq__list { border-top: var(--line); }
.st-q { border-bottom: var(--line); }
.st-q summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 22px; text-transform: uppercase; }
.st-q summary::-webkit-details-marker { display: none; }
.st-q__sign { width: 34px; height: 34px; display: grid; place-items: center; border: var(--line); flex-shrink: 0; transition: transform 0.2s ease, background 0.2s ease; }
.st-q[open] .st-q__sign { transform: rotate(45deg); background: var(--w-stream); color: var(--ink); }
.st-q p { padding: 0 2px 20px; font-size: 17px; max-width: 60ch; }
.st-close { background: var(--w-stream); color: var(--ink); padding: clamp(64px, 9vw, 120px) 0; border-top: 2px solid var(--ink); --line: 2px solid var(--ink); --sh: 5px 5px 0 var(--ink); --shadow-c: var(--ink); --card: var(--white); --fg: var(--ink); }

/* ---------- Connexion ------------------------------------------------- */
.auth { padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 8vw, 110px); }
.auth__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
@media (max-width: 900px) { .auth__grid { grid-template-columns: minmax(0, 1fr); } .auth__side { order: 2; } }
/* Sous 16 px, Safari iPhone zoome sur le champ au toucher. */
@media (max-width: 640px) { .input, .select, .textarea { font-size: 16px; } }

/* Porte fermee : on le dit dans la carte, la ou la personne allait taper. */
.auth__paused { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 11px 13px; background: var(--card); border-left: 4px solid var(--sale); font-size: 13.5px; line-height: 1.45; }
.auth__paused svg { flex-shrink: 0; margin-top: 2px; }
.auth__tab[disabled] { opacity: .55; cursor: not-allowed; }
.auth__tab[disabled] .tag { font-size: 9px; padding: 2px 5px; }

.auth__side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 30px 28px 0; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh-lg); min-height: 520px; }
[data-theme="dark"] .auth__side { border-color: var(--hi); }
.auth__side .halftone { position: absolute; inset: 0; opacity: 0.14; pointer-events: none; }
.auth__side > * { position: relative; }
.auth__sidetitle { font-size: clamp(52px, 6.4vw, 96px); line-height: 0.84; }
.auth__perks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.auth__perks li { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 2px solid var(--ink); font-weight: 700; }
.auth__sidenote { font-size: 14px; font-weight: 600; max-width: 42ch; }
.auth__mascot { width: 200px; margin: auto 0 -6px auto; }
@media (max-width: 900px) { .auth__side { min-height: 0; } .auth__mascot { width: 130px; } }

.auth__card { display: flex; flex-direction: column; background: var(--card); border: var(--line); box-shadow: var(--sh-lg); }
.auth__ticket { display: flex; justify-content: space-between; padding: 10px 18px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; border-bottom: 3px dashed var(--paper); }
[data-theme="dark"] .auth__ticket { background: var(--paper); color: var(--ink); border-bottom-color: var(--ink); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--line); }
.auth__tab { padding: 14px 10px; background: var(--bg); border: 0; cursor: pointer; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: 19px; text-transform: uppercase; color: var(--muted); }
.auth__tab + .auth__tab { border-left: var(--line); }
.auth__tab[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: inset 0 -5px 0 var(--hi); }
.auth__body { padding: 24px 24px 22px; }
.auth__title { font-size: clamp(40px, 4.6vw, 60px); margin-bottom: 20px; }
.auth__done { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.auth__done .auth__title { margin-bottom: 0; }
.auth__done > .row { margin-top: auto; }
.auth__acc dl { margin: 8px 0 0; border-top: 2px solid var(--rule); }
.auth__acc dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 2px dashed var(--rule); }
.auth__acc dt { font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.auth__acc dd { margin: 0; font-weight: 800; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.auth__mail { font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
.auth__hint { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--bg); border: 2px solid var(--rule); font-size: 14px; font-weight: 600; }
.auth__hint p { margin: 0; }
.auth__providers { display: flex; flex-direction: column; gap: 12px; }
.auth__discord { --b-bg: #5865f2; --b-fg: #fff; justify-content: flex-start; }
/* Fournisseurs à venir (Google, Apple) : visibles, grisés, avec l'autocollant BIENTÔT. */
.auth__later { position: relative; justify-content: flex-start; gap: 12px; opacity: 1 !important; pointer-events: none; }
.auth__later > :not(.tag) { opacity: 0.45; }
.auth__later .tag { position: absolute; top: -11px; right: -8px; margin: 0; transform: rotate(4deg); box-shadow: 2px 2px 0 var(--ink); }
.auth__later:nth-child(odd) .tag { transform: rotate(-3deg); }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--rule); }
.auth__form { display: flex; flex-direction: column; gap: 14px; }
.auth__input { position: relative; }
.auth__input .input[type="password"], .auth__input .input[name="password"] { padding-right: 96px; }
.auth__peek { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 2px solid var(--rule); background: var(--bg); color: var(--fg); font-family: var(--f-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.input[aria-invalid="true"] { border-color: var(--sale); box-shadow: 4px 4px 0 var(--sale); }
.auth__err { color: var(--sale); font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
.auth__alert { background: var(--sale); color: #fff; border: 2px solid var(--ink); padding: 10px 12px; font-weight: 700; font-size: 14px; }
.auth__meter { display: flex; align-items: center; gap: 12px; margin-top: -4px; }
.auth__bars { display: flex; gap: 4px; flex: 1; }
.auth__bars i { flex: 1; height: 8px; border: 2px solid var(--rule); background: transparent; }
.auth__bars i.on.s1 { background: var(--sale); }
.auth__bars i.on.s2 { background: #ff8a00; }
.auth__bars i.on.s3 { background: var(--ok); }
.auth__meter span { font-size: 12px; font-weight: 700; min-width: 80px; text-align: right; }
.auth__terms { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; cursor: pointer; }
.auth__terms input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex-shrink: 0; }
.auth__links { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.auth__switch { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--hi); text-underline-offset: 3px; cursor: pointer; color: inherit; }
.auth__fine { display: flex; gap: 8px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: var(--line); font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

/* Mot de passe oublié / nouveau mot de passe : deux écrans de plus dans la
   même carte. Ils reprennent les champs existants, on n'ajoute donc que la
   ligne d'explication, le message de réussite et la note d'aide. */
.auth__sub { margin: -10px 0 20px; font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--muted); }
.auth__ok { display: flex; gap: 9px; align-items: flex-start; background: var(--ok); color: #05210f; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 13px; font-weight: 700; font-size: 14px; line-height: 1.45; }
.auth__help { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--muted); }
.auth__card[data-mode="forgot"] .auth__body, .auth__card[data-mode="reset"] .auth__body { padding-top: 30px; }

/* =====================================================================
   Pages légales : sommaire (/conditions) et documents (/conditions/…)
   ===================================================================== */
mark.todo { display: inline-flex; align-items: center; gap: 7px; padding: 1px 8px; background: var(--bg-2); color: var(--muted); border: 1.5px dashed color-mix(in srgb, var(--rule) 45%, transparent); font-family: var(--f-mono); font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; vertical-align: 1px; }
mark.todo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff8a00; flex-shrink: 0; animation: todo-pulse 1.6s ease-in-out infinite; }
@keyframes todo-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { mark.todo::before { animation: none; } }
.lg-callout.lg-pending { border-left-color: #ff8a00; }

.lg-hero { border-bottom: var(--line); padding: clamp(28px, 4vw, 56px) 0 clamp(26px, 3.5vw, 44px); }
.lg-back { display: inline-flex; margin-bottom: 22px; }
.lg-hero__row { display: flex; gap: 18px; align-items: center; }
.lg-hero__ico { flex-shrink: 0; width: 66px; height: 66px; display: grid; place-items: center; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh); }
.lg-hero__title { font-size: clamp(36px, 5.6vw, 80px); line-height: 0.9; margin-top: 6px; text-wrap: balance; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.lg-meta__act { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lg-en { display: inline-flex; gap: 8px; align-items: center; margin: 18px 0 0; padding: 8px 12px; border: 2px dashed var(--rule); font-family: var(--f-mono); font-size: 12.5px; }

.lg-body { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 110px); }
.lg-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lg-side { position: sticky; top: calc(var(--hdr-h) + 20px); max-height: calc(100vh - var(--hdr-h) - 40px); overflow: auto; display: flex; flex-direction: column; gap: 22px; padding: 0 12px 12px 0; }
.lg-docs { display: flex; flex-direction: column; border: var(--line); background: var(--card); box-shadow: var(--sh); }
.lg-docs > .kicker { padding: 12px 14px; border-bottom: var(--line); }
.lg-docs__a { display: flex; gap: 10px; align-items: center; padding: 10px 14px; color: var(--fg); text-decoration: none; font-weight: 700; font-size: 14.5px; }
.lg-docs__a + .lg-docs__a { border-top: 1px solid color-mix(in srgb, var(--rule) 22%, transparent); }
.lg-docs__a:hover { background: var(--bg); }
.lg-docs__a[aria-current="page"] { background: var(--hi); color: var(--ink); }
.lg-docs__n { font-family: var(--f-mono); font-size: 11px; opacity: 0.6; }
.lg-toc > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lg-toc > summary::-webkit-details-marker { display: none; }
.lg-toc > summary::after { content: "+"; font-size: 16px; }
.lg-toc[open] > summary::after { content: "–"; }
.lg-toc ol { list-style: none; margin: 10px 0 0; padding: 0; }
.lg-toc a { display: flex; gap: 8px; padding: 6px 0 6px 10px; border-left: 3px solid color-mix(in srgb, var(--rule) 18%, transparent); color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.3; }
.lg-toc a span { font-family: var(--f-mono); font-size: 11px; padding-top: 1px; }
.lg-toc a:hover { color: var(--fg); }
.lg-toc a[aria-current] { border-left-color: var(--fg); color: var(--fg); font-weight: 800; }

.lg-doc { max-width: 780px; min-width: 0; }
.lg-sum { --fg: var(--ink); --rule: var(--ink); --line: 2px solid var(--ink); background: var(--hi); color: var(--ink); border: 2px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); padding: 20px 24px 18px; margin-bottom: 40px; }
[data-theme="dark"] .lg-sum { box-shadow: 9px 9px 0 var(--paper); }
.lg-sum ul { list-style: none; margin: 14px 0 0; padding: 0; }
.lg-sum li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 2px dashed rgba(12, 12, 11, 0.3); font-weight: 700; font-size: 16.5px; line-height: 1.4; }
.lg-sum li svg { flex-shrink: 0; margin-top: 3px; }
.lg-sum__note { margin: 12px 0 0; font-family: var(--f-mono); font-size: 12px; }

.lg-art { padding: 30px 0 18px; border-top: var(--line); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.lg-art__h { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 0 0 16px; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.02; text-transform: uppercase; }
.lg-art__n { flex-shrink: 0; transform: translateY(-3px); padding: 3px 7px; background: var(--fg); color: var(--bg); font-family: var(--f-mono); font-size: 12px; font-weight: 700; font-stretch: 100%; font-variation-settings: normal; letter-spacing: 0.08em; }
.lg-art__b { font-size: 16px; line-height: 1.62; }
.lg-art__b p { margin: 0 0 12px; max-width: 70ch; }
.lg-art__b ul, .lg-art__b ol { margin: 0 0 14px; padding-left: 22px; max-width: 70ch; }
.lg-art__b li { margin: 6px 0; line-height: 1.55; }
.lg-art__b a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--hi); text-underline-offset: 3px; }
.lg-art__b a:hover { background: var(--hi); color: var(--ink); }
.lg-art__b code { font-family: var(--f-mono); font-size: 12.5px; }
.lg-callout { border: var(--line); border-left-width: 8px; background: var(--card); padding: 14px 16px; margin: 12px 0 16px; font-size: 15px; max-width: 70ch; }
ul.lg-checks { list-style: none; padding-left: 0; }
.lg-checks li { position: relative; padding-left: 28px; }
.lg-checks li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 12px; height: 7px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }

.lg-id, .lg-defs { margin: 0 0 14px; border-top: var(--line); }
.lg-id > div, .lg-defs > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 2px dashed color-mix(in srgb, var(--rule) 35%, transparent); }
.lg-id dt, .lg-defs dt { font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-top: 3px; }
.lg-id dd, .lg-defs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lg-defs dd { font-weight: 500; }

.lg-table { margin: 4px 0 16px; }
.lg-table table { width: 100%; border-collapse: collapse; border: var(--line); background: var(--card); font-size: 14.5px; line-height: 1.45; }
.lg-table th { background: var(--fg); color: var(--bg); text-align: left; padding: 10px 12px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.lg-table td { padding: 12px; vertical-align: top; border-top: 1px solid color-mix(in srgb, var(--rule) 30%, transparent); }
.lg-table td + td { border-left: 1px solid color-mix(in srgb, var(--rule) 18%, transparent); }
.lg-table td code { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.lg-form { background: var(--card); border: var(--line); box-shadow: var(--sh); padding: 18px 20px; margin: 14px 0 18px; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.6; max-width: 70ch; }
.lg-form p { margin: 0 0 10px; }
.lg-form__extra { color: var(--muted); border-top: 2px dashed color-mix(in srgb, var(--rule) 35%, transparent); padding-top: 10px; margin-top: 14px !important; }

.lg-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 48px; }
.lg-pn__a { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: var(--line); background: var(--card); box-shadow: var(--sh); color: var(--fg); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.lg-pn__a:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.lg-pn__a small { display: flex; gap: 6px; align-items: center; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.lg-pn__a b { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 20px; line-height: 1.05; }
.lg-pn__a--next { align-items: flex-end; text-align: right; }

/* Sommaire */
.lg-hub__title { font-size: clamp(56px, 10vw, 150px); line-height: 0.84; margin-top: 10px; }
.lg-hub__lead { margin-top: 20px; }
.lg-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--line); background: var(--card); box-shadow: var(--sh-lg); }
.lg-promise { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-right: var(--line); border-bottom: var(--line); }
.lg-promise:nth-child(3n) { border-right: 0; }
.lg-promise:nth-last-child(-n + 3) { border-bottom: 0; }
.lg-promise svg { margin-bottom: 6px; }
.lg-promise b { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 22px; line-height: 1; }
.lg-promise span { font-size: 14.5px; color: var(--muted); }
.lg-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 34px 22px; margin-top: 60px; }
.lg-file { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 212px; padding: 28px 20px 16px; border: var(--line); background: var(--card); box-shadow: var(--sh); color: var(--fg); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.lg-file:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.lg-file__tab { position: absolute; top: -16px; left: 16px; padding: 2px 12px; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
.lg-file__ico { width: 44px; height: 44px; display: grid; place-items: center; border: var(--line); background: var(--bg); }
.lg-file__t { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: clamp(22px, 2vw, 26px); line-height: 1; }
.lg-file__d { flex: 1; font-size: 14.5px; color: var(--muted); }
.lg-file__f { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--rule) 35%, transparent); font-family: var(--f-mono); font-size: 12px; }
.lg-contact { --fg: var(--ink); --rule: var(--ink); --line: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 56px; padding: 22px 24px; background: var(--hi); color: var(--ink); border: 2px solid var(--ink); }
.lg-contact p { margin: 6px 0 0; font-weight: 700; }

@media (max-width: 900px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .lg-docs { flex-direction: row; overflow-x: auto; scrollbar-width: none; box-shadow: none; }
  .lg-docs::-webkit-scrollbar { display: none; }
  .lg-docs > .kicker { display: none; }
  .lg-docs__a { white-space: nowrap; flex-shrink: 0; }
  .lg-docs__a + .lg-docs__a { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--rule) 22%, transparent); }
  .lg-toc { border: var(--line); background: var(--card); padding: 12px 14px; }
  .lg-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-promise:nth-child(3n) { border-right: var(--line); }
  .lg-promise:nth-child(2n) { border-right: 0; }
  .lg-promise:nth-last-child(-n + 3) { border-bottom: var(--line); }
  .lg-promise:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .lg-hero__ico { width: 50px; height: 50px; }
  .lg-hero__ico svg { width: 24px; height: 24px; }
  .lg-meta__act { margin-left: 0; width: 100%; }
  .lg-pn { grid-template-columns: minmax(0, 1fr); }
  .lg-id > div, .lg-defs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lg-sum { padding: 16px 16px 14px; box-shadow: 6px 6px 0 var(--ink); }
  .lg-art__b { font-size: 15.5px; }
  /* Les tableaux deviennent des fiches : chaque cellule affiche le nom de sa colonne. */
  .lg-table table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; }
  .lg-table table { border: 0; background: none; }
  .lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lg-table tr { border: var(--line); background: var(--card); margin-bottom: 12px; }
  .lg-table td { border: 0 !important; padding: 8px 12px; }
  .lg-table td + td { border-top: 1px dashed color-mix(in srgb, var(--rule) 30%, transparent) !important; }
  .lg-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
  .lg-table td:first-child { background: var(--bg-2); }
}
@media (max-width: 480px) {
  .lg-promises { grid-template-columns: minmax(0, 1fr); }
  .lg-promise, .lg-promise:nth-child(n) { border-right: 0; border-bottom: var(--line); }
  .lg-promise:last-child { border-bottom: 0; }
}

/* Impression : le texte seul, en noir sur blanc. */
@media print {
  #top, #hdr, #mnav, #ftr, .lg-side, .lg-meta__act, .lg-pn, .lg-back, .toast, [data-copy-form] { display: none !important; }
  body, main { background: #fff !important; color: #000 !important; }
  .lg-hero, .lg-body { padding: 0 0 16px; border: 0; }
  .lg-grid { display: block; }
  .lg-hero__ico, .lg-sum, .lg-form { box-shadow: none !important; }
  .lg-art { break-inside: auto; padding: 16px 0 8px; }
  .lg-art__h { break-after: avoid; }
  .lg-art__b a { text-decoration: none; }
  mark.todo { background: none; border: 1px dashed #000; color: #000; }
  mark.todo::before { display: none; }
}

/* Accord avant paiement (Tarifs) : le bouton PayPal reste grisé tant que la case n'est pas cochée. */
.pay-consent { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 2px dashed var(--rule); font-size: 13.5px; line-height: 1.45; cursor: pointer; }
.pay-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.pay-consent a { color: inherit; text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; }
.pay-legal { margin: 0; font-size: 13.5px; }
.pay-legal a { color: inherit; text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; }
.pay-consent__err { margin: -6px 0 0; color: var(--sale); font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
a.btn[aria-disabled="true"] { opacity: 0.45; filter: grayscale(1); box-shadow: none; }

/* =====================================================================
   Yarnham Anime : un autre monde, en préparation. Page de manga : encre
   noire sur papier blanc, trame magenta. Mêmes couleurs dans les deux
   thèmes : c'est un objet (une planche), pas une section d'interface.
   ===================================================================== */
.w-anime {
  --a-paper: #fbfaf6; --a-white: #fff; --a-ink: #0c0c0b; --a-mag: var(--w-anime); --a-grey: #6b6760;
  --f-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", sans-serif;
  --fg: var(--a-ink); --bg: var(--a-paper); --card: var(--a-white); --rule: var(--a-ink); --muted: var(--a-grey);
  --line: 3px solid var(--a-ink); --shadow-c: var(--a-ink);
  background: var(--a-paper); color: var(--a-ink); min-height: 100vh;
}
.w-anime .wrap { max-width: 1280px; }

/* Barre propre au monde Anime */
.abar { position: sticky; top: 0; z-index: 50; background: var(--a-ink); color: var(--a-paper); border-bottom: 3px solid var(--a-mag); }
.abar__in { display: flex; align-items: center; gap: 20px; height: 64px; }
.abar__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.abar__mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--a-mag); color: #fff; font-family: var(--f-jp); font-weight: 900; font-size: 22px; transform: rotate(-5deg); box-shadow: 3px 3px 0 var(--a-paper); }
.abar__name { display: flex; flex-wrap: wrap; column-gap: 7px; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 24px; line-height: 0.95; color: var(--a-mag); }
.abar__name b { color: var(--a-paper); font-weight: 900; }
.abar__name small { font-family: var(--f-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); margin-top: 3px; font-stretch: 100%; font-variation-settings: normal; }
.abar__name small { flex-basis: 100%; }
.abar__nav { display: flex; gap: 6px; margin-left: auto; }
.abar__item { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1.5px dashed rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.55); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; cursor: not-allowed; }
.abar__item small { background: var(--a-mag); color: #fff; padding: 1px 5px; font-size: 10px; }
.abar__exit { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 2px solid var(--a-paper); color: var(--a-paper); text-decoration: none; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; text-transform: uppercase; font-size: 14.5px; box-shadow: 3px 3px 0 var(--a-mag); transition: transform 0.12s, box-shadow 0.12s; }
.abar__exit:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--a-mag); }
@media (max-width: 860px) { .abar__nav { display: none; } .abar__exit { margin-left: auto; } }

/* Cases de manga */
.koma { position: relative; overflow: hidden; min-width: 0; background: var(--a-white); border: 3px solid var(--a-ink); }
.an-speed { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-conic-gradient(from 3deg at 50% 76%, var(--a-ink) 0 0.9deg, transparent 0.9deg 5.5deg),
    repeating-conic-gradient(from 0deg at 50% 76%, var(--a-ink) 0 0.45deg, transparent 0.45deg 3.1deg);
  -webkit-mask-image: radial-gradient(ellipse 52% 40% at 50% 76%, transparent 42%, #000 86%);
  mask-image: radial-gradient(ellipse 52% 40% at 50% 76%, transparent 42%, #000 86%); }
.an-tone { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, var(--a-mag) 1.6px, transparent 1.9px) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(115deg, transparent 25%, #000 100%); mask-image: linear-gradient(115deg, transparent 25%, #000 100%); opacity: 0.9; }

.an-hero { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); border-bottom: var(--line); }
.an-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.an-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "big title" "big date"; gap: 12px; }
.koma--big { grid-area: big; min-height: 540px; display: flex; align-items: flex-end; justify-content: center; }
.an-mascot { position: relative; z-index: 1; width: min(62%, 218px); margin-bottom: -4px; filter: drop-shadow(7px 5px 0 var(--a-mag)); }
.an-bubble { position: absolute; z-index: 2; top: 24px; left: 22px; right: 22%; margin: 0; padding: 24px 26px; background: var(--a-white); border: 3px solid var(--a-ink); border-radius: 50%; font-weight: 800; font-size: 17px; line-height: 1.3; text-align: center; }
.an-bubble::before, .an-bubble::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 72% 100%); }
.an-bubble::before { width: 36px; height: 34px; right: 26%; bottom: -31px; background: var(--a-ink); }
.an-bubble::after { width: 26px; height: 26px; right: calc(26% + 5px); bottom: -24px; background: var(--a-white); }
.koma--title { grid-area: title; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 26px 24px; }
.an-stamp { align-self: flex-start; display: inline-block; padding: 5px 12px; border: 3px solid var(--a-mag); background: var(--a-white); color: var(--a-mag); font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; transform: rotate(-4deg); }
.an-stamp--ink { border-color: var(--a-ink); color: var(--a-ink); transform: rotate(-2deg); }
.an-logo { display: flex; flex-direction: column; margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(58px, 7vw, 108px); line-height: 0.82; }
.an-logo b { color: var(--a-mag); font-weight: 900; text-shadow: 4px 4px 0 var(--a-ink); }
.an-lead { margin: 0; font-size: 16.5px; line-height: 1.5; max-width: 44ch; }
.an-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.an-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 3px solid var(--a-ink); background: var(--a-white); color: var(--a-ink); text-decoration: none; cursor: pointer; font-family: var(--f-display); font-weight: 800; font-stretch: 78%; font-variation-settings: "wdth" 78; text-transform: uppercase; font-size: 16px; box-shadow: 4px 4px 0 var(--a-ink); transition: transform 0.12s, box-shadow 0.12s; }
.an-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--a-ink); }
.an-btn--mag { background: var(--a-mag); color: #fff; }
.koma--date { grid-area: date; display: flex; flex-direction: column; justify-content: center; min-height: 210px; padding: 22px 26px; background: var(--a-ink); color: #fff; border-color: var(--a-ink); }
.koma--date > :not(.an-tone) { position: relative; }
.an-date__jp { font-family: var(--f-jp); font-weight: 900; font-size: 22px; letter-spacing: 0.3em; color: var(--a-mag); }
.an-date__y { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: clamp(84px, 10vw, 150px); line-height: 0.8; }
.an-date__sub { margin-top: 12px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; opacity: 0.85; }

/* Le panneau 準備中 (noren) */
.noren { margin: 0; display: flex; flex-direction: column; align-items: center; }
.noren__rod { width: 100%; height: 14px; background: #8a5a2e; border: 3px solid var(--a-ink); border-radius: 8px; position: relative; z-index: 2; }
.noren__cloth { position: relative; width: 88%; margin-top: -3px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 7px; transform-origin: 50% 0; animation: noren-sway 7s ease-in-out infinite; }
.noren__cloth::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 62px; background: var(--a-mag); border: 3px solid var(--a-ink); border-bottom: 0; }
.noren__cloth span { position: relative; height: 330px; display: flex; align-items: center; justify-content: center; padding-top: 40px; background: var(--a-mag); color: #fff; border: 3px solid var(--a-ink); border-top: 0; font-family: var(--f-jp); font-weight: 900; font-size: 44px; text-shadow: 3px 3px 0 var(--a-ink); }
.noren figcaption { margin-top: 14px; max-width: 24ch; text-align: center; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--a-grey); }
@keyframes noren-sway { 0%, 100% { transform: rotate(-0.7deg); } 50% { transform: rotate(0.7deg); } }
@media (prefers-reduced-motion: reduce) { .noren__cloth { animation: none; } }

/* Sections */
.an-sec { padding: clamp(48px, 7vw, 92px) 0; border-bottom: var(--line); }
.an-sec--tone { background-color: var(--a-white); background-image: radial-gradient(rgba(12, 12, 11, 0.08) 1px, transparent 1.3px); background-size: 10px 10px; }
.an-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 30px; }
.an-kicker { flex-basis: 100%; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--a-mag); }
.an-h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(42px, 5.6vw, 80px); line-height: 0.86; }
.an-head .an-stamp { align-self: center; }

.an-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.an-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 260px; padding: 20px 18px 18px; background: var(--a-white); border: 3px solid var(--a-ink); }
.an-stage > :not(.an-stage__jp) { position: relative; }
.an-stage__jp { position: absolute; top: 10px; right: 10px; font-family: var(--f-jp); font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px var(--a-ink); opacity: 0.28; }
.an-stage--now .an-stage__jp, .an-stage--year .an-stage__jp { -webkit-text-stroke-color: var(--a-mag); opacity: 0.55; }
.an-stage__n { font-family: var(--f-mono); font-size: 12px; font-weight: 700; }
.an-stage__t { margin-top: 30px; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 28px; line-height: 0.95; }
.an-stage__d { flex: 1; font-size: 15px; line-height: 1.45; }
.an-stage__s { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 3px solid var(--a-ink); background: var(--a-white); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; transform: rotate(-3deg); }
.an-stage--done .an-stage__s { background: var(--a-ink); color: #fff; }
.an-stage--now { border-color: var(--a-mag); box-shadow: 6px 6px 0 var(--a-mag); }
.an-stage--now .an-stage__s { border-color: var(--a-mag); color: var(--a-mag); }
.an-stage--year .an-stage__s { background: var(--a-mag); color: #fff; }
.an-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--a-mag); animation: todo-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .an-pulse { animation: none; } }

.an-plan { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.an-intent { display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 22px; grid-column: span 2; }
.an-intent:nth-child(1) { grid-column: span 4; }
.an-intent:nth-child(6) { grid-column: span 6; min-height: 0; }
.an-intent:nth-child(1)::after, .an-intent:nth-child(6)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, var(--a-mag) 1.5px, transparent 1.8px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0, transparent 55%); mask-image: radial-gradient(circle at 100% 100%, #000 0, transparent 55%); }
.an-intent > * { position: relative; z-index: 1; }
.an-intent__n { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 64px; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px var(--a-mag); }
.an-intent__t { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 24px; line-height: 1; }
.an-intent__d { font-size: 15px; line-height: 1.45; max-width: 52ch; }

/* Le storyboard (絵コンテ) */
.an-board { border: 3px solid var(--a-ink); background: var(--a-white); }
.an-board__row { display: grid; grid-template-columns: 70px minmax(0, 280px) minmax(0, 1fr) 130px; border-top: 2px solid var(--a-ink); }
.an-board__row > span + span { border-left: 2px solid var(--a-ink); }
.an-board__row--head { border-top: 0; background: var(--a-ink); color: #fff; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.an-board__row--head > span { padding: 9px 14px; border-left-color: rgba(255, 255, 255, 0.3) !important; }
.an-board__cut { display: flex; justify-content: center; padding-top: 14px; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 36px; line-height: 1; }
.an-board__pic { padding: 12px; }
.an-board__pic svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 2px solid var(--a-ink); background: var(--a-white); fill: none; stroke: #8d8980; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.an-board__pic .sk-hi { stroke: var(--a-mag); stroke-width: 2.2; }
.an-board__pic circle.sk-hi { fill: var(--a-mag); }
.an-board__txt { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; font-size: 15px; line-height: 1.45; }
.an-board__txt b { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 21px; line-height: 1; }
.an-board__state { display: flex; align-items: center; justify-content: center; padding: 10px; }
.an-board__state em { font-style: normal; padding: 4px 8px; border: 2px dashed var(--a-grey); color: var(--a-grey); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; transform: rotate(-5deg); }
.an-note { margin: 14px 0 0; font-family: var(--f-mono); font-size: 12px; color: var(--a-grey); }

/* FAQ */
.an-faqwrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: start; }
.an-faqwrap .an-head { margin: 0; }
.an-q { margin-bottom: 12px; background: var(--a-white); border: 3px solid var(--a-ink); }
.an-q summary { display: flex; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 20px; line-height: 1.1; }
.an-q summary::-webkit-details-marker { display: none; }
.an-q summary::after { content: "+"; font-family: var(--f-mono); color: var(--a-mag); }
.an-q[open] summary { background: var(--a-ink); color: #fff; }
.an-q[open] summary::after { content: "–"; }
.an-q p { margin: 0; padding: 14px 18px 18px; font-size: 15.5px; line-height: 1.5; }

/* Fin de page */
.an-close { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 130px) 0; background: var(--a-white); text-align: center; }
.an-speed--close { background:
    repeating-conic-gradient(from 3deg at 50% 50%, var(--a-ink) 0 0.9deg, transparent 0.9deg 5.5deg),
    repeating-conic-gradient(from 0deg at 50% 50%, var(--a-ink) 0 0.45deg, transparent 0.45deg 3.1deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, transparent 45%, #000 90%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, transparent 45%, #000 90%); opacity: 0.55; }
.an-close__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.an-close__t { margin: 0; max-width: 14ch; padding: 6px 14px; background: var(--a-white); font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase; font-size: clamp(46px, 6.4vw, 96px); line-height: 0.86; }
.an-close__in > p { margin: 0; max-width: 52ch; padding: 4px 10px; background: var(--a-white); font-size: 17px; line-height: 1.5; }
.an-close__in > p.an-close__note { font-family: var(--f-mono); font-size: 12px; color: var(--a-grey); }
.an-close .an-ctas { justify-content: center; margin-top: 8px; }

@media (max-width: 980px) {
  .an-hero__in { grid-template-columns: minmax(0, 1fr); }
  .noren { order: -1; width: min(250px, 70%); margin: 0 auto; }
  .noren__cloth span { height: 170px; font-size: 34px; padding-top: 36px; }
  .noren__cloth::before { height: 52px; }
  .an-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-intent, .an-intent:nth-child(n) { grid-column: span 1; }
  .an-intent:nth-child(1), .an-intent:nth-child(6) { grid-column: span 2; }
  .an-faqwrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 700px) {
  .an-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "big" "date"; }
  .koma--big { min-height: 400px; }
  .an-bubble { right: 14px; left: 14px; font-size: 15.5px; padding: 18px 20px; }
  .an-board__row { grid-template-columns: 52px minmax(0, 1fr); }
  .an-board__row--head, .an-board__state { display: none; }
  .an-board__txt { grid-column: 1 / -1; border-left: 0 !important; border-top: 2px dashed var(--a-ink); }
}
@media (max-width: 520px) {
  .an-stages, .an-plan { grid-template-columns: minmax(0, 1fr); }
  .an-intent:nth-child(1), .an-intent:nth-child(6) { grid-column: span 1; }
  .an-stage { min-height: 0; }
  .koma--title { padding: 20px 18px; }
}

/* Comptes de test de l'aperçu local (jamais affichés sur yarnham.com) */
.dev-acc { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 16px; text-align: left; }
.dev-acc span { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.7; }

/* =====================================================================
   Mon compte et panneau staff
   ===================================================================== */
.field > .fl { font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.btn--sale { --b-bg: var(--sale); --b-fg: #fff; border-color: var(--ink); }

.pro { padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 5vw, 64px); }
.pro__in { display: flex; flex-direction: column; gap: 22px; }
.pro__card { position: relative; overflow: hidden; display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; padding: clamp(20px, 3vw, 30px); background: var(--hi); color: var(--ink); --fg: var(--ink); --rule: var(--ink); --card: var(--white); --line: 2px solid var(--ink); border: 2px solid var(--ink); box-shadow: var(--sh-lg); }
.pro__card > * { position: relative; }
.pro__av { width: 120px; height: 120px; object-fit: cover; border: 3px solid var(--ink); background: var(--ink); }
.pro__id { flex: 1; min-width: 220px; }
.pro__name { font-size: clamp(38px, 5vw, 68px); line-height: 0.9; margin: 4px 0 10px; }
.pro__roles { gap: 8px; }
.pro__since { margin: 10px 0 0; font-size: 12.5px; opacity: 0.8; }
.pro__acts { display: flex; flex-direction: column; gap: 10px; }
.pro__stats { border: var(--line); background: var(--card); box-shadow: var(--sh); padding: 20px; }
.pro__grid { margin-top: 14px; gap: 12px; }
.pro__stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: var(--line); background: var(--bg); }
.pro__stat b { font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 34px; line-height: 1; }
.pro__stat span { font-size: 13px; color: var(--muted); }
.pro__danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border: 2px dashed var(--sale); }
.pro__danger b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 20px; }
.pro__danger small { color: var(--muted); font-size: 13.5px; }

/* Le panneau reste sur le fond clair du site : dans une section encre, les
   interrupteurs et les champs héritent de couleurs qui se confondent. */
.sec--staff { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 8vw, 110px); border-top: 6px solid var(--ink); background: var(--bg-2); }
.adm__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.adm__title { font-size: clamp(36px, 4.6vw, 62px); line-height: 0.9; margin: 6px 0 8px; }
.adm__ro { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 14px; border: 2px dashed var(--rule); font-family: var(--f-mono); font-size: 12.5px; max-width: 46ch; }
.adm__tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border: var(--line); background: var(--card); margin-bottom: 20px; }
.adm__tabs::-webkit-scrollbar { display: none; }
.adm__tab { flex: 1; min-width: 132px; padding: 13px 14px; background: transparent; border: 0; border-right: var(--line); color: var(--fg); cursor: pointer; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 16px; white-space: nowrap; }
.adm__tab:last-child { border-right: 0; }
.adm__tab:hover { background: var(--bg); }
.adm__tab[aria-current="page"] { background: var(--hi); color: var(--ink); }
.adm__tabbody { display: flex; flex-direction: column; gap: 18px; }
.adm__sec { border: var(--line); background: var(--card); box-shadow: var(--sh); padding: 20px; }
.adm__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: var(--line); }
.adm__sec > .adm__body { display: flex; flex-direction: column; gap: 14px; }
.adm__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 2px dashed color-mix(in srgb, var(--rule) 35%, transparent); }
.adm__state { font-family: var(--f-mono); font-size: 12px; color: var(--ok); }
.adm__state.is-bad { color: var(--sale); }
.adm__hint { margin: 0; font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
.adm__note { margin: 0 0 14px; padding: 10px 12px; border-left: 6px solid var(--sale); background: var(--bg); font-size: 14px; }
/* Meme bloc, mais pour un avertissement qui n'est pas une alerte : « ce
   bouton ne coupe pas le bot tout seul ». Jaune plutot que rouge, et un
   pictogramme aligne sur la premiere ligne. */
.adm__note--warn { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; border-left-color: var(--hi); font-size: 13px; line-height: 1.55; }
.adm__note--warn svg { flex-shrink: 0; margin-top: 2px; }
/* L'accuse de reception du bot : gris tant qu'il n'a pas confirme, vert des
   qu'il fait vraiment ce qu'on lui demande. La difference entre « envoye »
   et « applique » doit se voir sans lire. */
.adm__ack { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 11px; background: var(--bg); border-left: 5px solid var(--muted); font-family: var(--f-mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
.adm__ack svg { flex-shrink: 0; margin-top: 1px; }
.adm__ack.is-ok { border-left-color: var(--ok); color: var(--fg); }
.adm__ack.is-ok svg { color: var(--ok); }
.adm__hr { border: 0; border-top: 2px dashed color-mix(in srgb, var(--rule) 35%, transparent); margin: 4px 0; }
.adm__sws { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.adm-sw { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: var(--line); background: var(--bg); }
.adm-sw__txt b { display: block; font-weight: 800; font-size: 15px; }
.adm-sw__txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.adm__comps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.adm__comp { padding: 12px 14px; border: var(--line); background: var(--bg); }
.adm__comp b { display: block; margin-bottom: 8px; font-size: 14.5px; }
/* File de commandes du bot, dans le panneau staff. */
.adm-cmd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-cmd__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 11px; border: 1.5px solid var(--rule); background: var(--bg); }
.adm-cmd__row code { font-family: var(--f-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.adm-cmd__meta { margin-left: auto; font-size: 11px; opacity: .65; }
.adm-cmd__row .tag { font-size: 9.5px; padding: 3px 6px; }

/* Reglage des gammes : une marque par bloc, une gamme par ligne. Le liseré
   de gauche porte l'etat, pour lire quarante gammes d'un coup d'oeil au lieu
   de quarante menus. */
.adm-lines { display: grid; gap: 14px; }
.adm-lines__brand { padding: 12px 13px; border: 2px solid var(--rule); background: var(--bg); }
.adm-lines__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.adm-lines__head b { font-size: 19px; text-transform: uppercase; letter-spacing: -0.01em; }
.adm-lines__bulk { width: auto; max-width: 210px; padding: 6px 9px; font-size: 12px; }
.adm-lines__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.adm-lines__row { display: flex; align-items: center; gap: 10px; padding: 6px 9px 6px 11px; background: var(--card); border-left: 5px solid var(--rule); }
.adm-lines__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
.adm-lines__row .select { flex-shrink: 0; width: 136px; padding: 6px 8px; font-size: 12px; }
.adm-lines__row[data-ln-state="live"] { border-left-color: var(--ok); }
.adm-lines__row[data-ln-state="soon"] { border-left-color: var(--hi); }
.adm-lines__row[data-ln-state="bug"] { border-left-color: var(--sale); }
.adm-lines__row[data-ln-state="maint"] { border-left-color: #ff8a00; }
.adm-lines__row[data-ln-state="off"] { border-left-color: var(--muted); opacity: 0.6; }
@media (max-width: 560px) {
  .adm-lines__head { flex-direction: column; align-items: stretch; }
  .adm-lines__bulk { max-width: none; }
  .adm-lines__row { flex-wrap: wrap; }
  .adm-lines__row .select { width: 100%; }
}
.adm-inc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 12px; border: var(--line); background: var(--bg); }
.adm-inc__x { align-self: flex-start; }
.adm__ready { display: flex; flex-wrap: wrap; gap: 8px; }
.adm__chk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: var(--line); background: var(--bg); font-family: var(--f-mono); font-size: 13px; cursor: pointer; }
.adm__chk input { width: 18px; height: 18px; accent-color: var(--hi); }
.adm__sub { margin: 20px 0 10px; }
.adm-table { display: flex; flex-direction: column; border: var(--line); }
.adm-table__r { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px auto; gap: 12px; align-items: center; padding: 10px 12px; }
.adm-table__r + .adm-table__r { border-top: 1px solid color-mix(in srgb, var(--rule) 30%, transparent); }
.adm-table__r b { display: block; font-size: 14.5px; }
.adm-table__r small { display: block; font-size: 11.5px; color: var(--muted); }
.adm-table__a { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.adm__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.adm__kpis > div { padding: 14px 16px; border: var(--line); background: var(--bg); }
.adm__kpis b { display: block; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; font-size: 30px; line-height: 1; }
.adm__kpis span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 760px) {
  .pro__acts { width: 100%; }
  .pro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm__tab { min-width: 118px; font-size: 15px; }
  .adm-table__r { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .adm-table__a { justify-content: flex-start; }
  .adm__kpis { grid-template-columns: minmax(0, 1fr); }
}

/* Provenance des chiffres du bot (relevé automatique ou saisie) */
.bot-report { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.bot-report--off { color: var(--sale); }
.adm__kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Bandeau « refonte du site en cours » */
.ann--rebuild { background: var(--violet); color: #fff; }
/* Barre de sortie de version : verte avant l'heure (un compte a rebours,
   c'est une bonne nouvelle qui approche), jaune une fois en ligne. */
.ann--rel { background: var(--ok); color: var(--ink); }
.ann--rel .tag { border-color: var(--ink); }
.ann--rebuild .tag { background: #fff; color: var(--violet); border-color: #fff; }

/* =====================================================================
   L'équipe : un badge par personne, groupés par rôle
   ===================================================================== */
.team { display: flex; flex-direction: column; gap: 40px; }
.team__gh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.team__gh i { flex: 1; height: 0; border-top: var(--line); }
/* Trois modérateurs, une seule phrase : elle est dite ici, pas recopiée. */
.team__shared { margin: -4px 0 16px; max-width: 64ch; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.team__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr)); gap: 16px; }
.team__cards--lead { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px; }

/* Le badge d'équipe. La fondation le porte en jaune, le reste en sobre. */
.pass { display: flex; flex-direction: column; background: var(--card); border: var(--line); box-shadow: var(--sh); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pass:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.pass__band { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: var(--line); background: var(--bg); }
.pass--lead .pass__band { background: var(--hi); color: var(--ink); }
.pass__mono { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 2px solid currentColor; font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: 26px; line-height: 1; }
.pass--lead .pass__mono { width: 54px; height: 54px; font-size: 32px; background: var(--ink); color: var(--hi); border-color: var(--ink); }
.pass__id { flex: 1; min-width: 0; }
.pass__name { margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-variation-settings: "wdth" 70; text-transform: uppercase; font-size: 22px; line-height: 1; overflow-wrap: anywhere; }
.pass--lead .pass__name { font-size: 28px; }
.pass__role { display: block; margin-top: 5px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pass__no { font-size: 11px; font-weight: 700; opacity: 0.5; }
.pass__bio { margin: 0; padding: 16px 16px 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); flex: 1; }
.pass__foot { margin-top: auto; }
.pass__foot .barcode { display: block; height: 26px; margin: 16px 16px 12px; opacity: 0.5; }
.pass__link { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-top: var(--line); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--fg); }
.pass__link:hover { background: var(--hi); color: var(--ink); }
.pass__link svg:last-child { margin-left: auto; }
.team-card { max-width: 420px; margin-left: auto; }
@media (max-width: 520px) { .team__cards { grid-template-columns: minmax(0, 1fr); } }
.adm__ro { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px; border: 2px dashed var(--rule); max-width: 52ch; }
.adm__ro p { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; font-family: var(--f-mono); font-size: 12.5px; line-height: 1.5; }
.adm__ro-id code { font-size: 12.5px; padding: 2px 6px; background: var(--bg); border: 1px solid var(--rule); }

/* =====================================================================
   Écran « refonte du site en cours » : un chantier de peinture
   ===================================================================== */
.lock--rebuild { background: var(--ink); color: var(--paper); }
.rb__band { position: relative; flex-shrink: 0; height: clamp(80px, 12vh, 150px); background: var(--hi); }
.rb__drip { position: absolute; top: 100%; width: 16px; height: var(--h, 40px); background: var(--hi); border-radius: 0 0 12px 12px; transform-origin: 50% 0; animation: rb-drip 9s var(--d, 0s) ease-in-out infinite alternate; }
.rb__drip::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 18px; height: 18px; margin-left: -9px; background: var(--hi); border-radius: 50%; }
@keyframes rb-drip { from { transform: scaleY(0.8); } to { transform: scaleY(1.08); } }
.rb__roller { position: absolute; right: clamp(14px, 7vw, 110px); bottom: -40px; width: clamp(104px, 13vw, 168px); height: auto; }
.rb__in { position: relative; z-index: 2; }
.rb__title { font-size: clamp(44px, 7.6vw, 116px); line-height: 0.86; }
.rb__lead { max-width: 54ch; opacity: 0.88; }
.rb__cta { margin-top: 6px; }
.rb__wet { position: absolute; bottom: -10px; right: 0; transform: rotate(-7deg); padding: 8px 16px; background: var(--sale); color: #fff; border: 3px solid var(--paper); box-shadow: 5px 5px 0 var(--ink); font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.rb__floor { position: relative; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; height: clamp(120px, 20vh, 210px); padding: 0 clamp(16px, 7vw, 110px); }
.rb__floor::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%; border-top: 2px dashed rgba(238, 235, 227, 0.28); background: repeating-linear-gradient(-45deg, rgba(238, 235, 227, 0.06) 0 14px, transparent 14px 28px); }
.rb__bucket, .rb__mascot { position: relative; display: block; }
.rb__bucket { width: clamp(104px, 13vw, 170px); height: auto; }
.rb__mascot { width: clamp(86px, 11vw, 140px); height: auto; }
@media (prefers-reduced-motion: reduce) { .rb__drip { animation: none; } }
@media (max-width: 640px) {
  .rb__roller { right: 10px; bottom: -18px; width: 78px; }
  .rb__wet { bottom: -4px; right: 10px; transform: rotate(-5deg); font-size: 11px; padding: 6px 12px; }
  .rb__floor { padding: 0 16px; }
  .lock--rebuild .lock__in { padding: 40px var(--gut) 24px; }
}

/* Fenêtre de paiement PayPal */
.pay__receipt { box-shadow: none; }
.pay__buttons { position: relative; min-height: 56px; }
.pay__buttons.is-locked { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
.pay__note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }
.pay-consent__err.is-ok { color: var(--sale); }
.pay__ok { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto; background: var(--ok); color: #fff; border: 3px solid var(--ink); box-shadow: var(--sh); }

/* Témoignages (accueil) — affichés seulement si le panneau en contient */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.quote { position: relative; margin: 0; padding: 26px 22px 20px; border: var(--line); background: var(--card); box-shadow: var(--sh); }
.quote__mark { position: absolute; top: -18px; left: 16px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--hi); color: var(--ink); border: var(--line); font-family: var(--f-display); font-size: 40px; line-height: 1; padding-top: 14px; }
.quote blockquote { margin: 10px 0 16px; font-size: 16.5px; line-height: 1.55; }
.quote figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 2px dashed color-mix(in srgb, var(--rule) 35%, transparent); }
.quote figcaption b { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-variation-settings: "wdth" 75; text-transform: uppercase; font-size: 18px; }


/* =====================================================================
   SNIPE — DA « poste de veille »
   ---------------------------------------------------------------------
   Tout le reste du site est du papier : affiches, tickets, autocollants,
   ombres dures. Snipe est le seul endroit ou l'on regarde un INSTRUMENT en
   marche, alors il parle une autre langue :

     - le fond est sombre quelle que soit la preference du visiteur, comme
       un ecran de veille — et les photos d'annonces y ressortent mieux ;
     - une trame de reticule tres faible tient lieu de papier millimetre ;
     - le jaune de chantier cede la place au citron acide, couleur de
       signal, reservee a cette section ;
     - plus d'ombres portees : des cadres au trait fin, qui s'allument au
       survol. Une ombre dure, c'est un objet pose ; un trait qui s'allume,
       c'est un appareil qui repond.

   Tout tient dans un ilot de jetons pose sur .snw : les composants deja
   ecrits (cartes, etiquettes, boutons, champs) se re-habillent tout seuls
   en entrant dedans, sans une regle de plus.
   ===================================================================== */
.snw {
  --sn: #c8ff00;
  --bg: #0b0d0c;
  --bg-2: #101312;
  --fg: #e9ede7;
  --muted: #8a9287;
  --card: #121614;
  --rule: #2b312c;
  --line: 1px solid var(--rule);
  --shadow-c: transparent;
  --sh: none;
  --sh-lg: none;
  --hi: #c8ff00;
  --on-hi: #0b0d0c;
  color-scheme: dark;
  position: relative;
  background: var(--bg);
  color: var(--fg);
}
/* La trame : assez faible pour ne pas se lire, assez presente pour qu'on
   sente une surface graduee sous les annonces. */
.snw::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(200, 255, 0, .045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(200, 255, 0, .045) 0 1px, transparent 1px 42px);
}
.snw > * { position: relative; z-index: 1; }

/* ---------- La barre d'etat : le seul dispositif beta ------------------ */
/* Collee sous l'en-tete du site, elle ne quitte jamais l'ecran : c'est elle
   qui dit « beta » en permanence, ce que faisaient huit objets avant elle. */
.snw-bar { position: sticky; top: var(--hdr-h); z-index: 30; background: #0b0d0c; border-bottom: 1px solid var(--sn); }
.snw-bar__in { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 9px 0; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.snw-bar__id { display: inline-flex; align-items: center; gap: 7px; color: var(--sn); }
.snw-bar__st { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.snw-bar__st.is-live { color: var(--fg); }
.snw-bar__n, .snw-bar__ago { color: var(--muted); }
.snw-bar__n b { color: var(--fg); }
.snw-bar__link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--sn); text-decoration: none; border-bottom: 1px solid transparent; }
.snw-bar__link:hover { border-bottom-color: var(--sn); }

/* ---------- Les deux respirations de la page --------------------------- */
.snw-hero { padding: clamp(26px, 4.5vw, 54px) 0 clamp(22px, 3.5vw, 40px); }
.snw-hero__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: end; }
.snw-sec { padding: 0 0 clamp(34px, 5vw, 60px); }
.snw-sec--say { padding-top: clamp(24px, 4vw, 44px); border-top: 1px solid var(--rule); }
.snw-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 26px; font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--muted); max-width: 74ch; }
.snw-notice svg { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 920px) { .snw-hero__in { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- Ce que l'ilot change aux composants deja ecrits ------------ */
/* Les cartes perdent leur ombre portee et gagnent un cadre qui s'allume :
   c'est la difference entre un objet pose sur une table et un appareil qui
   repond quand on s'en approche. */
.snw .snipe-card { border: 1px solid var(--rule); transition: border-color .12s ease, box-shadow .12s ease; }
.snw .snipe-card:hover { border-color: var(--sn); box-shadow: 0 0 0 1px var(--sn), 0 14px 34px rgba(0, 0, 0, .55); }
.snw .snipe-card__ph { background: #0e120f; }
/* Le prix reste un autocollant : c'est le seul objet physique qu'on garde,
   parce qu'un prix se lit comme une etiquette, pas comme une mesure. */
.snw .snipe-card__price { background: var(--sn); color: #0b0d0c; border: 1px solid #0b0d0c; box-shadow: 2px 2px 0 rgba(0, 0, 0, .6); }
.snw .snipe-card__beta { background: rgba(11, 13, 12, .82); color: var(--sn); border: 1px solid var(--sn); }
.snw .brandcard { border: 1px solid var(--rule); }
.snw .brandcard:hover { border-color: var(--sn); }

/* Le voile pose sur les lettres-photos suit la couleur de la section : jaune
   de chantier partout, citron dans le poste de veille. Une seule variable,
   deux mondes. */
:root { --veil: rgba(255, 230, 0, .40); }
.snw { --veil: rgba(200, 255, 0, .38); }

/* ---------- Le cadran : ce que la barre d'etat ne dit pas -------------- */
/* Le panneau de droite ne repete plus l'etat, le total ni l'heure de la
   derniere annonce — la barre les porte en permanence. Il ne garde que la
   repartition (pays, ou marques sur l'accueil) et ce qui est charge. */
.snw-scope { border: 1px solid var(--rule); background: var(--card); }
.snw-scope__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.snw-scope__head .kicker { color: var(--sn); }
.snw-scope__load { font-size: 11px; color: var(--muted); }
.snw-scope__load b { color: var(--fg); }
.snw-scope__list { margin: 0; padding: 6px 0; list-style: none; }
.snw-scope__list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; }
.snw-scope__list li + li { border-top: 1px dashed var(--rule); }
.snw-scope__list b { color: var(--sn); font-size: 12.5px; }
.snw-scope__empty { padding: 14px; margin: 0; font-size: 12px; color: var(--muted); }

/* La barre de commande devient le tableau de bord du flux : meme trait fin
   que le reste de la section, plus d'ombre portee. */
.snw .snipe-ctl { border: 1px solid var(--rule); background: var(--card); box-shadow: none; }
.snw .snipe-ctl__search input { background: var(--bg); }
.snw .subcat, .snw .subcat__lines { border-color: var(--rule); }
.snw .subcat { background: var(--card); box-shadow: none; }

/* Le bandeau « Acheter — bientot disponible » gardait le papier du theme
   clair : gris pale sur fond sombre, 2,41 de contraste (mesure), illisible.
   Dans le poste de veille il devient un cartouche eteint, mais lisible :
   6,1 mesures apres coup. Il reste barre, il reste inactif — il ne doit pas
   avoir l'air d'un bouton qui marche. */
.snw .snipe-card__buy { background: #161a17; color: #9fa89c; border-top: 1px solid var(--rule); }
.snw .snipe-card__soon { border-color: #4a534a; color: #c8d0c4; }

/* L'affiche de la marque vedette etait en encre (#0c0c0b) sur un fond de
   section a #0b0d0c : deux noirs a une unite l'un de l'autre, le bloc n'avait
   plus de bord. Dans le poste de veille elle devient un panneau legerement
   releve, cercle de citron — l'objet qu'on remarque en premier. */
.snw .fbrand { background: #131715; border: 1px solid var(--sn); box-shadow: none; }
.snw .fbrand__band { background: var(--sn); color: #0b0d0c; border-top: 1px solid var(--sn); }
.snw .fbrand__stamp { background: var(--sn); color: #0b0d0c; border-color: #0b0d0c; }
.snw .fbrand__n b, .snw .fbrand__kick { color: var(--sn); }
.snw .fbrand:hover { background: #171c19; }

/* Meme piege que l'affiche : la bande « Beta 2 » est en encre, et dans le
   poste de veille elle se posait sur un fond presque identique. Elle devient
   un cartouche cercle de citron, comme l'affiche. */
.snw .bench__next { background: #131715; border: 1px solid var(--sn); box-shadow: none; }
.snw .bench__nextstage, .snw .bench__nextid .kicker { color: var(--sn); }
.snw .bench__nextwhen { background: var(--sn); color: #0b0d0c; border-color: #0b0d0c; }
.snw .bench__nextlist svg { color: var(--sn); }
/* Le banc garde sa trame de papier millimetre, mais en creux : sur fond
   sombre, un quadrillage clair a pleine force raye le texte. */
.snw .bench { background-color: #121614; }
.snw .bug { background: #0f1211; }

/* ---------- Le repere de prix ------------------------------------------ */
/* Une pastille a cote du prix, et rien d'autre : l'ecart se lit d'un coup,
   l'explication complete est dite une seule fois sous la barre de commande.
   Repeter la phrase sur chaque carte l'aurait rendue invisible. */
.snw-deal {
  position: absolute; z-index: 2; left: 10px; bottom: 44px;
  padding: 3px 8px; background: var(--ok); color: #04240f;
  border: 1px solid #0b0d0c; font-family: var(--f-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.snw-view { display: inline-flex; border: 1px solid var(--rule); }
.snw-view__b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; background: transparent; border: 0; color: var(--muted); cursor: pointer; }
.snw-view__b + .snw-view__b { border-left: 1px solid var(--rule); }
.snw-view__b.is-on { background: var(--sn); color: #0b0d0c; }
.snipe-ctl__btn.is-on { background: var(--sn); color: #0b0d0c; border-color: var(--sn); }

/* ---------- Le mode liste ---------------------------------------------- */
/* Meme information que les cartes, hierarchie differente : l'heure a gauche
   parce qu'on balaie un flux, le prix a droite parce que c'est ce qui decide.
   Une ligne par annonce, cinquante d'un coup d'oeil. */
.snl { border: 1px solid var(--rule); background: var(--card); }
.snl__row {
  display: grid; grid-template-columns: 64px 44px minmax(0, 1fr) 110px 120px 116px 24px;
  align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; color: inherit;
  border-left: 3px solid var(--cat, transparent);
}
.snl__row + .snl__row { border-top: 1px solid var(--rule); }
.snl__row:hover { background: #171c19; }
.snl__row.is-new { background: color-mix(in srgb, var(--sn) 9%, transparent); }
.snl__t { font-size: 11px; color: var(--muted); }
.snl__ph { display: block; width: 44px; height: 44px; overflow: hidden; background: #0e120f; }
.snl__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snl__ti { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snl__b { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snl__s { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snl__p { font-family: var(--f-display); font-weight: 900; font-size: 16px; text-align: right; white-space: nowrap; }
.snl__d { display: inline-block; margin-left: 6px; padding: 1px 5px; background: var(--ok); color: #04240f; font-family: var(--f-mono); font-size: 10px; }
.snl__go { color: var(--muted); justify-self: end; }
.snl__row:hover .snl__go { color: var(--sn); }
/* Sur petit ecran la ligne se replie : l'heure et le prix encadrent le titre,
   le reste passe dessous. */
@media (max-width: 860px) {
  .snl__row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ph ti p" "ph b t"; gap: 4px 10px; padding: 10px 12px; }
  .snl__ph { grid-area: ph; width: 52px; height: 52px; }
  .snl__ti { grid-area: ti; white-space: normal; }
  .snl__b { grid-area: b; }
  .snl__t { grid-area: t; text-align: right; }
  .snl__p { grid-area: p; }
  .snl__s, .snl__go { display: none; }
}

/* =====================================================================
   LE BILLET — page de connexion
   ---------------------------------------------------------------------
   La page portait deja « ADMIT ONE » et un numero, posés sur une carte de
   formulaire ordinaire. Ici le billet EST la page : un objet centre, avec
   sa souche perforee et son numero. Tout ce qui n'aide pas a entrer est
   parti — le panneau lateral qui vantait la connexion a quelqu'un venu se
   connecter, et deux boutons de fournisseurs qui n'existent pas encore.
   ===================================================================== */
.tk-page { padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 7vw, 90px); }
/* Deux colonnes sur large : le panneau a gauche, le billet a droite. Dans le
   HTML le billet vient en PREMIER — c'est « order » qui le renvoie a droite.
   Ainsi, quand tout s'empile sur telephone, on tombe sur le formulaire avant
   les arguments, et le champ e-mail reste a portee de pouce. */
.tk-page__in { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: clamp(20px, 4vw, 54px); align-items: start; justify-content: center; }
.tk-page__in > .tk { order: 2; }
.tk-page__in > .tk-side { order: 1; }

/* Le panneau : le meme aplat jaune qu'avant, avec la mascotte. Il ne pousse
   plus le formulaire vers le bas, il l'accompagne. */
.tk-side { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 34px); background: var(--hi); color: var(--ink); border: var(--line); box-shadow: var(--sh-lg); }
.tk-side .halftone { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.tk-side > * { position: relative; z-index: 1; }
.tk-side__title { font-size: clamp(30px, 3.6vw, 48px); line-height: .95; margin: 10px 0 0; }
.tk-side__perks { display: flex; flex-direction: column; gap: 0; margin: 22px 0 0; padding: 0; list-style: none; }
.tk-side__perks li { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; border-top: 2px solid rgba(12, 12, 11, .22); font-size: 15px; font-weight: 700; line-height: 1.4; }
.tk-side__perks li:last-child { border-bottom: 2px solid rgba(12, 12, 11, .22); }
.tk-side__perks svg { flex-shrink: 0; margin-top: 2px; }
.tk-side__note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; }
.tk-side__mascot { display: block; width: clamp(130px, 18vw, 200px); height: auto; margin: 14px auto -34px; }

/* Google et Apple : annonces, pas proposees. Cote a cote, en petit, sous le
   seul chemin qui marche vraiment. */
.tk__later { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tk__later-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 8px; background: var(--bg); border: 2px dashed var(--rule); color: var(--muted); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; cursor: not-allowed; }
.tk__later-b svg { flex-shrink: 0; opacity: .55; }
.tk__later-b span { padding: 1px 5px; background: var(--hi); color: var(--ink); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1000px) {
  /* Une seule colonne : le billet d'abord, les arguments ensuite. */
  .tk-page__in { grid-template-columns: minmax(0, 470px); justify-content: center; }
  /* Meme specificite que la regle de base (.tk-page__in > .tk-side), sinon
     elle perd : « order: 1 » restait, le panneau repassait devant et le champ
     e-mail retombait a 945 px du haut sur telephone. Mesure a l'appui. */
  .tk-page__in > .tk-side { order: 3; }
  .tk-side__mascot { margin-bottom: -26px; }
}
.tk {
  position: relative; width: 100%; max-width: 470px;
  background: var(--card); border: var(--line); box-shadow: var(--sh-lg);
}
/* La souche du haut : bande d'encre, numero a droite. */
.tk__top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 18px; background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
[data-theme="dark"] .tk__top { background: var(--paper); color: var(--ink); }
.tk__no { letter-spacing: .12em; opacity: .8; }
.tk__tabs { border-bottom: var(--line); }
.tk__body { padding: 22px 20px 20px; }
.tk__title { font-size: clamp(30px, 5vw, 42px); line-height: 1; margin: 0 0 6px; }
.tk__sub { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.tk__prov { margin-top: 18px; }
/* Une ligne honnete a la place de deux boutons morts. */
.tk__soon { margin: 10px 0 0; font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--muted); }
.tk__or { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tk__or::before, .tk__or::after { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--rule); }
.tk__go { margin-top: 4px; }
/* La perforation : le trait pointille et les deux encoches qui font le
   billet detachable. Les encoches prennent la couleur du fond de page, pas
   du billet — c'est ce qui donne l'illusion du trou. */
.tk__perf { position: relative; height: 0; border-top: 2px dashed var(--rule); margin: 0 14px; }
.tk__perf::before, .tk__perf::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--bg); border: var(--line);
}
.tk__perf::before { left: -25px; }
.tk__perf::after { right: -25px; }
.tk__stub { padding: 16px 20px 18px; }
.tk__stub .auth__links { font-size: 13.5px; }
.tk__fine { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed var(--rule); font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--muted); }
.tk__fine svg { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 560px) {
  .tk__body { padding: 18px 15px 16px; }
  .tk__stub { padding: 14px 15px 16px; }
  .tk__perf { margin: 0 10px; }
}