/* Style pour la navigation */
nav {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 8px;
    right: 8px;
    padding: 10px 0 10px 10px;
    background: #323232;
    border-radius: 0 0 12px 12px;
 }

 /* Style pour la liste de navigation */
 nav ul {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
 }

 /* Style pour les liens de navigation */
 nav a{
  text-decoration: none;
  color: whitesmoke;
  font-weight: bold;
 }

 /* Effet hover pour les liens de navigation */
 nav a:hover {
  transition: 0.3s;
  color: grey;
  text-decoration: underline;
 }

 /* Style pour la section principale */
main {
   margin-top: 30px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-areas:
       "header header header"
       "css-definition selecteurs-css-type selecteurs-css-class"
       "selecteurs-css-id box-model flexbox"
       "media-queries typographie-css positionnement-css"
       "transitions-css bootstrap-avance bootstrap-avance"
       "conclusion conclusion conclusion";
   gap: 10px;
}

/* Adaptation pour les écrans inférieurs à 992px */
@media (max-width: 992px) {
  main {
      gap: 15px;
      grid-template-columns: 1fr;
      grid-template-areas:
          "header"
          "css-definition"
          "selecteurs-css-type"
          "selecteurs-css-class"
          "selecteurs-css-id"
          "box-model"
          "flexbox"
          "media-queries"
          "typographie-css"
          "positionnement-css"
          "transitions-css"
          "bootstrap-avance"
          "conclusion";
  }
}

 /* Style pour l'en-tête */
 header {
    grid-area: header;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    text-align: center;
    margin-top: 50px;
    border-radius: 12px;
 }

 /* Style pour le titre de l'en-tête */
 header>h1 {
    font-size: 48px;
 }

 /* Adaptation pour les écrans inférieurs à 992px */
 @media (max-width: 992px) {
    header {
        margin-bottom: -10px;
        border-radius: 12px;
    }

    header>h1 {
        font-size: 28px;
    }
 }

 /* Style pour la définition du CSS */
 .css-definition {
    grid-area: css-definition;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Style pour les sélecteurs de type CSS */
 .selecteurs-css-type {
    grid-area: selecteurs-css-type;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Style pour les sélecteurs de classe CSS */
 .selecteurs-css-class {
    grid-area: selecteurs-css-class;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Nouveaux styles pour les sélecteurs d'ID */
 .selecteurs-css-id {
    grid-area: selecteurs-css-id;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Nouveaux styles pour le Box Model */
 .box-model {
    grid-area: box-model;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Nouveaux styles pour Flexbox */
 .flexbox {
    grid-area: flexbox;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Nouveaux styles pour les Media Queries */
 .media-queries {
    grid-area: media-queries;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Nouveaux styles pour la typographie CSS */
.typographie-css {
   grid-area: typographie-css;
   background: linear-gradient(45deg, #323232, #1a1a1a);
   padding: 15px;
   border-radius: 12px;
   transition: background 0.3s ease;
}

/* Nouveaux styles pour le positionnement CSS */
.positionnement-css {
   grid-area: positionnement-css;
   background: linear-gradient(45deg, #323232, #1a1a1a);
   padding: 15px;
   border-radius: 12px;
   transition: background 0.3s ease;
}

/* Nouveaux styles pour les transitions CSS */
.transitions-css {
   grid-area: transitions-css;
   background: linear-gradient(45deg, #323232, #1a1a1a);
   padding: 15px;
   border-radius: 12px;
   transition: background 0.3s ease;
}

/* Nouveaux styles pour l'intégration avancée de Bootstrap */
.bootstrap-avance {
   grid-area: bootstrap-avance;
   background: linear-gradient(45deg, #323232, #1a1a1a);
   padding: 15px;
   border-radius: 12px;
   transition: background 0.3s ease;
}

 /* Style pour la conclusion */
 .conclusion {
    grid-area: conclusion;
    background: linear-gradient(45deg, #323232, #1a1a1a);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s ease;
 }

 /* Style pour le pied de page */
 footer {
    grid-area: footer;
 }