/* ============================================================
   BASE : remise à zéro, texte, liens, focus
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: calc(var(--echelle-generale) * 100%);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Fond non uni : lueurs très douces, fixes pendant le défilement.
     Plusieurs paliers dans chaque dégradé pour un fondu sans bord. */
  background-color: var(--fond);
  background-image:
    radial-gradient(ellipse 75% 70% at 80% 18%,
      rgba(var(--lueur-1), 0.11) 0%, rgba(var(--lueur-1), 0.08) 20%, rgba(var(--lueur-1), 0.045) 40%,
      rgba(var(--lueur-1), 0.018) 60%, rgba(var(--lueur-1), 0.005) 80%, rgba(var(--lueur-1), 0) 100%),
    radial-gradient(ellipse 65% 60% at 10% 82%,
      rgba(var(--lueur-2), 0.035) 0%, rgba(var(--lueur-2), 0.022) 30%, rgba(var(--lueur-2), 0.008) 60%, rgba(var(--lueur-2), 0) 100%),
    radial-gradient(ellipse 100% 70% at 50% 115%,
      rgba(var(--lueur-1), 0.07) 0%, rgba(var(--lueur-1), 0.04) 30%, rgba(var(--lueur-1), 0.012) 65%, rgba(var(--lueur-1), 0) 100%);
  background-attachment: fixed;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain très fin par-dessus le fond : casse les « marches » des dégradés */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;            /* derrière tout le contenu */
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--vert); color: var(--fond); }

/* Focus clavier bien visible */
:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement pour la navigation clavier */
.lien-evitement {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--vert);
  color: var(--fond);
  border-radius: var(--rayon-petit);
  font-weight: 600;
}
.lien-evitement:focus { top: 12px; }

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Mouvement réduit demandé par le système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}