/* styles generaux */

*{text-rendering:optimizeLegibility;-webkit-font-smoothing: antialiased;font-smoothing: antialiased;}

*{ margin: 0; padding : 0;}

@font-face {
    font-family: 'AnticimexSans-Regular';
    src: url('fonts/AnticimexSans-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('fonts/AnticimexSans-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'AnticimexSans-Bold';
    src: url('fonts/AnticimexSans-Bold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('fonts/AnticimexSans-Bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

html {height: 100%;}
body { color: #0C2B86;  background : #fff url(images/bg_body.jpg) top left repeat-y ;font-size: 14px; line-height: 1.2;
position: relative; height: 100%; width: 100%; background-attachment: fixed; box-sizing: border-box; padding-left: 30px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 400;
   font-family: 'AnticimexSans-Regular', sans-serif;
  
}

/*   
input[type="submit"], textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
*/

 p { padding: 5px 0;}
 a img { border : 0}
 input, textarea { padding: 3px }
.centre { text-align: center;}
.imgombre { padding : 5px; background : #fff; box-shadow : 0px 2px 2px #808080;}
.alignleft { float: left; margin-right : 10px; margin-bottom : 10px}
.alignright { float: right; margin-left : 10px; margin-bottom : 10px}
.aligncenter { display: block; margin : 5px auto;}
.aligntxtright { text-align: right;}
.aligntxtcenter { text-align: center;}
.aligntxtleft { text-align: left;}
.clr { clear: both;}
 hr {  clear: both;
       border : 0;
       height : 1px;
       background : #ddd;
       margin :  0;
       }
.smallinput { width:3em }
.greenrab { color: #348059; }
.indiqrab { font-weight:400; font-size:60% }
.red { color: #c63b3b; }

.bloc3d, .openable { display:none; }
body .cr .notesrab { display:block; }

a.pwdlink { color : #FF5959; font-weight:700 }
a.pwdlink:after {
            display: inline-block; margin-left: 0.3em;
            content: '';

            background-image: url('images/newtab.svg');
            background-size: 16px 16px;
            height: 16px;
            width: 16px;
        }

body form .infosg h3  {  padding-top: 10px;}
body .table-form div > div.lactivite:last-of-type { margin-bottom: 30px}
body .table-form div > div.lactivite {  flex-wrap:wrap; padding-right: 0; color: #0C2B86; }
body .table-form div > div.lactivite p { margin-top:0.6em }
body .table-form div > div.lactivite label { padding-left: 3.5em;  padding-right: 2.2em; border:none;  }
div.lactivite input[type="checkbox"]:checked + label {box-shadow: 0 0 3px rgba(0,0,0,0.5); }
div.lactivite input[type="checkbox"] {  top: 2em;}

h1 {  text-align:center; margin: 40px auto; font-size:32px }
h1 a { display:block; }
h1 img { width: 28%; }
h1 span { display:block; text-transform:uppercase; }
h2 { color: #187EE0; font-size : 29px }
input[type="radio"]:checked+label { background: #102F8A; color : #fff; }
input[type="checkbox"]:checked+label { background: #102F8A; color : #fff; }

body form .blue { background: #187EE0;
  color: #fff;
  border-radius: 20px;
  background: -webkit-linear-gradient(to right, #0052D4,  #2E89DF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0052D4, #2E89DF) /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
body form .blue h2 { color:#fff }

body form {
  max-width: 1600px;
  margin: 0 auto;
}

.loginform { width:300px; margin: 20px auto; position:relative; text-align:center; }
.loginform input, .loginform button { width:100%;padding: 8px;
  font-size: 16px;}

.loginform button { position: relative;  left: 5px;  }
.loginform p { margin : 10px auto; }

.erreurlogin { width:290px; font-weight: 700; border:1px solid #FF5959; color : #FF5959; margin: 10px auto; text-align:center; padding : 5px;
position: relative;
  left: 5px; }
select { padding:5px; font-size:14px; }
select option { background:#fff }
.infosg { text-align:center; }
.infosg h2, .infosg h3 { text-align:left; }
.infosg hr {opacity: 0.7;}

#releves  h3 { position:relative; padding-left : 0.5em }
#releves [class^='hot'] h3:before { content:"\01F525";  color : #dd3b3b; font-size:16px; position:absolute; left : -0.9em; top : 60% }
body #releves .hot-niv0 h3:before, body #releves .hot-niv1 h3:before { display:none; }
body #releves .hot-niv3 h3:before { font-size:18px; }
body #releves .hot-niv4 h3:before { font-size:20px; top : 55% }
#releves .hot-niv2 .observations textarea, #releves .hot-niv3 .observations textarea, #releves .hot-niv4 .observations textarea { border-color : #dd3e3e; }
#releves .hot-niv2 .observations:before, #releves .hot-niv3 .observations:before, #releves .hot-niv4 .observations:before {color : #dd3e3e; }

.table-form { padding: 1.5em; border: 2px solid #eee; width: 90%; margin: 10px auto; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); 
    background:#fafafa }
.table-form h3 { padding-top: 2em; font-size:18px }
.table-form h3 strong { color:#2DA96B; font-family: 'AnticimexSans-Bold', sans-serif;
  white-space: nowrap;
  letter-spacing: 1px; }
.table-form > div {   }
.table-form div > div { display:flex; position:relative; padding-right:6em;   }
.table-form div > p { display:inline-block; position: relative;align-content: stretch; padding: 0 10px;flex-grow:1; bord1er: 1px dotted red}
#infosClient p { padding:0; position:relative; }
.table-form div > p label { display: block;  min-height: 50%; align-content: center; margin-top: 1.2em; 
      padding : 5px 1em 5px 2em; cursor: pointer; border: 1px solid #ddd; background: #eee; border-radius:6px }
.table-form div > p label strong { display:block; text-align:center;  }
#infosClient2 p { position:relative; margin: 2em 2em 0 2em; padding: 0; }
#infosClient2 .txtarea label { position:absolute; top : -2.9em; left:0; padding: 0; }
.table-form div.lesinfos { font-size : 16px }
.table-form div.lesinfos > p label { display: inline-block;  min-height: none; align-content: center; margin-top: 1.2em; 
      padding : 5px 1em 5px 2em; cursor: pointer; border: none; background: none; border-radius: none }
 .table-form div#infosClient > p label{ display: inline-block;  min-height: none; align-content: center; margin-top: 1.2em; 
      text-align: right;   padding: 0 5px 0 20px; cursor: pointer; border: none; background: none; border-radius: none }
.table-form div.lesinfos > p label:hover { box-shadow:none; }
.score { opacity:0; box-sizing: border-box; transition: opacity 0.3s;}
.sc0 {  color:  green!important; opacity:1; border-bottom: 10px solid #2DA96B !important; box-shadow: 0 0 10px rgba(45, 169, 107, 0.5)} /* Vert */
.sc1 { color: #867915!important; opacity:1; border-bottom: 10px solid #ffe500 !important; box-shadow: 0 0 10px rgba(255, 229, 0, 0.8); } /* Jaune */
.sc2 { color: #c68000 !important; opacity:1; border-bottom: 10px solid #ff9000 !important; box-shadow: 0 0 10px rgba(255, 144, 0, 0.5)} /* Orange */
.sc3 { color: red!important ; opacity:1; border-bottom: 10px solid #FF0000 !important; box-shadow: 0 0 10px rgba(255, 0, 0, 0.3)} /* Rouge */
.sc4 { color: #890000!important ; opacity:1; border-bottom: 10px solid #890000 !important; box-shadow: 0 0 10px rgba(160, 0, 0, 0.3)} /* Rouge */

.nonconform {text-align: center; position: relative;
  font-size: 20px;
  width: 60%;
  margin: 0 auto;}

.nonconform span {font-family: 'AnticimexSans-Bold', sans-serif; padding-left: 0.5em; font-size:22px }
.nonconform small { display: inline-block;
  text-align: right;
  color: #888;
  position: absolute;
  right: 0; }
.nonconform small:after { content:"\01F525";  color : #dd3b3b; font-size:14px; padding-left:0.1em; }

.legscore { width: 67%; margin: 0px auto 40px; padding: 10px 10px 10px 30px; border-radius: 8px;   color : #777;}
.legscore h3 { margin-bottom:10px; text-transform: uppercase;
  font-size: 18px; }
.legscore table { border-collapse: collapse;  color: #333; box-shadow: 0 2px 20px #d9d9d9;
  border: 7px solid #ececec; }


.legscore thead th { background: #102F8A; font-size: 16px; color:#fff; border : 1px solid #ddd; font-weight:700 }
.legscore th, .legscore td { position: relative; font-weight: 400;
  border: 1px solid rgb(160,160,160); background: #fdfdfd;
  padding: 8px 10px; min-width: 90px;
}

.legscore tbody tr.niv0 {box-sizing: border-box; border:7px solid #2DA96B; box-shadow: 0 0 10px rgba(0, 0, 0, 1.0);font-weight: 400; font-family: 'AnticimexSans-Bold';} /* vert*/
.legscore tbody tr.niv2 {box-sizing: border-box; border:7px solid #FF9000; box-shadow: 0 0 10px rgba(0, 0, 0, 1.0);font-weight: 400; font-family: 'AnticimexSans-Bold';} /* orange */
.legscore tbody tr.niv3 {box-sizing: border-box; border:7px solid #FF0000; box-shadow: 0 0 10px rgba(0, 0, 0, 1.0);font-weight: 400; font-family: 'AnticimexSans-Bold';} /* rouge */
.legscore tbody tr.niv4 {box-sizing: border-box; border:7px solid #890000; box-shadow: 0 0 10px rgba(0, 0, 0, 1.0);font-weight: 400; font-family: 'AnticimexSans-Bold';} /* cramoisi */

.legscore tbody tr td:nth-child(2) { text-align:center; }

.legscore table .scfaible { background:#2DA96B; color:#fff;  letter-spacing:1px; font-size: 16px; }
.legscore table .scmod { background: #ff9000; color:#fff;  letter-spacing:1px; font-size: 16px;}
.legscore table .scelv { background: #FF0000; color:#fff;  letter-spacing:1px; font-size: 16px;}
.legscore table .sccrit { background: #890000; color:#fff;  letter-spacing:1px; font-size: 16px;}

.table-form div > p.score { display: block; width: 5em; position:absolute; right: -5px; top: 1.2em; text-align:center; font-weight:700;  
    min-height: 2em; text-align: center; padding : 1.5em 7px 5px; border-radius: 6px; border: 1px solid rgba(24,126,224,0.1);
    
    background:#f2f2f2; }
.table-form div > p.score::before { content : "Niveau"; position:absolute;width: 4.5em; top : 0em; left : -3px; font-weight:400; display:block; text-align:center; 
white-space: nowrap; padding:5px }

.table-form input[type="radio"] { position:absolute; left:1.2em; top : 2.5em }
.table-form input[type="checkbox"]{ position:absolute; left:2em; top : 2.1em; width: 20px;  height: 20px; accent-color: #102F8A;}


.lesprecos { background : #187EE0; color : #fff; padding: 1.5em; width: 77%; margin: 40px auto 20px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); 
position: relative;  border-radius: 20px;
background: #9CECFB;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0052D4,  #2E89DF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0052D4,  #2E89DF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.lesprecos:before { content:""; font-family: monospace; position:absolute; right:20px; top : 10px; z-index:10; opacity:0.5; 
    width: 45px; height: 45px; transform:rotate(5deg);
    background: url(images/precos.svg) no-repeat center;
    background-size: cover;
color:#000;  }
.lesprecos h3 { padding-top: 0em; font-size:22px; letter-spacing : 1px; margin-bottom : 0.5em }
.lesprecos textarea { width : 93%; color : #000; min-height: 150px; }

.rab {  color : #fff; padding: 1.5em; width: 70%; margin: 40px auto 20px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); 
position: relative;  border-radius: 15px; font-size: 16px;
background: #2da96b;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #2da96b, #58CA64);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #299b62, #58CA64); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.rab:before { content:""; font-family: monospace; position:absolute; right:30px; top : 20px; z-index:10; opacity:0.2; 
    width: 55px; height: 55px; transform:rotate(5deg);
    background: url(images/bureau.svg) no-repeat center;
    background-size: cover;
color:#000;  }
.rab h3 { padding-top: 0em; font-size:22px; letter-spacing : 1px; margin-bottom : 0.5em }
.rab textarea { width : 93%; color : #000; min-height: 150px; }

.observationsCPTR, .rabCPTR { text-align:center; }
#typeautre2 {text-align: center;}
#typeautre2 strong { display:inline-block; padding-right:1em }
#typeautre2 input  { display:inline-block; }

.pdp {background : #752999; color : #fff; padding: 1.5em;  width: 63%; margin: 40px auto 20px; position: relative;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); 
position: relative;  border-radius: 12px;  font-size: 16px;
background: #7F00FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #752999, #7110ea);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #752999, #7110ea); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }

.pdp:before { content:"\26A0"; font-family: monospace; position:absolute; right:18px; top : 5px; z-index:10; opacity:0.3; font-size:72px; transform:rotate(17deg);
color:#000;  }
.pdp h3 { padding-top: 0em; font-size:22px; letter-spacing : 1px; margin-bottom : 1.5em }
.pdp h4 { position: relative; text-align:left; padding-left:1.5em; letter-spacing: 1px; line-height: 1.4}
.pdp h4:before { content:" "; display: inline-block; width: 12px; height: 5px; background:#fff; border-radius:2px; opacity:0.7; 
position: absolute;
  left: 4px;
  top: 8px; }
.pdp h5 { font-size:16px; margin: 15px 0 15px 2em; color: #b9d1e8; }

.pdp div {text-align: center;}
.pdp div > p { display:inline-block; position: relative;align-content: stretch; padding: 5px 10px;flex-grow:1;text-align: center;}

.pdp div > p label { display: block;  min-height: 65%; align-content: center;  color: #0C2B86; 
      padding : 10px 1em ; cursor: pointer; border: 0px solid #ddd; background: #eee; border-radius:6px }
.pdp div > p label strong { display:block; text-align:center;  }
.pdp div > p input[type="radio"]:checked + label, .pdp div > p input[type="checkbox"]:checked + label { background: #3383D0; box-shadow: 0 0 4px rgba(0,0,0,0.5); }
.pdp div > p input[type="checkbox"] { accent-color: #3383D0; transform:translateY(5px); }
.pdp input[type="radio"] { position:absolute; left:1.2em; top : 1.3em }
.pdp label {
  min-width: 270px;
  text-align: right;
}
.pdp div > div p label { min-width:0; padding-left : 2.0em; padding-right:1em }

.pdp div > div p input { position:absolute;  left: 1.5em; top : 11px}

.sousblocpdp { margin-bottom:1.0em }

.pdp div > p input[type="checkbox"]:checked + label .red {  color: #282323; }

.pdp div.expandable { display:none; text-align: left;}
body .cr { text-align:center; border: 3px dashed #178CEB; box-shadow: none; width: 88%; position: relative;
  border-radius: 20px; padding: 1.5em;  margin: 70px auto; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12); 
    background:#fafafa }

body .cr:before { content:""; font-family: monospace; position:absolute; right:30px; top : 20px; z-index:10; opacity:0.5; 
    width: 50px; height: 50px; transform:rotate(5deg);
    background: url(images/cr.svg) no-repeat center;
    background-size: cover;
color:#000;  }


body .cr h3 { padding: 2em 0 1em; font-size:18px }
body .cr h3 strong { color:#2DA96B }
body .cr .ajoutphoto h3 small { font-weight: 400 }

.cr div > div { display:flex; position:relative;    }
.cr div > p { display:inline-block; position: relative;align-content: stretch; padding: 0 10px;flex-grow:1; bo1rder: 1px dotted red}
.cr div > p label { display: block;  min-height: 65%; align-content: center; ma1rgin-top: 1.2em; 
      padding : 10px 1em ; cursor: pointer; border: 1px solid #ddd; background: #eee; border-radius:6px }
.cr div > p label strong { display:block; text-align:center;  }
.cr div.lesinfos { font-size : 16px }
.cr div.lesinfos > p label, .cr div#infosClient > p label{ display: inline-block;  min-height: none; align-content: center; margin-top: 1.2em; 
      padding : 5px 1em 5px 1em; cursor: pointer; border: none; background: none; border-radius: none }
.cr input[type="radio"] { position:absolute; left:1.2em; top : 1.3em }
.cr input[type="checkbox"]{ position:absolute; left:1.5em; top : 1.3em; width: 20px;  height: 20px; accent-color: #102F8A;}




body .cr h2, body .cr h3, .cr h4, body .cr p:before { text-align:left; }


 .observations { position:relative; }
.observations textarea { width:100% }
 .observations::before { content : " Observations :";  display:block; position: relative; top : 0em}

.mataprevoir { position:relative; }
.mataprevoir span { display:none; }
 .mataprevoir textarea { width:100% }
 .mataprevoir::before { content : " Matériel à prévoir pour la pose :";  display:block; position: relative; top : 0em}

 .matainstal { position:relative; }
 .matainstal span { display:none; }
 .matainstal textarea { width:100% }
 .matainstal::before { content : " Matériel à installer :";  display:block; position: relative; top : 0em}
.scoreTotal { font-size:26px; text-align:center; background: #f7f7f7; margin: 70px auto 25px; width:25%; border-radius: 6px; border: 1px solid rgba(24,126,224,0.1); }

.mail { text-align:center; font-size:16px }

.envoi { text-align:center; margin:40px 0;}
button[type=submit] { background: #FF5959; color : #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); border:  none; cursor: pointer; padding : 10px 25px; text-align: center;
   }
button[type=submit]:before { 
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    position: relative;
    top: 0.3em;
    transform: rotate(45deg);
    vertical-align: top;
    width: 0.45em;
    margin-right: 1em;
} 

button[type=submit]:hover { background: #ff2323; }

.envoimail { text-align:center; line-height: 2}

/* --------result ----------- */

.result h1 {font-size: 20px;}
.result h2 {font-size: 16px; margin-top: 10px; margin-bottom: 5px;}
.result { font-size: 12px; }

.result .intro { display: flex; flex-wrap: nowrap; color: #000; justify-content: space-around; margin-bottom: 15px;  }

.result p { padding : 2px 0 }
.result .intro div { border: 1px solid #333; padding: 5px 20px; border-radius: 6px; font-size: 12px;}

.result .infos strong { text-transform:uppercase;  }
.result .infosgenerales { width:90%; margin : 20px auto; }

.result .infosgenerales h3 { display:inline-block; font-weight:400;   }

.result .resultat { display:inline-block; padding-left:1em; font-weight: 700;  }
.result .table-res { display:block; position:relative;   }
.result .table-res div { position: relative;  padding-right:6em;}
.table-res div p.score { display: block; width: 4.5em; position:absolute; right:0em; top : -10px; text-align:center; font-weight:700;  
    min-height: 1.0em; text-align: center; padding : 1.5em 5px 5px;  font-size : 10px; }
.table-res::before { content : "NIVEAU :"; position:absolute;width: 4.5em; top : 0em; right : 0; font-weight:400; display:block; 
    text-align:center;  font-size : 10px;
white-space: nowrap; padding:5px }

.cr div > div.expandable {  display: block;  }
.cr div > div.expandable p label {
  display: inline-block;
  min-height: 0;  
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 0px;
}

.cr div > div.expandable  label.laradio {
  display: block;
  min-height: 65%;
  align-content: center;
  ma1rgin-top: 1.2em;
  padding: 10px 1em;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #eee;
  border-radius: 6px;
}

.cr div > div.expandable input[type="radio"]:checked + label.laradio {
  background: #102F8A;
  color: #fff;
}


body .cr div .expandable { display: none;
    /* height:0;
transition: height 0.5s ease-out;*/ }
body .cr div .expanded { height: auto; 
}
/* transition medium screen */

@media screen  and (max-width: 1300px){
    .cr div > div { flex-wrap: wrap; }

.cr div > p {
  margin: 15px auto;
  width: 90%;
  padding: 0;
}
}

@media screen  and (max-width: 1100px){
   .lesprecos, .rab, .pdp {  width: 76%; }
}