:root {
  --color-neutral-dark: #b45f06;
  --color-neutral-medium: #ffd68e;
  --color-neutral-light: #fff2cc;

  --color-green: #0f500f;
  --color-red: #9d1d1d;
  --color-gray: #bbb;
  --color-dark: #000000;

  --color-text-white: white;
  --color-text-black: black;

  --backgroundColor: #fffbf5;

  --navBackground: #000000;
  --navText: #ffffff;

  --siteTitle: #ffffff;

  --color-exclamation: #dea844;
}

@font-face {
  font-family: "Aniron";
  src: url("/fonts/Aniron.eot");
  src: url("/fonts/Aniron.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Aniron.woff2") format("woff2"),
    url("/fonts/Aniron.woff") format("woff"),
    url("/fonts/Aniron.ttf") format("truetype"),
    url("/fonts/Aniron.svg#Aniron") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AnironBold";
  src: url("/fonts/Aniron-Bold.eot");
  src: url("/fonts/Aniron-Bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Aniron-Bold.woff2") format("woff2"),
    url("/fonts/Aniron-Bold.woff") format("woff"),
    url("/fonts/Aniron-Bold.ttf") format("truetype"),
    url("/fonts/Aniron-Bold.svg#Aniron-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html, body {
  height: 100%;
}

#page-container {
    min-height: 100%; /* Force le conteneur à au moins 100% de la hauteur de la fenêtre */
    /* Vous pouvez aussi utiliser height: 100vh; mais min-height est souvent plus flexible */
    display: flex; /* Optionnel : pour organiser les éléments internes verticalement */
    flex-direction: column; /* Optionnel : pour organiser les éléments internes verticalement */
}

body {
  background: var(--backgroundColor);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}

.titre1 {
  font-family: AnironBold, sans-serif;
  font-size: 2rem;
}

.titre2 {
  font-family: Aniron, sans-serif;
  font-size: 1.5rem;
}

.container {
  background-color: var(--color-neutral-light);
  border: solid 1px black;
  border-radius: 10px;
  padding: 1em;
}

.strong {
  font-weight: 600;
  font-size: 1.3em;
}

.bold {
  font-weight: bold;
}

.nav {
  background-color: var(--navBackground);
  margin-bottom: 1em;
  top: 0;
  width: 100%;
}

.nav-link {
  color: var(--navText);
}

.siteTitle {
  text-transform: uppercase;
  color: var(--siteTitle);
  font-size: 1.3em;
  font-weight: 600;
}

.btn-neutral-dark {
  background-color: var(--color-neutral-dark);
  color: var(--color-neutral-light);
}
.btn-neutral-dark:hover {
  background-color: var(--color-neutral-medium);
  color: var(--color-neutral-dark);
}

.btn-neutral-medium {
  background-color: var(--color-neutral-medium);
  color: var(--color-neutral-dark);
}

.btn-green {
  background-color: var(--color-green) !important;
  color: var(--color-text-white);
}

.btn-red {
  background-color: var(--color-red) !important;
  color: var(--color-text-white);
}

.btn-gray {
  background-color: var(--color-gray) !important;
  color: var(--color-text-white);
}

.modal-content {
  background-color: var(--color-neutral-light);
}

.modal-header {
  background-color: var(--color-neutral-dark);
  color: var(--color-neutral-light);
}

.modal-icon {
  color: var(--color-neutral-light);
}

.noLink {
  text-decoration: none;
  color: var(--color-neutral-dark);
}

.bigIcon {
  font-size: 5rem;
}

.blueText {
  color: blue;
}

.greyText {
  color: grey;
}

/*CSS pour mon menu PERSONNAGE qui change en fonction de la taille de l'écran
/* Style général */
.menu-container {
  display: flex;
}

/* Menu desktop (visible par défaut) */
.desktop-menu {
  display: flex;
  gap: 15px;
}

/* Menu mobile (caché par défaut) */
.mobile-menu {
  display: none;
}

/* Affichage responsive */
@media screen and (max-width: 768px) {    
  .siteTitle {
    font-size: 0.8em;
  }   
  .desktop-menu {
    display: none; /* Cacher le menu desktop sur petits écrans */
  }
  
  .mobile-menu {
    display: block; /* Afficher le menu select sur petits écrans */
  }

  select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
}