/* ==========================================================================
   Gymgros, piste 1 : « MINIATURE »

   Parti pris : la page se lit comme une vignette YouTube du trio. Fond noir
   grainé, larges bandeaux jaunes en biais aux bords déchirés posés DERRIÈRE
   les mots, autocollants rouges pivotés collés dans les coins, contours noirs
   épais et ombres dures (jamais de flou). Trois couleurs, pas une de plus :
   noir, jaune, rouge, avec du crème pour respirer.

   Tout est pensé à 390 px : une seule colonne, les cartes réseaux sont des
   autocollants inclinés qui se redressent au doigt, chaque zone tapable
   dépasse 48 px. Les entrées arrivent en « claque » (0,8 -> 1 avec rebond) ;
   le logo respire, le bandeau défile, la flèche oscille. Tout se coupe sous
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --bord:    4px;                 /* épaisseur des contours noirs */
  --ombre:   7px;                 /* décalage des ombres dures */
  --marge:   18px;                /* gouttière de la colonne mobile */
}

/* ------------------------------------------------------------- Structure */

body {
  background: var(--noir);
  overflow-x: hidden;
}

main { display: block; }

.enveloppe {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

/* Grain d'impression posé sur toute la page (utilitaire de base.css). */
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.grain::after { opacity: .34; }

/* Barre de comparaison (base.css) : outil de travail, pas élément de design.
   On la passe juste au-dessus du grain, on lui coupe les angles arrondis pour
   qu'elle ne jure pas avec les aplats de la piste, et on porte ses liens à
   48 px de haut comme le reste des zones tapables. */
.apercu { z-index: 41; }

/* À 390 px, les quatre libellés dépassent de 47 px : « Comparer » sort du
   champ et rien ne signale qu'on peut faire défiler. On resserre les
   gouttières, jamais la taille du texte, pour que les quatre versions
   restent lisibles et atteignables sur la largeur de référence. */

/* ------------------------------------------------- Briques réutilisables */

/* Bandeau de couleur aux bords déchirés, posé derrière un mot. */
.bande {
  display: inline-block;
  padding: .2em .32em .24em;
  background: var(--jaune);
  color: var(--noir);
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.005em;
}

/* Autocollant rouge, façon gommette collée de travers. */
.pastille {
  display: inline-block;
  padding: .32rem .6rem .38rem;
  background: var(--rouge);
  color: var(--blanc);
  border: 3px solid var(--noir);
  box-shadow: 3px 3px 0 var(--noir);
  font-family: var(--display-alt);
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------ Repères de
   focus. base.css pose un halo JAUNE : parfait sur le fond noir, illisible
   sur le crème des cartes (1,5:1). Sur fond clair on repasse en noir, et on
   écarte l'anneau des ombres dures pour qu'il ne s'y noie pas. */

.carte:focus-visible { outline-offset: calc(var(--ombre) + 2px); }
/* L'ombre de TikTok va 3 px plus loin, plus son liseré : on pousse l'anneau
   d'autant, sinon il traverse le pavé noir au lieu de l'entourer. Le calcul
   suit les deux variables, il reste juste quand elles grandissent. */
.carte--tiktok:focus-visible {
  outline-offset: calc(var(--ombre-noire) + var(--liseret) + 2px);
}

.qr__actions button:focus-visible {
  outline: 4px solid var(--noir);
  outline-offset: 5px;
}

/* Titre de section : le mot est posé sur son bandeau en biais. */
.titre {
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1;
}
.titre .bande { transform: rotate(-2.6deg); }

/* ==================================================================== Une */

.une {
  position: relative;
  overflow: hidden;             /* garde les éléments en biais dans la page */
  padding: clamp(1.6rem, 6vw, 3rem) 0 clamp(1rem, 4vw, 2rem);
}

/* Hachures jaunes très pâles, en biais, aux bords déchirés : de la matière
   derrière le titre sans jamais concurrencer les mots. */
.une__fond {
  position: absolute;
  inset: -2% -14% 24% -14%;
  transform: rotate(-4deg);
  background: repeating-linear-gradient(
    38deg,
    rgba(255, 194, 32, .06) 0 7px,
    transparent 7px 27px
  );
  pointer-events: none;
}

.une .enveloppe { position: relative; }

.une__logo {
  width: max-content;
  margin-bottom: .45rem;
}

/* Le logo est au format paysage : à largeur égale il pèse deux fois moins
   qu'un dessin en hauteur, d'où une largeur nettement plus généreuse. */
.logo {
  width: clamp(152px, 43vw, 205px);
  height: auto;
  filter: drop-shadow(5px 5px 0 rgba(11, 11, 11, .9));
  transform-origin: 60% 90%;
  animation: respire 4s ease-in-out infinite;
}

/* Collée dans le coin haut droit de la colonne, comme sur une vignette.
   Elle reste calée sur la gouttière : `.une` est en overflow:hidden, tout
   débord vers la droite serait rogné dès que la colonne touche l'écran. */
.pastille--exclu {
  position: absolute;
  top: .1rem;
  right: var(--marge);
  transform: rotate(9deg);
  font-size: 1.2rem;
}

/* ----------------------------------------------------------- Le wordmark */

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(3.6rem, 29vw, 7.6rem);
  line-height: 1;
  margin-block: .06em 0;
}

.mot { display: block; }

.mot--gym  { transform: rotate(-3.2deg); }
.mot--gros {
  margin-top: -.15em;
  margin-left: .34em;
  transform: rotate(1.9deg);
}

.mot--gym .bande { background: var(--jaune); color: var(--noir); }

.mot--gros .bande {
  background: var(--rouge);
  color: var(--blanc);
  -webkit-text-stroke: 3px var(--noir);
  paint-order: stroke fill;
}

/* Le mot « GROS » tremble une poignée de fois au chargement. */
.secousse { display: inline-block; }
.anim .secousse { animation: secousse .42s var(--pop) .55s 3 both; }

/* ------------------------------------------------------------- Accroches */

.accroche {
  margin-top: .8rem;
  font-family: var(--display-alt);
  font-size: clamp(1.35rem, 6.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jaune);
  text-shadow: 3px 3px 0 rgba(11, 11, 11, .95);
}

.une__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .65rem 1rem;
  margin-top: .75rem;
}

.intro {
  flex: 1 1 16rem;
  max-width: 34ch;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--creme);
}

.pastille--belge {
  flex: 0 0 auto;
  margin-top: .2rem;
  margin-left: auto;            /* l'autocollant se colle à droite du bloc */
  padding: .42rem .7rem 0;
  transform: rotate(-5deg);
  font-size: 1.15rem;
  overflow: hidden;
}
.pastille--belge b { display: block; font-weight: 400; }
/* La seconde ligne passe en jaune : sur fond noir, un bandeau noir
   disparaîtrait et l'autocollant semblerait coupé en deux. */
.pastille--belge span {
  display: block;
  margin: .35rem -.7rem 0;
  padding: .22rem .7rem .3rem;
  background: var(--jaune);
  color: var(--noir);
}

/* ====================================================== Bandeau défilant */

/* Le bandeau est plus large que l'écran ET pivoté : ses coins montent d'autant
   plus haut que l'écran est large. La réserve verticale suit donc la largeur,
   sinon les bords noirs se font raboter par le recadrage. */
.zone-bandeau {
  overflow: hidden;
  padding-block: max(1.1rem, 3vw);
  margin-block: .2rem;
}

.bandeau {
  width: 114vw;
  margin-left: -7vw;
  padding-block: .45rem;
  background: var(--jaune);
  border-top: var(--bord) solid var(--noir);
  border-bottom: var(--bord) solid var(--noir);
  transform: rotate(-2.4deg);
  overflow: hidden;
}

.bandeau__piste {
  display: flex;
  width: max-content;
  animation: defile 24s linear infinite;
}

.bandeau__lot {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-right: 1.1rem;
}

.bandeau__lot li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--noir);
  white-space: nowrap;
}
.bandeau__lot li::after {
  content: '';
  width: .5rem;
  height: .5rem;
  background: var(--rouge);
  transform: rotate(45deg);
}

/* ================================================================ Réseaux */

.reseaux {
  padding-block: clamp(.4rem, 2vw, 1.2rem) clamp(1.6rem, 6vw, 3rem);
  scroll-margin-top: 1rem;
}

.reseaux__liste {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.2rem;
}

/* Chaque carte est un autocollant crème posé de travers. */
.carte {
  --accent: var(--rouge);
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 76px;
  padding: .7rem .9rem;
  background: var(--creme);
  color: var(--noir);
  border: var(--bord) solid var(--noir);
  box-shadow: var(--ombre) var(--ombre) 0 var(--accent);
  text-decoration: none;
  transform: rotate(var(--angle, 0deg));
  transition: transform .22s var(--pop), box-shadow .22s var(--pop);
}

/* Les inclinaisons sont positionnelles, les couleurs appartiennent au réseau :
   noir, jaune, rouge, le drapeau belge de haut en bas. */
.reseaux__liste li:nth-child(1) .carte { --angle: -2deg;  }
.reseaux__liste li:nth-child(2) .carte { --angle: 1.5deg; }
.reseaux__liste li:nth-child(3) .carte { --angle: -1deg;  }

.carte--tiktok    { --accent: var(--noir); }
.carte--instagram { --accent: var(--jaune); }
.carte--youtube   { --accent: var(--rouge); }

/* Le noir de TikTok tomberait dans le fond noir de la page. On le découpe :
   l'ombre est poussée 3 px plus loin que celle des deux autres, et un liseré
   crème en redessine le contour. Le pavé noir se lit alors comme une masse
   pleine, du même volume que les ombres jaune et rouge. */
.carte--tiktok {
  --ombre-noire: calc(var(--ombre) + 3px);
  --liseret: 4px;
  box-shadow:
    var(--ombre-noire) var(--ombre-noire) 0 var(--noir),
    var(--ombre-noire) var(--ombre-noire) 0 var(--liseret) var(--creme);
}

/* La gommette de la carte TikTok passe elle aussi en noir découpé : sinon son
   rouge tire la première ligne du drapeau vers la troisième. */
.carte--tiktok .pastille--pique {
  background: var(--noir);
  color: var(--creme);
  border-color: var(--creme);
  box-shadow: 3px 3px 0 var(--creme);
}

/* Au doigt : l'autocollant se redresse d'un coup et l'ombre s'écrase. */
.carte:active {
  transform: rotate(0deg) translate(5px, 5px);
  box-shadow: 2px 2px 0 var(--accent);
}
.carte--tiktok:active {
  box-shadow:
    2px 2px 0 var(--noir),
    2px 2px 0 var(--liseret) var(--creme);
}

/* La tuile prend la couleur du réseau en aplat, avec le glyphe en négatif. */
.carte__tuile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--accent);
  color: var(--noir);
  border: 3px solid var(--noir);
}
.carte--tiktok  .carte__tuile { color: var(--blanc); }
.carte--youtube .carte__tuile { color: var(--blanc); }

.carte__texte { flex: 1 1 auto; min-width: 0; }

.carte__nom {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.55rem, 6.8vw, 2rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.carte__pseudo {
  display: block;
  margin-top: .12rem;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #4A4033;
  overflow-wrap: anywhere;
}

/* La petite vanne de chaque réseau, en rouge sombre pour rester lisible. */
.carte__note {
  display: block;
  margin-top: .22rem;
  font-family: var(--display-alt);
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rouge-sombre);
}

.carte__fleche {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .22s var(--pop);
}
.carte:active .carte__fleche { transform: translateX(5px); }

.pastille--pique {
  position: absolute;
  top: -.85rem;
  right: -.5rem;
  font-size: .95rem;
  transform: rotate(9deg);
}

/* ================================================================ QR code */

.qr { padding-bottom: clamp(2rem, 8vw, 3.4rem); }

/* Flèche tracée à la main qui désigne le bloc du QR. */
.repere {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  margin-bottom: -.4rem;
  padding-left: .2rem;
}

.repere__mot {
  font-family: var(--display-alt);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jaune);
  transform: rotate(-6deg);
  margin-bottom: 1.6rem;
}

.repere__fleche {
  width: clamp(84px, 26vw, 118px);
  height: auto;
  transform-origin: 20% 10%;
  animation: oscille 2.8s ease-in-out infinite;
}
.repere__doublure { stroke: var(--rouge); }
.repere__trait    { stroke: var(--jaune); }

/* La carte du QR : gros contour noir, ombre dure, légèrement de travers. */
.carte-qr {
  position: relative;
  padding: 1.2rem 1rem;
  background: var(--creme);
  color: var(--noir);
  border: var(--bord) solid var(--noir);
  box-shadow: 9px 9px 0 var(--rouge);
  transform: rotate(-1.2deg);
}

.titre--qr { font-size: clamp(1.9rem, 8.6vw, 2.8rem); }
.titre--qr .bande {
  background: var(--jaune);
  color: var(--noir);
  border: 3px solid var(--noir);
  transform: rotate(-2.2deg) translateX(-.1em);
}

.qr__mots {
  margin-top: 1rem;
  font-size: .92rem;
  line-height: 1.5;
  color: #3A322A;
}

.qr__figure {
  margin-top: 1.1rem;
  text-align: center;
}
.qr__figure img {
  width: min(200px, 62%);
  height: auto;
  margin-inline: auto;
  background: var(--blanc);
  border: var(--bord) solid var(--noir);
  padding: 7px;
}
#qr-url {
  margin-top: .55rem;
  font-family: var(--display-alt);
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--noir);
}

/* Deux actions au visiteur, l'une sous l'autre : « Partager » n'apparaît que
   sur les téléphones qui savent le faire, « Copier le lien » est toujours là. */
.qr__actions {
  display: grid;
  gap: .6rem;
  margin-top: 1.2rem;
}

.qr__actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touche);
  padding: .55rem .5rem;
  background: var(--noir);
  color: var(--creme);
  border: 3px solid var(--noir);
  box-shadow: 4px 4px 0 var(--rouge);
  font-family: var(--display-alt);
  font-size: 1.02rem;
  letter-spacing: .05em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transition: transform .16s var(--pop), box-shadow .16s var(--pop), background-color .16s linear;
}
.qr__actions button[hidden] { display: none; }

/* Copier le lien est l'action toujours disponible : elle passe en jaune. */
.qr__actions button[data-qr="copy"] {
  background: var(--jaune);
  color: var(--noir);
  box-shadow: 4px 4px 0 var(--noir);
}

.qr__actions button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--rouge);
  background: var(--rouge);
  border-color: var(--noir);
  color: var(--blanc);
}

.qr__etat {
  min-height: 1.1rem;
  margin-top: .55rem;
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
  color: #7A1710;
}

/* Gommette collée en bas de la carte, moitié dedans moitié dehors. */
.pastille--sers {
  position: absolute;
  left: -.5rem;
  bottom: -.95rem;
  transform: rotate(-7deg);
  font-size: 1.1rem;
}

/* ================================================================== Pied */

.pied {
  position: relative;
  padding-block: 1.6rem 2.2rem;
  border-top: var(--bord) solid var(--jaune);
  text-align: center;
}

.pied__nom {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jaune);
  text-shadow: 3px 3px 0 var(--rouge);
}

.pied__note {
  margin-top: .5rem;
  font-size: .84rem;
  letter-spacing: .02em;
  color: var(--gris);
}

/* ============================================================ Animations */

/* Entrée « claque » : le bloc arrive petit et de travers, puis se pose. */
.anim .reveal {
  opacity: 0;
  transform: scale(.78) rotate(var(--rot, -3.5deg)) translateY(12px);
  transition: opacity .3s var(--sortie), transform .5s var(--pop);
}
.anim .reveal.is-in { opacity: 1; transform: none; }

.anim .mot--gros.reveal { --rot: 4deg; }
.anim .reseaux__liste li:nth-child(2).reveal { --rot: 3.5deg; }
.anim .une__pied.reveal { --rot: -2deg; }

/* Une fois posé, chaque mot du wordmark retrouve son inclinaison. */
.anim .mot--gym.reveal.is-in  { transform: rotate(-3.2deg); }
.anim .mot--gros.reveal.is-in { transform: rotate(1.9deg); }

@keyframes respire {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg) scale(1.025); }
}

@keyframes secousse {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-3px, 1px) rotate(-1.4deg); }
  50%      { transform: translate(3px, -1px) rotate(1.2deg); }
  75%      { transform: translate(-2px, 0) rotate(-.8deg); }
}

@keyframes defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes oscille {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* ============================================================ Élargissement */

@media (min-width: 560px) {
  :root { --marge: 26px; }

  .enveloppe { max-width: 620px; }

  .pastille--exclu { font-size: 1.3rem; }

  /* Sans ce relais, le wordmark plafonne dès 420 px et laisse une grande
     zone morte à sa droite sur les tablettes. */
  .wordmark { font-size: clamp(6rem, 25vw, 9.5rem); }

  .qr__figure img { width: 220px; }
}

@media (min-width: 860px) {
  :root { --bord: 5px; --ombre: 9px; }

  .enveloppe { max-width: 960px; }

  .une { padding-block: 3rem 2.4rem; }
  .une .enveloppe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'titre    logo'
      'accroche logo'
      'pied     logo';
    align-items: center;
    column-gap: 1.5rem;
  }
  .une__logo  { grid-area: logo; align-self: center; margin-bottom: 0; }
  .wordmark   { grid-area: titre; }
  .accroche   { grid-area: accroche; margin-top: 1.1rem; }
  .une__pied  { grid-area: pied; margin-top: 1.2rem; align-items: center; }
  .intro      { flex: 0 1 22rem; }
  .pastille--belge { margin-left: 0; }

  .logo { width: 290px; }

  .wordmark { font-size: clamp(5.6rem, 13vw, 10.5rem); }

  .zone-bandeau { padding-block: max(1.6rem, 2vw); }
  .bandeau { transform: rotate(-1.4deg); }

  .reseaux__liste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 2rem;
  }
  .carte {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    min-height: 178px;
    padding: 1.2rem;
  }
  /* Contours et ombres grossissent ici : le liseré crème de TikTok suit, sinon
     son pavé noir maigrit à côté des barres jaune et rouge. */
  .carte--tiktok { --liseret: 5px; }
  .carte__texte  { flex: 0 0 auto; }
  .carte__fleche { align-self: flex-end; margin-top: auto; width: 46px; height: 46px; font-size: 1.7rem; }
  .carte__nom    { font-size: 2.1rem; }

  /* La flèche se place au-dessus du QR, dans la colonne de droite. */
  .repere {
    justify-content: flex-end;
    padding-right: 4rem;
    margin-bottom: -.6rem;
  }
  .repere__mot { margin-bottom: 1.9rem; }

  .carte-qr {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-areas:
      'titre  image'
      'mots   image'
      'actions image'
      'etat   image';
    align-items: start;
    column-gap: 2.2rem;
    padding: 1.8rem 2rem 2rem;
  }
  .titre--qr    { grid-area: titre; }
  .qr__mots     { grid-area: mots; font-size: 1rem; }
  .qr__figure   { grid-area: image; align-self: center; margin-top: 0; }
  .qr__actions  { grid-area: actions; }
  .qr__etat     { grid-area: etat; text-align: left; }
  .qr__figure img { width: 100%; max-width: 250px; }
}

/* ============================================================ Mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .logo,
  .bandeau__piste,
  .repere__fleche,
  .anim .secousse {
    animation: none !important;
    transform: none !important;
  }
  .carte:active { transform: rotate(var(--angle, 0deg)); }
  .anim .mot--gym.reveal.is-in  { transform: rotate(-3.2deg); }
  .anim .mot--gros.reveal.is-in { transform: rotate(1.9deg); }
}