/* Socle commun : polices auto-hébergées (licence OFL), remise à zéro, t-shirt
   dessiné, barre de l'atelier. Chaque maquette a ensuite sa propre feuille. */

@font-face {
  font-family: "Montserrat";
  src: url("/static/polices/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/polices/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/polices/fraunces-italique.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("/static/polices/anton.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/polices/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: 1.6; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Le t-shirt dessiné ------------------------------------------------ */
.tee { width: 100%; }
.tee__corps { stroke-width: 2; stroke-linejoin: round; }
.tee__col   { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tee__pli   { fill: none; stroke-width: 2; stroke-linecap: round; }

.tee--blanc .tee__corps { fill: #fff; stroke: #cfcac2; }
.tee--blanc .tee__dos   { fill: #e9e5de; }
.tee--blanc .tee__col   { stroke: #dedad2; }
.tee--blanc .tee__pli   { stroke: #dedad2; }

.tee--noir .tee__corps { fill: #161616; stroke: #000; }
.tee--noir .tee__dos   { fill: #000; }
.tee--noir .tee__col   { stroke: #2b2b2b; }
.tee--noir .tee__pli   { stroke: #2e2e2e; }

/* --- Barre de l'atelier (n'existera pas sur le vrai site) --------------- */
.barre-atelier {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 8px 16px;
  font: 500 14px/1.3 "Montserrat", system-ui, sans-serif;
  color: #fff; background: #3b2d6b;
}
.barre-atelier a { text-decoration: underline; text-underline-offset: 3px; }
.barre-atelier__autres { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; align-items: center; }
.barre-atelier__vote {
  padding: 5px 12px; border-radius: 999px;
  color: #3b2d6b; background: #fff; font-weight: 700; text-decoration: none !important;
}