/* ---------- Corps de la page ---------- */
body {
  margin:0; /* Supprime les marges par défaut du navigateur */
  font-family: 'Segoe UI', sans-serif; /* Définie une police lisible et moderne */
  background-color: #020617; /* Fond sombre pour un style élégant */
  color: #ffffff; /* Texte en blanc pour un bon contraste */
  text-align: center; /* Centre le texte par défaut */
}

/* ---------- En-tête du site ---------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px; /* ✅ Hauteur réduite */
  background-color: #1e293b; /* Couleur de fond sombre */
  z-index: 1000; /* Toujours visible en haut */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center; /* Centre verticalement les éléments */
}

/* ---------- Conteneur interne ---------- */
.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px; /* Espace horizontal interne */
}

/* ---------- Logo ou titre principal ---------- */
h1 {
  color: #00d9ff;
  font-size: 1rem; /* Augmenté pour être visible */
  margin: 0;
}

h1 img {
  height: 40px; /* Taille du logo */
}

/* ---------- Liens de navigation ---------- */
nav a {
  color: #fff;
  margin-left: 20px;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #00b4d8;
}

/* ---------- Ajustement du body pour éviter que le contenu passe sous le header ---------- */
body {
  margin: 0;
  padding-top: 60px; /* Égal à la hauteur du header */
  background-color: #020617; /* Bleu très sombre */
  font-family: 'Segoe UI', sans-serif;
  color: #ffffff;
}


/* ---- Section À propos ---- */
.about {
  margin-top: 40px; /* Espace au-dessus de la section */
  line-height: 1.8; /* Hauteur de ligne pour meilleure lisibilité */
 max-width: 1200px;        /* Largeur maximale du bloc */
  margin: 0 auto;          /* Centre horizontalement */
  padding: 20px 50px;     /* Marge intérieure (haut/bas 20px, gauche/droite 100px) */
  text-align: center;      /* Centre le texte à l'intérieur */
  color: #ffffff;          /* Couleur du texte */
  font-size: 1.2rem;
}

/* ---- Titre de section (À propos) ---- */
.about h2 {
  color: #48cae4; /* Bleu clair différent pour les titres */
  font-size: 2em; /* Taille de police pour titre de section */
  margin-bottom: 20px; /* Espace sous le titre */
}

/* ---- Mise en valeur du nom de la marque si utilisé ---- */
.about .brand {
  color: #90e0ef; /* Couleur bleue claire spéciale */
  font-weight: bold; /* Texte en gras */
}

/* ---- Pied de page ---- */
footer {
  text-align: center; /* Centre le texte */
  padding: 5px; /* Espacement autour du pied de page */
  border-top: 1px solid #1b263b; /* Ligne de séparation en haut */
  color: #6c757d; /* Gris discret pour le texte du pied de page */
  margin-top: 10px; /* Espace au-dessus du footer */
}

p {
   font-size: 1.2rem; /* Augmente légèrement la taille de police */
  text-align: center; /* Centre tout le texte */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police moderne */
  color: #e0e0e0; /* Texte clair */
  margin: 1;
  padding: 1px;
}