/* Palette de couleurs - Variables CSS */

:root {
  /* Couleurs principales */
  --vert-sauge: #4d8a80;
  --vert-turquoise: #08c092;
  --jaune: #f8de65;
  --orange: #fb8960;
  --rose: #fccbbf;
  --beige: #ede9e6;
  
  /* Couleurs de texte adaptées */
  --text-on-vert-sauge: #ffffff;
  --text-on-vert-turquoise: #ffffff;
  --text-on-jaune: #000000;
  --text-on-orange: #000000;
  --text-on-rose: #000000;
  --text-on-beige: #000000;
}

/* Classes utilisant uniquement les variables CSS */

/* Vert Sauge */
.vert-sauge {
  background-color: var(--vert-sauge);
  color: var(--text-on-vert-sauge);
}

.text-vert-sauge {
  color: var(--vert-sauge);
}

.border-vert-sauge {
  border-color: var(--vert-sauge);
}

/* Vert Turquoise */
.vert-turquoise {
  background-color: var(--vert-turquoise);
  color: var(--text-on-vert-turquoise);
}

.text-vert-turquoise {
  color: var(--vert-turquoise);
}

.border-vert-turquoise {
  border-color: var(--vert-turquoise);
}

/* Jaune */
.jaune {
  background-color: var(--jaune);
  color: var(--text-on-jaune);
}

.text-jaune {
  color: var(--jaune);
}

.border-jaune {
  border-color: var(--jaune);
}

/* Orange */
.orange {
  background-color: var(--orange);
  color: var(--text-on-orange);
}

.text-orange {
  color: var(--orange);
}

.border-orange {
  border-color: var(--orange);
}

.hover-orange:hover {
  color: var(--orange);
}

/* Rose */
.rose {
  background-color: var(--rose);
  color: var(--text-on-rose);
}

.text-rose {
  color: var(--rose);
}

.border-rose {
  border-color: var(--rose);
}

.hover-rose:hover {
  color: var(--rose);
}

/* Beige */
.beige {
  background-color: var(--beige);
  color: var(--text-on-beige);
}

.text-beige {
  color: var(--beige);
}

.border-beige {
  border-color: var(--beige);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--vert-sauge);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

a {
  color: var(--vert-turquoise);
  text-decoration: none;
  transition: color 0.2s;
}

:is(h1, h2, h3, h4, h5, h6) a {
  color: var(--vert-sauge);
}