body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
      min-height: 100vh;
      padding: 32px 16px;
      color: #faf8f8;
    
    }
    
    /*bloc principal*/
    .mainsquare {
      max-width: 960px;
      margin: 40px auto;
      background: 
      radial-gradient(circle at 0% 0%, rgba(56,189,248,0.18), transparent 55%),
      radial-gradient(circle at 100% 0%, rgba(129,140,248,0.16), transparent 55%);
      padding: 32px 28px 28px;
      border-radius: 24px;
      box-shadow: 0 4px 12px rgb(250, 250, 250);
      
    }
     /*précisions quant à la séparation des couleurs*/
    .precisions {
      color: #38bdf8; /*bleu clair pour attirer l'oeil / améliorer le confort visuel*/
      font-weight: bold; /*en gras afin de mettre en valeur la différence et attirer l'oeil*/
    }

    h1 {
      text-align: center;
      margin-bottom: 10px;
    }

    h2 {
      margin-top: 30px;
      color: #9ca3af; /*gris clair pour contraster au mieux avec le bleu clair tout en restant sobre*/
    }

    /*rajouter un côté "professionnel" sur le site avec une photo de profil*/
    .pp {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: hsla(0, 0%, 87%, 0.11);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      margin: 0 auto 20px;
    }

    /*bouton créé afin de permettre aux utilisateurs de me contacter*/
    .btn-contact {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.7);  /*couleur vive choisie spécialement pour marquer les bords du bouton même en passant le curseur dessus*/    
  color: white;    /*blanc choisi exprès pour rester bien voyant*/         
  background: #0ea5e9;     /*couleur vive dans le thème global du site qui attire l'oeil et donne envie de cliquer dessus*/
  text-decoration: none;     /*permet de retirer le soulignement*/
  font-weight: bold;
  border-radius: 8px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-contact:hover {
  background: rgba(1, 37, 54, 0.897);        
  transform: scale(1.05);   
}


    ul {
      padding-left: 20px;
      list-style: none;
      padding-left: 0;
    }
    
    ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0; /*pour éviter que les points ne soient en superposition sur le texte*/
  top: 8px; /*pour les aligner au texte*/
  width: 8px;
  height: 8px;
  background: #38bdf8; /*bleu clair pour le confort visuel*/
  border-radius: 50%;
}

    /*pied de page*/
    footer {
      text-align: center;
      margin-top: 30px;
      font-size: 14px;
      color: #777;
    }

    .row {
      display: flex;
      gap: 20px;
      margin-top: 30px;
    }

    .box {
      flex: 1;
      background: rgba(15,23,42,0.96);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1px solid rgba(56, 189, 248, 0.3);
    }

    .box:hover {
      transform: scale(1.03);
      box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }