/* ==================================================================================================
   01. SECTIONS COMMUNES : BANDEAU DÉFILANT + BANNIÈRE
   ================================================================================================== */

.message {
  width: 100%;
  min-height: 58px;
  margin: 18px 0 0;
  background-color: rgba(0, 0, 0, 0.42);
  border: 3px ridge var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.marquee-container {
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 25px;
  border-radius: 25px;
}

.marquee2 {
  animation-delay: 15s;
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: -100%; }
}

@keyframes marquee-mobile {
  0% { left: 100%; }
  100% { left: -250%; }
}

p.lecture2 {
  margin: 0;
  padding: 0.2rem;
  font-family: 'Pally', sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 2.2rem);
  color: #c6e2ff;
  text-shadow:
    0 0 6px rgba(202,228,225,0.92),
    0 0 30px rgba(202,228,225,0.34),
    0 0 12px rgba(30,132,242,0.52),
    0 0 21px rgba(30,132,242,0.92),
    0 0 34px rgba(30,132,242,0.78),
    0 0 54px rgba(30,132,242,0.92);
  letter-spacing: 0.12rem;
  text-align: center;
}

img.banner {
  display: block;
  width: 100%;
  height: 30px;
  margin: 14px 0;
  object-fit: cover;
}

@media (max-width: 980px) {
  .message {
    min-height: 52px;
  }
}

@media (max-width: 760px), ((min-width: 761px) and (max-width: 900px) and (orientation: portrait)) {
  .message {
    min-height: 46px;
  }

  .marquee {
    animation: marquee-mobile 30s linear infinite;
  }

  .marquee2 {
    animation-delay: 15s;
  }

  p.lecture2 {
    letter-spacing: 0.03rem;
  }

  img.banner {
    display: none;
  }
}


/* ==================================================================================================
   02. SECTIONS COMMUNES : BLOC DÉPLIABLE FINAL
   ================================================================================================== */

div.finale {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  height: auto;
  overflow: visible;
}

.bloc-depliable {
  display: block;
  width: 100%;
  border: 3px ridge var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(5, 28, 74, 0.82), rgba(8, 87, 131, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), var(--shadow);
}

.bloc-depliable summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  text-shadow: 1px 1px black;
  position: relative;
}

.bloc-depliable summary::-webkit-details-marker {
  display: none;
}

.bloc-depliable summary::after {
  content: "▾";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--gold-2);
}

.bloc-depliable[open] summary::after {
  content: "▴";
}

.finale-contenu {
  padding: 0 20px 20px;
}

.finale-contenu h2 {
  margin: 4px 0 14px;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  line-height: 1.2;
  text-align: center;
  color: transparent;
  background: linear-gradient(to right, var(--gold-1), var(--gold-2), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
}

.finale-contenu p {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1rem, 1.08vw, 1.08rem);
  line-height: 1.8;
  color: #ffffff;
  text-align: justify;
  text-shadow: 1px 1px black;
}

@media (max-width: 760px) {
  div.finale {
    margin-top: 14px;
  }

  .bloc-depliable summary {
    padding: 14px 42px 14px 14px;
    font-size: 0.98rem;
    text-align: left;
  }

  .finale-contenu {
    padding: 0 14px 14px;
  }

  .finale-contenu h2 {
    font-size: 1.08rem;
    text-align: left;
  }

  .finale-contenu p {
    font-size: 0.96rem;
    line-height: 1.7;
  }
}