/* ============================================================
   THE BISOU — show.css (modernisé 2025)
   Remplace le layout en tableau par CSS Grid
   Supprime les dépendances jQuery / Fancybox / vtip / mytip
   ============================================================ */

/* ----------------------------------------------------------
   Reset & Base
   ---------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Electrolize', sans-serif;
  text-transform: uppercase;
  background: url('../design/show/bisoub_deg.png') left top;
}

img {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
}

a {
  text-decoration: none;
  font-weight: 200;
  cursor: default;
}

a.frame,
a.oeil {
  cursor: pointer !important;
}

p {
  margin: 0;
  padding: 0 5px;
  color: #fff;
}

fieldset {
  border: none;
}

/* ----------------------------------------------------------
   Layout principal
   ---------------------------------------------------------- */

#shop {
  margin: 0;
  padding: 0;
}

#global {
  --cell: 130px;
  --cols: 7;
  width: calc(var(--cell) * var(--cols));
  margin: 0 auto;
}

/* ----------------------------------------------------------
   CSS Grid (remplace le <table>)
   ---------------------------------------------------------- */

.grid-layout {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(3, var(--cell));
  width: calc(var(--cell) * var(--cols));
}

.cell {
  width: var(--cell);
  height: var(--cell);
  position: relative;
  overflow: hidden;
}

.cell a {
  display: block;
  width: 100%;
  height: 100%;
}

.cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Couleurs de fond des cellules */
.cell.yellow {
  background: #FFFF00;
}

.cell.stellar {
  background: #FFFF00;
}

/* ----------------------------------------------------------
   Classes de cellules (fidèles à l'original)
   ---------------------------------------------------------- */

.onefive a {
  display: block;
  width: 100%;
  height: 100%;
  background: url('../design/show/blue.png') left top no-repeat;
  background-size: cover;
}

.onesix a {
  display: block;
  width: 100%;
  height: 100%;
  background: url('../design/show/1.6.png') left top no-repeat;
  background-size: cover;
}

.onesix a:hover {
  background-image: url('../design/show/1.6_over.png');
}

.shopclick {
  background: url('../design/show/shop_tl.png') left top no-repeat;
  background-size: cover;
}

.shopclick a {
  background: #FF0000;
  color: #000;
  display: block;
  font-size: 49px;
  padding: 7px;
  width: 100%;
  height: 100%;
  cursor: pointer !important;
}

.shopclick a:hover {
  background-color: #cc0000;
}

/* ----------------------------------------------------------
   Navigation (#theshop)
   ---------------------------------------------------------- */

.bisous_photo {
  /* espace entre la grille et le nav */
}

#theshop {
  color: #fff;
  text-align: left;
}

#theshop ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  list-style: none;
}

#theshop ul li {
  list-style: none;
  margin-right: 20px;
}

#theshop a {
  color: #2d0246;
  font-size: 40px;
}

#theshop a:hover {
  color: #FF0000;
}

li.libisou {
  color: #2d0246;
  font-weight: 100;
  display: block !important;
  flex-basis: 100%;
  font-size: 13px;
  text-transform: none;
  margin-top: 4px;
}

/* ----------------------------------------------------------
   Lightbox moderne (remplace Fancybox)
   Utilise l'élément natif <dialog>
   ---------------------------------------------------------- */

dialog.lightbox {
  padding: 0;
  background: #000;
  border: 4px solid #0000FF;
  max-width: 92vw;
  max-height: 92vh;
  overflow: hidden;
  position: fixed;
}

dialog.lightbox::backdrop {
  background: rgba(255, 0, 0, 0.88);
}

.lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #0000FF;
  color: #FFFF00;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 10px;
  z-index: 10;
  font-family: 'Electrolize', sans-serif;
  text-transform: uppercase;
  line-height: 1;
}

.lightbox-close:hover {
  background: #FF0000;
  color: #FFFF00;
}

.lightbox-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-content img {
  max-width: 88vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lightbox-content iframe {
  width: 70vw;
  height: 70vh;
  border: none;
  display: block;
}

/* ----------------------------------------------------------
   Tooltips CSS purs (remplace vtip.js / mytip.js)
   Usage : <a data-tooltip="Mon texte">...</a>
   ---------------------------------------------------------- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #FFFF00;
  padding: 5px 10px;
  font-size: 11px;
  font-family: 'Electrolize', sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 200;
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ----------------------------------------------------------
   Overlay / messages divers
   ---------------------------------------------------------- */

.alert {
  background: #00FF00;
  color: #000;
  width: 100%;
  padding: 6px;
}

.iloveyou {
  color: #FF0000;
  font-size: 59px;
  margin: 140px auto 0;
  padding: 0;
  text-align: center;
  width: 600px;
}

/* ----------------------------------------------------------
   Formulaires
   ---------------------------------------------------------- */

#formyourname {
  padding-top: 100px;
  width: 500px;
  text-align: center;
  margin: 0 auto;
}

p.pyourname {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  color: #FF0000;
  font-size: 34px;
  text-transform: uppercase;
  padding-top: 5px;
}

.submitname {
  background: #FF0000;
  border: 2px solid #FFFF00;
  color: #FFFF00;
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  font-family: 'Electrolize', sans-serif;
}

/* ----------------------------------------------------------
   The Shop (fancyhtml/shop.php)
   ---------------------------------------------------------- */

body#bodyshop {
  background: #FF0000;
  padding: 5px;
  margin-top: 19px;
}

.unit_shop p, .unit_shop a {
  color: #000;
  font-size: 29px;
  line-height: 24px;
}

.unit_shop div {
  float: left;
}

.clear {
  clear: both;
  visibility: hidden;
  margin: 0;
  padding: 0;
}

.quantity p {
  width: 121px;
  background: #FFFF00;
  padding: 5px;
  border-radius: 10px;
}

.quantity p a {
  color: #FF0000;
}

.plus p {
  color: #FFFF00;
}

.package {
  min-width: 202px;
}

.package p {
  width: 175px;
  color: #FFFF00;
  padding: 5px;
  border-radius: 10px;
}

.prix p {
  width: auto;
  height: 90px;
  letter-spacing: -3px;
}

.prix p a {
  font-size: 37px !important;
  font-weight: lighter;
  line-height: 65px !important;
  color: #000;
}

.prixten {
  margin-left: -11px;
  padding-top: 35px;
}

.boutonpaypal {
  height: 60px;
  left: 569px;
  margin-left: 30px;
  padding-top: 10px;
}

.boutonpaypal p a {
  display: block;
  background: #000;
  color: #FFFF00;
  padding: 5px;
  border-radius: 10px;
}

.boutonpaypal p {
  width: auto;
}

.extra {
  font-size: 13px;
  line-height: 17px;
  display: block;
}

#shop_content {
  margin: 20px auto 0 43px;
}

.inputpaypal {
  background: #000;
  border: none;
  border-radius: 10px;
  color: #FFFF00;
  cursor: pointer;
  font-family: 'Electrolize', sans-serif;
  font-size: 29px;
  font-weight: lighter;
  padding: 1px;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   Galerie / préacccueil
   ---------------------------------------------------------- */

#body_preac {
  background: #0000FF;
  font-family: 'Electrolize', sans-serif;
}

.yourname {
  background: #0000FF !important;
}

#preview {
  position: absolute;
  display: none;
  color: #fff;
}

/* ----------------------------------------------------------
   Responsive — tablette (< 930px) :
   les cellules se redimensionnent proportionnellement
   ---------------------------------------------------------- */

@media (max-width: 930px) {
  #global {
    --cell: calc((100vw - 20px) / 7);
    width: 100%;
    padding: 0 10px;
  }

  .grid-layout {
    grid-template-columns: repeat(7, var(--cell));
    grid-template-rows: repeat(3, var(--cell));
    width: 100%;
  }

  .cell {
    width: var(--cell);
    height: var(--cell);
  }

  .shopclick a {
    font-size: calc(var(--cell) * 0.35);
    padding: 5px;
  }

  #theshop a {
    font-size: clamp(18px, 4vw, 40px);
  }
}

/* ----------------------------------------------------------
   Responsive — mobile (< 560px) :
   passage en 5 colonnes, masquage des cellules vides
   ---------------------------------------------------------- */

@media (max-width: 560px) {
  #global {
    --cell: calc(100vw / 5);
    padding: 0;
  }

  .grid-layout {
    grid-template-columns: repeat(5, var(--cell));
    grid-template-rows: repeat(3, var(--cell));
    width: 100%;
  }

  /* On masque les 1re et 7e colonnes (toujours vides) */
  .cell--empty {
    display: none;
  }

  .cell {
    width: var(--cell);
    height: var(--cell);
  }

  .shopclick a {
    font-size: calc(var(--cell) * 0.32);
    padding: 4px;
  }

  #theshop a {
    font-size: 22px;
  }

  #theshop ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px;
  }

  #theshop ul li {
    margin-right: 0;
  }

  .lightbox-content iframe {
    width: 92vw;
    height: 75vh;
  }

  .lightbox-content img {
    max-width: 92vw;
    max-height: 80vh;
  }
}