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

/*

bleu : #007ac3          bleu-dark : #004898      black : #1a181a     jaune : #f2e500        vert : #0ac2a2          gris : #f9fafa
rgba(0,122,195,1)       rgba(0,72,0152,1)        rgba(26,24,26,1)    rgba(242,229,0,1)      rgba(10,194,162,1)      rgba(249,250,250,1)

font-family: "FrontageCondensedBold", sans-serif;

*/

:root {
    --color-bleu: #007ac3;
    --color-bleu-dark: #004898;
    --color-black: #1a181a;
    --color-jaune: #f2e500;
    --color-vert: #0ac2a2;
    --color-cyan: #63C3D1;
    --color-gris: #85888b;
    --color-blanc: #ffffff;
    --color-noir: #000000;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'MultipleSans_ProRegular', sans-serif;
    font-size: 1.1rem;
    background-color: var(--color-blanc);
    transition: all 0.3s ease-in;
    color: var(--color-black);
}

@font-face {
    font-family: 'Frontage';
    src: url('../fonts/frontage_condensed_bold-webfont.woff2') format('woff2'),
         url('/font/frontage_condensed_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GoldenHopes';
    src: url('../fonts/goldenhopes-webfont.woff2') format('woff2'),
         url('/font/goldenhopes-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MultipleSans_ProLight';
    src: url('/font/multiplesanspro-light-webfont.woff2') format('woff2'),
         url('/font/multiplesanspro-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MultipleSans_ProRegular';
    src: url('../fonts/multiplesanspro-regular-webfont.woff2') format('woff2'),
         url('/font/multiplesanspro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MultipleSans_ProSemibold';
    src: url('/font/multiplesanspro-semibold-webfont.woff2') format('woff2'),
         url('/font/multiplesanspro-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'idtecte';
  src: url('/font/idtecte.eot?93809769');
  src: url('/font/idtecte.eot?93809769#iefix') format('embedded-opentype'),
       url('../fonts/idtecte.woff2?93809769') format('woff2'),
       url('/font/idtecte.woff?93809769') format('woff'),
       url('/font/idtecte.ttf?93809769') format('truetype'),
       url('/font/idtecte.svg?93809769#idtecte') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "idtecte";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before { content: '\e800'; } /* '' */
.icon-instagram:before { content: '\e801'; } /* '' */
.icon-youtube:before { content: '\e802'; } /* '' */
.icon-clock:before { content: '\e803'; } /* '' */
.icon-arrow:before { content: '\e804'; } /* '' */
.icon-mail:before { content: '\e805'; } /* '' */
.icon-phone:before { content: '\e806'; } /* '' */
.icon-chauffage:before { content: '\e807'; } /* '' */
.icon-depannage:before { content: '\e808'; } /* '' */
.icon-electricite:before { content: '\e809'; } /* '' */
.icon-irve:before { content: '\e80a'; } /* '' */
.icon-vmc:before { content: '\e80b'; } /* '' */


h1 {
    font-family: 'Frontage', sans-serif;
    font-size: 2.5rem;
    margin: 50px 0;
    color: var(--color-bleu);
}
h2 {
    font-family: 'Frontage', sans-serif;
    margin: 30px 0;
    color: var(--color-bleu);
}

.txt-color-bleu {
    color: var(--color-bleu);
}
.txt-color-black {
    color: var(--color-black);
}
.txt-color-vert {
    color: var(--color-vert);
}
.txt-color-jaune {
    color: var(--color-jaune);
}
.txt-color-blanc {
    color: var(--color-blanc);
}

a, a:hover {
    text-decoration: none;
}
a {
    color: var(--color-bleu);
    transition: all 0.3s ease-in;
}
a:hover {
    color: var(--color-black);
}

ul {
    list-style: none;
}

img {
    height: auto;
    max-width: 100%;
}

.btn {
    background-color: var(--color-bleu);
    color: var(--color-blanc);
    padding: 10px 20px;
    transition: all 0.3s ease-in;
    font-size: 1.2rem;
    border-radius: 0;
    border: none;
}
.btn:hover {
    background-color: var(--color-vert);
    color: var(--color-blanc);
    padding: 10px 30px;
}
.btn-black {
    background-color: var(--color-black);
}
.btn-blanc {
    background-color: var(--color-blanc);
    color: var(--color-bleu);
}

.font-golden {
    font-family: 'GoldenHopes', sans-serif;
    font-size: 2.5rem;
    color: var(--color-gris);
}

.center {
    text-align: center;
}

header {
    border-bottom: solid 1px var(--color-bleu);
}
#header-top {
    background-color: black;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 50px;
    font-size: 0.9rem;
}
#header-top i {
    color: var(--color-bleu);
    font-size: 1.4rem;
    transition: all .3s ease-in;
}
#header-top a:hover i {
    color: var(--color-vert);
}
#header-top > div:first-child {
    display: flex;
    align-items: center;
}

#header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 50px;
}
#header-nav .logo img {
    height: 60px;
}
#header-nav .nav-item {
    margin: 0 1rem;
}
#header-nav .nav-link {
    text-align: center;
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: all .3s ease-in;
    min-width: 120px;
}
#header-nav .nav-link:hover {
    color: var(--color-bleu);
}
#header-nav .nav-link img {
    width: 40px;
}
#header-nav .nav-item:not(.active):after {
    display:block;
    content: '';
    border-bottom: solid 3px var(--color-bleu);  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
}
#header-nav .nav-item:hover:not(.active):after {
    transform: scaleX(1);
}
#header-nav .nav-item.active {
    border-bottom: solid 3px var(--color-bleu); 
}
#header-nav .nav-item.active .nav-link {
    color: var(--color-bleu);
}
#header-nav i.icon-facebook {
    font-size: 2rem;
}

#header-nav .header-infos {
    display: flex;
}
#header-nav .header-infos > div:nth-child(2) {
    margin: 0 20px;
}


#header {
    position: relative;
    height: 600px;
    padding: 0;
}
#header .corner {
    position: absolute;
    width: 500px;
}
#header .corner-tl {
    top: 0;
    left: 0;
}
#header .corner-br {
    bottom: 0;
    right: 0;
    rotate: 180deg;
}
#header img:last-child {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}


.section-full {
    padding: 80px 0;
}
.section-margin {
    margin: 80px 0;
}

section.bg-bleu {
    background-color: var(--color-bleu);
    color: var(--color-blanc);
}
section.bg-noir {
    background-color: var(--color-noir);
    color: var(--color-blanc);
}
section.bg-jaune {
    background-color: var(--color-jaune);
    color: var(--color-black);
}
.section-bg h2 {
    margin-top: 0;
}


.img-article {
    position: relative;
}
.img-article .corner-bl {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
    width: 300px;
}
.img-article div {
    padding: 20px;
}

.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-button-next, .swiper-button-prev {
    color: var(--color-blanc);
    opacity: 0.5;
    transition: all 0.3s ease-in;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    opacity: 1;
}
.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

.swiper-encarts {
    padding: 0 80px;
}
.swiper-encarts .swiper-slide a {
    color: var(--color-black);
}
.swiper-encarts .swiper-slide a > div {
    display: flex;
    height: 325px;
}
.swiper-encarts .swiper-slide .card-img {
    width: 40%;
    position: relative;
    overflow: hidden;
}
.swiper-encarts .swiper-slide .card-img img {
    width: 100%;
}
.swiper-encarts .swiper-slide .card-img img.corner-white {
    position: absolute;
    bottom: -1px;
    left: -1px;
    object-fit: none;
    object-position: inherit;
    height: inherit;
    z-index: 2;
}
.swiper-encarts .swiper-slide .card-img img:last-child {
    object-fit: cover;
    object-position: center;
    height: 100%;
    transition: all .3s ease-in;
}
.swiper-encarts .swiper-slide a:hover .card-img img:last-child {
    transform: scale(1.15);
}
.swiper-encarts .swiper-slide.bj-jaune .card-txt {
    background-color: var(--color-jaune);
}
.swiper-encarts .swiper-slide.bj-vert .card-txt {
    background-color: var(--color-vert);
}
.swiper-encarts .swiper-slide.bj-bleu .card-txt {
    background-color: var(--color-bleu);
}
.swiper-encarts .swiper-slide.bj-cyan .card-txt {
    background-color: var(--color-cyan);
}
.swiper-encarts .swiper-slide .card-txt {
    width: 60%;
    padding: 30px;
}
.swiper-encarts .swiper-slide .card-txt > h2 {
    color: var(--color-blanc);
}
.swiper-encarts .swiper-slide .card-txt span.pastille {
    background-color: var(--color-blanc);
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    line-height: 1.7rem;
    transition: all .3s ease-in;
}
.swiper-encarts .swiper-slide a:hover .card-txt span.pastille {
    transform: translate(20px);
}
.swiper-encarts .swiper-buttons {
    margin: 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-encarts .swiper-buttons .swiper-button-next, .swiper-encarts .swiper-buttons .swiper-button-prev {
    position: relative;
    left: inherit;
    right: inherit;
    margin: 0 15px;
    color: var(--color-gris);
    font-size: 2rem;
    line-height: 2rem;
}
.swiper-encarts .swiper-buttons .swiper-button-prev i {
    transform: scaleX(-1);
}

.swiper-galerie figure {
    border-radius: 20px;
    overflow: hidden;
}
.swiper-galerie .swiper-slide {
    background-color: transparent;
}
.swiper-galerie .swiper-button-prev, .swiper-galerie .swiper-button-next {
    font-size: 2.4rem;
}
.swiper-galerie .swiper-button-prev i {
    transform: rotate(180deg);
}

#section-irve {
    background-repeat: no-repeat;
    background-position: left center;
}
#section-irve div.row > div:last-child {
    background-color: rgba(0,0,0,0.75);
    padding: 20px;
}
#section-irve .labels {
    margin-top: 30px;
}
#section-irve .labels a {
    margin: 0 30px 0 0;
}
#section-irve .labels a img {
    width: 100px;
}

.img-identity {
    border-radius: 100% ;
}


/* //////////////// 404 //////////////// */

.page-404 {
    text-align: center;
}
.page-404 .page-404-gif {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    color: var(--color-black);
}
.page-404 .page-404-gif span {
    font-size: 130px;
    font-weight: 700;
    height: 200px;
    line-height: 200px;
}
.page-404 .page-404-gif div {
    background: var(--color-bleu);
    border: 12px solid var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 200px;
    margin: 0 20px;
    overflow: hidden;
}
.page-404 .page-404-gif div img {
    height: 180px;
}
.page-404 center {
    margin-top: 20px;
    opacity: 0.7;
    font-size: 0.8rem;
}


/* //////////////// FORMULAIRE //////////////// */

form.formulaire input:not([type=checkbox]), form.formulaire textarea {
    box-sizing: border-box;
    padding: 5px;
    border: none;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.1);
    width: 100%;
    margin-bottom: 15px;
}
form.formulaire #validation {
    text-align: center;
}
form.formulaire small {
    font-size: 0.7rem;
}
form.formulaire input[type="submit"] {
    background: #004259;
    color: #ffffff;
    cursor: pointer;
    border-radius: 3px;
    border: none;
    margin: 15px 0 0 0;
    padding: .375rem 1rem;
    transition: all 0.3s;
    width: inherit;
}
form.formulaire input[type="submit"]:hover {
    background: #e56e1f;
}

#validation .btn {
    transition: all ease-in 0.5s;
    margin: 15px 0 0;
}
#validation .opt-out {
    opacity: 0.5;
    cursor: inherit;
    pointer-events: none;
}
#validation .opt-in {
    opacity: 1;
    cursor: pointer;
}

p.errors, p.success {
    margin: 30px 0;
    padding: 20px 60px;
    text-align: center; 
    clear: both;
    border-radius: 3px;
}
p.success {
    color: #5c6a06;
    background: #c5e21a;
}
p.errors, form div.error input, form div.error textarea, .formulaire .g-recaptcha.error {
    color: #bc3d2d;
    background: #fddcdf;
}


/* //////////////// FOOTER //////////////// */

footer {
    background-color: var(--color-bleu);
    color: var(--color-blanc);
    padding: 50px 0;
}
footer #map-intervention {
    display: block;
    width: 100%;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0px solid var(--color-jaune);
    transition: all .3s ease-in;
}
footer #map-intervention:hover {
    border: 10px solid var(--color-jaune);
}
footer #map-intervention > img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}
footer .logo img {
    height: 80px;
}
footer div.row > div:last-child > a:first-child {
    display: inline-block;
    margin-bottom: 50px;
}
footer div.row > div:last-child > div:first-of-type {
    margin-bottom: 20px;
}
footer div.row > div:last-child .btn {
    padding: 10px 0;
    font-size: 1rem;
}
footer div.row > div:last-child .btn:hover {
    padding: 10px 20px;
}
footer a, footer h3.font-golden {
    color: var(--color-blanc);
}
footer .social {
    margin-top: 20px;
}
footer .social a:hover {
    color: var(--color-vert);
}
footer .social i {
    font-size: 1.4rem;
}
footer hr {
    margin: 50px 0;
}
footer small, footer small a {
    color: rgba(255,255,255,0.4);
    font-size: 0.8rem;
}
footer small a:hover {
    color: rgba(255,255,255,1);
}


/* //////////////// BACK TO TOP //////////////// */

.to-top {
    background-color: var(--color-jaune);
    position: fixed;
    bottom: 12px;
    right: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: all .5s;
    z-index: 1000;
}
.to-top:hover {
    background-color: var(--color-bleu);
}
.to-top.active {
    bottom: 24px;
    pointer-events: auto;
    opacity: 1;
}
.to-top svg {
    color: var(--color-blanc);
    margin-top: 3px;
}


/* //////////////// AJOUTS //////////////// */

.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
    border-color: var(--color-bleu);
}
.fancybox__progress {
    background-color: var(--color-bleu);
}

.jNWlMb .swiper-autoheight, .jNWlMb .swiper-autoheight .swiper-slide {
    display: block;
}