@font-face {
    font-family: 'Patua One';
    src: url('../fonts/PatuaOne-Regular.eot');
    src: url('../fonts/PatuaOne-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/PatuaOne-Regular.woff2') format('woff2'),
        url('../fonts/PatuaOne-Regular.woff') format('woff'),
        url('../fonts/PatuaOne-Regular.ttf') format('truetype'),
        url('../fonts/PatuaOne-Regular.svg#PatuaOne-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Nunito_r';
    src: url('../fonts/Nunito-Regular.eot');
    src: url('../fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nunito-Regular.woff2') format('woff2'),
        url('../fonts/Nunito-Regular.woff') format('woff'),
        url('../fonts/Nunito-Regular.ttf') format('truetype'),
        url('../fonts/Nunito-Regular.svg#Nunito-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito_bold';
    src: url('../fonts/Nunito-Bold.eot');
    src: url('../fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nunito-Bold.woff2') format('woff2'),
        url('../fonts/Nunito-Bold.woff') format('woff'),
        url('../fonts/Nunito-Bold.ttf') format('truetype'),
        url('../fonts/Nunito-Bold.svg#Nunito-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}







body{
    margin: 0;
    background-color: #e7e7e7dc;
    font: normal 16px/24px 'Nunito_r'!important;

}
#first{
    display: block;
}
#hidden_div ,#modele ,#iphone ,#asus ,#blackberry ,#google ,#storage ,#storage1 ,#storage2 ,#storage3 ,#storage4 ,#storage5 ,#storage6 ,#storage7 ,#storage8 ,#storage9 ,#storage10 ,#storage11 ,#storage64 ,#storage32 ,#storage128 ,#storage256 ,#sub{
    display: none;
}
.bloc{
    width: 100%;
    height: 100vh;
    border-radius: 10px;
    background-color: white;
    padding: 30px;
    padding-top: 50px;
}
.pad{
    padding: 10px!important;
}
.pad_le{
    width: 100%;
    padding-left: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: lightgrey solid 1px;
    border-radius: 5px;
}
.bloc1{
    padding: 15px!important;
    
}
.bloc1 img{
    width: 200px;
    height: 200px;
    margin: auto;
    object-fit: contain;
}



.modele,
.famille{ margin-top: 40px; }
.stockage{ margin-top: 40px; }
.step{ display:none }
.step.current_step{ display:block }

.form .btn_continue{ display: none;border: 2px solid #000;text-transform: uppercase; color: #000;border: 1px solid #000;margin-top: 20px;}

.content-recap{ max-width: 544px;margin: auto;width: 100%;padding: 40px; }
.content-recap .blcTitle{ border-bottom: 1px solid #e2e2e2;padding-bottom: 15px;margin-bottom: 50px; }
.title{ font: normal 30px/35px 'Nunito_bold';display: inline-block;margin-bottom: 15px; }

.blcBtn .btn{ margin:0 10px }
.blcBtn .btn.btn-dark { background-color: #696fb5;border-color: #696fb5; }
.blcBtn .btn.btn-dark:hover{ background: #5258a6; }
.blcInfo{ border:1px solid #e2e2e2;border-radius: 10px;padding: 10px;margin-top: 25px; }
.row_info{ display: flex;justify-content: space-between;border-bottom: 1px solid #e2e2e2;padding: 25px 0 }
.row_info:last-child{ border:none }
.info_complementaire{ margin-top: 30px; border-bottom:1px solid #e2e2e2 ;padding-bottom: 15px;}
.info_complementaire.last{ border:none }
.info_complementaire ul{padding: 0;margin: 0;}
.info_complementaire li{ list-style: none;padding-left: 35px;background: url(../images/icon-check.svg)left 5px no-repeat;margin-bottom: 15px; }
.info_complementaire span{ color: #555; }
.blcLeft{ background:#e9ecef;padding: 71px 40px 50px 100px;position: relative;min-height:calc(100vh + 90px) }
.blcLeft img{ display: block;width: 328px;margin: 60px auto 0 }
.progress_step{ padding-bottom:15px;margin-bottom: 25px;text-align: center;position: relative; }
.progress_step:before{ content: '';width: 100%;height: 2px;background: #e2e2e2;position: absolute;bottom: 0;left: 0; }
.progress_step:after{ content: '';width: 25%;height: 2px;background: #696fb5;position: absolute;bottom: 0;left: 0; }
.step1 .progress_step:after{ content: '';width: 50%;height: 2px;background: #212529;position: absolute;bottom: 0;left: 0; }
.step2 .progress_step:after{ content: '';width: 75%;height: 2px;background: #212529;position: absolute;bottom: 0;left: 0; }
.step3 .progress_step:after{ content: '';width: 100%;height: 2px;background: #212529;position: absolute;bottom: 0;left: 0; }
.step4 .progress_step:after{ content: '';width: 100%;height: 2px;background: #212529;position: absolute;bottom: 0;left: 0; }
.form{ max-width: 632px;margin: auto; }
.return{ display: none;padding-left: 32px; background: url(../images/arrow-return.svg)left center no-repeat;cursor: pointer;text-decoration: underline;}

.stockage.show_stockage,
.operateur .content.show_operateur,
.etat_general .content.show_etat,
.fonctionnement .content.show_fonction{ display: block!important; }
.step h3{ margin-bottom: 25px;color: #7CD9B2; }

/*PAGE HOME*/
.page header.sticky{ position: fixed;top: 0;left: 0;right: 0; }
.content_home{ text-align: center;min-height:calc(100vh - 87px);display: flex; justify-content: center;align-items: center;position: relative;padding-top: 120px;padding-bottom: 40px;}
.content_home .content{ max-width: 1120px;margin:auto }
.logo{ display: block;padding: 25px 0;width: 200px;margin: auto; }
.logo img{ display: block; }
.content_home form{ max-width: 800px;width: 100%;text-align: center;padding: 100px 0;border-radius: 15px;box-shadow:0px 0px 10px 0px rgb(105, 111, 181)}
.list_statut{ justify-content: center; }
.content_home h1{ margin-bottom: 45px;font:normal 35px/45px Nunito_bold;color: #94A8C1 ; }
.bouton{ display: inline-block;border:2px solid #696fb5;text-transform: uppercase;padding:15px 25px;font-weight: bold;cursor: pointer;  }
.chp_radio input{ position: absolute;opacity: 0; }
.list_statut .bouton{ display: block;position: relative; }
.list_statut .chp_radio .bouton { color: #696fb5;border-color: #696fb5; border-radius: 10px}
.list_statut .bouton:before{ content: '';width: calc(100% + 20px);height: calc(100% + 20px);left: -10px;top: -10px;position: absolute; }
.chp_radio input:checked ~ .bouton{}
.chp_radio input:checked ~ .bouton:before{ }
.list_statut .bouton:after{ content: '';left: 15px;top: 12px;position: absolute; width:30px;height:30px ;background: url(../images/check2.png)center no-repeat;opacity: 0;}
.chp_radio input:checked ~ .bouton:after{ opacity: 1; }

.bouton_continue{ display: inline-block; }
.content_home .row_btn{ text-align: center;margin-top: 18px;justify-content: center; }
.content_home .row_btn .bouton,
.blcSend input,
.form .btn_continue{ padding: 15px 60px 15px 25px; background: url(../images/arrow-btn.png)no-repeat #696fb5;background-position-x: calc(100% - 25px);;background-position-y:center ;background-size: 19px;transition: all ease-in-out 0.5s;color: #fff;border-radius: 10px;}

.content_home .blcBandeau{ position: absolute;top: 0;/*max-width: 1120px*/;width: 100%;margin:auto;left: 0;right: 0;background: #e9ecef; padding: 15px 25px;}
.content_home .blcBandeau .content li{ width: 25%; list-style: none;text-align: left;line-height: 20px;font-size: 14px;min-height: 50px;padding-right: 20px;display: flex;align-items: center;}
.content_home .blcBandeau .content li:last-child{ padding-right: 0; }
.content_home .blcBandeau .content ul{ display: flex;justify-content: center;padding: 0;margin: 0; }
.content_home .blcBandeau .content li span{ display: block;}
.item_step1{ background: url(../images/smartphone.png)left center no-repeat;padding-left: 37px;background-size: 24px;}
.item_step2{ background: url(../images/check-mark.png)left center no-repeat;padding-left: 50px;background-size: 30px; }
.item_step3{ background: url(../images/calendar.png)left center no-repeat;padding-left: 50px; background-size: 32px;}
.item_step4{ background: url(../images/credit-card.png)left center no-repeat;padding-left: 43px;background-size: 30px; }

select{ background: url(../images/arrow-select.png)no-repeat !important;background-position-x:calc(100% - 15px)!important;background-position-y: center!important;    -webkit-appearance: none;-moz-appearance: none;height: 58px !important;
border: 1px solid #000 !important; }
select::-ms-expand {
    display: none!important;
}
.form-check{ height: auto!important;padding: 0!important;border:none!important }
.form-check-label{ display: flex;width: 100%;height: 100%; min-height: 58px!important;padding: 10px 25px 10px 62px !important;border: 1px solid #000 !important;flex-direction: column;justify-content: center;position: relative;cursor: pointer;}
.form-check-label:before{ content: '';width: 15px;height: 15px;border: 1px solid #000;position: absolute;top: 20px;left: 25px; }
.form-check-label:after{ content: '';width: 20px;height: 16px;position: absolute;top: 20px;left:20px;background: url(../images/check.png)center no-repeat;top: 15px;left: 25px;opacity: 0;}
.form-check input[type="radio"]:checked ~ .form-check-label:after{ opacity: 1; }
.form-check-input { position: absolute!important;opacity: 0!important; }
.form-check-label p{ margin-bottom: 0; }
.form-check-label h6{ font-weight: bold; }


/*PAGE LISTE*/
.list .content{ display: block; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);padding: 25px;transition: all ease-in-out .5s}
.bandeauListe{ text-align: center;background: #000;padding: 40px 20px; margin-top: 50px;}
.bandeauListe .bouton{ color: #ffffff;border-color: #ffffff;text-decoration: none; }
.list{ padding-top: 40px;padding-bottom: 40px; }
.list h1{ width: 100%;text-align: center;margin-bottom: 40px!important; }
.page header{  -webkit-box-shadow: 0px 0px 29px -20px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 29px -20px rgba(0,0,0,0.75);box-shadow: 0px 0px 29px -20px rgba(0,0,0,0.75);position: relative;z-index: 999;background: #ffffff;}
.page h1{ font: normal 30px/35px 'Nunito_bold';color: #7CD9B2 ;position: relative; padding-bottom: 30px;margin-bottom: 35px;}
.page h1:before{ content: '';width: 100px;height: 1px;position: absolute;bottom: 0;left: 0;right: 0;margin: auto; background: #7cd9b2;}
.page .content-recap h1{ margin-bottom: 25px;padding-bottom: 0; }
.page .content-recap h1:before{ display: none; }
.page .content-recap b,
.page .contact b{ color: #7cd9b2; }



/*PAGE CONTACT*/
.contact{ padding: 60px 0;background: #e9ecef; }
.contact .blcChp label + p{ display: none; }
.contact .blcChp{ display: flex;flex-wrap: wrap; }
.contact .content{ max-width: 1000px;margin: auto;width: 100%;padding: 50px 40px;background: #ffffff; }
.contact .blcTitre{ text-align: center;margin-bottom: 50px; }
.contact .col_50 {width: 50%;  }
.contact .col_100{ width: 100%; }
.contact .col_30{ width: 33%; }
.list_radio{ display: flex;flex-wrap: wrap;width: calc(100% - 20px);border: 1px solid #000;padding: 25px 10px 0;margin:auto }
.contact .col_chp{ padding: 0 10px;margin-bottom: 35px; }

.contact .col_chp .chp_file { position: relative;}
.contact .col_chp input[type="file"]{ opacity: 0; position: relative;z-index: 10;position: relative; cursor: pointer;}
.textFile{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 1px solid #000;padding:12px 25px 10px 55px; background: url(../images/upload.png)10px center no-repeat;background-size: 25px;cursor: pointer;}
.contact .col_radio .wpcf7-acceptance .wpcf7-list-item-label::after { top: 3px; }
.contact .col_radio .wpcf7-acceptance .wpcf7-list-item-label::before{ top: -2px; }
.remarque{ padding-left: 30px;font-size: 14px; }

.contact .col_chp input{ display: block;width: 100%; height: 50px;padding:10px 25px;border: 1px solid #000;}
.contact .col_radio .wpcf7-list-item{ display: block; margin: 0;}
.contact .col_radio .wpcf7-radio{ margin:0 }
.contact .col_radio input{ opacity: 0;position: absolute; }
.contact .col_radio .wpcf7-list-item-label{ display: block;padding-left: 30px;position: relative; cursor: pointer;}
.contact .col_radio .wpcf7-list-item-label:after{ content: ''; position: absolute;left: 0;top: 6px;width: 15px;height: 15px;border: 1px solid #000}
.contact .col_radio .wpcf7-list-item-label:before{ content: '';position: absolute;left: 0;top: 2px; width: 20px;height: 16px; background: url(../images/check.png)center no-repeat;opacity: 0;}
.contact .col_radio input:checked ~ .wpcf7-list-item-label:before{ opacity: 1; }
.contact  .label{ display: block;font-weight: bold;margin-bottom: 15px;color: #696fb5; }
.blcSend{ width: 100%; }
.ajax-loader{ position: absolute; }
 .blcSend { margin-top: 25px;text-align: center; }
 .not_found{ text-align: center;font-weight: bold;font-style: italic; }
 .ajax-loader{ position: absolute!important; }

 .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output,
 .wpcf7 form.sent .wpcf7-response-output { text-align: center; }
 .adr{ background: #e9ecef;padding: 15px 15px 1px;text-align: center; }

 .contact .blcInfo{ margin-bottom: 50px; }

 /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* PAGE INFO*/
.info_complement{ margin-top: 35px; }
.select{ display: block;width: 100%;padding: 0 25px; }


@media (min-width:1200px) {
 .list .content:hover{   -webkit-box-shadow: 0px 0px 29px -3px rgba(0,0,0,0.75);-moz-box-shadow: 0px 0px 29px -3px rgba(0,0,0,0.75);box-shadow: 0px 0px 29px -3px rgba(0,0,0,0.75);;transition: all ease-in-out .5s;}
 .bandeauListe .bouton:hover{ background:#ffff;color: #000; transition: all ease-in-out 0.5s;}
 .content_home .row_btn .bouton:hover,
 .blcSend input:hover,
  .form .btn_continue:hover{ background-position-x: calc(100% - 22px);transition: all ease-in-out 0.5s; }
  .logo:hover{ opacity: 0.5; transition: all ease-in-out 0.5s}

}

@media (max-width:991px) {
        .blcLeft{ min-height: initial; }

}

@media (max-width:768px) {
    .content_home .blcBandeau{ position: static;margin-bottom: 50px; }
    .content_home .blcBandeau .content ul{flex-wrap: wrap;}
    .content_home .blcBandeau .content li{width: 50%;margin-bottom: 10px;}
    .content_home{ display: block; padding: 0 20px 50px}
    .contact .col_30{ width: 100%; }
    .content_home form{ padding: 50px 0; }

    



}
@media (max-width:600px) {
    .content_home .blcBandeau .content li{width: 100%;}
    .blcBandeau li.item{ padding-left: 50px; }
    .content_home h1{ font-size: 35px; }
    .content_home .blcBandeau{ padding: 25px 15px; }
    .contact .col_50 {width: 100%;  }
    .content_home h1{ margin-bottom: 25px; }
    .blcLeft img{ width: 280px;margin: auto; }
    .info_complement.info_prix{ margin-top: 0; }
    .contact .col_chp.col_comm{ margin-bottom: 0; }
    .contact .content{ padding: 50px 10px; }

}