/*
 * La police Qurova (version démo) remplace les chiffres par des glyphes
 * décoratifs illisibles. Solution fiable : on déclare Qurova SANS les
 * chiffres dans son unicode-range (U+30-39 exclu). Le navigateur applique
 * alors le fallback normal de la pile de polices (font-family) pour ces
 * caractères, qui n'est pas ambigu contrairement à la priorité entre
 * plusieurs @font-face de même nom, qui varie selon les navigateurs.
 * Les chiffres retombent donc naturellement sur Gotham (voir body ci-dessous).
 */
@font-face {
  font-family: "Qurova";
  src: url("/fonts/Qurova-Light.otf") format("opentype");
  font-weight: 300;
  unicode-range: U+0-2F, U+3A-10FFFF;
  font-display: swap;
}

@font-face {
  font-family: "Qurova";
  src: url("/fonts/Qurova-Regular.otf") format("opentype");
  font-weight: 400;
  unicode-range: U+0-2F, U+3A-10FFFF;
  font-display: swap;
}

@font-face {
  font-family: "Qurova";
  src: url("/fonts/Qurova-Medium.otf") format("opentype");
  font-weight: 500;
  unicode-range: U+0-2F, U+3A-10FFFF;
  font-display: swap;
}

:root {
  /* Couleurs principales */
  --vert-fonce: #1a6b2a;
  --vert-moyen: #2ecc40;
  --vert-lime: #8dc63f;

  /* Couleurs secondaires */
  --blanc: #ffffff;
  --beige-kraft: #f5ecd7;
  --gris-fonce: #111111;
  --gris-moyen: #555555;
  --gris-clair: #f4f4f4;

  /* Couleurs système */
  --succes: #2d6a4f;
  --erreur: #c0392b;
  --avertissement: #f39c12;
  --info: #2980b9;

  /* Espacements (système 8px) */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout */
  --max-width: 1280px;

  --background: var(--blanc);
  --foreground: var(--gris-fonce);
}

html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}


body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--foreground);
  background: var(--background);
  font-family: "Qurova", var(--font-gotham), Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-gotham, Arial, Helvetica, sans-serif);
}

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

/* Les éléments de formulaire n'héritent pas de la police du body par
   défaut (feuille de style utilisateur-agent) : sans ça, ils retombent
   sur la police système au lieu de Qurova/Gotham. */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

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

/* Classe globale (non modulaire) utilisable dans du contenu saisi en base
   de données (ex : titre de slide avec <span class="texte-accent">mot</span>)
   pour mettre un mot en évidence avec un effet "surligneur" : un aplat vert
   se dessine derrière le mot à l'arrivée, comme un coup de marqueur. */
.texte-accent {
  position: relative;
  display: inline-block;
  color: var(--gris-fonce);
  font-weight: 800;
  z-index: 0;
}

.texte-accent::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.12em;
  right: -0.12em;
  bottom: 0.02em;
  height: 0.5em;
  background: var(--vert-lime);
  border-radius: 0.2em 0.6em 0.3em 0.5em;
  transform-origin: left center;
  animation: texteAccentSurlignage 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
}

@keyframes texteAccentSurlignage {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .texte-accent::before {
    animation: none;
  }
}