/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Playfair Display', Georgia, 'Cambria', serif;
  color: #3a352e;
  background-color: #e8e4dc;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------- Page d'accueil ---------- */

.page-accueil {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('Images/fond-site.png') center center / cover no-repeat fixed;
  padding: 4vh 4vw;
}

/* ---------- Collage périphérique ---------- */

.collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.collage-img {
  position: absolute;
  width: 20vw;
  max-width: 340px;
  min-width: 110px;
  opacity: 0.92;
  filter: drop-shadow(0 10px 25px rgba(40, 35, 25, 0.12));
}

.pos-haut-extreme-gauche {
  top: -1%;
  left: -1%;
  width: 21vw;
}

.pos-haut-gauche {
  top: 19%;
  left: 19%;
  width: 17vw;
  max-width: 300px;
}

.pos-milieu-haut {
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 33vw;
  max-width: 510px;
}

.pos-haut-droite {
  top: 0;
  right: 7%;
  width: 25vw;
  max-width: 410px;
}

.pos-milieu-gauche {
  top: 34%;
  left: 9%;
  width: 22vw;
  max-width: 380px;
}

.pos-milieu-droite {
  top: 20%;
  right: 5%;
  width: 24vw;
  max-width: 390px;
  opacity: 1;
}

.pos-bas-milieu-gauche {
  bottom: 9%;
  left: 4%;
  width: 20vw;
}

.pos-bas-centre-gauche {
  bottom: 3%;
  left: 15%;
  width: 25vw;
  max-width: 400px;
}

.pos-bas-centre-droite {
  bottom: 2%;
  right: 20%;
  width: 24vw;
  max-width: 400px;
}

.pos-bas-droite {
  bottom: 14%;
  right: 9%;
  width: 16vw;
  max-width: 260px;
}

.pos-bas-extreme-droite {
  bottom: 0;
  right: 1%;
  width: 17vw;
  max-width: 280px;
  opacity: 1;
}

/* ---------- Bloc central ---------- */

.hero-central {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 90vw;
}

.titre {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  letter-spacing: 0.02em;
  color: #33302a;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}

.balle-centrale {
  width: clamp(200px, 26vw, 430px);
  margin: 0.5rem 0;
  filter: drop-shadow(0 25px 45px rgba(30, 25, 15, 0.18));
}

.sous-titre {
  margin: 0.5rem 0 0;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: #4a4335;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.6);
}

/* ---------- Section présentation ---------- */

.page-presentation {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('Images/fond-site.png') center center / cover no-repeat fixed;
  padding: 10vh 6vw;
}

.balle-mini {
  position: absolute;
  top: clamp(24px, 4vh, 48px);
  left: clamp(24px, 4vw, 48px);
  width: clamp(80px, 9vw, 150px);
  opacity: 0.9;
  filter: drop-shadow(0 10px 20px rgba(40, 35, 25, 0.15));
  pointer-events: none;
}

.presentation-contenu {
  position: relative;
  z-index: 2;
  max-width: 760px;
  width: 100%;
}

.titre-section {
  margin: 0 0 2.5rem;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  letter-spacing: 0.02em;
  color: #33302a;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}

.texte-presentation {
  font-family: 'Lora', Georgia, 'Cambria', serif;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.9;
  color: #3a352e;
}

.texte-presentation p {
  margin: 0 0 1.8rem;
}

.texte-presentation p:last-child {
  margin-bottom: 0;
}

.texte-presentation strong {
  font-weight: 600;
}

.texte-presentation em {
  font-style: italic;
}

.texte-presentation p.texte-charniere {
  text-align: center;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  margin: 0.5rem 0 2rem;
}

/* ---------- Section galerie 1 ---------- */

.page-galerie {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: url('Images/fond-site.png') center center / cover no-repeat fixed;
  padding: 10vh 6vw;
}

.galerie-contenu {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  width: 100%;
}

.planches {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 3vw, 56px);
  width: 100%;
}

.planche {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 380px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(30, 25, 15, 0.18));
}

/* Desktop : les trois planches sont uniformisées par hauteur commune
   plutôt que par largeur, pour un poids visuel comparable malgré
   leurs proportions légèrement différentes. */
@media (min-width: 901px) {
  .planches {
    gap: clamp(32px, 4vw, 72px);
    margin-top: 48px;
  }

  .planche {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: clamp(420px, 32vw, 520px);
  }
}

/* ---------- Section commande / affiches ---------- */

.page-commande {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: url('Images/fond-site.png') center center / cover no-repeat fixed;
  padding: 10vh 6vw;
}

.commande-contenu {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  width: 100%;
}

.commande-grille {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.5fr;
  align-items: start;
  gap: clamp(32px, 5vw, 90px);
  margin-top: clamp(40px, 7vh, 90px);
}

.commande-col {
  min-width: 0;
}

/* --- Zone gauche : livre --- */

.commande-col--gauche {
  text-align: center;
}

.commande-intro {
  margin: 0;
  text-align: left;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  color: #33302a;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.55);
}

.commande-sous-intro {
  margin: 1.2rem 0 0;
  text-align: left;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: #6b6459;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.55);
}

.livre-couverture {
  display: block;
  width: clamp(170px, 15vw, 230px);
  height: auto;
  margin: clamp(24px, 3vw, 40px) auto 0;
  filter: drop-shadow(0 18px 34px rgba(25, 22, 15, 0.28));
}

.lien-decouvrir {
  display: inline-block;
  margin-top: clamp(20px, 2.5vw, 34px);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: #33302a;
  text-decoration: none;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.55);
  transition: opacity 0.2s ease;
}

.lien-decouvrir:hover,
.lien-decouvrir:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Zone centrale : balle --- */

.commande-col--centre {
  align-self: center;
  display: flex;
  justify-content: center;
}

.balle-commande {
  width: clamp(240px, 30vw, 440px);
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 25px 45px rgba(30, 25, 15, 0.15));
}

/* --- Zone droite : commande d'affiche --- */

.commande-col--droite {
  font-family: 'Lora', Georgia, 'Cambria', serif;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  color: #3a352e;
}

.commande-col--droite p {
  margin: 0 0 1.2rem;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.5);
}

.commande-titre {
  margin: 0 0 1.4rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  color: #33302a;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.55);
}

.commande-tarifs,
.commande-qualite {
  line-height: 1.9;
}

.commande-tarifs {
  margin-top: 1.8rem;
}

.commande-mail a,
.commande-contact a {
  color: #4a4335;
  text-underline-offset: 3px;
}

.versions-affiche {
  margin-top: clamp(32px, 4vh, 56px);
}

.commande-titre--centre {
  text-align: center;
}

.versions-miniatures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 26px);
}

.versions-miniatures img {
  width: clamp(78px, 8vw, 120px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(30, 25, 15, 0.2));
}

/* --- Contact général --- */

.commande-contact {
  margin: clamp(48px, 8vh, 90px) 0 0;
  text-align: center;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.5);
}

/* Desktop : les quatre miniatures « versions affiche » tiennent sur une
   seule ligne dans la zone droite, sans élargir la colonne. */
@media (min-width: 901px) {
  .versions-miniatures {
    flex-wrap: nowrap;
    gap: clamp(8px, 1vw, 18px);
  }

  .versions-miniatures img {
    width: clamp(58px, 5.6vw, 104px);
    min-width: 0;
  }
}

/* ---------- Tablette ---------- */

@media (max-width: 900px) {
  .collage-img {
    opacity: 0.75;
  }

  .pos-haut-gauche,
  .pos-bas-droite {
    display: none;
  }

  .pos-haut-extreme-gauche,
  .pos-haut-droite,
  .pos-milieu-gauche,
  .pos-milieu-droite,
  .pos-bas-milieu-gauche,
  .pos-bas-centre-gauche,
  .pos-bas-centre-droite,
  .pos-bas-extreme-droite {
    width: 26vw;
  }

  .pos-milieu-haut {
    width: 40vw;
  }

  .balle-mini {
    width: clamp(64px, 11vw, 110px);
  }

  .presentation-contenu {
    max-width: 620px;
  }

  /* Section commande : passage en une seule colonne, ordre livre / balle / commande */
  .commande-grille {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(36px, 6vw, 64px);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .commande-col {
    width: 100%;
    max-width: 560px;
  }

  .commande-col--centre {
    align-self: auto;
  }

  .commande-intro,
  .commande-sous-intro {
    text-align: center;
  }

  .balle-commande {
    width: clamp(220px, 46vw, 320px);
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
  .collage {
    display: none;
  }

  .page-accueil {
    padding: 6vh 6vw;
    background-attachment: scroll;
  }

  .balle-centrale {
    width: clamp(180px, 55vw, 320px);
  }

  .page-presentation {
    min-height: auto;
    padding: 9vh 7vw;
    background-attachment: scroll;
  }

  .balle-mini {
    width: clamp(48px, 13vw, 76px);
    top: 1%;
    left: 2%;
  }

  .titre-section {
    margin-bottom: 1.8rem;
  }

  .texte-presentation {
    font-size: 1rem;
    line-height: 1.75;
  }

  .texte-presentation p {
    margin-bottom: 1.4rem;
  }

  .page-galerie {
    min-height: auto;
    padding: 9vh 7vw;
    background-attachment: scroll;
  }

  .planches {
    gap: 28px;
  }

  .page-commande {
    min-height: auto;
    padding: 9vh 7vw;
    background-attachment: scroll;
  }

  .commande-grille {
    margin-top: clamp(28px, 5vh, 48px);
  }

  .balle-commande {
    width: clamp(190px, 58vw, 280px);
  }

  .livre-couverture {
    width: clamp(160px, 46vw, 220px);
  }

  .versions-miniatures img {
    width: clamp(84px, 26vw, 120px);
  }
}

/* ---------- Lightbox : agrandissement des planches ---------- */

.page-galerie .planche,
.versions-miniatures img {
  cursor: zoom-in;
}

/* Zone « La Voie du jeu » : la couverture devient un lien, sans changer sa mise en page. */
.lien-livre {
  display: block;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 64px);
  background: rgba(24, 21, 16, 0.82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 26px);
  right: clamp(10px, 2vw, 26px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgba(0, 0, 0, 0.72);
  transform: scale(1.06);
}

body.no-scroll {
  overflow: hidden;
}