@layer reset, base, page, header, footer;

@layer base {
  /* --- Variables globales --- */
  :root {
    --vert-principal: #0b7a3e;
    --bleu-institut: #003366;
    --gris-fond: #f4f4f4;
    --texte: #222;
    --font-principale: 'Inter', sans-serif;
  }

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

  /* --- Fond + typo --- */
  html, body {
    height: 100%;
  }

  body {
    font-family: var(--font-principale);
    background-color: var(--gris-fond);
    color: var(--texte);
    line-height: 1.6;
  }

  /* --- Media par défaut --- */
  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* --- Liens --- */
  a {
    color: var(--bleu-institut);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: var(--vert-principal);
  }

  /* --- Conteneur principal --- */
  #layout-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
  }

  header, footer {
    flex: 0 0 auto;
  }

  /* --- Listes --- */
  ul { list-style: none; padding-left: 0; }
}