* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/* base */
html 
{background-color:#f1f1f1;}
  

body 
{
  background-color:white;
  margin:auto;
  font-family: arial, sans-serif;
  
   /* BOXED BODY or FULL WIDTH BODY*/
  /* mettre la ligne suivante en commentaire pour passer en full width */
  max-width:1600px;
}

/* parents */

/* flex et espacement sur les coté de la section */
.two-col-fw_1 {
    display:flex;
    margin:0px 0px 0px 0px;  
    padding:0px 0px 0px 0px;  
    /* alternative en pourcentage */
    /* padding:0px 10% 0px 10%; */
    
    /* pour switcher les colonnes enlever le commentaire la ligne ci dessous */
    flex-direction:row;

    } 

/* childs */

.article{
  display:flex;
  align-items:center;
}

.two-col-fw_1 div:nth-child(1) {
width:50%;
background-color:unset;
overflow:hidden;
}

.two-col-fw_1 div:nth-child(2) {
width:50%; 
background-color:unset;
}

/* réglage des espaces du bloc texte */
.two-col-fw_1 div:nth-child(2)  {
background-color:white;
padding:10px;

}

/* image responsive adaptive */
.two-col-fw_1 img {
  width: 100%;
  height: auto;
  max-width: unset;
  }

/* reglage des titres et texte de la section .two-col-fw  */
.two-col-fw_1 h1 {
  color: #00072d;
  text-align:center; 
  font-size:2em;
  font-style:italic;
  padding:0.3em 0em 0em 0em;
}
.two-col-fw_1 h2 {
  color:#1f487e;
  text-align:center;  
  font-style:italic;
  font-size:1.4em;
  padding:0.3em 0em 0.3em 0em;
}
.two-col-fw_1 p {
  color:#303030;
  text-align:justify;  
  font-style:normal;
  font-size:1em;
  padding:1em;
}


/* reglage du séparateur  */
.two-col-fw_1 hr {
  border: 0.5px solid #0e6ba8;
  width:33%;
  /* pour centrer le séparateur, décommentez la ligne ci dessous */
  margin:auto;
  }

/* ************************************ */
/* ************************************ */
/* ************    MENU   ************* */
/* ************************************ */
/* ************************************ */
/* ************************************ */




/* reglage texte et couleurs du menu */
    .menu01 {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.4;
    color: GRAY;
    background: white;
    

}


    /* bandeau de navigation */
    nav {
    color: white;
    background: #1f487e;
    box-shadow:   
    0 1px 2px 0 rgba(0, 0, 0, 0.15),
    0 2px 1px -5px rgba(0, 0, 0, 0.12),
    0 1px 6px 0 rgba(0, 0, 0, 0.2);
  }


   /* mise en forme du child de la nav */
     .nav-wrapper {
      display: flex;
      flex-direction: row;
      flex: 1;
      flex-basis: auto;
      justify-content: space-between;
      align-items: center;
      max-width: 70rem;
      width: 100%;
      margin: 0 auto;
      padding: 0 2rem;  }
    
    

      /* le logo */
      .nav-brand {
        font-family: inherit;
        font-size: 1.7rem;
        font-weight: 700;
        line-height: inherit;
        text-transform: uppercase;
        color: white;      }

      .nav-button {
        display: none;      }


      /* mise en forme des liens */
      .nav-link {
        display: flex;
        flex-direction: row;
        flex: 1;
        flex-basis: auto;
        justify-content: center;
        align-items: center;}

        /* apparence des liens */
        a {
          font-size: 1rem;
          font-weight: 500;
          color: white;
          padding: 1.3rem;
          text-decoration: none;}


      /* survol des liens */
          a:hover {
            color: white;
            background: #0e6ba8;          }

      /* on fait disparaitre la case à cocher*/
      #nav-check {
        display: none;      }

ul {
  margin-left:50px;
}

li {
  text-align:left;
}

/* ************************************ */
/* ************************************ */
/* RESPONSIVE MENU */
/* ************************************ */
/* ************************************ */

@media screen and (max-width: 600px) { 
  
  /* start */

      .nav-wrapper {
        padding: 1rem;      }


      .nav-button {
          display: inline-block;
          position: absolute;
          top: 0;
          right: 0;}

       .nav-menu label {
            display: inline-block;
            width: 3rem;
            height: 3rem;
            margin: 1.7rem 0;}

        .nav-menu span {
              display: block;
              width: 2rem;
              height: 0.5rem;
              border-top: 2px solid LIMEGREEN;}

        .nav-link {   
          z-index:9999 !important;
          position:absolute;
          display: block;
          width: 100%;
          background-color: GRAY;
          transition: all 0.3s ease-in;
          top: 4.2rem;
          left: 0;
          overflow: hidden;}

          .nav-link a {
            display: block;
            width: 100%;   }

          /* si burger cliqué */
         
            
          #nav-check:not(:checked) + .nav-link {
            height: 0;}

          #nav-check:checked + .nav-link {
            height: calc(100vh - 4.2rem);
            overflow: hidden;}
           



  
 /* end */ 
  
}


/* ************************************ */
/* ************************************ */
/* **********   FIN MENU   ************ */
/* ************************************ */
/* ************************************ */
/* ************************************ */


/* footer */

footer div{
  background-color:#1f487e;
  /*margin-top:10px;*/
  padding:10px;
  color:white;
  text-align:center;
}
/* fin du footer */

@media screen and (max-width: 900px) {
  
  /* start */
  

  
  article, section, section div { 
  align-items: flex-start !important;
  justify-content:flex-start !important;
  flex-direction:column !important;
  margin:0 !important;
  padding:0 !important; 
  height:unset !important; 
  width:100% !important;
    /* le calcul des padding et border est intégré */
  box-sizing: border-box !important;
  
    /* espace entre tous les items */
  margin-bottom:20px !important;   
  }
  
  body {
    /* reset du Boxed vers full width */ 
  width:100% !important;
    /* padding de la page complete */  
  padding:0px !important;

  }
    /* padding des paragraphes */  
  p, h1, h2, hr {margin:0px 5px !important;  }
    
 
 /* hack hr */
  hr {margin:auto !important}
  /* end */
    
}

 
/* reset */
* {
  margin:0;
  padding:0;
  box-sizing:content-box;}

a {
   outline : none;
}

/* base */
html 
{background-color:#f1f1f1;}
  

body 
{
     /* BOXED BODY */
  max-width:1280px;
  background-color:white;
  margin:auto;
  font-family: arial, sans-serif;

}

/* parent */

section{
  text-align:center;
  color:#00072d;
}

section hr {
  color:#0e6ba8;
  width:200px;
  margin:auto;
}

.five_col {
    display:flex;
    margin:0px 10px 0px 10px;  
    padding:10px 0;
}

/* childs */

.five_col div {  
  padding:10px;
  text-align:center; 
  font-size:unset;
}

.five_col div:nth-child(1) {
  
width:100%;
 /* background-color:unset; */
}
.five_col div:nth-child(2) {
 width:100%; 
}
.five_col div:nth-child(3) {
 width:100%; 
 background-color:unset;
}
.five_col div:nth-child(4) {
 width:100%; 
}
.five_col div:nth-child(5) {
 width:100%; 
}

/* texte h1 et liens */


.five_col div h3 {
  border:3px solid #303030;
  font-size:unset;
  color:#1f487e;
  display:flex;
  align-items:center;
  justify-content:center;  
}

.five_col div p {
  color:#303030;
  padding-top:10px;
  text-align:justify;}

 
/* responsive */


@media screen and (max-width: 1205px) {
  h3 { 
    height:40px;}
}



@media screen and (max-width: 700px) {
  
  /* start */
  
  body {
  width:100%;
  padding:5px;
  box-sizing: border-box;
  }
 section {
    width:100%;
  }
  
  .five_col, div {
  align-items: flex-start !important;
  justify-content:flex-start !important;
  flex-direction:column !important;
  margin:0 !important;
  padding:0 !important; 
  margin-bottom:20px !important; 
  height:unset !important; 
  width:100% !important;   
  }
    
 
 
  /* end */
    
}