@import url(https://db.onlinewebfonts.com/c/a7fcb1becc12274d5b761b1d895f8aa9?family=Minecraft+Ten);

:root {
  --effect-border-size: 5px;
  --cutout-pixel-size: 5px;
  --outline-border-size: 3px;
  /* prettier-ignore */
  --border-cutout-path: polygon(
    0px var(--cutout-pixel-size), /* Punkt 1: Links unten */
    var(--cutout-pixel-size) var(--cutout-pixel-size), /* Punkt 2: Quadrat oben links */
    var(--cutout-pixel-size) 0px, /* Punkt 3: Links oben */
    calc(100% - var(--cutout-pixel-size)) 0px, /* Punkt 4: Rechts oben */
    calc(100% - var(--cutout-pixel-size)) var(--cutout-pixel-size), /* Punkt 5: Quadrat oben rechts */
    100% var(--cutout-pixel-size), /* Punkt 6: Rechts oben */
    100% calc(100% - var(--cutout-pixel-size)), /* Punkt 7: Rechts unten */
    calc(100% - var(--cutout-pixel-size)) calc(100% - var(--cutout-pixel-size)), /* Punkt 8: Quadrat unten rechts */
    calc(100% - var(--cutout-pixel-size)) 100%, /* Punkt 9: Rechts unten */
    var(--cutout-pixel-size) 100%,  /* Punkt 10: Links unten */
    var(--cutout-pixel-size) calc(100% - var(--cutout-pixel-size)), /* Punkt 11: Quadrat unten links */
    0px calc(100% - var(--cutout-pixel-size)) /* Punkt 12: Links unten */
  )
}

/* --- Styles généraux de la page et des drstorys --- */

#dreamrelaxstory-page .parallax-item:nth-of-type(1) {
  min-height: 800px;
}

#dreamrelaxstory-page .parallax-item:nth-of-type(2) {
  margin-top: 35vh;
  min-height: 200px;
}

#dreamrelaxstory-page article {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dreamrelaxstory-page .parallax__layer-img {
    top: -5.5%;
}

@media (max-width: 768px) and (orientation: portrait) {
    #dreamrelaxstory-page .parallax__title {
        margin-bottom: 3em;
    }
}

/* Le container prend 100% de la largeur disponible */
.drstory-container {
  width: 100%;
  margin: 0 auto;
}

/* Bloc haut vert/bleu centré, largeur 75% */
.drstory-content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 2rem;
  margin: 0 auto 3rem auto;
  width: 75%;              /* bloc vert/bleu sur 75% */
}

/* Inversion logo / texte */
.drstory-content.reversed {
  flex-direction: row-reverse;
}

/* Logo plus gros */
.drstory-logo {
  flex: 0 0 55%;           /* plus large qu'avant */
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texte un peu plus petit que le logo, mais toujours flexible */
.drstory-text {
  flex: 1 1 55%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.drstory-text h1 {
  font-weight: 700;
  margin-bottom: 0;
}

.drstory-text p {
  font-size: 1.1rem;
  margin-top: 1rem;
}

/* Bandeau d’images en pleine largeur sous le bloc */
.drstory-img {
  width: 100%;
}

.drstory-img-row {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
}

.drstory-img-item {
  flex: 0 0 20%;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drstory-img-row img {
  border-radius: var(--border-radius-10);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive : bloc haut passe en colonne */
@media (max-width: 992px) {
  .drstory-content,
  .drstory-content.reversed {
    flex-direction: column;
    width: 100%;           /* sur mobile, on reprend 100% */
  }

  .drstory-logo,
  .drstory-text {
    flex: 1 1 auto;
    width: 100%;
    align-items: flex-end;
  }

  .drstory-img-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .drstory-img-item {
    flex: 0 0 calc(50% - 1rem);
    min-width: 0;
  }
}

.dr-sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    position: absolute;
    bottom: 400px;
    right: 20px;
    transform: scale(1.5);
}

@media (max-width: 992px) {
    .dr-sign {
      right: 0px;
      bottom: 300px;
      transform: scale(1);
    }
}


/* --- Styles du Modal (DreamRelaxModal) --- */

#DreamRelaxModal .modal-dialog {
  justify-content: center;
  min-width: 70%;
}

@media (max-width: 991.98px) {
  #DreamRelaxModal .modal-dialog {
    min-width: 90%;
  }
}

#DreamRelaxModal .modal-content {
  max-width: 100%;
  max-height: 100dvh;
  overflow: hidden;
  border: none;
  border-radius: 20px;
}

#DreamRelaxModal .modal-body {
  display: flex;
  padding: 0;
  background: transparent;
}

#DreamRelaxModal .modal-image {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#DreamRelaxModal .modal-image img {
  max-width: 100%;
  /* max-height: 70vh; est en commentaire, donc conservé comme tel */
}

/* Boutons de navigation/fermeture du Modal */
#prevBtn .icon-modal svg,
#nextBtn .icon-modal svg,
#closeBtn .icon-modal svg {
  height: 40px !important;
  width: 40px !important;
  filter: drop-shadow(0px 5px 10px #000000a2);
}

#prevBtn {
  left: 0px;
}

#nextBtn {
  right: 0px;
}

/* --- Styles du Bouton "Portal" et Particules --- */

.btn-dreamrelax-outline button {
  font-family: "Minecraft Ten";
  text-transform: uppercase;
  font-size: 1.75rem;
  text-shadow: hsla(0, 0%, 0%, 0.85) 0px 2px 0px;
  cursor: pointer;
  padding: 0.5rem 5rem;
  color: #fff;
  background: url("https://i.redd.it/841666uly00b1.gif") center/70px repeat;
  border: none;
  border-top: var(--effect-border-size) solid #7220b7;
  border-inline: var(--effect-border-size) solid #450497;
  border-bottom: var(--effect-border-size) solid #49146f;
  clip-path: var(--border-cutout-path);
}

/* Remplacement de &:hover */
.btn-dreamrelax-outline button:hover {
  background-color: #540ba3;
}

.btn-dreamrelax-outline button:hover span {
  display: inline-block;
  transform: scale(1.0357);
}

/* Remplacement de &:active */
.btn-dreamrelax-outline button:active {
  background-color: #008a44;
}

.btn-dreamrelax-outline button:active span {
  transform: scale(1);
}

/* Remplacement de &:focus */
.btn-dreamrelax-outline button:focus {
  outline: none;
}

.btn-dreamrelax-outline {
  background-color: black;
  border: var(--outline-border-size) solid black;
  clip-path: var(--border-cutout-path);
  transform: scale(1);
}

/* Remplacement de &:hover */
.btn-dreamrelax-outline:hover {
  transform: scale(1.02);
}

/* Remplacement de &:active */
.btn-dreamrelax-outline:active {
  background-color: white;
  border: var(--outline-border-size) solid white;
}

.btn-dreamrelax-wrapped {
  transition: filter 0.3s ease-out;
  will-change: filter;
}

.btn-dreamrelax-wrapped:hover {
  filter: drop-shadow(0px 0px 20px #7220b7);
}


/* Stats */
.drstory-stats.reversed {
    flex-direction: row-reverse;
}

.stat-box {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 5px 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.stat-box-link {
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.stat-box-link:hover {
    background: color-mix(in srgb, var(--story-accent, #333) 20%, transparent);
    border-color: color-mix(in srgb, var(--story-accent, #333) 28%, rgba(0, 0, 0, 0.03));
}

.stat-box-link:focus-visible {
    outline: 2px solid rgba(126, 184, 230, 0.9);
    outline-offset: 2px;
}


.timeline-pills-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    gap: 10px;
}

.timeline-pill {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    text-decoration: none; /* Si tu en fais des liens */
    color: inherit;
    border: 2px solid transparent;
}

.pill-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    /* Empêche le texte de se casser sur plusieurs lignes */
    white-space: nowrap;
    overflow: hidden;
}

.pill-title {
    font-weight: 900;
    font-size: 0.95rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pill-date {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* --- DESKTOP : Aligné et Propre --- */
@media (min-width: 992px) {
    .timeline-pills-container {
        flex-direction: row;
        padding: 8px;
        gap: 8px;
        /* Si trop de saisons, on permet de scroller horizontalement
           au lieu de tout écraser */
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* On cache la barre de scroll pour l'esthétique */
    .timeline-pills-container::-webkit-scrollbar {
        display: none;
    }
    .timeline-pills-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .timeline-pill {
        /* flex: 1 permet d'occuper tout l'espace disponible
           min-width: max-content assure que la pilule s'adapte au texte */
        flex: 1 0 auto;
        min-width: 200px;
        justify-content: flex-start;
    }

    .pill-next {
        background-color: transparent !important;
        border: 2px dashed #ccc; /* Un petit style différent pour le futur */
    }
}