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

/* ---------- Base ---------- */
body {
  font-family: "Arial Rounded";
  background: #71BDFA;
  color: #111;
}

a {
  color: inherit;
  text-decoration: none;
  align-items: center;

}



.indented {
  text-indent: 1em; /* espace au début, 2 fois la largeur de la lettre M */
}

/* ---------- font face ---------- */

@font-face {
  font-family: 'Arial Rounded Bold'; /* le nom que tu vas utiliser */
  src: url('../fonts/Arial Rounded Bold.ttf') format('truetype');
  font-weight: 700;  /* bold */
  font-style: normal;
}

/* ---------- Header ---------- */
header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #06AA2B;
  z-index: 10;
}

header h1,
nav a {
  font-family: "Pinyon Script", cursive;
  font-size: 48px;
  font-weight: 400;
}

nav {
  display: flex;
  gap: 24px;
}

nav a:hover {
  opacity: 0.6;
}

/* ---------- Responsive header ---------- */
@media (max-width: 768px) {
  header h1,
  nav a {
    font-size: 20px;
  }
}