/* ============================================================
   DESKTOP — dépliant horizontal  (> 768px uniquement)
   ============================================================ */
@media only screen and (min-width: 769px) {

  @font-face {
    font-family: 'imprint MT Shadow';
    src: url('static/font/imprint-mt-shadow.woff') format('woff'),
      url('static/font/imprint-mt-shadow.ttf') format('truetype');
  }

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

  html,
  body {
    margin: 0;
    padding: 0;
    font-family: 'imprint MT Shadow', serif;
    background: #1a1a1a;
    overflow-x: hidden;
  }

  /* Scène fixe */
  #flyer-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
  }

  #panels-rail {
    position: relative;
    height: 100%;
  }

  /* Panneau portrait 9:16 */
  .panel {
    flex-shrink: 0;
    height: 95vh;
    width: calc(90vh * 9 / 16);
    overflow: hidden;
    background: #111;
    pointer-events: all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Ligne de pli */
  .panel+.panel::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.5),
        rgba(255, 255, 255, 0.06) 40%,
        transparent);
    z-index: 20;
    pointer-events: none;
  }

  /* Ombre droite */
  .panel::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
    z-index: 19;
    pointer-events: none;
  }

  .panel img.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  .panel .content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .header {
    height: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .header object {
    width: 75%;
    height: auto;
    display: block;
    pointer-events: none;
  }

  .panel[id="endlich-zeit"] .header object {
    width: 88%;
  }

  .footer {
    position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
    padding: 0 14px;
    text-align: justify;
  }

  .footer p {
    /* font-size: clamp(0.55em, 1.7vh, 0.9em); */
    line-height: 1.55;
    margin: 0;
  }

  .side {
    position: absolute;
    right: 0;
    top: 0;
    width: 62%;
    padding: 10px 8px 10px 10px;
    border-radius: 0 0 0 10px;
  }

  .side p {
    /* font-size: clamp(0.5em, 1.6vh, 0.85em); */
    line-height: 1.6;
    margin: 0;
  }

  .panel[id="termine"] .header,
  .panel[id="kontakt"] .header {
    height: 16%;
    padding-top: 14px;
  }

  .content ul {
    list-style: none;
    padding: 10px 16px;
    margin: 0;
  }

  .content ul li {
    /* font-size: clamp(0.55em, 1.5vh, 0.85em); */
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .content ul li:last-child {
    border-bottom: none;
  }

  .panel[id="kontakt"] .center {
    flex-direction: column;
    gap: 8px;
  }

  .panel[id="kontakt"] .center p {
    text-align: center;
    /* font-size: clamp(0.55em, 1.5vh, 0.85em); */
    line-height: 1.8;
  }

  .panel[id="kontakt"] .center a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .bg-grey {
    background-color: rgba(255, 255, 255, 0.82) !important;
  }


  /* Hint scroll */
  #scroll-hint {
    position: fixed;
    bottom: 28px;
    right: 36px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 1;
    transition: opacity 0.5s;
    pointer-events: none;
  }

  #scroll-hint.hidden {
    opacity: 0;
  }

  #scroll-hint svg {
    animation: arrowBounce 1.4s ease-in-out infinite;
  }

  #scroll-hint span {
    font-family: 'imprint MT Shadow', serif;
    font-size: 0.80em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    writing-mode: vertical-rl;
  }

  @keyframes arrowBounce {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(7px);
    }
  }

  .label {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: rgb(90 170 185);
    text-shadow: 1px 0 #000000, -1px 0 #000000, 0 1px #000000, 0 -1px #000000,
      1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
  }


  .guitar {
    top: 68%;
    left: 30%;
  }

  .drums {
    top: 15%;
    left: 5%;
  }

  .keyboard {
    top: 11%;
    left: 46%;
  }

  .bass {
    top: 18%;
    left: 70%;
  }

  .gigs {
    align-items: normal;
  }

  /* ============================================================
   contact-form.css — styles du formulaire de contact
   ============================================================ */

  #contact-form {
    position: fixed;
    top: 25%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 70%;
    margin: 0 auto;
  }

  #contact-form input,
  #contact-form textarea {
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.95em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
  }

  #contact-form input:focus,
  #contact-form textarea:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.5);
  }

  #contact-form textarea {
    resize: vertical;
    min-height: 90px;
  }

  #contact-form button {
    padding: 10px;
    font-family: inherit;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  #contact-form button:hover {
    background: #333;
  }

  #contact-form button:disabled {
    background: #888;
    cursor: not-allowed;
  }

  #contact-status {
    margin: 0;
    font-size: 0.85em;
    text-align: center;
    min-height: 1.2em;
  }

  #contact-status.success {
    color: #1a7f37;
  }

  #contact-status.error {
    color: #c0392b;
  }

}

/* end @media */