html,body{ /* reset css + police sans serif */
  font-family: Arial ; /* police sans serif utilisee */
  margin: 0; /* supprime les marges par défaut du navigateur */
  box-sizing: border-box; /* modèle de boite avec les bordures */
  scroll-behavior: smooth!important; /* scroll progressif pour les ancres */
}
body{ /* on cible la balise body */
  background: #03030c; /* couleur de fond */
  color: #ddd; /* couleur du texte */
  font-size: max(18px,1.2vw); /* taille de police minimum 18px maximum 1,2 viewport width = largeur de l'écran visible */
}

header h1 strong{ /* cible les gras dans les titre h1 dans les header */
  color: rgb(109, 216, 218); /* défini la couleur du texte */
}

a{ /* cible tous les liens */
  color: #efefef; /* défini la couleur du texte */
}
header { /* cible le(s) header */
  text-align: center; /* align le contenu textuel au centre */
}


header nav a{ /* cible tous les liens qui sont dans les nav qui sont dans les header */
  display: inline-block; /* modèle hybride (pour mettre des padding) */
  margin-right: 0.8em; /* marge à droite */
  margin-bottom:.8em; /* marge en bas */
  padding: 0.2em; /* marge interne partout (haut droite bas gauche) */
  background: #138ba6; /* couleur de fond */
  border-radius:.3em; /* arrondis des bords */
  text-decoration: none; /* pas de soulignement. */
}

header h1, /* cible les h1 dans les header ET */
header nav, /* cible les nav dans les header ET */
section p, /* cible les p dans les section  ET FINALEMENT*/
section h2{ /* cible les h2 dans les section */
  max-width:70rem; /* défini un largeur maxi à 70rem */
  margin-left: auto; /* pousse au max à gauche */
  margin-right: auto; /* pousse au max à droite == centré */
}


section{ /* cible toutes les sections */
  background: #0a111c; /* défini un fond de couleur */
  padding: .8em 1.5em; /* marges intérieur 0.8 en haut et bas & 1.5 à gauche et droite */
  margin: 2em 0; /* marge extérieur de 2em haut bas et 0 gauche droite */
}

section p span{ /* cible les span dans les p dans les sections */
  display: inline-block; /* modèle hybride */
  background-color: #2a455b; /* fond de couleur */
  color: #f7f5f5; /* couleur du texte */
  border-radius:.2em; /* arrondis des bords */
  padding: 0 .2em; /* marges intérieures 0↑↓ .2em →← */
  opacity: 0.6; /* transparence */
}


footer{ /* cible tous les footer */
  font-size: 0.6em; /* ajuste la taille de police */
  text-align: right; /* align à droite */
  padding: 0 1em; /* marges intérieures 0↑↓ 1em →← */
}