/* ---- LA PAGE PROJETS ----
   Une page d'attente volontairement minimale : le même champ d'eau que
   Graphen, le même pavé noir que les étiquettes de navigation. Le silence
   autour du message laisse la matière faire le travail. */

body[data-page="projets"] {
  background-color: var(--degrade-craie);
}

.projets-page {
  position: relative;
  min-height: 100vh;
}

.projets-banniere {
  min-height: 100vh;
  /* graphen.css neutralise le fond sur les écrans qui savent lire les
     timelines ; cette page n'a pas de .scene, donc elle doit garder le même
     dégradé de secours que le banner Graphen. */
  background:
    radial-gradient(circle 80vh at 72% 63%, rgba(247, 204, 168, 0.75), rgba(247, 204, 168, 0) 100%),
    radial-gradient(circle 130vh at 28% 33%, rgba(66, 121, 119, 0) 38%, rgba(66, 121, 119, 0.6) 100%),
    radial-gradient(circle 90vh at 28% 33%, rgb(199, 223, 221), rgb(124, 190, 184) 100%);
}

.projets-scene {
  height: 100vh;
}

.projets-message {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--etiquette-encre);
  text-align: left;
}

.projets-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 610px) {
  .projets-message {
    max-width: calc(100vw - 2 * var(--container-pad));
    white-space: normal;
  }
}