/* =============================
   Styles communs aux mid-links
   ============================= */
:root {
  --midlinks-font-size: 18px;    /* taille liens desktop */
  --midlinks-gap: 70px;          /* espace liens desktop */
  --space-below-midlinks: 20px;  /* espace avant page-note */
}

.mid-links {
  position: fixed;
  top: 50%;                       
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--midlinks-gap);
  z-index: 10;
  padding: 0 20px;
}

.mid-links a {
  color: orangered; /* Bleu par défaut */
  text-decoration: none;
  font-weight: 400;
  font-size: var(--midlinks-font-size);
  line-height: 1.2;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* Effet survol : barré en bleu plus épais */
.mid-links a:hover,
.mid-links a:focus-visible {
  text-decoration: line-through;
  text-decoration-color: whitesmoke;
  text-decoration-thickness: 5px; /* épaisseur de la barre */
}

/* Lien actif (page courante) : couleur bleu mais pas barré */
.mid-links a[aria-current="page"] {
  color: #00aaff;
}

/* =============================
   Page-note
   ============================= */
.page-note {
  margin-top: calc(50vh + var(--space-below-midlinks)); 
  text-align: center;
  max-width: 800px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  opacity: 0.9;
  position: relative;
  z-index: 5;
  transform: none;
}

/* =============================
   Mobile portrait
   ============================= */
@media (max-width: 500px) {
  :root {
    --midlinks-font-size: 14px;  
    --midlinks-gap: 30px;        
    --space-below-midlinks: 1px;
  }

  .mid-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
  }

  .mid-links::-webkit-scrollbar {
    display: none;
  }

  .mid-links a {
    white-space: nowrap;
  }

  .page-note {
    font-size: 13px;
    margin-top: calc(50vh + var(--space-below-midlinks));
  }
}