/* Magazine List Styles */

html {
  background-color: #595959;
  background-size: 200% auto;
  background-position: top center;
  background-attachment: fixed;
  font-family: arial;
  font-size: 18px;
}

body {
  background-color: #595959 !important;
}

h2 {
  margin-top: 5px;
  font-size: 18px;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}

/* Container principal */
.cover_cont_cont {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 20px;
}

/* Container de chaque magazine */
.cover_container {
  width: 50%;
  float: left;
  height: 230px;
  position: relative;
  margin-bottom: 40px;
}

/* Container de la couverture */
.cover_cont {
  overflow: hidden;
  left: 50%;
  margin-left: -75px;
  position: relative;
  width: 150px;
  height: 200px;
  margin-top: 10px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

/* Couverture */
.cover {
  width: 150px;
  height: 230px;
  background-size: 100% auto !important;
  position: relative;
  box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
  border-radius: 0px 0px 80px 0px;
  border-right: 1px solid #A2A2A2;
  z-index: 9;
  transition: all 250ms;
}

.coverback {
  border-radius: 0px !important;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 150px;
}

/* Coin de page */
.cornerpage {
  width: 100px;
  height: 110px;
  position: absolute;
  bottom: -1px;
  right: -16px;
  z-index: 9;
  transform: rotate(-18deg) scale(0.5) translateY(90px) translateX(10px);
  filter: drop-shadow(5px 5px 5px #222);
  transition: all 250ms;
}

/* Titre sous la couverture */
.cover_title {
  background: #cd2027;
  width: 130px;
  color: #FFFFFF;
  height: 15px;
  position: absolute;
  padding: 10px;
  font-size: 10px;
  font-weight: bold;
  bottom: -15px;
  z-index: 99;
  margin-left: 50%;
  left: -75px;
}

/* Couverture vide (placeholder) */
.cover_placeholder {
  background: #4b4b4b !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

.cover_empty .cover_cont {
  box-shadow: none;
}

.cover_empty .cornerpage {
  display: none;
}

.cover_title_empty {
  background: #4b4b4b !important;
}

/* Animation nouveau magazine - Flip 3D */

/* Titre caché au début */
.cover_new .cover_title {
  opacity: 0;
}

/* Face avant (couverture) - cachée au début et pré-inversée */
.cover_new .cover_front {
  opacity: 0;
  transform: scaleX(-1);
}

/* Pas de cornerpage ni border-radius pour le nouveau magazine */
.cover_new .cornerpage {
  display: none;
}

.cover_new .cover {
  border-radius: 0 !important;
}

/* Container initialement retourné */
.cover_new .cover_cont {
  transform: perspective(800px) rotateY(180deg);
}

/* Face arrière (dernière page) - visible au début */
.cover_new .cover_back_side {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 200px;
  background-size: 100% auto !important;
  z-index: 10;
}

/* Overlay blanc */
.cover_new .cover_cont::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  z-index: 102;
}

/* Animation active: zoom + flip */
.cover_new.animation-active {
  transform: scale(1.15);
  transition: transform 0.5s ease-out;
}

.cover_new.animation-active .cover_cont {
  animation: flip-cover 1s ease-in-out forwards;
}

.cover_new.animation-active .cover_front {
  animation: show-front 1s ease-in-out forwards;
}

.cover_new.animation-active .cover_back_side {
  animation: hide-back 1s ease-in-out forwards;
}

.cover_new.animation-active .cover_cont::after {
  animation: fade-overlay 0.5s ease-out forwards;
}

@keyframes flip-cover {
  0% { transform: perspective(800px) rotateY(180deg); }
  100% { transform: perspective(800px) rotateY(0deg); }
}

@keyframes show-front {
  0%, 49% { opacity: 0; transform: scaleX(-1); }
  50%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes hide-back {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes fade-overlay {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Animation terminée */
.cover_new.animation-done {
  transform: scale(1);
  transition: transform 0.5s ease-out;
}

.cover_new.animation-done .cover_cont {
  transform: perspective(800px) rotateY(0deg);
}

.cover_new.animation-done .cover_front {
  opacity: 1;
  transform: scaleX(1) !important;
}

.cover_new.animation-done .cover_back_side {
  opacity: 0;
}

.cover_new.animation-done .cover_cont::after {
  opacity: 0;
}

.cover_new.animation-done .cover_title {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* iPad portrait */
.cover_ipad {
  transform: scale(1.5) !important;
  margin-top: 60px !important;
  margin-bottom: 100px !important;
}

.cover_ipad.cover_new {
  transform: scale(1.5) !important;
}

.cover_ipad.cover_new.animation-active {
  transform: scale(1.65) !important;
}

.cover_ipad.cover_new.animation-done {
  transform: scale(1.5) !important;
}

/* iPad paysage */
@media screen and (orientation: landscape) {
  .cover_ipad {
    transform: scale(1.5) !important;
    margin-top: 80px !important;
    margin-bottom: 0 !important;
  }

  .cover_ipad.cover_new {
    transform: scale(1.5) !important;
  }

  .cover_ipad.cover_new.animation-active {
    transform: scale(1.7) !important;
  }

  .cover_ipad.cover_new.animation-done {
    transform: scale(1.5) !important;
  }
}

/* iPad Mini paysage (1024px) - 4 thumbnails sur une rangée */
@media screen and (min-width: 900px) {
  .cover_container {
    width: 25%;
  }
}

/* ========== DESKTOP (pas mobile, pas tablette) ========== */
.cover_desktop .cover_container {
  width: 25%;
  height: 380px;
  margin-bottom: 50px;
}

.cover_desktop .cover_cont {
  width: 220px;
  height: 292px;
  margin-left: -110px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.6);
}

.cover_desktop .cover {
  width: 220px;
  height: 340px;
}

.cover_desktop .coverback {
  width: 220px;
}

.cover_desktop .cover_title {
    width: 197px;
    height: 20px;
    padding: 12px;
    font-size: 13px;
    left: -110px;
    bottom: 35px;
}

.cover_desktop .cover_new .cover_back_side {
  width: 220px;
  height: 300px;
}

.cover_desktop .cover_placeholder {
  border-radius: 0px !important;
}

.cover_desktop h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

/* Hover effet desktop */
.cover_desktop .cover_container:not(.cover_empty) {
  cursor: pointer;
  transition: transform 0.2s;
}

.cover_desktop .cover_container:not(.cover_empty):hover {
  transform: scale(1.05);
}

.cover_desktop .cover_container:not(.cover_empty):hover .cover_cont {
  box-shadow: 0px 0px 25px rgba(0,0,0,0.8);
}