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

@media all and (max-width: 2200px) {
	#header-logo {padding-top: 20px;}
    #header-logo img {width: 300px;}
    
    #apropos-contenu {padding: 40px 60px 80px 60px;}

    .img-float {
      margin-left: 50px;
      shape-outside: inset(calc(100% - 120px) 0 0);
    }
    
    #header-slogan h2 {font-size: 40px;}
    #header-slogan h3 {font-size: 30px;}
    
    p, ul {font-size: 18px;}
}


@media all and (max-width: 2000px) {
    
    #apropos-contenu {padding: 40px 60px 60px 60px;}
    
    .img-float {
      margin-left: 50px;
      shape-outside: inset(calc(100% - 120px) 0 0);
    }

    .img-float img {width: 150px; height: auto;}
    
    .service-element {padding: 0 20px;}
    #liste-services h3 { padding: 15px 30px 15px 40px; font-size: 20px;}
    #liste-services h3:after {font-size: 30px;}
    #liste-services h3:before {left: -10px; top: 12px; width: 30px; height: 30px;}
    
    #header-slogan h2 {font-size: 35px; line-height: 1.2;}
    #header-slogan h3 {font-size: 28px; line-height: 1.2;}
    
    p, ul {font-size: 17px;}
}

@media all and (max-width: 1600px) {
    
    .div-inner {width: 90%; margin: 0 5%;}
    
    #header-logo img {width: 250px;}
    #header-coordonnees {position: absolute; right: 0;}
    #header-coordonnees div {font-size: 14px;}
    
    #apropos-contenu {padding: 20px 40px;}
    
    #liste-services h3 { font-size: 18px;}
    .service-element {margin-bottom: 10px;}
    
    .img-float {
      float: right;
  height: auto;
  margin-left: 30px;
  display: block;
  shape-outside: none;
    }
}

@media all and (max-width: 1200px) {
    header {background-attachment: scroll;}
    
    #partenaires-qc {overflow: hidden; width: 70%; margin: 0 auto;}
    .partenaires-qc-col {width: 50%; float:  left;}
    #zone-partenaires .partenaires-qc-col .logo-element {height: 70px;}
    #zone-partenaires .partenaires-qc-col .logo-element-inner img {max-height: 70px;}
}


@media all and (max-width: 1000px) {
    
    header {height: 600px;}
    #header-logo {padding-top: 60px; margin-bottom: 100px; text-align: center;}
    #header-logo img {width: 200px; display: inline-block;}
    
    #header-slogan h2, #header-slogan h3 {text-align: center;}
    
    #header-slogan h2 {font-size: 30px; margin-bottom: 10px;}
    #header-slogan h3 {font-size: 22px;}
    
    #header-slogan {position: relative; bottom: auto; width: 100%; margin-bottom: 60px;}
    
    #header-coordonnees {right: auto; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;}
    #header-coordonnees div {display: inline-block; float: none;}
    #apropos {display: block; transform: none; width: 100%; position: relative; top: auto; right: auto; margin-bottom: 60px;}
    #coordonnees { padding-right: 0 !important;}
    
    #img-service {display: none;}
    #liste-services {margin-left: 0; width: 100%;}
    .service-element img {display: block;}
    .service-element img {width: 100%; height: auto;}
    
    #coordonnees, #zone-partenaires {padding: 40px 0;}
    #services {padding-bottom: 40px;}
    
    #zone-partenaires .logo-element {padding: 20px; height: 40px; }
    #zone-partenaires .logo-element-inner img {max-height: 40px; max-width: 140px;}
    
    
}

@media all and (max-width: 800px) {
    #header-coordonnees {display: none;}
    header:before {background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.5));}
    #apropos-contenu {padding: 20px;}
    
    #zone-partenaires h3 {letter-spacing: 2px; font-size: 12px;}
    #partenaires-qc {width: 100%; }
    .partenaires-qc-col {width: 100%; float:  none;}
}

@media all and (max-width: 500px) {
    .img-float {  float: none;  margin-left: 0;}
    .img-float img {position: relative; left: 50%; transform: translateX(-50%);}
}

@media all and (max-height: 800px) {
    header {height: 600px;}
}