/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* Styles généraux */
/* Container du header */

.hero {
  position: relative;        /* pour que les éléments flottants soient relatifs à ce conteneur */
  text-align: center;
  margin-bottom: 2rem;
}

/* Image de fond */

.hero-img {
  float: left;       /* l’image reste à gauche */
  width: 600px;
  height: auto;
  margin-right: 2px; /* espace entre l’image et le reste du contenu */
}

/* Navigation flottante sur l’image, alignée verticalement à gauche */
.hero-nav {
  position: absolute;
  top: 20px;          /* distance depuis le haut de l’image */
  left: 20px;         /* distance depuis le côté gauche */
  display: flex;
  flex-direction: column;  /* empile les boutons verticalement */
  gap: 0.5rem;            /* espace entre les boutons */
}

.hero-nav a {
  display: inline-block;
  background: #f7cad0;       /* rose pastel */
  color: #111;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}

.hero-nav a:hover {
  background: #cdb4db;       /* violet pastel */
  transform: scale(1.05);
}

/* Navigation flottante sur l’image, alignée verticalement à gauche */
.hero-title {
  position: absolute;
  top: 50px;          /* distance depuis le haut de l’image */
  left: 400px;         /* distance depuis le côté gauche */
  display: flex;
  flex-direction: column;  /* empile les boutons verticalement */
  gap: 0.5rem;            /* espace entre les boutons */
}

.hero-title a {
  display: inline-block;
  background: #f7cad0;       /* rose pastel */
  color: #111;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}

.hero-title a:hover {
  background: #cdb4db;       /* violet pastel */
  transform: scale(1.05);
}


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

body {
  font-family: 'Amiamie Regular',Arial, sans-serif;
  margin: 0;
  background-color: #FFFFFF; /* fond noir profond */
  color: #3D5157; /* texte blanc cassé */
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
  text-align: center; /* centre les blocs enfants */
}

.cloud-title {
  display: inline-block;       /* taille selon le texte */
  background: #fff;            /* couleur du nuage */
  color: #111;                 /* texte noir */
  padding: 1rem 3rem;          /* espace autour du texte */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* forme nuageuse */
  box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* ombre pour flotter */
  font-family: 'Amiamie Regular', cursive; /* police manuscrite */
  font-size: 2.5rem;
  text-align: center;
  margin: 2rem auto;
  position: absolute;
}

/* Styles des blocs encadrés */
.block {
  display: inline-block;      /* largeur = contenu */
  max-width: 90%;            /* pour éviter que ça déborde sur petits écrans */
  background: #f7cad0;       /* couleur block */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  border: 0px solid #95BBC2;
  text-align: center;        /* recentre le texte */
  padding: 0.5rem;         /* petit espace autour de l’image */
  margin: 1rem;
}

.block.full {
  display: block;
  max-width: 100%;
  text-align: center;
}

/* Header */
header h1 {
  margin: 0;
  font-size: 2.5rem;
  text-align: center;
  font-family: 'Amiamie Regular'; /* police manuscrite */
  color: #3D5157;
}

nav {
  text-align: center;
  margin-top: 1rem;
}

nav a {
  display: inline-block;
  color: #3D5157;
  background: #f7cad0; /* rose pastel */
  padding: 0.5rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: bold;
  transition: transform 0.2s, background 0.3s;
}

nav a:hover {
  background: #cdb4db; /* violet pastel */
  transform: scale(1.05);
}

/* Galerie */
main h2 {
  color: #3D5157;
  text-align: center;
  margin-bottom: 1.5rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.gallery img {

  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  border: 3px solid #f7cad0; /* cadre pastel autour des dessins */
  transition: transform 0.3s ease-in-out, border-color 0.3s;
  width: 250px;            /* taille des vignettes */
  height: 250px;
  object-fit: cover;       /* recadre proprement sans déformer */
  border-radius: 8px;
  display: block;
}

.gallery img:hover {
  transform: scale(1.05);
  border-color: #cdb4db; /* change de pastel au hover */
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #aaa;
}

footer p {
  margin: 0;
}

.myzines-main {
  display: flex;
  gap: 2rem;
}

/* Partie gauche */
.content-left {
  flex: 1;
}

/* Bloc du slider à droite */
.slider-block {
  flex: 1;
  max-width: 400px;
  background: #1c1c1c;      /* fond sombre */
  padding: 1rem;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Slider interne */
.slider-right {
  position: relative;
  text-align: center;
  overflow: hidden;         /* empêche les flèches ou images de sortir */
}

.slide {
  display: none;             /* slides cachées par défaut */
}

.slide.active {
  display: block;
}

.slider-block {
  flex: 1;
  max-width: 400px;
  background: #1c1c1c;   /* couleur du fond */
  padding: 0.5rem;       /* réduit l’espace autour de l’image */
  border-radius: 12px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Image du slider */
.slide img {
  width: 100%;
  border-radius: 12px;
  display: block;
}


.slide .description {
  margin-top: 0.5rem;
  color: #f5f5f5;
  background: #111;
  padding: 0.5rem;
  border-radius: 8px;
}

/* Flèches à l’intérieur du bloc */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #f7cad0;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 12px;
  font-weight: bold;
}

.prev { left: 10px; }
.next { right: 10px; }

.prev:hover, .next:hover {
  background: #cdb4db;
}

.lightbox {
  display: none;              /* cachée par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);  /* fond sombre semi-transparent */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 100;
}

.lightbox-img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 12px;
}

.lightbox-desc {
  margin-top: 1rem;
  color: #fff;
  text-align: center;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}