body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-family: Helvetica, sans-serif;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main.bloc-centre {
  padding: 2em;
  display: flex;
  justify-content: center;
}

footer.footer-liens {
  flex-shrink: 0;
}

header {
  text-align: center;
  padding-top: 2em;
  position: relative;
  overflow: visible;
  height: 180px;
}

.menu-vertical {
  position: fixed;
  left: 0;
  top: 90px; /* ? modifie cette valeur pour le descendre ou remonter */
  width: 180px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  padding: 2em 1em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-family: Helvetica, sans-serif;
  font-weight: 300;
}

.menu-titre {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.3em;
}

.menu-section {
  margin-top: 1em;
  font-weight: bold;
}

.menu-vertical a {
  text-decoration: none;
  color: #000;
  font-size: 1em;
  transition: all 0.3s ease;
  padding: 0.2em 0;
}

.menu-vertical a:hover {
  background: #000;
  color: #fff;
}

.menu-bas {
  margin-top: 2em;
}

.casquette {
  font-size: 0.5em;
  opacity: 0.6;
  margin-top: 1em;
}

/* ? Bloc principal : logo + Twitch côte à côte */
main.bloc-centre {
  padding: 2em;
  display: flex;
  justify-content: center;
}

/* ?? AJOUT pour afficher les deux éléments côte à côte */
.contenu-centre {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2em;
  padding: 2em 1em;
}

.image-centre {
  display: block;
  max-width: 500px;
  margin: 0 auto;
  margin-top: -60px;
}

.twitch-apercu {
  max-width: 360px;
  text-align: center;
  margin-top: -60px; /* ? ajuste cette valeur pour aligner parfaitement */
}

.twitch-apercu iframe {
  width: 100%;
  height: 240px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

.twitch-texte {
  font-size: 0.9em;
  color: #444;
  margin-top: 0.5em;
}

/* Footer */
footer.footer-liens {
  text-align: center;
  padding: 1.5em 1em; /* réduit l'espace autour */
  border-top: 1px solid #ccc;
  margin-top: 2em; /* réduit l'écart avec ce qui précède */
}

.footer-liens a {
  margin: 0 1em;
  text-decoration: none;
  color: #000;
  font-size: 0.9em;
}

.footer-liens a:hover {
  text-decoration: underline;
}

.galerie-peintures {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  padding: 3em 1em;
  max-width: 900px;
  margin: 0 auto;
}

.galerie-peintures img {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  cursor: zoom-in;
}

.galerie-peintures img:hover {
  transform: scale(1.03);
}

.invisible-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.invisible-link:hover {
  text-shadow: 0 0 3px red; /* petit effet au survol si tu veux */
}

.texte-intro {
  text-align: justify;
  max-width: 800px;
  margin-top: -7em;  /* ? remonte le bloc de texte */
  margin-bottom: 2em;
  font-size: 0.95em;
  line-height: 1.4;
  text-align: left;
  color: #111;
  padding: 0 1em;
}

.contact-mail {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin-top: 2em;
}

.contact-mail a {
  text-decoration: none;
  color: #000;
}

.contact-mail a:hover {
  text-decoration: underline;
}

.footer-lien {
  font-weight: 600; /* ou 600 si tu veux un peu plus marqué */
}

.footer-special {
  text-align: center;
  margin-bottom: 10px;
  padding: 5px 0;
  font-size: 1.2em;
  font-weight: normal;
  opacity: 0.9;
  background: linear-gradient(90deg, #ff005e, #00e0ff, #00ff85, #ff005e);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: moveColors 6s ease infinite;
}
.lien-rendezvous {
  text-decoration: none;
  color: inherit;         /* hérite la couleur du parent (ici #555) */
}

.lien-rendezvous:visited {
  color: inherit;         /* empêche le violet après clic */
}

.lien-rendezvous:hover {
  text-decoration: underline; /* souligné seulement au survol */
}


@keyframes moveColors {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.footer-special a {
  color: inherit;
  text-decoration: none;
}

.contenu-peintures {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -60px;
  padding: 2em 1em;
}

.contenu-prevention {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -60px;
  padding: 2em 1em;
}

.contenu-pamimi {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  padding: 2em 1em;
}

.contenu-bio {
  text-align: justify;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 90px;
  padding: 2em 1em;
}

.contenu-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -10px;
  padding: 2em 1em;
}

.bande-fond {
  width: 100%;
  height: 200px; /* hauteur que tu veux : ici 150px par exemple */
  background-image: url('argh.png');
  background-repeat: repeat;
  background-size: 160px 100px; /* ajuste la taille de ton motif */
  opacity: 0.6; /* opacité légère pour effet filigrane */
}

.point-marche {
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  position: fixed; /* fixe par rapport à l'écran */
  left: 0;
  bottom: 342px; /* <=== ici tu modifies la hauteur en pixel facilement */
  animation: moveRandom 20s cubic-bezier(0.8, 0, 0.2, 1) infinite;
  opacity: 0.8;
  z-index: 10;
}

@keyframes moveRandom {
  0% { left: 0%; transform: translateY(0); }
  1% { left: 2%; transform: translateY(-2px); }
  3% { left: 4%; transform: translateY(1px); }
  5% { left: 6%; transform: translateY(-1px); }
  7% { left: 8%; transform: translateY(3px); }
  9% { left: 7%; transform: translateY(-2px); }
  11% { left: 9%; transform: translateY(1px); }
  13% { left: 12%; transform: translateY(-3px); }
  15% { left: 11%; transform: translateY(2px); }
  17% { left: 15%; transform: translateY(-2px); }
  19% { left: 18%; transform: translateY(1px); }
  21% { left: 20%; transform: translateY(-1px); }
  23% { left: 19%; transform: translateY(2px); }
  25% { left: 22%; transform: translateY(-3px); }
  27% { left: 24%; transform: translateY(0px); }
  29% { left: 26%; transform: translateY(2px); }
  31% { left: 28%; transform: translateY(-1px); }
  33% { left: 30%; transform: translateY(1px); }
  35% { left: 29%; transform: translateY(-2px); }
  37% { left: 31%; transform: translateY(0px); }
  39% { left: 34%; transform: translateY(2px); }
  41% { left: 36%; transform: translateY(-1px); }
  43% { left: 38%; transform: translateY(1px); }
  45% { left: 41%; transform: translateY(-2px); }
  47% { left: 43%; transform: translateY(0px); }
  49% { left: 45%; transform: translateY(2px); }
  51% { left: 48%; transform: translateY(-2px); }
  53% { left: 50%; transform: translateY(1px); }
  55% { left: 52%; transform: translateY(-1px); }
  57% { left: 51%; transform: translateY(3px); }
  59% { left: 53%; transform: translateY(-2px); }
  61% { left: 56%; transform: translateY(1px); }
  63% { left: 58%; transform: translateY(-3px); }
  65% { left: 57%; transform: translateY(2px); }
  67% { left: 59%; transform: translateY(-1px); }
  69% { left: 61%; transform: translateY(1px); }
  71% { left: 63%; transform: translateY(-2px); }
  73% { left: 66%; transform: translateY(0px); }
  75% { left: 68%; transform: translateY(2px); }
  77% { left: 70%; transform: translateY(-1px); }
  79% { left: 73%; transform: translateY(1px); }
  81% { left: 75%; transform: translateY(-2px); }
  83% { left: 77%; transform: translateY(0px); }
  85% { left: 79%; transform: translateY(2px); }
  87% { left: 78%; transform: translateY(-1px); }
  89% { left: 81%; transform: translateY(1px); }
  91% { left: 83%; transform: translateY(-2px); }
  93% { left: 85%; transform: translateY(0px); }
  95% { left: 88%; transform: translateY(2px); }
  97% { left: 90%; transform: translateY(-1px); }
  99% { left: 92%; transform: translateY(1px); }
  100% { left: 95%; transform: translateY(0px); }
}

/* Responsive amélioré */

@media screen and (max-width: 768px) {
  .menu-vertical {
    position: static;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 1em;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
  }
  .menu-vertical a {
    width: 100%;
    text-align: center;
    padding: 0.5em 0;
  }
  .contenu-centre {
    flex-direction: column;
    padding: 1em;
  }
  .image-centre {
    max-width: 100%;
    margin-top: 0;
  }
  .twitch-apercu {
    max-width: 100%;
    margin-top: 0;
  }
  .galerie-peintures {
    padding: 1em;
  }
  .texte-intro {
    margin-top: 0;
    padding: 0 0.5em;
  }
}