/*----------------------------------------*/
/*---------------- FONTS ----------------*/
/*----------------------------------------*/

/*ROBOTO*/

@font-face {font-family: 'robotobold'; src: url('webfonts/roboto-bold-webfont.ttf') format('ttf'), url('webfonts/roboto-bold-webfont.woff2') format('woff2'), url('webfonts/roboto-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'robotolight'; src: url('webfonts/roboto-light-webfont.ttf') format('ttf'), url('webfonts/roboto-light-webfont.woff2') format('woff2'), url('webfonts/roboto-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'robotoregular'; src: url('webfonts/roboto-regular-webfont.ttf') format('ttf'), url('webfonts/roboto-regular-webfont.woff2') format('woff2'), url('webfonts/roboto-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

/*ACUMIN*/

@font-face {
    font-family: 'acuminproblack';
    src: url('webfonts/acuminpro-black-webfont.woff2') format('woff2'),
         url('webfonts/acuminpro-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acuminprobold';
    src: url('webfonts/acuminpro-bold-webfont.woff2') format('woff2'),
         url('webfonts/acuminpro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acuminprolight';
    src: url('webfonts/acuminpro-light-webfont.woff2') format('woff2'),
         url('webfonts/acuminpro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acuminpromedium';
    src: url('webfonts/acuminpro-medium-webfont.woff2') format('woff2'),
         url('webfonts/acuminpro-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acuminproregular';
    src: url('webfonts/acuminpro-regular-webfont.woff2') format('woff2'),
         url('webfonts/acuminpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'acuminprosemibold';
    src: url('webfonts/acuminpro-semibold-webfont.woff2') format('woff2'),
         url('webfonts/acuminpro-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/*----------------------------------------*/
/*---------- STYLES GENERAUX -------------*/
/*----------------------------------------*/


body { font-size: 23px; font-family: 'robotoregular', 'Arial', sans-serif; }
p,li { font-size: 23px; line-height: 21px; font-family: 'robotoregular', 'Arial', sans-serif;color: var(--black);}
strong{font-family: 'robotobold', 'Arial', sans-serif;}
em, em span{font-style: italic !important;}
.picto_txt{position: absolute;}

ul li, ol li{margin-left: 40px;}
ul ul li{margin-left: 30px;}

header > nav > ul > li::before, .bloc-home-bulles li::before, #nav_home li::before,  .nav_aside_content li::before, footer li::before, #fil_ariane li::before, ol li::before, .content_doc li::before{content: ""; width: 0;margin-left: 0;display: none;}

#logo_inner_site{top: 5px;}

p a, span a{color: var(--blue);}

.res_only{display: none;}

h2,h3,h4 {font-family: 'acuminprobold','Arial',sans-serif;text-transform: uppercase;}
h3{font-size: 26px; font-family: 'acuminprosemibold','Arial',sans-serif;}
h2{ color: var(--yellow); font-size: 30px; line-height: 36px;}


#home li, #documentation li{
    list-style: none;
}

#fil_ariane{display: none;}

.ct-pg p, .ct-pg li{
    font-size: 18px;
    line-height: 27px;
    margin-top: 20px;
}

.ct-pg p{padding: 0 25px;}

#logo_inner_site_res{display: none;}

.prixSous{
padding: 10px 0;
  text-align: center;
  background-color: var(--yellow);
  font-size: 28px;
}


/*----------------------------------------*/
/*--------------- INDEX ------------------*/
/*----------------------------------------*/

#index{ background: url('https://butterfly-media.s3.gra.io.cloud.ovh.net/legrand/xnet/2024/images/index.jpg') no-repeat center; background-size: 100%; min-height: 1000px; }
.logo{height: 100px;margin-top: 10px;margin-left: 50px;display: block;position: relative;}
#ct_index{
    position: absolute;
    top: 210px;
    display: block;
    margin-left: 700px;
}

#choose_country{background-color: var(--white);width: 300px;color: var(--black);font-family: 'acuminproblack','Arial',sans-serif;}
#choose_country h3{font-size: 16px !important;}
/*#choose_country img{top: 8px;left: 180px;}*/
#choose_country img{top: 8px;left: 180px;}
.choose_country_txt {
    color: var(--white);
    display: block;
    position: relative;
    font-size: 25px;
    font-family: 'acuminpromedium','Arial',sans-serif;
        right:2px;
}

#ct_index h1 {font-size: 78px;}
#ct_index h2 {font-size: 18px; margin-top: 15px; line-height: 21px; font-family: 'acuminprobold','Arial',sans-serif; }
.h2_style_plus{
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#ct_index h3 {font-size: 42px; margin-top: 100px; line-height: 40px;}
h3#choose_country { font-size: 16px; letter-spacing: normal; margin-top: 10px; }
h3#choose_country b{ left: 20px; font-size: 16px !important; }
#country {
  background-color: var(--white);;
  width: 300px;
  left: 0;
  padding: 10px;
  display: none;
  top: 0px;
    z-index: 99;
}
#country a { font-size: 16px; color: var(--blue); display: block; margin-bottom: 8px; }
.index_ndpb { font-size: 13px;color: white;top: 150px; }


.titre_yellow{
    background-color: var(--yellow);
    color: var(--white);
    font-family: 'acuminprobold','Arial',sans-serif;
    font-size: 23px;
    padding: 15px 10px;
    display: block;
    width: fit-content;
    margin-bottom: 15px;
}
.titre_cyan{
    background-color: var(--cyan);
    color: var(--white);
    font-family: 'acuminprobold','Arial',sans-serif;
    font-size: 23px;
    padding: 15px 10px;
    display: block;
    width: fit-content;
    margin-bottom: 15px;
}


.index_res_1, .index_res_2, .index_res_3{display: none;}
/*----------------------------------------*/
/*----------- MENU / BANNIERE ------------*/
/*----------------------------------------*/

#ct_country a{
    font-size: 23px;
    font-family: 'robotobold','Arial',sans-serif;
}

#ct_country img{
    top: 2px;
}


header ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F0F0EF;
    padding: 10px 30px;
}

header ul a{
    color: var(--black);
    font-size: 16px;
    font-family: 'robotobold','Arial',sans-serif;
    transition: .3s ease-in-out;
}

header ul a:hover{
    color: var(--yellow);
}

#ceo-blk{
    padding: 0 30px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#ceo-blk div:last-child{
    padding-left: 30px;
}

#comprendre-blk{
    background-color: #EDEDED;
    padding: 30px;
    margin-top: 30px;
}

#comprendre-blk ul{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

#comprendre-blk li{
    margin-left: 0;
}
#comprendre-blk li:first-child{
    margin-right: 50px;
}
#comprendre-blk li:not(:first-child){
    margin-left: 0;
    width: 265px;
}

#header_offre li a, #comprendre-blk li a{
    height: 100%;
    color: var(--white);
    text-align:center;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#header_offre li a{text-align: center;}

#header_offre li a div, #comprendre-blk li a div{
    height: 85px;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.picto_faq:hover span, .picto_sous:hover span, .picto_sim:hover span{
    transform: scale(1.2);
    transition: 0.5s ease;
}

.cat-question{
color: var(--yellow) !important;
}

#header_offre li a:hover span, #comprendre-blk li a:hover span{
    top: 0px;
    opacity: 1;
    filter: blur(0px);
}

#header_offre li a img, #comprendre-blk li a img{
    display: block;
    margin-bottom: 15px;
}

#video-comprendre{
    overflow: hidden;
    transition: 0.5s ease;
}
#video-comprendre img{
    transition: 0.5s ease;
}

#ceo-blk .video-comprendre-ceo{
    transition: 0.5s ease;
}
#ceo-blk{
    overflow: hidden;
    transition: 0.5s ease;
}
#ceo-blk:hover .video-comprendre-ceo{
    transform: scale(1.05);
}
#video-comprendre:hover img{
    transform: scale(1.3);
}

#calendrier-blk{
    margin-top: 30px;
    padding: 20px;
}

.calendrier_blk_container{margin-top: 30px;}

#calendrier-blk ul{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 30px;
    border-bottom: 1px solid #9D9D9C;
}

#calendrier-blk ul li{
    width: 33%;
    font-family: 'robotobold','Arial',sans-serif;
    font-size: 21px;
    padding-right: 30px;
    padding-bottom: 20px;
}

#calendrier-blk ul li strong{
    background-color: var(--cyan);
    color: var(--white);
    display: block;
    width: fit-content;
    padding: 5px;
    margin-bottom: 5px;
    font-size: 21px;
    font-family: 'robotobold','Arial',sans-serif;
}

#calendrier-blk ul:last-child{
    border: 0;
}
#calendrier-blk ul:last-child li{
    font-family: 'robotolight','Arial',sans-serif;
    font-size: 22px;
    color: #878787;
    border-left: 1px solid #9D9D9C;
    padding-left: 10px;
}
#calendrier-blk ul:last-child li img{
    display: block;
    margin-bottom: 30px;
}

#blk2_offre{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 30px;
}

.offre-border-yellow{
    padding-bottom: 46px!important;
    border-bottom: 1px solid var(--yellow);
}

#header_offre {
    padding: 40px 0 0 0;
}

#header_offre h1{
    color: var(--black);
    font-size: 44px;
    font-family: 'acuminprobold','Arial',sans-serif;
    line-height: 52px;
    margin-bottom: 33px;
}

#header_offre strong{
    font-size: 36px;
    color: var(--yellow);
    font-family: 'robotobold','Arial',sans-serif;
    line-height: 43px;
}

#header_offre ul{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    list-style: none;
    flex-direction: row;
}

#header_offre ul li{
    width: 200px;
    margin: 0;
}
#header_offre ul li a{
    height: 200px;
}
#blk2_offre{
    align-items: flex-start;
}
#blk2_offre div:first-child div{
    background-color: var(--yellow);
    padding: 10px 10px 20px 10px;
    color: var(--black);
}

#blk2_offre div:last-child h2:last-of-type {
    margin-top: 70px;
}
#blk2_offre div:last-child {
    padding-left: 70px;
}

#blk2_offre div:first-child div h2{
    color: var(--black);
    font-family: 'acuminprosemibold','Arial',sans-serif;
    font-size: 31px;
}
#blk2_offre div:first-child div strong{
    color: var(--black);
    font-family: 'robotobold','Arial',sans-serif;
    font-size: 22px;
}
#blk2_offre div:first-child div li{
    font-family: 'robotoregular','Arial',sans-serif;
    font-size: 22px;
    margin-top: 20px;
    list-style: disc;
    line-height: 18px;
    color: var(--black);
}

#blk2_avantage{
    margin-top: 30px;
    padding: 0 30px;    
}
#blk2_avantage ul{
    display: flex;
    align-items: center;
    margin-top: 30px;
}

#blk2_avantage ul li{
    padding: 15px;
    text-align: center;
    list-style: none;
}

#blk2_avantage ul li:nth-child(odd){
    background-color: var(--yellow);
}
#blk2_avantage ul li:nth-child(odd) strong{
    color: var(--white);
    font-family: 'robotobold','Arial', sans-serif;
}

#blk2_avantage ul li:nth-child(even){
    color: var(--yellow);
    font-family: 'robotobold','Arial', sans-serif;
    font-size: 39px;
}

#blk2_souscrire{
    padding: 0 30px;    
}

#blk2_noter{
    background-color: #EDEDED;
    padding: 30px 60px;
    display: flex;
    margin-top: 30px;
}

#blk2_noter div:last-child{
    padding: 0px 60px;
}

#blk2_souscrire li {
    list-style: none;
}
#blk2_souscrire li::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: var(--yellow);
    margin-right: 15px;
}

#blk2_souscrire_en_ligne{
    display: flex;
    align-items: stretch;
}
#blk2_souscrire_en_ligne div:first-child{
    background-color: var(--yellow);
    padding: 50px;
}
#blk2_souscrire_en_ligne div:first-child h2{
    color: var(--black);
}

.blk2_souscrire_en_ligne_container img{display: block;}
    
.savoir_plus_container{
    margin-top: 50px;
    display: block;
}

#savoir_plus{
    display: flex;
    align-items: center;
    width: fit-content;
    margin-top: 30px;
    color: var(--black);
    font-family: 'robotobold','Arial', sans-serif;
    font-size: 30px;
    padding: 15px 60px 15px 10px;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}

#savoir_plus::before{
    content: url('https://butterfly-media.s3.gra.io.cloud.ovh.net/legrand/xnet/2026/images/picto_savoir_plus.png');
    display: inline-block;
    margin: 0 20px;
}

.marge_bot{display: block;height: 50px;}

#list_docs{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#list_docs li a{
display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 270px;
  height: 250px;
  padding: 50px;
  background-color: var(--cyan);
  color: var(--white);
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition: .6s ease-in-out;
}
#list_docs li a:hover{
    background-color: var(--cyan_2);
}

#list_docs li a img{
    display: block;
    margin-bottom: 15px;
}

.cat-question{
    font-size: 22px !important;
    font-family: 'robotobold','Arial', sans-serif;
    color: var(--blue);
}

.cat-question:hover{
    transform: scale(1.01);
    transition: 0.5s ease;
}

.show-hide-all{font-size: 14px;}

.question{
    font-family: 'robotoregular','Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--black);
}

footer {
    margin: 30px 0;
    border-top: 1px solid var(--grey);
    padding-top: 20px;
        color: var(--grey);
}

.titre_page_secondaire{
    width: fit-content;
    padding: 20px 20px 20px 20px;
    font-size: 30px;
    margin: 30px 0px 20px 40px;
    font-family: 'acuminprosemibold','Arial',sans-serif;
    text-transform: uppercase;
    background-color: var(--yellow);
}

.container_faq{padding: 0 40px;}

.contact{padding: 0 35px;}
.contact ul{padding: 0 20px;}

footer li, footer li a, footer a, footer p{color: var(--grey);font-size:16px;}

/*_________POP_UP DIVERS__________*/

#video_comprendre_ceo_mp4, #video_comprendre_offre_mp4{
    display: none;
    position: fixed;
    top: 0;
    z-index: 9999999;
    background-color: rgba(255, 255, 255, 0.35); 
    height: 100%;
    width: 100%;
    padding: 100px;
    left: 0;
}

.video_ceo, .video_offre{
    background-color: #FFF;
    padding: 50px;
    width: 80%;
    margin: 0 auto;
}

.close{
    right: 10px;
    display: block;
    position: absolute;
    top: 15px;
    cursor: pointer;
}

/*


#bandeau_cookie{
    background-color: rgba(255, 255, 255, 0.6);
    position: fixed;
    bottom: 0;
    z-index: 999999;
    font-size: 18px;
    width: 100%;
    left: 0;
    padding: 30px;
    display: none;    
}

.btn_ok{
    display: block;
    width: 50px;
    position: relative; 
    margin: auto;
}
*/

/*_________COULEUR__________*/


:root{
    --yellow:#F7B53D;
    --blue:#325477;
    --cyan:#519EA7;
    --cyan_2:#90B9C1;
    --white:#FFF;
    --black:#000;
    --purple:#4F415D;
    --grey:#b3b3b3;
}

.bg_yellow{background-color: var(--yellow);}
.yellow{color: var(--yellow);}
.bg_blue{background-color: var(--blue);}
.blue{color: var(--blue);}
.bg_cyan{background-color: var(--cyan);}
.cyan{color: var(--cyan);}
.bg_cyan_2{background-color: var(--cyan_2);}
.cyan_2{color: var(--cyan_2);}
.bg_white{background-color: var(--white);}
.white{color: var(--white);}
.bg_black{background-color: var(--black);}
.black{color: var(--black);}
.bg_purple{background-color: var(--purple);}
.purple{color: var(--purple);}
.bg_grey{background-color: var(--grey);}
.grey{color: var(--grey);}