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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
  font-size: 16px;

  padding: 0;
  /* theme de site */
  color-scheme: dark light;
  /* ponctuation pas prise en compte dans la "box" */
  hanging-punctuation: first last;
  /* background-color: red; */
}

body {
  /* marge sur dorite et gauche */
  margin: 0 1em;
  background: var(--background);
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: normal;
  line-height: 1.75;
  color: var(--text);
  min-height: 100svh;
  cursor: url('/images/main/cursor.png') 0 0, auto;
}

/* curseur hover */
a,
a:hover,
button:hover,
a::before,
.filtre,
input[type="submit"]:hover {
  cursor: url('/images/main/loader.png') 0 0, pointer;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Améliorer la lisibilité avec une largeur maximale pour les paragraphes et les listes 
  Éviter les orphelins dans les navigateurs pris en charge */
p,
li {
  max-width: var(--p-max-width, 70ch);
  text-wrap: pretty;
  
}

p {
  margin-bottom: 1rem;
}

h1 {
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.3;
  /* equilibrage du texte a la ligne */
  text-wrap: balance;
}

h2,
h3,
h4,
h5,
h6{
  font-family: 'PP Neue Montreal', sans-serif;
  font-weight: normal;
  line-height: 1.3;
  /* equilibrage du texte a la ligne */
  text-wrap: balance;
}

/* taille base */
h1 {
  margin-top: 0;
  font-size: var(--fx-xl);
}
h2{
  font-size: var(--fs-900);
  margin-bottom: 1rem;
}

h3 {
  font-size: var(--fs-800);
  margin-bottom: 1rem;
}

h4 {
  font-size: var(--fs-700);
}

h5 {
  font-size: var(--fs-600);
}

h6 {
  font-size: var(--fs-500);
}

small,
.text_small {
  font-size: 0.618rem;
}

/* correction ul */
ul {
  list-style: none;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
}

/* scroll smooth quand encrage sur la meme page */
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
    /*  marge pour que ca soit agreable et non comme wikipedia */
  }
}

/* idée couleurs */
@media (prefers-color-scheme: light) {
  :root {
    --text: #1c1917;
    --background: #efebeb;
    --primary: #524a42;
    --secondary: #b2b4a2;
    --accent: #6f775f;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #E8E5E3;
    --background: #141010;
    --primary: #BDB5AD;
    --secondary: #5b5d4b;
    --accent: #98a088;
  }
}

a {
  text-decoration: none;
}


/* typographie flexible - modern css */
/* :root{
--fx-xl: clamp(2rem, 15vw,21.089rem);
--fs-800: 6.854rem;
--fs-700: 4.236rem;
--fs-600: clamp(1.518rem, 2vw, 4.618rem);
--fs-500: 1.618rem ;
--fs-400: 1rem;
} */

/* :root {
  --fs--2: clamp(0.434rem, 0.407rem + 0.1199vi, 0.5rem);
  --fs--1: clamp(0.5208rem, 0.4271rem + 0.4167vi, 0.75rem);
  --fs-400: clamp(0.625rem, 0.4205rem + 0.9091vi, 1.125rem);
  --fs-500: clamp(0.75rem, 0.3665rem + 1.7045vi, 1.6875rem);
  --fs-600: clamp(0.9rem, 0.2327rem + 2.9659vi, 2.5313rem);
  --fs-700: clamp(1.08rem, -0.0314rem + 4.9398vi, 3.7969rem);
  --fs-800: clamp(1.296rem, -0.5037rem + 7.9988vi, 5.6953rem);
  --fs-900: clamp(1.5552rem, -1.3034rem + 12.705vi, 8.543rem);
  --fx-xl: clamp(2rem, 15vw, 21.089rem);

  --vh: 1vh;
} */
:root {
  --fs--2: clamp(0.5556rem, 0.6843rem + -0.1661vi, 0.651rem);
  --fs--1: clamp(0.7813rem, 0.7631rem + 0.0906vi, 0.8333rem);
  --fs-400: clamp(0.9375rem, 0.8288rem + 0.5435vi, 1.25rem);
  --fs-500: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
  --fs-600: clamp(1.35rem, 0.8413rem + 2.5435vi, 2.8125rem);
  --fs-700: clamp(1.62rem, 0.7161rem + 4.5196vi, 4.2188rem);
  --fs-800: clamp(1.944rem, 0.4191rem + 7.6246vi, 6.3281rem);
  --fs-900: clamp(2.3328rem, -0.1574rem + 12.4511vi, 9.4922rem);
  --fx-xl: clamp(2rem, 15vw, 21.089rem);
  --vh: 1vh;
}

/* 
EXEMPLE D'UTILISATION 
element {
  height: calc(var(--vh, 1vh) * 100);
  height: 100vh;

  - Les unités vh sur mobile (hauteur de la vue) posent problème car le navigateur ne prend pas toujours en compte les éléments comme la barre d'adresse dans le calcul.

  - L'idée est de calculer soi-même la hauteur de la vue avec JavaScript, à l'aide de window.innerHeight.

  - Cette valeur est stockée dans une propriété CSS personnalisée (--vh) définie sur l'élément racine avec document.documentElement.style.

  - En CSS, on définit la hauteur des éléments concernés avec calc() et la propriété --vh au lieu de vh directement.

  - Exemple: height: calc(var(--vh, 1vh) * 100) 

  - Cela permet d'utiliser la valeur calculée en JS à la place du vh par défaut.

  - Un fallback 100vh est prévu au cas où le JS ne fonctionne pas.
} */

/* menu pour le site */
.menu {
  position: fixed;
  padding: 1em 1em 2em 1em;
  display: flex;
  width: 98vw;
  gap: 4em;
  justify-content: flex-end;
  z-index: 4;
}

.menu a {
  color: var(--text);
}