/* =========================================================
   FEUILLE DE STYLE — CVM Graphisme 2026
   ========================================================= */

/* ---------- RESET ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'HeadingFont';
  src: url('./fonts/PPFrama-Black.otf') format('truetype');
}

@font-face {
  font-family: 'BodyFont';
  src: url('./fonts/PPFrama-Regular.otf') format('truetype');
}

/* ---------- CANVAS CURSEUR ---------- */
#cursor-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* ---------- BASE ---------- */
html, body {
  height: 100vh;
}

body {
  font-size: 1rem;
  color: #767676;
  background: #e3e2e2;
}

/* ---------- WRAPPER ---------- */
.wrapper {
  height: 100vh;
  width: 100%;
  padding: 10px;
  gap: 10px;
}

/* ---------- HEADER + H1 ---------- */
.header {
  font-weight: 500;
  color: #191919;
  font-size: clamp(12px, 4vmin, 72px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-family: 'HeadingFont', sans serif;
  min-height: 0;
}

.header::after, .h1::after {
  content: " ";
}

/* ---------- GRILLE / TEXTE CONTINU ---------- */
.grille_images {
  font-weight: 500;
  color: #9a9a9a;
  font-size: clamp(10px, 4.4vmin, 72px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-family: 'BodyFont', sans serif;
}

.grille_images a {
  display: inline;
  color: inherit;
  text-decoration: none;
}

.grille_images a::after {
  content: "\2002"; /* espace demi-cadratin */
  color: inherit;   /* optionnel : évite de colorer un espace inutile */
}



.grille_images a {
  display: inline-block;
}

.grille_bonhomme {
  flex: 3;
  display: flex;
  flex-wrap: nowrap;
  min-height: 10vh;
  align-items: stretch;
  overflow: visible;
}

.grille_bonhomme .svg {
  flex: 1 1 0;
  min-width: 0;
  object-fit: contain;
}

/* Hover desktop */
.svg:hover {
  animation: rotateBounce 0.5s ease;
}

/* Touch mobile */
.svg.touch-bounce {
  animation: rotateBounce 0.5s ease;
}




@keyframes rotateBounce {
    0%   { transform: rotate(0deg); }
    40%  { transform: rotate(20deg); }
    60%  { transform: rotate(-10deg); }
    80%  { transform: rotate(8deg); }
    100% { transform: rotate(0deg); }
}

/* ---------- FOOTER ---------- */
footer {
  grid-column: 1 / -1;
  min-height: 200px;
}

/* =========================================================
   MEDIA QUERY — MOBILE
   ========================================================= */

/* Cacher le canvas de traîné sur mobile */
@media (pointer: coarse) {
  #cursor-canvas {
    display: none;
  }
}

@media (max-width: 1200px) {
  .grille_bonhomme .svg:last-child {
    display: none;
  }
}

@media (max-width: 1100px) {
  .grille_bonhomme .svg:last-child(-n+2) {
    display: none;
  }
}

@media (max-width: 900px) {
  .grille_bonhomme .svg:last-child(-n+6) {
    display: none;
  }
}

@media (max-width: 768px) {
  .header, .h1,
  .grille_images {
    font-size: clamp(22px, 5vw, 48px);
    line-height: 1.1;
  }

  .grille_bonhomme .svg:nth-last-child(-n+3) {
    display: none;
  }

  .wrapper {
    margin: 10px auto;
    overflow-x: hidden;
  }
}

@media (max-width: 500px) {
  .grille_bonhomme .svg:nth-last-child(-n+5) {
    display: none;
  }
}


/* ---------- TICKER ---------- */
.ticker-wrap {
  background: #ff00c3;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  animation: ticker 30s linear infinite;
  font-family: 'BodyFont', sans-serif;
  font-size: clamp(12px, 1.8vmin, 20px);
  font-weight: 500;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 6px 0;
}

.ticker-track span {
  display: inline-block;
  padding-right: 2rem;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}