* {
    margin: 0;
}
@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */

    font-family:'Montserrat';
    src: url('2.ttf');
  }
  @font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */

      font-family:'Manrope';
      src: url('manrope.ttf');
    }


.cercle {
      width: 800px; /* Largeur de l'image */
     /*height: 600px;   Hauteur de l'image */
      border-radius: 50%; /* Rend l'image circulaire */
      /*overflow: hidden;  Cache les parties débordantes */
      object-fit:cover; /* Ajuste l'image pour remplir le cercle */
    }
    h1{
      color: #008a5e;
      font-family:Montserrat;
      text-align: center;
      padding: 30px;
      font-size: 3.5em;
      font-weight: 500;
      }
    h2{
      color: #008a5e;
      font-family:Montserrat;
      text-decoration: underline;
      padding-left:  30px;
      padding-top:  30px;
      }
    h3{
      color: black;
      font-family:Manrope;
      padding-left:  30px;
      font-size: 1.1em;
      font-weight: 900;
      }
    h4{
      color: black;
      font-family:Manrope ;
      padding-left:  30px;
      font-size: 1em
      }
      li{
        color: black;
        font-family:Manrope ;
        font-size: 1em
        }
        p{
          text-align: center;
          color: black;
          font-family:Manrope ;
          font-size: 1em
        }
        .conteneur1{
            display: grid;
            grid-template-columns:  220px 220px 220px;
            grid-template-rows: 220px 220px 220px ;
            grid-gap: 40px;
            padding: 30px;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;


        }
        .conteneur1 img{
          object-fit: cover;
          width: 100%;
          height: 100%;

        }
        .sept {
            grid-row-start: 3;
            grid-row-end: 3;
            grid-column-start: 2;
            grid-column-end: 2;
          }
          .conteneur2{
              display: grid;
              grid-template-columns:  350px 350px;
            /*  grid-template-rows: 180px  ;*/
              grid-gap: 70px;
              padding: 30px;
              justify-content: center;
              margin-left: auto;
              margin-right: auto;

          }
          .conteneur2 img{
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
          nav{
              width: 100%;
              margin: 0 auto;
              background-color: white;
              position: sticky;
              top: 0px;
          }

          nav ul{
              list-style-type: none;
          }

          nav ul li{
              float: left;
              width: 25%;
              text-align: center;
              position: relative;
          }

          nav ul::after{
              content: "";
              display: table;
              clear: both;
          }

          nav a{
              display: block;
              text-decoration: none;
              color: black;
              border-bottom: 2px solid transparent;
              padding: 10px 0px;
          }

          nav a:hover{
              color: #008a5e;
              border-bottom: 2px solid #008a5e;
          }

          .sous{
              display: none;
              box-shadow: 0px 1px 2px #CCC;
              background-color: white;
              position: absolute;
              width: 100%;
              z-index: 1000;
          }
          nav > ul li:hover .sous{
              display: block;
          }
          .sous li{
              float: none;
              width: 100%;
              text-align: left;
          }
          .sous a{
              padding: 10px;
              border-bottom: none;
          }
          .sous a:hover{
              border-bottom: none;
              background-color: RGBa(200,200,200,0.1);
          }
          .deroulant > a::after{
              content:" ▼";
              font-size: 12px; }

              .conteneur3{
                  display: grid;
                  grid-template-columns:  210px 210px 210px;
                  grid-gap: 50px;
                  padding: 30px;
                  justify-content: center;
                  margin-left: auto;
                  margin-right: auto;

              }
              .conteneur3 img{
                object-fit: cover;
                width: 100%;
                height: 100%;}

                .conteneur4{
                    display: grid;
                    grid-template-columns:  330px 330px ;
                    grid-template-rows: 200px 200px ;
                    grid-gap: 40px;
                    padding: 30px;
                    justify-content: center;
                    margin-left: auto;
                    margin-right: auto;

                }
                .conteneur4 img{
                  object-fit: cover;
                  width: 100%;
                  height: 100%;}

                  .affiche {
                      grid-row-start: 1;
                      grid-row-end: 3;
                      grid-column-start: 1;
                      grid-column-end: 1;
                    }
                    .bouton{
                      color: white; font-family: Manrope;
                      background-color: #008a5e;border-radius: 50px;font-size: 0,8em;padding:9px;
                      text-decoration:none;
                      text-align:center
                    }
                    .conteneur5{
                        display: grid;
                        grid-template-columns:210px 210px 210px;
                        grid-gap: 50px;
                        padding: 30px;
                        justify-content: center;
                        margin-left: auto;
                        margin-right: auto;

                    }
                    .conteneur5 img{
                      object-fit: cover;
                      width: 100%;}

                      .conteneur6{
                          display: grid;
                          grid-template-columns: 170px 170px 170px 170px;
                          grid-template-rows: ;
                          grid-gap: 60px;
                          padding: 30px;
                          justify-content: center;
                          margin-left: auto;
                          margin-right: auto;

                      }
                      .conteneur6 img{
                        object-fit: cover;
                        width: 100%;
                    }
                    table{
                      color: #008a5e;
                      border-collapse: collapse;
                      margin: auto;
                    }
                    th{  border: solid, 1px,#008a5e;
                        height:50px;
                        text-align: center;
                        font-family:"Manrope";
                    }

                    td{
                      border: solid, 1px,#008a5e;
                      text-align: center;
                      font-family:"Manrope";
                      padding: 80px
                    }
                    .ma-classe3 {
                      color: white;
                      font-family: "Manrope";
                      background: #008a5e;
                      border-radius: 50px;
                      font-size: 0,8em;
                      padding:8px;
                      text-decoration:none;
                    }
                  /*  a:hover{
                      text-decoration: underline;
                    }
                    .ma-classe3:hover{
                      text-decoration: underline;
                    }*/
                    .ma-class2{
                      color: #008a5e;
                      font-weight: bold;
                    }
                    .conteneur7{
                        display: grid;
                        grid-template-columns:230px 230px 230px  ;
                        grid-template-rows: 230px ;
                        grid-gap: 60px;
                        padding: 30px;
                        justify-content: center;
                        margin-left: auto;
                        margin-right: auto;

                    }
                    .conteneur7 img{
                      object-fit: cover;
                      width: 100%;
                      height: 100%;
                  }
input[type=text] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-family: Montserrat
}
input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-family: Montserrat
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-family: Montserrat;
  color:white
}

input[type=submit] {
  background-color: white;
  color:#008a5e ;
  padding: 11px 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-family:Manrope;
}

input[type=submit]:hover {
  background-color: #45a049;
  color: white
}

.container {
  background-color: #008a5e;
  padding-left: 30px;
  padding-bottom: 30px;
  padding-right: 30px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}
select{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-family: Montserrat;

}
textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  font-family: Montserrat ;
}
.bouton:hover{
  background-color: #45a049;
  color: white

}

.conteneur8{
    display: grid;
    grid-template-columns:  330px 330px   ;
    grid-template-rows: 200px 200px 200px ;
    grid-gap: 40px;
    padding: 30px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;

}
.conteneur8 img{
  object-fit: cover;
  width: 100%;
  }

  .flyerp1{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-end: 3;
    grid-row-start: 1;
  }
  .flyerp2{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-end: 3;
    grid-row-start: 1;
  }
  .conteneur9{
      display: grid;
      grid-template-columns:  250px 250px 350px  ;
      grid-template-rows: 250px 250px 350px ;
      grid-gap: 40px;
      padding: 30px;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;

  }
  .conteneur9 img{
    object-fit: cover;
    width: 100%;
  height: 100%}

  .gif3{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-end: 2;
    grid-row-start: 2;
  }
  .gif1{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-end: 1;
    grid-row-start: 1;
  }
  .gif2{
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-end: 1;
    grid-row-start: 1;
  }
  .gif4{
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-end: 2;
    grid-row-start: 2;
  }
  .fiche{
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-end: 1;
    grid-row-start: 3;
  }
  .storyboard{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-end: 3;
    grid-row-start: 3;
  }
  .conteneur10{
      display: grid;
      grid-template-columns:  450px ;
      grid-template-rows: 600px ;
      grid-gap: 40px;
      padding: 30px;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;

  }
  .conteneur10 img{
    object-fit: cover;
    width: 100%;
    }

  figure {
  display: flex;
  flex-flow: column;
  max-width: 700px;
  margin: auto;
  text-align: center;
}
.conteneur11{
    display: grid;
    grid-template-columns:  210px 210px 210px;
    grid-template-rows: 210px;
    grid-gap: 50px;
    padding: 30px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;

}
.conteneur11 img{
  object-fit: cover;
  width: 100%;
  height: 100%;}





/*.menu-burger {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 30px;
      background-color: #008a5e;;
      width: 100%
    }

    .menu-burger label {
      cursor: pointer;
      font-size: 20px;
      background-color: white;
      color: #008a5e;
      padding: 10px 15px;
      border-radius: 5px;
      font-family: Montserrat
    }



    /* Cacher la case à cocher
    .menu-burger input[type="checkbox"] {
      display: none;
    }

    /* Style du menu principal
    .menu {
      display: none;
      flex-direction: column;
    }

    .menu a {
      text-decoration: none;
      color: #008a5e;
      padding: 10px 15px;
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom:  5px;
      font-family: Manrope
    }

    .menu a:hover {
      background-color: #ddd;
    }


    /* Afficher le menu principal lorsque la case est cochée
    .menu-burger input[type="checkbox"]:checked ~ .menu {
      display: flex;
    }
    /* Style du sous-menu
    .menu .submenu {
      display: none;
      flex-direction: column;
      margin-left: 20px;
    }
    .menu .subsmenu {
      display: none;
      flex-direction: column;
      margin-left: 20px;
    }
    .menu .subdmenu {
      display: none;
      flex-direction: column;
      margin-left: 20px;
    }
    .menu .subfmenu {
      display: none;
      flex-direction: column;
      margin-left: 20px;
    }
    .menu .subgmenu {
      display: none;
      flex-direction: column;
      margin-left: 20px;
    }

    .menu .submenu a {
      background-color: #e9e9e9;
    }

     Afficher le sous-menu lorsque la case est cochée
    .menu input[type="checkbox"]:checked ~ .submenu {
      display: flex;
    }
    .menu input[type="checkbox"]:checked ~ .subsmenu {
      display: flex;
    }
    .menu input[type="checkbox"]:checked ~ .subdmenu {
      display: flex;
    }
    .menu input[type="checkbox"]:checked ~ .subfmenu {
      display: flex;
    }
    .menu input[type="checkbox"]:checked ~ .subgmenu {
      display: flex;
    }
    */