/* Reset léger, contrat de section épinglée, en-tête fixe commun. */

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

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--police-texte);
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }

/* Contrat DOM commun : chaque section est .sec, sa scène épinglée .sec__scene. */
.sec {
  position: relative;
  height: var(--hauteur, auto);
}

.sec__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* En-tête fixe : logo + mot « Depthlux » à gauche, lien Prix à droite. */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2vw, 22px) var(--gouttiere);
  color: var(--sable);
  mix-blend-mode: difference;
  pointer-events: none;
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
}

.entete__logo {
  width: 24px;
  height: 24px;
  /* SVG importé en <img> (fill fixe) : forcé en blanc pour que le
     mix-blend-mode:difference de .entete fonctionne comme sur le texte. */
  filter: brightness(0) invert(1);
}

.entete__nom {
  font-family: var(--police-titre);
  font-weight: 700;
  font-stretch: var(--large-titre);
  font-size: var(--t-petit);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.entete__lien {
  pointer-events: auto;
  color: currentColor;
  text-decoration: none;
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.entete__lien:focus-visible,
.entete__lien:hover {
  text-decoration: underline;
}

/* Lien d'évitement : premier élément du document, hors écran jusqu'au focus clavier. */
.s00-evitement {
  position: absolute;
  top: -48px;
  left: var(--gouttiere);
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--abysse);
  color: var(--sable);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  text-decoration: none;
  border-radius: var(--rayon);
  transition: top .2s var(--ease);
}

.s00-evitement:focus-visible {
  top: 12px;
}

/* Utilitaire d'accessibilité : masque visuellement sans retirer du flux a11y. */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}