/* Pages dédiées : /explorer, /mon-projet, /contact.
   Un seul index.html et les mêmes composants que l'accueil : la page courante (data-page, posée dans
   le <head> d'après l'URL, puis par js/components/loader.js à chaque navigation) n'affiche que sa section,
   en pleine page sous le header. Sans JavaScript, data-page n'existe pas : tout l'accueil s'affiche. */

html[data-page="explorer"] main > :not(#explorer),
html[data-page="mon-projet"] main > :not(#mon-projet),
html[data-page="contact"] main > :not(#contact),
html[data-page="projet"] main > :not(#projet) {
  display: none;
}
/* La page projet n'existe que sur /explorer/<slug> */
html:not([data-page="projet"]) #projet { display: none; }

/* Pleine page : la section démarre sous le header et le footer reste en bas même si le contenu est court */
html[data-page]:not([data-page="accueil"]) main { min-height: 100vh; min-height: 100svh; }
html[data-page]:not([data-page="accueil"]) main > section {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 6rem));
  padding-bottom: calc(var(--section-y) * 0.6);
}
@media (max-width: 899px) {
  html[data-page]:not([data-page="accueil"]) main > section {
    padding-bottom: calc(var(--tabbar-h, 0px) + 3rem);
  }
}