/* ============================================================
   SUPER SLOP PRODUCTIONS — charte graphique
   Tous les tokens sont préfixés --ss-*

   Principe : la boîte s'appelle SUPER SLOP. C'est de
   l'autodérision. La marque doit être drôle et sale, pas
   solennelle. Registre = affiche sérigraphiée de concert punk,
   deux encres mal calées, ça dégouline.
   ============================================================ */

:root {
  /* --- COULEURS ---------------------------------------------
     Relevées à la pipette sur l'affiche, pas approximées.     */
  --ss-paper:   #f2efe6;  /* papier os — le fond, partout */
  --ss-paper-2: #e7e3d7;  /* papier ombré — encarts, survols */
  --ss-ink:     #0d0503;  /* encre noire — le texte */
  --ss-slop:    #f64817;  /* encre orange — ACCENT UNIQUE */
  --ss-muted:   #6f6a60;  /* gris chaud — métadonnées */
  --ss-line:    #cdc7b8;  /* filets */

  /* Décalage de calage : la signature. L'orange est toujours
     légèrement hors registre par rapport au noir.             */
  --ss-misreg: 3px;

  /* --- TYPO -------------------------------------------------
     Deux familles.
     Display : Impact. Choix assumé — c'est une fonte d'affiche,
               grasse et condensée, et elle existe sur Windows
               ET macOS, donc le nom s'affiche pareil partout.
     Mono    : le registre du plateau (feuille de service,
               timecode, ardoise).                             */
  --ss-display: Impact, 'Haettenschweiler', 'Franklin Gothic Heavy',
                'Arial Narrow', sans-serif;
  --ss-mono:    ui-monospace, 'Cascadia Mono', Consolas,
                'SF Mono', 'Roboto Mono', monospace;
  --ss-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- GÉOMÉTRIE --------------------------------------------
     Angles vifs partout. Rien d'arrondi : c'est de l'imprimé. */
  --ss-radius: 0;
  --ss-gap:    clamp(1.25rem, 4vw, 3.5rem);
  --ss-maxw:   78rem;
}

/* ============================================================
   BASE
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ss-paper);
  color: var(--ss-ink);
  font-family: var(--ss-body);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */

.ss-display {
  font-family: var(--ss-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.86;
  font-weight: 400;   /* Impact est déjà grasse par nature */
}

/* Ligne d'ardoise : tout ce qui est technique, daté, chiffré. */
.ss-slate {
  font-family: var(--ss-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--ss-muted);
}

/* Hors-registre : le titre en noir avec son fantôme orange
   décalé. À réserver aux gros titres — illisible en petit.   */
.ss-misreg {
  color: var(--ss-ink);
  text-shadow: calc(var(--ss-misreg) * -1) var(--ss-misreg) 0 var(--ss-slop);
}

/* ============================================================
   LA COULURE — élément signature
   Une bande d'encre qui bave depuis le haut d'un bloc.
   Deux calques : orange décalé, puis noir par-dessus.
   À utiliser une à deux fois par écran, pas plus.
   ============================================================ */

/* La hauteur doit couvrir tout le motif (point le plus bas 93 px,
   + 3 px de décalage orange = 96) sinon les gouttes détachées sont
   tranchées net et lisent comme des taches. */
.ss-drip {
  height: 104px;
  background-repeat: repeat-x;
  /* Le NOIR est devant, à 0 0 ; l'orange est le fantôme décalé derrière.
     Même règle que le logo et les titres. En CSS le premier calque est
     celui du dessus — inverser les deux inverse la marque. */
  background-position: 0 0, calc(var(--ss-misreg) * -1) var(--ss-misreg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='110'%3E%3Cg fill='%230d0503'%3E%3Crect width='400' height='14'/%3E%3Crect x='30' width='16' height='52'/%3E%3Ccircle cx='38' cy='52' r='12'/%3E%3Crect x='96' width='10' height='30'/%3E%3Ccircle cx='101' cy='30' r='8'/%3E%3Ccircle cx='101' cy='56' r='5'/%3E%3Crect x='170' width='20' height='78'/%3E%3Ccircle cx='180' cy='78' r='15'/%3E%3Crect x='250' width='12' height='40'/%3E%3Ccircle cx='256' cy='40' r='9'/%3E%3Ccircle cx='256' cy='68' r='4'/%3E%3Crect x='320' width='14' height='62'/%3E%3Ccircle cx='327' cy='62' r='11'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='110'%3E%3Cg fill='%23f64817'%3E%3Crect width='400' height='14'/%3E%3Crect x='30' width='16' height='52'/%3E%3Ccircle cx='38' cy='52' r='12'/%3E%3Crect x='96' width='10' height='30'/%3E%3Ccircle cx='101' cy='30' r='8'/%3E%3Ccircle cx='101' cy='56' r='5'/%3E%3Crect x='170' width='20' height='78'/%3E%3Ccircle cx='180' cy='78' r='15'/%3E%3Crect x='250' width='12' height='40'/%3E%3Ccircle cx='256' cy='40' r='9'/%3E%3Ccircle cx='256' cy='68' r='4'/%3E%3Crect x='320' width='14' height='62'/%3E%3Ccircle cx='327' cy='62' r='11'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   GRAIN PAPIER
   Posé en surimpression sur toute la page. Sans lui, les
   aplats font « vectoriel propre » et l'illusion d'imprimé
   tombe. Doit rester quasi invisible.
   ============================================================ */

.ss-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   BOUTONS / LIENS
   Un seul bouton plein par écran. Le reste souligné.
   ============================================================ */

.ss-btn {
  display: inline-block;
  font-family: var(--ss-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  padding: 1rem 1.7rem;
  border-radius: var(--ss-radius);
  border: 2px solid var(--ss-ink);
  background: var(--ss-slop);
  color: var(--ss-paper);
  text-decoration: none;
  cursor: pointer;
  /* ombre portée dure = calage décalé, jamais de flou */
  box-shadow: var(--ss-misreg) var(--ss-misreg) 0 var(--ss-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ss-btn:hover {
  transform: translate(var(--ss-misreg), var(--ss-misreg));
  box-shadow: 0 0 0 var(--ss-ink);
}

.ss-link {
  color: var(--ss-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ss-slop);
}
.ss-link:hover { background: var(--ss-slop); color: var(--ss-paper); }

/* ============================================================
   BLOC / ENCART
   ============================================================ */

.ss-panel {
  background: var(--ss-paper-2);
  border: 2px solid var(--ss-ink);
  border-radius: var(--ss-radius);
  padding: 1.4rem 1.5rem;
}

/* ============================================================
   BLOC DE GÉNÉRIQUE (billing block)
   Le pavé de crédits en bas d'affiche. Condensé, centré,
   étroit, illisible de loin — et c'est le but.
   ============================================================ */

.ss-billing {
  font-family: var(--ss-display);
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(.6rem, 1.35vw, .88rem);
  line-height: 1.32;
  letter-spacing: .01em;
  color: var(--ss-ink);
  max-width: 60rem;
  margin-inline: auto;
  transform: scaleY(1.35);       /* l'étirement vertical du vrai bloc */
  transform-origin: top center;
}
.ss-billing .sm { font-size: .78em; }

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ss-slop);
  outline-offset: 3px;
}

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