/* ==========================================================================
   project-nav.css — boutons projet précédent / suivant (bas de page)
   Commun à toutes les pages projet. Chaque bouton porte le data-project
   du projet vers lequel il mène : il pourra donc prendre la DA de ce
   projet (themes.css ou règles [data-project] ci-dessous).
   Une page peut décaler les boutons via --project-nav-inset.
   ========================================================================== */

.project-nav {
  position: fixed;
  z-index: 20;
  left: var(--project-nav-inset, 12px);
  right: var(--project-nav-inset, 12px);
  bottom: var(--project-nav-inset, 12px);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* seuls les boutons captent la souris */
}

.project-nav__link {
  pointer-events: auto;
  min-width: clamp(8rem, 10vw, 12.5rem);
  padding: 0.45em 1.25em;
  background: #000;
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.project-nav__link--next {
  margin-left: auto;
}

.project-nav__link:hover,
.project-nav__link:focus-visible {
  background: #fff;
  color: #000;
  outline: none;
}

/* ==========================================================================
   Habillage selon le projet de destination
   (LogiMètre et Démo Systémique gardent pour l'instant le bouton par défaut)
   ========================================================================== */

/* --- Omnidash : cartouche du header, police LCD -------------------------- */

.project-nav__link[data-project="omnidash"] {
  display: grid;
  place-items: center;
  width: clamp(10rem, 13vw, 14rem);
  min-width: 0;
  aspect-ratio: 481 / 96;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../ressources/omnidash/header_title.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / 0.5)); /* ombre nette, comme le header */
  color: #fff;
  font-family: "LCD2", var(--font-sans);
  font-size: clamp(1rem, 1.35vw, 1.45rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.5);
  text-transform: uppercase;
  transition: transform 0.2s ease, color 0.2s ease;
}

.project-nav__link[data-project="omnidash"]:hover,
.project-nav__link[data-project="omnidash"]:focus-visible {
  background: url("../ressources/omnidash/header_title.png") center / 100% 100% no-repeat;
  color: #ffe169;
  transform: translateY(-2px);
}

/* --- CSW : dalle de sable bordée par la mer, marée animée --------------- */

.project-nav__link[data-project="csw"] {
  /* La marée est animée à l'intérieur même du SVG ; version fixe si le
     visiteur demande moins d'animations (voir plus bas) */
  --csw-button: url("../ressources/csw/nav-button-anim.svg");

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(10rem, 13vw, 14rem);
  min-width: 0;
  aspect-ratio: 240 / 64;
  padding: 0.35em 0 0; /* texte un peu bas : la mer occupe le haut de la dalle */
  border: 0;
  border-radius: 0;
  background: var(--csw-button) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 4px rgb(60 35 10 / 0.35));
  color: #c48f65;
  font-family: "Berlin Sans FB", var(--font-sans);
  font-size: clamp(1.15rem, 1.5vw, 1.6rem);
  font-weight: 600;
  line-height: 1;
  /* Texte gravé dans le sable, comme le titre de la page CSW */
  text-shadow:
    0 1px 0 rgb(255 241 214 / 0.7),
    0 -1px 1px rgb(120 75 35 / 0.45),
    0 0 6px rgb(170 115 70 / 0.35);
  transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease;
}


.project-nav__link[data-project="csw"]:hover,
.project-nav__link[data-project="csw"]:focus-visible {
  background: var(--csw-button) center / 100% 100% no-repeat;
  color: #b0774b;
  filter: drop-shadow(0 6px 6px rgb(60 35 10 / 0.4));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .project-nav__link[data-project="csw"] {
    --csw-button: url("../ressources/csw/nav-button.svg");
  }
}