* {
    /* Pour que les tailles soient correctes */
    box-sizing: border-box;
  }
  
  body {
    background-image: url("images/fond2.jpg");
    background-repeat: no-repeat;
    
    background-size: cover;
    background-attachment: fixed;
    margin-left: 0px;
 /*   color: white;*/
  }
  .banniere{
    width: 100%;
  }
  .banniere img{
    width: 100%;
  }
  
.menu {
    /* Pour que le menu reste en place quand on scroll */
    position: fixed;
    top:0px;
    /* Pour que le menu ne soit pas sur le texte et que ce dernier puisse être sélectionné */
    width: 0px;
  }
  #hamburger {
    /* Pour que la checkbox ne s'affiche pas */
    display: none;
  }
  #hamburger-logo {
    /* Pour que le curseur soit un pointeur */
    cursor: pointer;
    background: black;
    width: 200px;
    display: block;
    color: white;
    /* Pour que le menu hamburger s'affiche toujours */
    text-align: right;
    /* Pour que le menu hamburger soit "rangé" par défaut */
    transform: translateX(-168px);
    padding: 10px;
  }
  
  nav {
    display: flex;
    flex-direction: column;
    background: rgb(41, 7, 236);
    overflow: hidden;
    width: 200px;
   
    /* Pour que les liens soient "rangés" par défaut */
    transform: translateX(-200px);
  }
  
  #hamburger-logo,
  nav {
    /* Pour qu'il y ait une animation */
    transition: 0.7s;
  }
  
  /* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
  #hamburger:checked ~ #hamburger-logo,
  #hamburger:checked ~ nav {
    /* Changement de la position pour afficher les menus */
    transform: translate(0);
  }
  nav a {
    color: white;
    text-decoration: none;
    padding: 10px;

  }
  
  nav a:hover {
    background: #444;
  }
  
  

.slog{
    position: absolute;
    top:55px;
    left:30%;
    color: white;
    font-size:24px;
    text-shadow: #727070 1px 1px 0, 2px 2px 2px;
    color: #ECECEC;
}

 
.connexion
{
    position: absolute;
    top:70px;
    left:85%;
}
    
img {
  width: 100%;
}
.Button {
    color: rgb(255, 255, 255); font-size: 23px; line-height: 23px; padding: 14px; border-radius: 9px; font-family: Georgia, serif; font-weight: normal; text-decoration: none; font-style: normal; font-variant: normal; text-transform: none; background-image: linear-gradient(to right, rgb(28, 110, 164) 0%, rgb(35, 136, 203) 50%, rgb(20, 78, 117) 100%); box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px; border: 2px solid rgb(28, 110, 164); display: inline-block;}
    .myButton:hover {
    background: #1C6EA4; }
    .myButton:active {
    background: #144E75; }

 

@media (min-width:768px) { 
.float-parent-element { 
width: 100%;
margin-top: 25px;
display: flex;
} 
.float-child-element { 
float: left; 
width: 50%; 
background-color: #DAFFFF;
display: block;
} 
.float-child-element_sim { 
  float: left; 
  width: 50%; 
  background-color: white;
  display: block;
  } 

.red { 
background-color: #DAFFFF;

} 
.red_sim{
  background-color:white;
}
.yellow_sim{
  background-color:white;
}
.yellow {
text-align: center; /* justifiée */
color: rgb(15, 1, 1);
height:100%;
width:100%;
background-color: #DAFFFF;
padding-top:10%;
}
}


.fctelecom {
margin-top:80px;
margin-bottom:80px;
left:150px;
top:200px;
text-align: center; /* justifiée */
color: white;
font-size:32px;
opacity:0.8;
}  
.routeur {
  margin-left:10%;
  margin-right:10%;
  left:150px;
  top:200px;
  text-align: center; /* justifiée */
  color: black;
  font-size:32px;

  }  
.red { 
    background-color: #DAFFFF;
    
} 


.titre {
    font-size:32px;
}
.titre_aligne {
  font-size:32px;
  text-align: left;
}
.titre2 {
    font-size:38px;
}
.texte {
    font-size:24px;
}

.textegauche {
    text-align: left;
}

.soluce{
    padding-top:50px;
    text-align: center; 
    font-size: 24px;
    color: #f6f8fa;
    font-weight: bold;
   }

.responsive-three-column-grid {
display:block;
}
.responsive-three-column-grid > * {
padding:1rem;
}
.responsive-three-column-grid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}  
.responsive-three-column-grid-2 img{
  width:20%;
}  
.footer img {
  width:15%;
}
.container-list {

height:500px;
top: 0;
right: 0;
bottom: 0;
left: 0;

display: grid;
place-items: center;

}

.items {

text-decoration: none;
width: 300px;
background: #fffffe;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-top: 10px solid #0B5AA2; }

.items-head p {
text-decoration: none;
padding: 5px 20px;
margin: 10px;
color: #0B5AA2;
font-weight: bold;
font-size: 24px; }

.items-head hr {
text-decoration: none;
width: 20%;
margin: 0px 30px;
border: 1px solid #0B5AA2; }

.items-body {
padding: 10px;
margin: 10px;
display: grid;
grid-gap: 10px; }

.items-body-content {

text-decoration: none;
padding: 10px;
padding-right: 0px;
display: grid;
grid-template-columns: 10fr 1fr;
font-size: 24px;
grid-gap: 10px;
border: 1px solid transparent;
cursor: pointer; }

.items-body-content:hover {
text-decoration: none;
border-radius: 15px;
border: 1px solid #0B5AA2; }

.items-body-content i {
text-decoration: none;
align-self: center;
font-size: 24px;
color: #021425;
font-weight: bold;
animation: icon 1.5s infinite forwards; 
}
a {
    text-decoration: none;
    color:black;
 }
 .footer{
    background-color:white;
    text-align:center ;
  }
  .fctelecom-footer {
color:white;
    text-align:center ;
  }  
  .fctelecom-footer img {
    width:50%;
  }  
.responsive-three-column-grid-2 {
color:white;
}
.fonction {
           
    left:150px;
    text-align: center;
    padding-left:70px;
    padding-right:70px;
    margin-left:10%;
    margin-right:10%;
    color: rgb(15, 1, 1);
    font-size:22px;
    opacity:0.8;
    background: #B0D8E5;
    line-height: 1;
background: -moz-linear-gradient(top, #B0D8E5 0%, #B0D8E5 24%, #2f5e7d 100%);
background: -webkit-linear-gradient(top, #B0D8E5 0%, #B0D8E5 24%, #2f5e7d 100%);
background: linear-gradient(to bottom, #B0D8E5 0%, #B0D8E5 24%, #2f5e7d 100%);
        }     

 .cadre_titre{
  
  text-align: center;
  margin-left:10%;
  margin-right:10%;
  font-size:20px;
  opacity:0.8;
  line-height: 1;
  background: #FFFFFF;
background: -moz-linear-gradient(top, #FFFFFF 0%, #A9C9CB 50%, #FFFFFF 100%);
background: -webkit-linear-gradient(top, #FFFFFF 0%, #A9C9CB 50%, #FFFFFF 100%);
background: linear-gradient(to bottom, #FFFFFF 0%, #A9C9CB 50%, #FFFFFF 100%);
 }  
 .responsive-three-column-grid-2 {
  color:white;

}    
 .items-body-m2m {
  text-decoration: none;
  padding: 10px;
  padding-right: 0px;
  display: grid;
  grid-template-columns: 10fr 1fr;
  
  grid-gap: 10px;
  border: 1px solid transparent;
  color:black;
  }
  
  .container-m2m {
  border: 0px solid black;
  height:600px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  display: grid;
  place-items: center;
  
  }
  .items_m2m {
  
  text-decoration: none;
 
  background: #fffffe;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-top: 10px solid #0B5AA2; }
  
  .items-head-m2m p {
  text-decoration: none;
  padding: 5px 20px;
  margin: 10px;
  color: #0B5AA2;
  font-weight: bold;
  font-size: 24px; 
  text-align:center;
  }
  
  .container-m2m2 {
      border: 0px solid black;

      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      
      display: grid;
      place-items: center;
      
      }
      .items_m2m2 {
      
      text-decoration: none;
      width: 600px;
      background: #fffffe;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      border-top: 10px solid #0B5AA2; }
      
      .items-head-m2m2 p {
      text-decoration: none;
      padding: 5px 20px;
      margin: 10px;
      color: #0B5AA2;
      font-weight: bold;
      font-size: 42px; 
      text-align:center;
      }
      
  .items-head-m2m hr {
  text-decoration: none;
  width: 90%;
  margin: 0px 30px;
  border: 1px solid #0B5AA2; }

  .cadre_blanc {
    background:white;
    padding-left:10%;
    padding-right:10%;
    margin-left:20%;
    margin-right:20%;
    padding-top:2% ;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity: 0.8;
    }
    .firewall{
      background:white;
      padding-left:3%;
      padding-right:3%;
      margin-left:7%;
      margin-right:7%;
      padding-top:1% ;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      opacity: 0.8; 
    }
    .t1{
           
      font-size: 24px;  
  }
  td{
      padding:10px;
  }
 .table{
    width:100%;
     vertical-align: top; 
  }
  
  .routeur img{
    width:100%;
}
.tel img{
  width:50%;
}


.responsive-three-column-grid-3 {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  color:white;
  }
  .cadre_blanc {
    background:white;
    padding-left:10%;
    padding-right:10%;
    margin-left:20%;
    margin-right:20%;
    padding-top:2% ;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity: 0.8;
    }
    .float-parent-element2 { 
      width: 100%;
      margin-top: 25px;
      display: flex;
    } 
    .float-child-element2 { 
      float: left; 
      width: 50%; 
      background-color: white;
      display: block;
      padding-left:3%;
    }   
    .red2 img{
      width:60%;    
      }  

      .tel-element { 
        float: left; 
        width: 50%; 
        padding-top:20px;
        background-color: #B0D8E5;
        display: block;
      text-align: center; /* justifiée */
      
      } 
/***************** tel portrait **************************/

@media (max-width:580px)  { /*@media (max-width:580px)  { */
.autre{
  display:none;
}  
    .titre {
        font-size:24px;
    }  
.menu{
    display:none;
}
.yellow {
    text-align: center; 
    color: rgb(15, 1, 1);
    background-color:#DAFFFF;
    padding:5%;
   
 }
 .responsive-three-column-grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr ;
  }  
  .titre2 {
    font-size:32px;
}
.connexion{
    display:none; 
 }
 .fonction {
           
    left:150px;
    text-align: center;
    padding-left:10px;
    padding-right:10px;
    margin-left:5%;
    margin-right:5%;
    color: rgb(15, 1, 1);
    font-size:20px;
    opacity:0.8;
    background: #B0D8E5;
    line-height: 1;
background: -moz-linear-gradient(top, #B0D8E5 0%, #B0D8E5 24%, #2f5e7d 100%);
background: -webkit-linear-gradient(top, #B0D8E5 0%, #B0D8E5 24%, #2f5e7d 100%);
background: linear-gradient(to bottom, #B0D8E5 0%, #B0D8E5 24%, #2f5e7d 100%);
        }  
        .cadre_blanc {
          background:white;
          padding-left:1%;
          padding-right:1%;
          margin-left:5%;
          margin-right:5%;
          padding-top:2% ;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          opacity: 0.8;
          }  
          .responsive-three-column-grid-3 {
            display: grid;
            grid-auto-rows: 1fr;
            grid-template-columns: 1fr;
            color:white;
            }            
            
            .cadre_blanc img { 
           width:100%;
            }
            .titre_aligne {
              font-size:32px;
              text-align: left;
              padding:2%;
            }
            .red2 img{
              width:60%;    
              } 
              .red3 img{
                width:100%; 
              }
              .fctelecom-footer img {
                width:100%;
              }  
}
/*********** tel horiz ****************/
@media (min-width:590px) and (max-width:990px) { 
.tel_portrait{
  display:none;
}
    .titre {
        font-size:24px;
    }  
.menu{
    display:none;
}
.yellow {
    text-align: center; 
    color: rgb(15, 1, 1);
    background-color:#DAFFFF;
    padding-top:2%;
 }
 .responsive-three-column-grid {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr;
  }  
.titre {
    font-size:18px;
}
.texte {
  font-size:14px;
}
.connexion{
   padding-right:5%; 
}
.responsive-three-column-grid-3 {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr;
  color:white;
  }  
  .fctelecom {
    margin-top:80px;
    margin-bottom:80px;
    left:150px;
    top:200px;
    text-align: center; /* justifiée */
    color: white;
    font-size:32px;
    opacity:0.8;
    padding-left:5%;
    padding-right:5%;
    }  
}
/*********** tablette ******************/
@media (min-width:800px) and (max-width:1280px) {/*@media (min-width:800px) and (max-width:1280px) {*/
  .tel_portrait{
    display:none;
  }
    .responsive-three-column-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr;
      }  
      .titre {
        font-size:20px;
    } 
    .yellow {
        text-align: center; 
        color: rgb(15, 1, 1);
        background-color:#DAFFFF;
        padding-top:4%;
     } 
     .responsive-three-column-grid-3 {
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-columns: 1fr;
      color:white;
      }    
      .cadre_blanc {
        background:white;
        padding-left:5%;
        padding-right:5%;
        margin-left:10%;
        margin-right:10%;
        padding-top:2% ;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        opacity: 0.8;
        }   
        .texte {
          font-size:18px;
        }        
}
/************** portable ***************/
@media (min-width:1310px) and (max-width:1800px) {
  .titre {
    font-size:22px;
} 
.tel_portrait{
  display:none;
}
}
/*********** petite tablette **************/
@media (min-width:768px) and (max-width:850px)  {

  .titre {
    font-size:18px;
} 
.yellow {
  text-align: center; 
  color: rgb(15, 1, 1);
  background-color:#DAFFFF;
  padding-top:2%;
 
}
}
/************** desktop ***********************/
@media (min-width:1460px) {
.titre {
  font-size:32px;
}
.tel_portrait{
  display:none;
}
}
/*    
.menu{
  display:none;
}  
.connexion{
  display:none;
}
.footer img{
  width:20%;
}
.red img{
width:100%;    
}
.red2 img{
  width:60%;    
  }  
 
.button_c
{
  display: none;
} 
.red2 { 
  background-color: white;
  
} 
.yellow {
  text-align: center; 
  color: rgb(15, 1, 1);

  background-color: #DAFFFF;
  padding-top:3%;
  }
.titre {
  font-size:20px;
}

.titre_aligne {
font-size:22px;
text-align: left;
}
.titre2 {
  font-size:24px;
}
.texte {
  font-size:18px;
}
.float-parent-element2 { 
  width: 100%;
  margin-top: 25px;
  display: flex;
} 
.float-child-element2 { 
  float: left; 
  width: 50%; 
  background-color: white;
  display: block;
} 
.t1{
  font-size: 18px;
}

.fonction {

   color: rgb(15, 1, 1);
  opacity:0.8;
  background: #B0D8E5;
  line-height: 1;
background: -moz-linear-gradient(top, #B0D8E5 0%, #B0D8E5 24%, #144E75 100%);
background: -webkit-linear-gradient(top, #B0D8E5 0%, #B0D8E5 24%, #144E75 100%);
background: linear-gradient(to bottom, #B0D8E5 0%, #B0D8E5 24%, #144E75 100%);
      }
      
.cadre_blanc {
background:white;
padding-left:1%;
padding-right:1%;
margin-left:10%;
margin-right:10%;
padding-top:2% ;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity: 0.8;
}  
.responsive-three-column-grid-2 img{
  width:30%;
}       
}