:root {
  --header-height: 88px;
  --max-content-width: 1600px;
  --page-padding: clamp(12px, 2.4vw, 28px);
  --linked-grid-gap: clamp(12px, 1.6vw, 20px);

  /* Accent ocre/moutarde. --accent-ink respecte le contraste AA (4.5:1)
     sur fond clair pour le texte ; --accent est reserve aux usages larges
     (fonds, decorations, icones) qui n'exigent qu'un contraste 3:1. */
  --accent: #c08a2e;
  --accent-ink: #8a5f1f;
  --accent-soft: #f3e6cf;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Reserve toujours la place de la barre de defilement verticale, meme
     quand elle n'est pas affichee (ex. pendant l'ecran de chargement) :
     evite tout decalage horizontal du contenu a son apparition. */
  scrollbar-gutter: stable;
}

/* Le defilement fluide (ancres, lien d'evitement) n'est utile qu'a la
   souris : sur tactile, il entre en conflit avec le defilement inertiel
   natif du systeme et cree un petit a-coup a la fin d'un geste. */
@media (pointer: fine) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  overflow-x: hidden;
  background: #f7f5f3;
}

/* Filet de securite : aucune image ne doit jamais deborder de son
   conteneur, y compris avant que les regles plus specifiques (aspect-ratio,
   object-fit...) ne s'appliquent. */
img {
  max-width: 100%;
}

.content {
  position: relative;
  width: 100%;
  min-height: 100dvh;
}

/* Touches d'accent ocre dans le texte courant.
   .text-accent : fond clair (contraste AA verifie, 5,4:1).
   .text-accent-light : fond sombre, ex. le pied de page noir (6,9:1). */
.text-accent {
  color: var(--accent-ink);
}

.text-accent-light {
  color: var(--accent);
}

/* Motif graphique recurrent : trame de points ocre, en filigrane, evoquant
   un plan ou une carte topographique. Applique en fond de plusieurs
   sections d'ouverture de page pour creer une signature visuelle commune. */
.motif-bg {
  background-image: radial-gradient(circle, rgba(192, 138, 46, 0.28) 1.4px, transparent 1.4px);
  background-size: 25px 25px;
}