@charset "utf-8";
/* CSS Document */



@media (min-width: 768px) {
.container .font-Menu            { font-size: 16px !important; }
}
@media (min-width: 330px) and (max-width: 767px) {
.container .font-Menu            { font-size: 14px !important; }
}
@media (max-width: 329px) {
.container .font-Menu            { font-size: 13px !important; }
}

.container .search span,.container .logo-box-b,.container .logo-box-o,.container .logo-bbox,.container .visu{
           background-image: url('../img/spriteHome.png');
           background-repeat: no-repeat;
           }

.container { padding-right: 10px !important; padding-left: 10px !important;}

@media (min-width: 1293px) {
    .container  { width: 1272px; }
    .pad-5      { padding-right: 8px !important; padding-left: 8px !important; }
    .pad-15     { padding-right: 18px !important; padding-left: 18px !important; }
}

@media (min-width: 768px) and (max-width: 1292Px) {
    .container {
        width: 100% !important;
    }
}

.container .row{margin:0;}
* { -webkit-box-sizing: initial !important; box-sizing: initial !important; box-sizing: border-box !important; }
.activeTab      { background-color: #05cfa7;    color:white; background-image:none}
.inactiveTab    { background-color: lightgrey;  color:black; background-image:none} 
p#noMargin      { margin: 0; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: none; background: none; }


/* MEDIA MOBILE VS DESKTOP
   ====================================================================================== */
    @media (max-width: 992px) {
        .container { width: auto !important; }
        }
    @media (min-width: 1200px) {
        .container .visu.sav   { background-position: 2PX -459px !important; }
        .miniblocArticle1        { min-height: 170px !important;}
        }

     a { color: #454545; }

    @media (max-width: 767px) {
       a:focus, a:hover { color: #fff; }
        .boldMobile {font-weight:bold;}
        .padMobile-0            { padding-right: 0px !important; padding-left: 0px !important; }
        .magMobile-bottom-10    { margin-bottom: 10px !important; }
        .container .logo-box-b  { background-position: 1px 12px !important; width: 33px !important; height: 38px !important; }
        .container .size        { min-height: 80px !important;}
        .miniblocarticle        { padding: 20px 5px 20px 5px !important; }
        .blocArticleMiami       { margin-top: 5px; position: relative;background-color: #FFF; border-radius: 3px; padding: 0  0 15px; } 
                
       .pad-right-5  { padding-right: 5px; }
       .pad-left-5   { padding-left: 5px; }

       .container .border-mid-grey:hover p{margin-top: 0 !important;}
       .color-blue  {color: #454545 !important;}

       .pad-top-30-btn-miami { padding-top : 30px; }
       .img-positionBtn      { float: left; padding-top: 3px;}
       .padBtn-vert-15       { padding-top: 20px; padding-bottom: 20px; }
       .btnMobile            { border: 1px solid #454545; border-radius: 5px;}
       .btnMobile:hover      { border: 1px solid #454545; background-color: #454545; color:#FFF !important; }
       .btn                  { border-color: #454545 !important; height: 38px !important;}
       .btnMiami             { min-width: 240px !important; max-width: 240px !important; margin-bottom: 5px;} 
        }


    @media (min-width: 768px) {
        
        .container .cta:hover {background-color: white;color: #454545;font-weight: bold;}
        .pad-7-5                        { padding-right: 7.5px !important; padding-left: 7.5px !important; }
        .blocArticle                    { margin-top: 5px; position: relative; background-color: #FFF; border-radius: 3px;}
        .blocArticleSearch              { margin-top: 5px; position: relative; background-color: #FFF; border-radius: 3px; padding: 30px; height: 140px; }
        .container input[type='text']   { padding: 15px 10px 14px 25px !important; }
        .container .bg-color-white-grey { background-color: #F3F3F3 !important; }
        .miamiVice                      { padding-top:4.5% }
        .btnMiami                       { min-width: 200px !important; max-width: 200px !important;}
        .blocArticleMiami               { margin-top: 5px;position: relative;background-color: #FFF;border-radius: 3px; padding: 20px 15px 20px 15px; }

        .themeBorder        { border-right: 1px solid #adadad; }
        .badTest            { display: none !important; }
       .miniBbox-Position { margin: 0px !important; font-weight: bold; color: #454545;}

       .uniform-Height-5  { padding-left: 5px;  padding-right: 5px;}
       .uniform-Height-11 { padding-left: 11px; padding-right: 11px;}
       .container .size   { min-height: 130px !important; }
        .pad-vert-15      { padding: 15px 0 15px; }
       .miniBbox          { width: 35px; }
        }

/* AJUSTEMENT RECHERCHER
   ====================================================================================== */
    @media (min-width: 768px) and (max-width: 1118px) {
        .borderAjust     { margin-bottom: 28px !important; }
        }
    @media (max-width: 865px){
        #fixe { margin-bottom: 10px !important; }
        }

    @media (max-width: 767px) {
        .col-xs-10b { width: 93.333333%; }
        }
    @media (min-width: 634px) and (max-width: 721px) {
        .col-xs-10b { width: 92.333333%; }
        }
    @media (min-width: 567px) and (max-width: 633px) {
        .col-xs-10b { width: 91.333333%; }
        }
    @media (min-width: 513px) and (max-width: 567px) {
        .col-xs-10b { width: 90.333333%; }
        }
    @media (min-width: 469px) and (max-width: 512px) {
        .col-xs-10b { width: 89.333333%; }
        }
    @media (min-width: 433px) and (max-width: 468px) {
        .col-xs-10b { width: 88.333333%; }
        }
    @media (min-width: 403px) and (max-width: 432px) {
        .col-xs-10b { width: 87.333333%; }
        }
    @media (min-width: 377px) and (max-width: 402px) {
        .col-xs-10b { width: 86.333333%; }
        }
    @media (min-width: 337px) and (max-width: 376px) {
        .col-xs-10b { width: 84.333333%; }
        }
    @media (min-width: 318px) and (max-width: 336px) {
        .col-xs-10b { width: 83.333333%; }
        }
    @media (max-width: 317px) {
        .col-xs-10b                     { width: 83.333333%; }
        .container .font-16             { font-size: 15px !important; }
        .container .color-orange        { font-size: 13px !important; }
        .container input[type='text']   { font-size: 11px !important; padding: 17px 8px 16px 11px !important; }
        }


/* AJUSTEMENT URGENCE
   ====================================================================================== */
   
    @media (min-width: 807px) and (max-width: 961px) {
        .container .visu.perte  { margin-top: 12px; }
        }
    @media (min-width: 897px) and (max-width: 950px) {
        .container .visu.box-o  { margin-top: 12px; }
        }

/* IPAD PORTRAIT
   ====================================================================================== */
    @media (min-width: 768px) and (max-width: 961px){
        .pad-15  { padding-right: 10px !important;  padding-left: 10px !important;  }
        .pad-5   { padding-right: 2.5px !important; padding-left: 2.5px !important; }

        .container .color-orange {font-size: 12px;}
        .container .size         { min-height: 123px !important;}
        .container .search span  { background-position: 1px -168px !important; }
        .container .visu.perte   { background-position: 3px -278px !important; }
        .container .visu.box-o   { background-position: 2px -23px  !important; }
        .container .visu.sav     { background-position: 2PX -396px !important; }

        .container .search span,.container .logo-box-b,.container .logo-box-o,.container .logo-bbox,.container .visu{
            background-size: 90px;
            }
    }


        @media (min-width: 768px) and (max-width: 961px)  {
            .pad-40         { padding-right: 15px;   padding-left: 15px; }
            .miniblocArticle { min-height: 163px !important; }
            }
        @media (min-width: 962px) {
            .pad-40          { padding-right: 40px;  padding-left: 40px; }
            .miniblocArticle { min-height: 170px !important; }
            }

    /* IPHONE 4 ET PETITE DALLE
    ========================================================= */

    @media (max-width: 355px) {
        .container .size        { min-height: 96px !important; }
        .badTest                { display: none !important;    }
        }

     @media  (min-width: 356px) and (max-width: 374px) {
        .container .size        { min-height: 96px !important; }
        .badTest                { display: none !important;    }     
        }
    @media  (min-width: 375px) and (max-width: 391px) { 
        .container .size        { min-height: 96px !important;  }
        .badTest                { width: 20% !important; padding-top: 4px; }
        }
    

/* GLOBAL
   ====================================================================================== */
    body { font-family: Arial,sans-serif; font-size: 14px; line-height: initial; color: #333; background-color: #F3F3F3; }
    
    .site      { font-family: Arial, sans-serif; font-size: 14px; margin: 0 auto; padding: 0 0 30px; }
    .clicable  { cursor: pointer; }
    .spaceBloc { height: 25px; }

    .miniblocArticle       { margin-top: 5px; position: relative; background-color: #FFF;border-radius: 3px; padding: 20px; min-height: 110px; } 
    .miniblocArticleClient { margin-top: 5px; position: relative; background-color: #FFF;border-radius: 3px; padding: 20px; min-height: 110px; }
    /*FONT-FAMILY
      ===================================== */
      .container .txt-goth{font-family:'GR-B',Arial;}
      .container .txt-goth-med{font-family:'GR-M',Arial;}

    /*FONT
      ===================================== */
      .container .font-22{font-size: 22px;}
      .container .font-18{font-size: 18px;}
      .container .font-16{font-size: 16px;}
      .container .font-12{font-size: 12px;}


    /* TITLE
       ===================================== */
       h1,h2,h3,h4,h5,h6   { color: #454545; }
       .text-Center        { text-align: center; }

       h1 { margin: 0 0 0.833em; font-size:22px; text-transform: uppercase;  margin-bottom: 20px; }
       .h2{ display: inline-block; border-bottom: none; color: #454545; text-align: center; text-transform: uppercase; font-weight: normal !important; 
            margin-top: 5px; margin-bottom: 6px; font-size: 16px; font-weight: initial;}
       h2#TitleBold { font-weight: bold; border:none; margin: 0 0 0; padding: 0 0 0; }

         @media(max-width:768px){
    h1{font-size: 18px;}
}

    /* TITLE LIGNE 
       ===================================== */
        hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0 }

        .underligne-h2       { margin-bottom: -20px !important; width: 33%; height: 5px; margin-left: auto !important; margin-right: auto !important; }
        .underligne-MiniBloc { margin-top: 10px; height: 3px; width: 33%; margin-left: auto !important; margin-right: auto !important; }

        .underligne-BlueTitle   { background-color: #009dcc; }
        .underligne-Blue        { background-color: #0065a6; }
        .underligne-Cyan        { background-color: #00b6d8; }
        .underligne-Green       { background-color: #07d2a7; }
        .underligne-Red         { background-color: #f1520c; }

    /* FLOAT
       ===================================== */
       .f-right { float: right; }
       .f-left  { float: left; }

    /* PADDING
       ===================================== */
       .pad-0   { padding-right: 0px  !important;   padding-left: 0px  !important;  }
       .pad-5   { padding-right: 5px;   padding-left:5px;   }
       .pad-15  { padding-right: 15px;  padding-left: 15px; }

       .pad-top-5  { padding-top: 5px  !important; }
       .pad-top-30 { padding-top: 30px !important; }

       .pad-bottom-30 { padding-bottom: 30px !important; }

        @media (min-width: 400px) and (max-width: 500px) {
            .forum     { padding: 0 50px 0 50px; }
            .newClient { padding: 0 50px 0 50px; }
            }
        @media (min-width: 500px) and (max-width: 600px) {
            .forum     { padding: 0 90px 0 90px; }
            .newClient { padding: 0 90px 0 90px; }
            }

        @media (max-width: 767px){
            .pad-Top-10 {padding-top:0px;}
        }

        @media (min-width: 768px){
            .pad-Top-10 {padding-top:10px;}
          }


       
    /* PADDING
       ===================================== */
        .mag-bottom-30 { margin-bottom: 30px !important; }

        /*BACKGROUND
        ===================================== */
        .container .no-bg{background-color: transparent;         }
        .container .bg-color-mid-grey{background-color: #B5B5B5; }
        .container .bg-color-grey{background-color: #454545;     }
        .container .bg-color-white{background-color: #fff;       }
        .container .bg-color-orange{background-color: #F1520C;   }
        .bg-color-blue,.container .bg-color-blue{background-color: #00b5d8;}
        .container .bg-color-pink{background-color: #f64b7f;}
        .container .bg-color-mint{background-color: #05D0A6;}

        /*BORDER
        ===================================== */
        .container .no-border{border: 0;}
        .container .border-grey{border: solid #454545 1px;}
        .container .border-white{border: solid #fff 1px;}
        .container .border-mid-grey{border: solid #B5B5B5 1px;}
        .container .border-pink{border: solid #F64B7F 1px;}
        .container .border-right-mid-grey{border-right: solid #B5B5B5 1px;}

/* SEARCH BLOC
   ====================================================================================== */
    .container .padding-top-8       { padding-top: 8px; }
    .h2-search                      { border-bottom: none; color: #454545; text-transform: uppercase;font-weight: normal !important; 
                                      margin-bottom: 6px; font-size: 16px; font-weight: initial; }
    .container input[type='text']   { padding: 15px 10px 14px 10px; }
    .container .bg-color-white-grey { background-color: #FFF; }
    .container .search              { height: 45px; max-width: 45px; float: left; border-radius: 0 3px 3px 0;}
    .container .search span         { background-position: 0 -190px; width: 20px; height: 20px; }
    .mid-round-left                  { border-radius: 3px 0 0 3px;}


 /* BLOC DYNAMIQUE CLIENT
   ====================================================================================== */
    .btn                { text-decoration: none; background-color: #FFF; border-color: #454545; min-width: 150px; max-width: 150px; font-weight:bold;}
    .btn-default:hover  { background-color: #454545; color:#FFF !important; border-color: #454545 !important; }
    

/* BLOC THEMATIQUES
   ====================================================================================== */

   .blocThematique    { margin-top: 5px; position: relative; background-color: #FFF; border-radius: 3px 0 0 3px; }

   .container .survol-heading,.container .survol-body,.container .v-footer              { padding: 20px; position:relative; }
   .container .survol-default>.survol-heading,.container .survol-default>.survol-footer { background-color: white; }
   .container .survol:hover .h-cover, .container .themes .survol .h-cover:hover         { opacity: 1; filter: alpha(opacity=100); }

   .container .logo-box-b { background-position: 0 0; width: 33px; height: 13px; }
   .container .logo-bbox  { background-position: 0 -169px; width: 44px; height: 13px; }
   
   .container .cursor-p,.container .cursor-p *  { cursor: pointer;    }
   .container .txt-align-center                 { text-align: center; }
   .container .margin-top-10                    { margin-top: 10px;   }

   .badTest   { width: 35px; }
   .themePark { height: 18px; }

   /* HOVER
   ==================== */
    @media (min-width: 768px) and (max-width: 920px) {
        .container .cta                  { padding: 10px 10px !important; }
        }

   .container .cta                  { padding: 10px 20px; line-height: 14px;}
   .container .margin-bot-20        { margin-bottom: 20px;  }
   .container .margin-top-20        { margin-top: 20px;     }
   .container .h-cover              { width: 94%; height: 100%; position: absolute; top: 0; left: 3%; opacity: 0; filter: alpha(opacity=0);
                                      -webkit-transition: opacity 0.2s; transition: opacity 0.2s; text-align: center;}
   .container .h-cover .roll-bbox   { /*background-image: url(../images/home/roll-bbox.png); background-repeat: no-repeat;*/ width: 77px; height: 13px; }


/* BLOC SECTION URGENCE
   ====================================================================================== */
    .container .display-ib  { display: inline-block; }
    .pad-Top-5              { padding-top: 5px  !important; }
    .container .round       { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}

    .container .visu.perte  { background-position: 0 -316px;    width: 51px; height: 38px;}
    .container .visu.box-o  { background-position: 0 -23px;     width: 57px; height: 38px;}
    .container .visu.sav    { background-position: 0 -444px;    width: 45px; height: 56px; margin-top: 15px;}



    @media (max-width: 767px) {
        .pad-15-sav     { padding-right: 0px ; padding-left: 0px ; }
    }

    @media (min-width: 768px) and (max-width: 1292px) {
        .pad-15-sav     { padding-right: 15px; padding-left: 15px; }
    }

    @media (min-width: 1293px) {
        .pad-15-sav     { padding-right: 18px !important; padding-left: 18px !important; }
    }


    @media (max-width: 767px){
        .padSav{padding-left: 0px; padding-right: 0px;}
    }

    @media (min-width: 768px){
        .padSav{padding-left: 4px; padding-right: 4px;}
    }

   /* HOVER
   ==================== */
    .container .border-mid-grey:hover{background-color: #F1520C;border-color:#F1520C;}
    .container .border-mid-grey:hover .color-orange{color: #fff;}
    .container .border-mid-grey:hover span{display: none;}
    .container .border-mid-grey:hover p{margin-top: 25px;}
    .container .border-mid-grey:hover .visu.sav{background-position: 0 -794px;}
    .container .border-mid-grey:hover .visu.box-o{background-position: 0 -893px;}
    .container .border-mid-grey:hover .visu.perte{background-position: 0 -846px;}

/* COLOR
   ====================================================================================== */
    .container .color-white{color: #fff;}
    .container .color-orange{color: #F1520C;}
    .container .color-grey,.container .color-grey:hover{color:#454545;}
    .container .color-pink{color:#F64B7F;}

/* FORUM NEW CLIENT BTN
   ====================================================================================== */
      @media (min-width: 768px) {
            .center-Parent { bottom: 20px; position: absolute; left: 50%; }
            .center-Child  { position: relative; left: -50%; }
        }

      a:focus, a:hover {text-decoration: none;}

      .bold { font-weight:bold !important; }


      @media (min-width: 1128px){
        .padPerteVol{padding-left: 9px;padding-right: 9px;}
      }

      @media (min-width: 867px)and (max-width: 1007px){
        .padPerteVol{padding-left: 4px;padding-right: 4px;}
      }

      @media (min-width: 768px)and (max-width: 830px){
        .padPerteVol{padding-left: 3px;padding-right: 3px;}
      }

      @media (min-width: 1190px){
        .padPbConn{padding-left: 6px; padding-right: 6px;}
      }

      @media (min-width: 768px) and (max-width: 1189px){
        .padPbConn{padding-left: 0px; padding-right: 0px;}
      }

      @media (min-width: 1008px)and (max-width: 1199px){
        .container .visu.sav{margin-top: 0px!important;}
      }

      @media (min-width: 831px)and (max-width: 961px){
        .container .visu.box-o{margin-top: 15px!important;}
      }

      @media (min-width: 807px) and (max-width: 830px) {
      .container .visu.perte {margin-top: 0px!important;}
      }

      .hidden {display: none}
      .cacher {display: none}

      @media (min-width: 768px){
          .padTop3percent{padding-top: 3%;}
      }



    @media (min-width:768px){
            .magBot20 {margin-bottom: 20px!important;}
          }


    @media (min-width: 469px) and (max-width: 767px){

      .perteVolouProbConn{
        max-height: 40%!important;
        max-width: 74%!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin: auto!important;
      }

      .savMobile{
        max-height: 16%!important;
        max-width: 90%!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin: auto!important;
      }
    }

    @media (min-width: 405px) and (max-width: 468px){
      .perteVolouProbConn{
        max-height: 40%!important;
        max-width: 88%!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin: auto!important;
      }

      .savMobile{
        max-height: 16%!important;
        max-width: 90%!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin: auto!important;
      }
    }
    @media (min-width: 392px) and (max-width: 404px){
    .perteVolouProbConn{
      max-height: 60%!important;
      max-width: 82%!important;
      position: absolute!important;
      left: 0!important;
      right: 0!important;
      top: 0!important;
      bottom: 0!important;
      margin: auto!important;
    }

    .savMobile{
      max-height: 20%!important;
      max-width: 90%!important;
      position: absolute!important;
      left: 0!important;
      right: 0!important;
      top: 0!important;
      bottom: 0!important;
      margin: auto!important;
    }
    }
    @media (min-width: 356px) and (max-width: 391px){
      .perteVolouProbConn{
        max-height: 50%!important;
        max-width: 82%!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin: auto!important;
      }

      .savMobile{
        max-height: 20%!important;
        max-width: 90%!important;
        position: absolute!important;
        left: 0!important;
        right: 0!important;
        top: 0!important;
        bottom: 0!important;
        margin: auto!important;
      }
    }



    @media (max-width: 355px){
    .perteVolouProbConn{
      max-height: 63%!important;
      max-width: 74%!important;
      position: absolute!important;
      left: 0!important;
      right: 0!important;
      top: 0!important;
      bottom: 0!important;
      margin: auto!important;
    }

    .savMobile{
      max-height: 20%!important;
      max-width: 90%!important;
      position: absolute!important;
      left: 0!important;
      right: 0!important;
      top: 0!important;
      bottom: 0!important;
      margin: auto!important;
    }
}

/* BLOC BANDEAU
   ====================================================================================== */
    .colorBandeau   { width: 100%;height: 60px; margin: 0 auto;position: absolute;z-index: -1;background-color: #009DCC;}
    .bandeau        {width: 100%;height: 60px;margin: 0 auto;position: absolute;z-index: -1;background-color: #009DCC;}
    .marg-Top-25    { margin-top: 25px !important; }
    @media (min-width: 768px){
       .bandeau {background: #009DCC url('../img/bandeau.png');background-position: center center;background-repeat: no-repeat;background-size: 100% 60px;}

    }

/* AJUSTEMENT Bandeau
   ====================================================================================== */
    @media(min-width:768px) {
        .padTopArial { padding-top: 30px }
    }
    .flexTitle      { height: 59px;display: flex; align-items: center; }
    h1#titreBandeau     { color: white; margin: 0px; padding: 0px;}
    .stayOn2Lines    { overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .stayinlineArial{max-width: 60%;position: absolute;margin-top: -14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}


.urgence_phone{background: url('../svg/urgence_phone.svg');background-repeat: no-repeat; width: 57px; height: 40px;}
.urgence_outil{background: url('../svg/urgence_outil.svg');background-repeat: no-repeat; width: 57px; height: 40px;}
.urgence_bbox{background: url('../svg/diagnostic_box.svg');background-repeat: no-repeat; width: 57px; height: 40px;}



.urgence-block {
   border: 1px solid #ECECEC ;
   border-radius: 3px;
   font-size: 14px;
   margin: 0 2px;
   padding: 25px 0px;
   text-align: center;

   transition: all .3s;
}
.urgence-block .item {
   color: #F1520C ;
   margin: 0px 0px;
   padding: 10px 1px;
}


.urgence-block .icon {
   display: block;
   height: 45px;
   margin: 0 auto;
   width: 50px;
}

.urgence-block .urgence-outil{
    position:relative;
    top:26px;
}

@media (min-width: 768px) {
   .urgence-block {
       min-height: 123px;
       padding: 0px;
   }
   .urgence-block:hover {
       background: #F1520C ;
       border-color: #F1520C;
   }
   .urgence-block:hover .item {
       padding-top: 30px;
   }
   .urgence-block:hover .item .inline {
       color: #fff;
   }
   .urgence-block:hover .icon {
       opacity: 0;
       display: none;
   }
}



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.urgence-block .icon {bottom: 15px;
height: 30px;
margin: 0 auto;
position: absolute;
width: 100%;
}
    
.urgence-block .urgence-outil{
position:relative;
top:0px;
}
}