/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*definit valeur global du doc par création de variable du nom de --blabla
on viens changer les variable dans le root et on utilise les variable dans le code 
ce qui facile les changement esthetique*/

/* exemple provenant du CSS de sadgirl
  --accent-green: rgb(181, 222, 181);
  --accent-purple: #d4bfff;
  --black: #111; 
  --white: #ddd;
  --accent-font: "Trona";
  --header-height: 150px;
  --sidebar-width: 250px;
  --metadata-width: 270px;
  
ici c'est les differente variable de taille qui compte
  --size-step-0: clamp(1.0925rem, 0.95rem + 0.25vw, 1.125rem); 
  --size-step-1: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem); 
  --size-step-2: clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem); 
  --size-step-3: clamp(1.875rem, 1.6rem + 0.6vw, 2.25rem);
  --size-step-4: clamp(2.25rem, 2rem + 0.75vw, 2.75rem); 
  --size-step-5: clamp(2.75rem, 2.4rem + 0.9vw, 3.5rem); */

:root {
  /*couleur ref*/
  /*observation faut pas mettre d'espace*/ 
  --text: rgb(0,0,28);
  --titre: rgb(0,0,28);
  --lien: rgb(0,31,66);
  --back: rgb( 0, 0, 0);
  --text-font: "arial";
  --titre-font: "arial";
  
  
  /*la notion clamp permet de reduire a une ligne a max, moyennne, min */
  /*la premiere parentese c'est la taille min en pixel par ecrant (genre petit) */
  --size-step-0:clamp(1.0925rem, 0.95rem + 0.25vw, 1.125rem);
  --size-step-1: clamp(1.25rem, 1.15rem + 0.35vw, 1.5rem); 
  --size-step-2: clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem); 
  --size-step-3: clamp(1.875rem, 1.6rem + 0.6vw, 2.25rem);
  --size-step-4: clamp(2.25rem, 4rem + 0.75vw, 2.75rem); 
  --size-step-5: clamp(2.75rem, 2.4rem + 0.9vw, 3.5rem)
  
  
} 
  
/* utilisation des variable root par le "var(--nomdelavariable) */




html {
  font-size: 100%;
  scroll-behavior: smooth;
  width: 100%;
}

body {
  background-color: white;
  color: white;
  font-family: arial;
}


/* ===================== TEXT FORMATTING ========================== */

/*definir la mise en page de h1 à h6*/

h1 {
  font-size: var(--size-step-4);
  font-family: var(--titre-font);
  color: var( --titre);
  text-align: center;
}

h2 {
  font-size: var(--size-step-3);
  font-family: var(--titre-font);
  color: var( --titre);
  /*mettre apres text-align: center;*/
}

h3 {
  font-size: var(--size-step-4);
  font-family: var(--titre-font);
  color: var( --titre);
  /* mettre apres text-align: center;*/
}

p,
li {
  font-size: var(--size-step-1);
  color: var( --titre);
  list-style-position: center
}

p a,
li a {
  color: var( --lien);
}


p { 
  line-height: 1.5; /* hauteur de ligne pour faciliter la lecture */
  font-size: var(--size-step-1);
  color: var( --text);
  margin-top: 25px;
  margin-bottom: 25px;
  margin-right: 150px;
  margin-left: 150px;
}

/* =========================== LAYOUT ================================ */