html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*......................................................................... fin reset ..................................................................*/



/* DEBUT INFO TECHNIQUES */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
html {
    background-color: rgb(234, 241, 248);


}
*{
    box-sizing: border-box;
}    

body {
    background-color: #fff;
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
    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);

}


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




/* reglage texte et couleurs du menu */
    .menu01 {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.4;
    color: GRAY;
    background: white;
}


    /* bandeau de navigation */
    nav {
    color: white;
    background: rgb(250, 250, 250);
    box-shadow:   

    0 1px 4px 0 rgba(0, 0, 0, 0.185);
  }


   /* 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;
      width: 100%;
      margin: 0 auto;
      padding: 20px 2rem; }
    
    

      /* le logo */
      .nav-brand {
        font-family: inherit;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: inherit;
        color: rgb(12, 14, 20);      
        }

        .nav-brand h2{
            font-size: 1em;
            color: #646464;
            font-weight: 400;
        }

      .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 */
        .nav-link a {
          font-size: 1rem;
          font-weight: 500;
          color: rgb(67, 67, 88);
          padding: 1.3rem;
          text-decoration: none;}


      /* survol des liens */
          a:hover {
            color: rgb(0, 132, 255);
            background: rgb(196, 231, 255);          }

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

  

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

@media screen and (max-width: 700px) { 
  
  /* 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;
            cursor: pointer;}

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

        .nav-link {
          z-index: 9999 !important;
          position: absolute;
          display: block;
          width: 100%;
          background-color: rgb(20, 20, 20);
          transition: all 0.3s ease-in;
          top: 6.1em;
          left: 0;
          z-index: -2;
          overflow: hidden;
         }

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

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

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



  
 /* end */ 
  
}


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

/* MAIN */

.parent_bloc_img {
    width: 95%;
    padding: 20px;
    margin: 0 auto;
}
.titre_prod h1{
    text-align: center;
    padding: 15px 0;
    color:white;
    font-weight: 600;
}
.titre_prod_1{
    background-color: #2a529b;
}
.titre_prod_2{
    background-color: #161f52;
}
.titre_prod_3{
    background-color: #3e80fa;
}

.titre_prod span{
    font-weight: 100;
    color: #bed5ff;
}

.enfant_bloc_img {
    width: 100%;
    padding-top:10px;
    display: flex;
    justify-content: center;
}

.bloc_img {
    width: 45%;
}

.bloc_img img {
    width: 100%;
}

.bloc_texte {
    width: 45%;
}


.bloc_texte p {
    padding: 0px 20px; 
    color: #2a529b;
    font-size: 1.1em;
    line-height: 1.6em;
}

.inversion {
    flex-direction: row-reverse;
}

.inversion .bloc_texte p,
.inversion .bloc_texte h2 {
    text-align: right;
}

.information_bleu {
    background-color: #2a529b;
    width: 100%;
    box-sizing: border-box;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}

.information_bleu h1 {
    font-size: 2.5em;
    font-weight: 600;
    color: white;
    padding-bottom: 5px;
}

.information_bleu span {
    display: block;
    width: 400px;
    height: 0.5em;
    border-top: 2px solid white;
    margin-right: 5px;
}

.information_bleu p {
    line-height: 1.5em;
    padding: 20px;
    text-align: center;
    font-size: 1.3em;
}

.information_bleu h3 {
    font-weight: 100;
}

/* FIN MAIN */

/* FOOTER */

footer {
    padding:50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color:#2a529b;
    background-color: rgb(5, 13, 29);
}

/* FIN FOOTER */

/* responsive */


@media screen and (max-width:700px) {

    .enfant_bloc_img {
        flex-direction: column;
        align-items: center;
    }
    .parent_bloc_img{
        width: 100%;
        padding:0;
    }
    .bloc_img {
        width: 95%;
    }

    .bloc_texte {
        text-align: center;
        width: 100%;
        font-size: 1em;
    }

    .inversion .bloc_texte h2,
    .inversion .bloc_texte p,
    .bloc_texte p {
        text-align: center;
    }

    .information_bleu {
        font-size: 2em;
    }

    .texte_video {
        left: 100%;
        font-size: 1.5em
    }

    .bloc_texte p {
        padding: 20px 20px 30px 20px; 

    }
}