#maquette {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0.2;
    z-index: 5000;
}

/* ////////////////////////////////////////////////// GÉNÉRAL ////////////////////////////////////////////////// */

html {
    font-size: 18px;
}

body {
    font-family: quicksand;
    color: #536c79;
    text-align: center;
    background-color: #e3e9ec;
}

h1, h2 {
    margin: 9px 0;
    color: #394d57;
    text-transform: uppercase; 
    font-size: 38px;
}

h3 {
    margin: -5px 0 12px;
    font-size: 26px;
}

p {
    margin: 0 0 12px;
    line-height: 125%;
}
p:last-child {
    margin: 0 0 -9px;
}

a {
    text-decoration: none;
    font-weight: bold;
}

.chiffres {
    font-family: ubuntu;
    font-size: 18px;
}
.attenue75 {
    opacity: 0.75;
}
.attenue5 {
    opacity: 0.5;
}
.attenue25 {
    opacity: 0.25;
}
.demi-parag {
    display: inline-block;
    margin-bottom: 5px;
}

@media all and (min-width: 768px) {
    .mobile-seulement {
        display: none;
    }
}

.bloc-section {
    background-color: white;
    padding: 30px;
    text-align: left;
    border-radius: 35px;
    -webkit-box-shadow: 5px 5px 11px rgba(87,104,112,0.15);
            box-shadow: 5px 5px 11px rgba(87,104,112,0.15);
}

#activites, #realisations, #certifications, #contact, footer {
    margin-top: 60px;
}


@media all and (min-width: 1200px) { /*   + de 1200 px   */
}
                                /*   Base entre 1024 px et 1199 px  */ 

@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    .bloc-section {
        padding: 25px;
        border-radius: 30px;
    }
    #activites, #realisations, #certifications, #contact, footer {
        margin-top: 50px;
    }
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    .bloc-section {
        padding: 20px;
        border-radius: 25px;
        -webkit-box-shadow: 3px 3px 7px rgba(87,104,112,0.15);
                box-shadow: 3px 3px 7px rgba(87,104,112,0.15);
    }
    #activites, #realisations, #certifications, #contact, footer {
        margin-top: 40px;
    }
}
@media all and (max-width: 541px) { /*   - de 541px   */
    html {
        font-size: 4.5vw;
    }
    h1, h2 {
        margin: 2vw 0;
        font-size: 8.4vw;
    }

    h3 {
        margin: -1.2vw 0 2.6vw;
        font-size: 6.2vw;
    }
    p {
        margin: 0 0 2.75vw;
    }
    .demi-parag {
        margin-bottom: 1.25vw;
    }
    .bloc-section {
        padding: 5vw;
        border-radius: 6vw;
        -webkit-box-shadow: 1.25vw 1.25vw 2.75vw rgba(87,104,112,0.15);
                box-shadow: 1.25vw 1.25vw 2.75vw rgba(87,104,112,0.15);
    }
    #activites, #realisations, #certifications, #contact, footer {
        margin-top: 10vw;
    }
}



/* ////////////////////////////////////////////////// HEADER ////////////////////////////////////////////////// */

header {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: 100vw;
    height: 212px;
    background-color: white;
    padding-bottom: 30px;
    z-index: 100;
    -webkit-transition: all 0.25s, width 0s ;
    transition: all 0.25s, width 0s ;
}
header.reduit {
    height: 71px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 0px;
    -webkit-transition: all 0.25s, width 0s;
    transition: all 0.25s, width 0s;
}

#logo-header {
    width: 545px;
    margin-right: 20px;
    margin-bottom: -5px;
}
header.reduit #logo-header {
    width: 376px;
    margin-right: 194px;
    margin-bottom: -2px;
}

#coordonnees-header {
    width: 296px;
    height: 94px;
    padding: 20px 0;
    color: white;
    background-color: #007ac2;
    border-radius: 25px;
    -webkit-transition: height 0.25s, -webkit-transform 0.25s;
    transition: height 0.25s, -webkit-transform 0.25s;
    transition: transform 0.25s, height 0.25s;
    transition: transform 0.25s, height 0.25s, -webkit-transform 0.25s;
}
header.reduit #coordonnees-header {
    height: 22px;
    padding: 14px 0 16px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transition: height 0.25s, -webkit-transform 0.25s;
    transition: height 0.25s, -webkit-transform 0.25s;
    transition: transform 0.25s, height 0.25s;
    transition: transform 0.25s, height 0.25s, -webkit-transform 0.25s;
}
/* adresse */
#coordonnees-header p:last-child {
    color: #b5e1f6;
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
/* disparition adresse */
header.reduit #coordonnees-header p:last-child {
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
/* picto tél. */
#coordonnees-header p:first-child img {
    width: 24px;
    position: absolute;
    margin-left: -34px;
    margin-top: 3px;
}
/* tél. */
#coordonnees-header p:first-child {
    margin : -7px 0 -3px 32px;
    font-size: 34px;
    font-family: ubuntu;
    font-weight: bold;
}



@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    header {
        height: 175px;
    }
    header.reduit {
        height: 58px;
    }

    #logo-header {
        width: 442px;
    }
    header.reduit #logo-header {
        margin-right: 155px;
        width: 300px;
    }
    #coordonnees-header {
        width: 230px;
        height: 70px;
        padding: 20px 0;
        font-size: 13.5px;
        border-radius: 20px;
    }
    header.reduit #coordonnees-header {
        height: 16px;         
        padding: 14px 0 14px;
    }
    /* picto tél. */
    #coordonnees-header p:first-child img {
        width: 20px;
        margin-top: 1px;
        margin-left: -27px;
    }
    /* tél. */
    #coordonnees-header p:first-child {
        margin : -6px 0 0px 25px;
        font-size: 27px;
    }
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    header {
        position: absolute;
        height: 230px;
        padding: 10px 0 15px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    header.reduit {
        height: 140px;
    }

    #logo-header {
        width: 90%;
        margin: 0 0 10px;
    }
    header.reduit #logo-header {
        width: 70%;
        margin: 0 0 15px;
    }
    #coordonnees-header {
        width: 230px;
        height: 16px;
        padding: 14px 0 14px;
        font-size: 13.5px;
        border-radius: 20px;
    }
    header.reduit #coordonnees-header {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    #coordonnees-header p:last-child {
        display: none;
    }
    /* picto tél. */
    #coordonnees-header p:first-child img {
        margin-top: 2px;
    }
    /* tél. */
    #coordonnees-header p:first-child {
        margin : -7px 0 5px 25px;
    }

}
@media all and (max-width: 541px) { /*   - de 541px   */
    header {
        height: 50vw;
        padding: 2vw 0 3vw;
    }
    header.reduit {
        height: 25vw;
    }
    #logo-header {
        width: 92.5%;
        margin: 0 0 2.5vw;
    }
    header.reduit #logo-header {
        width: 80%;
        margin: 0 0 2.5vw;
    }
    #coordonnees-header, header.reduit #coordonnees-header {
        width: 50vw;
        height: 4vw;
        padding: 2.25vw 0 2.25vw;
        border-radius: 5vw;
    }
    /* picto tél. */
    #coordonnees-header p:first-child img {
        width: 4vw;
        margin-left: -5.25vw;
        margin-top: 0.75vw; 
    }
    /* tél. */
    #coordonnees-header p:first-child {
        margin : -1.3vw 0 0 5.5vw;
        font-size: 6vw;
    }

}


/* //////////////////////////////////////////////////////////// NAV //////////////////////////////////////////////////////////// */

nav {
    position: fixed;
    width: 100%;
    margin-top: 242px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: #394d57;
    z-index: 100;
    -webkit-transition: all 0.25s, width 0s;
    transition: all 0.25s, width 0s;
}
nav.reduit {
    margin-top: 71px;
    -webkit-transition: all 0.25s, width 0s;
    transition: all 0.25s, width 0s;
}

#liens-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 758px;
    height: 36px;
    margin: auto;
}

#liens-nav a {
    padding: 9px 10px 11px;
    font-size: 18px;
    display: inline-block;
    color: white;
    text-transform: uppercase;
    opacity: 0.75;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
@media all and (min-width: 768px) {
    #liens-nav a:hover {
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
        opacity: 1;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }
}

/* Menu Nav mobile */
#bouton-menu-nav {
    display: none;
}
@media all and (min-width: 768px) {
    #bouton-menu-nav:hover, #bouton-retour-en-haut:hover {
        cursor: pointer;
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
        -webkit-transition: -webkit-transform 0.25s;
        transition: -webkit-transform 0.25s;
        transition: transform 0.25s;
        transition: transform 0.25s, -webkit-transform 0.25s;
    }
}
/* Traits menu */
.barre-bouton-menu {
    height: 4px;
    background-color: white;
    position: relative;
    margin-bottom: 5px;
    border-radius: 3px;
    -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
    -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
}

/* Bouton retour en haut */
@-webkit-keyframes flecheREH {
    from {
        opacity: 0;
        bottom: -150%;
    }
    7.5% {
        opacity: 1;
        bottom: 0%;
    }
    92.5% {
        opacity: 1;
        bottom: 0%;
    }
    to {
        opacity: 0;
        bottom: 150%;
    }
}
@keyframes flecheREH {
    from {
        opacity: 0;
        bottom: -150%;
    }
    7.5% {
        opacity: 1;
        bottom: 0%;
    }
    92.5% {
        opacity: 1;
        bottom: 0%;
    }
    to {
        opacity: 0;
        bottom: 150%;
    }
}

#bouton-retour-en-haut {
    position: fixed;
    display: block;
    right: 25px;
    bottom: 25px;
    margin: 0 0 0 -30px;
    width: 18px;
    height: 18px;
    padding: 16px 16px;
    border-radius: 100%;
    background-color: rgba(29,45,54,0.5);
    -webkit-transition: background 0.5s, bottom 0.5s, -webkit-transform 0.5s;
    transition: background 0.5s, bottom 0.5s, -webkit-transform 0.5s;
    transition: background 0.5s, transform 0.5s, bottom 0.5s;
    transition: background 0.5s, transform 0.5s, bottom 0.5s, -webkit-transform 0.5s;
    overflow: hidden;
}
#bouton-retour-en-haut.cache {
    bottom: -50px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.6s, bottom 0s 0.6s;
    transition: all 0.6s, bottom 0s 0.6s;
}
#bouton-retour-en-haut div:first-child {
    left: 5px;
    margin-top: 5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#bouton-retour-en-haut div:last-child {
    right: 5px;
    margin-top: -9px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}


@media all and (min-width: 1200px) { /*   + de 1200 px   */
}

@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    nav {
        margin-top: 201px;
    }
    nav.reduit {
        margin-top: 58px;
    }
    #liens-nav {
        width: 90%;
    }
}

@media all and (max-width: 767px) { /*   entre 542 px et 767px   */

    #swipe-nav-mobile {
        position: fixed;
        height: 100%;
        width: 25px;
        z-index: 200;
    }

    nav {
        position: fixed;
        top: 0;
        left: -80%;
        margin-top: 0;
        width: 80%;
        height: 100%;
        -webkit-transition: 0.5s !important;
        transition: 0.5s !important;
        background-color: rgba(29,45,54,0.95);
    }
    nav.reduit {
        margin-top: 0;
    }
    nav.clique {
        left: 0;
    }
    /* Menu Nav mobile */
    #bouton-menu-nav {
        position: absolute;
        display: block;
        left: 103%;
        top: 193px;
        width: 26px;
        height: 22px;
        padding: 14px 12px;
        border-radius: 15px;
        background-color: rgba(29,45,54,0.5);
        -webkit-transition: 0.4s;
        transition: 0.4s; 
    }
    nav.reduit #bouton-menu-nav {
        top: 3%;
    }
    nav.clique #bouton-menu-nav  {
        left: 103%;
    }
    #liens-nav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    #liens-nav a {
        text-align: left;
        position: relative;
        line-height: 20px;
        line-height: 4.5vh;
        top: -108px;
        top: -24vh;
        width: 100%;
        padding: 27px 0 0 13px;
        padding: 6vh 0 0 3vh;
        font-size: 16px;
        font-size: 3.5vh;
        opacity: 1;
    }

    /* Croix menu cliqué */
    #bouton-menu-nav .barre-bouton-menu {
        -webkit-transition: 0.25s 0.5s;
        transition: 0.25s 0.5s; 
    }
    #bouton-menu-nav.clique .barre-bouton-menu {
        margin-top: 9px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transition: 0.25s 0.5s;
        transition: 0.25s 0.5s; 
    }
    #bouton-menu-nav.clique .barre-bouton-menu:nth-child(2) {
        margin-top: -9px;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        background-color: rgba(255,255,255,0);
    }
    #bouton-menu-nav.clique .barre-bouton-menu:nth-child(3) {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        margin-top: -9px;
    }

    /* Bouton retour en haut */
    #bouton-retour-en-haut {
        position: fixed;
        display: block;
        right: inherit;
        right: 3%;
        bottom: 3%;
    }
}
@media all and (max-width: 541px) { /*   - de 541px   */

    /* Menu Nav mobile */
    #bouton-menu-nav {
        top: 128px;
        top: 39.5vw;
        width: 23px;
        height: 23px;
        padding: 11px;
        border-radius: 10px;
    }
    nav.clique #bouton-menu-nav  {
        left: 83vw;
    }
    /* Traits menu */
    .barre-bouton-menu {
        height: 4px;
        margin-bottom: 5px;
        border-radius: 5px;
    }
    nav.reduit #bouton-menu-nav {
    }
    /* Croix menu cliqué */
    #bouton-menu-nav.clique .barre-bouton-menu {
        margin-top: 9px;
    }
    #bouton-menu-nav.clique .barre-bouton-menu:nth-child(2) {
        margin-top: -10px;
    }
    #bouton-menu-nav.clique .barre-bouton-menu:nth-child(3) {
        margin-top: -8px;
    }

    /* Bouton retour en haut */
    #bouton-retour-en-haut {
        width: 15px;
        height: 15px;
        padding: 15px;
    }
    #bouton-retour-en-haut.cache {
        bottom: -12.5vw;
    }
    #bouton-retour-en-haut div:first-child {
        left: 4px;
        margin-top: 4px;
    }
    #bouton-retour-en-haut div:last-child {
        right: 4px;
        margin-top: -9px;
    }
}


/* ////////////////////////////////////////////////// ACCUEIL ////////////////////////////////////////////////// */

#accueil {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    grid-area: acc;
    margin-top: 278px;
    height: 525px;
    color: white;
    background-color: #bccbd3;
}

#diapo-accueil {
    width: 100%;
    height: 525px;
    position: absolute;
}

.diapo-accueil {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: center;
}

#diapo-accueil-1 {
    background-image: url('../images/fd-accueil-1.jpg');
    z-index: 3;
}
#diapo-accueil-2 {
    background-image: url('../images/fd-accueil-2.jpg');
    z-index: 2;
}
#diapo-accueil-3 {
    background-image: url('../images/fd-accueil-3.jpg');
    z-index: 1;
}

#texte-accueil {
    position: relative;
    width: 620px;
    margin: 0 auto 45px;
    z-index: 50;
    text-shadow: 0 0 10px rgba(29,45,54,0.75);
}

#accueil h2 {
    color: white;
}

@media all and (min-width: 1200px) { /*   + de 1200 px   */
}
                                /*   Base entre 1024 px et 1199 px  */ 
@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    #accueil {
        margin-top: 236px;
        height: 500px;
    }
    #texte-accueil {
            width: 700px;
            margin: 0 auto 45px;
    }
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    #accueil {
        margin-top: 254px;
        height: 400px;
    }

    #diapo-accueil {
        margin: 0;
        height: 400px;
    
    }
    #texte-accueil {
        width: 400px;
    }
}
@media all and (max-width: 541px) { /*   - de 541px   */
    #accueil {
        margin-top: 54.5vw;
        height: 88vw;
        overflow: hidden;
    }
    #diapo-accueil {
        height: 88vw;
    }

    .diapo-accueil {
        height: 88vw;
    }

    #texte-accueil {
        width: 100%;
        top: 0vw;
        margin: 0;
        padding: 73vw 0 0;
        overflow: scroll;
    }

    #scroll-mobile-accueil-1 {
        width: 90%;
        margin: 0;
        padding: 0.5% 5% 10%;
        background-color: rgba(29,45,54,0.66);
        overflow: scroll;
    }
}


/* ////////////////////////////////////////////////// ACTIVITES ////////////////////////////////////////////////// */

#activites {
    grid-area: act;
    overflow: hidden;
}

#boutons-activites {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 18px  auto 0;
    width: 480px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.bouton-activite:hover {
    cursor: pointer;
}
.bouton-activite.selectionne, .bouton-activite.selectionne a {
    cursor: default;
}

.bouton-activite img {
    width: 65px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.bouton-activite.selectionne img {
   -webkit-transform: scale(1.15);
           transform: scale(1.15);
   -webkit-transition: 0.25s;
   transition: 0.25s;
}
@media all and (min-width: 768px) {
    .bouton-activite:hover img {
       -webkit-transform: scale(1.15);
               transform: scale(1.15);
       -webkit-transition: 0.25s;
       transition: 0.25s;
    }
}

.bouton-activite a {
    display: block;
    position: relative;
    top: 0px;
    margin: 1px 0 37px;
    text-transform: uppercase;
    opacity: 0.66;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.bouton-activite.selectionne a {
    opacity: 1;
    top: 6px;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
@media all and (min-width: 768px) {
    .bouton-activite:hover a {
        opacity: 1;
        top: 6px;
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }
}
#bouton-plomberie a {
    color: #007ac2;
}
#bouton-chauffage a {
    color: #e43516;
}
#bouton-depannage a {
    color: #769635;
}
#bouton-ramonage a {
    color: #536c79;
}

#blocs-sections-activites {
    position: relative;
    margin: auto;
    width: 736px;
    left: 0;
    height: 330px;
    -webkit-transition: left 0.5s !important;
    transition: left 0.5s !important;
}

#activites .bloc-section {
    position: relative;
    height:270px;
    color: white;
    -webkit-box-shadow: none;
            box-shadow: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

#bloc-section-plomberie::before {
    content: url("../images/triangle-bleu.svg");
    display: block;
    position: absolute;
    width: 34px;
    top: -22px;
    left: 162px;
}
#bloc-section-plomberie {
    background-color: #168ccb;
}
#bloc-section-chauffage::before {
    content: url("../images/triangle-rouge.svg");
    display: block;
    position: absolute;
    width: 34px;
    top: -22px;
    left: 286px;
}
#bloc-section-chauffage {
    top: -100%;
    left: 100vw;
    background-color: #e1532c;
}
#bloc-section-depannage::before {
    content: url("../images/triangle-vert.svg");
    display: block;
    position: absolute;
    width: 34px;
    top: -22px;
    left: 416px;
}
#bloc-section-depannage {
    top: -200%;
    left: 200vw;
    background-color: #769635;
}
#bloc-section-ramonage::before {
    content: url("../images/triangle-gris.svg");
    display: block;
    position: absolute;
    width: 34px;
    top: -22px;
    left: 540px;
}
#bloc-section-ramonage {
    top: -300%;
    left: 300vw;
    background-color: #536c79;
}

.texte-bloc-activite {
    padding-right: 25px;
}

.img-bloc-activite img {
    width: 270px;
    border-radius: 25px;
}

@media all and (min-width: 1200px) { /*   + de 1200 px   */
}
                                /*   Base entre 1024 px et 1199 px  */ 

@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    #blocs-sections-activites {
        height: 320px;
        -webkit-transition: left 0.75s;
        transition: left 0.75s;
    }
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    .img-bloc-activite {
        display: none;
    }
    .texte-bloc-activite {
        padding-right: 0;
    }
    #blocs-sections-activites {
        width: 517px;
        height: 310px;
    }
    #boutons-activites {
        margin: 18px  auto 0;
        width: 475px;
    }


    /* triangle-bleu */
    #bloc-section-plomberie::before {
        left: 53px;
    }
    /* triangle-rouge */
    #bloc-section-chauffage::before {
        left: 176px;
    }
    /* triangle-vert */
    #bloc-section-depannage::before {
        left: 304px;
    }
    /* triangle-gris */
    #bloc-section-ramonage::before {
        left: 428px;
    }
}
@media all and (max-width: 541px) { /*   - de 541px   */
        #boutons-activites {
            margin: 4.5vw  auto 17.5vw;
            width: 85vw;
        }
        .bouton-activite img {
            width: 15vw;
        }
        .bouton-activite a {
            display: none;
            position: absolute;
            margin: 2.75vw 0;
            top: initial;
            width: 50vw;
            font-size: 6.5vw;
        }
        .bouton-activite.selectionne a {
            display: block;
            top: initial;
        }
        #bouton-plomberie a {
            left: 6vw;
            text-align: left;
        }
        #bouton-chauffage a {
            left: 13.25vw;
        }
        #bouton-depannage a {
            right: 13.25vw;
        }
        #bouton-ramonage a {
            right: 6vw;
            text-align: right;
        }
        #blocs-sections-activites {
            width: 95vw;
            height: 92vw;
        }
        #activites .bloc-section {
            height: 82vw;
        }

        #bloc-section-plomberie::before {
            width: 8.5vw;
            top: -5.5vw;
            left: 8.5vw;
        }
        #bloc-section-chauffage::before {
            width: 8.5vw;
            top: -5.5vw;
            left: 32.25vw;
        }
        #bloc-section-depannage::before {
            width: 8.5vw;
            top: -5.5vw;
            left: 56vw;
        }
        #bloc-section-ramonage::before {
            width: 8.5vw;
            top: -5.5vw;
            left: 78vw;
        }
        .img-bloc-activite img {
            width: 67.5vw;
            border-radius: 6.25vw;
        }
}



/* ////////////////////////////////////////////////// REALISATIONS ////////////////////////////////////////////////// */

#realisations {
    grid-area: rea;
}

#realisations .bloc-section {
    color: white;
    height: 526px;
    background-color: #394d57;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    overflow: hidden;
}


/* IMAGE RÉALISATIONS */
.bouton-real {
    position: absolute;
    margin-left: -15px;
    margin-top: 156px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: url('../images/bouton-fleche.svg'), white;
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 20px;
    -webkit-box-shadow: 5px 0 10px rgba(0,0,0,0.25);
            box-shadow: 5px 0 10px rgba(0,0,0,0.25);
    z-index: 10;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}
.bouton-real.suivant {
    margin-left: 607px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
@media all and (min-width: 768px) {
    .bouton-real:hover {
        cursor: pointer;
        -webkit-transform: scale(1.15);
                transform: scale(1.15);
        -webkit-transition: -webkit-transform 0.25s;
        transition: -webkit-transform 0.25s;
        transition: transform 0.25s;
        transition: transform 0.25s, -webkit-transform 0.25s;
    }
    .bouton-real.suivant:hover {
        -webkit-transform: rotate(180deg) scale(1.15);
                transform: rotate(180deg) scale(1.15);
        -webkit-transition: -webkit-transform 0.25s;
        transition: -webkit-transform 0.25s;
        transition: transform 0.25s;
        transition: transform 0.25s, -webkit-transform 0.25s;
    }
}

#img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente {
    position: relative;
    width: 642px;
    height: 361px;
    background-image: url('../images/img-1.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    border-radius: 20px;
    z-index: 3;
}

#img-bloc-real-transition {
    position: absolute;
    margin-top: -381px;
    z-index: 2;
}

#img-bloc-real-attente {
    background-color: #1d2d36;
    background-image: url('../images/picto-attente.gif');
    background-size: 25px;
    position: absolute;
    margin-top: -381px;
    z-index: 1;
}


/* TEXTE RÉALISATIONS */
.texte-real {
    position: absolute;
    width: 642px;
    opacity: 0;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
.texte-real br {
    line-height: 30px;
}
.texte-real.selectionne {
    opacity: 1;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}


/* MINIATURES RÉALISATIONS */
#miniatures {
    margin: -5px 0 -10px 30px;
    text-align: left;
    width: 264px;
    overflow: hidden;
}

@-webkit-keyframes cadreMini {
    from {
        border: 5px solid white;
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
    to {
        border: 5px solid #9ce5ff;
    }
}

@keyframes cadreMini {
    from {
        border: 5px solid white;
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
    to {
        border: 5px solid #9ce5ff;
    }
}
@-webkit-keyframes cadreMiniMobile {
    from {
        border: 1.25vw solid white;
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
    to {
        border: 1.25vw solid #9ce5ff;
    }
}
@keyframes cadreMiniMobile {
    from {
        border: 1.25vw solid white;
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }
    to {
        border: 1.25vw solid #9ce5ff;
    }
}
#cadre-miniatures {
    position: absolute;
    margin-top: 5px;
    width: 68px;
    height: 68px;
    -webkit-animation: cadreMini 2s alternate infinite ease-in-out;
            animation: cadreMini 2s alternate infinite ease-in-out;
    border-radius: 15px;
    z-index: 10;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}

#miniatures img {
    width: 76px;
    margin: 5px 0;
    border-radius: 15px;
    -webkit-filter: brightness(87%);
            filter: brightness(87%);
    opacity: 0.87;
    -webkit-transition: opacity 0.5s, -webkit-filter 0.5s;
    transition: opacity 0.5s, -webkit-filter 0.5s;
    transition: filter 0.5s, opacity 0.5s;
    transition: filter 0.5s, opacity 0.5s, -webkit-filter 0.5s;
}
@media all and (min-width: 1024px) {
    #miniatures {
        margin: -5px -8px -10px 22px;
    }
    #miniatures img:nth-child(3n) {
        margin: 5px 14px;
    }
}
#miniatures img.selectionne {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
    opacity: 1;
    cursor: pointer;
    -webkit-transition: opacity 0.25s, -webkit-filter 0.25s;
    transition: opacity 0.25s, -webkit-filter 0.25s;
    transition: filter 0.25s, opacity 0.25s;
    transition: filter 0.25s, opacity 0.25s, -webkit-filter 0.25s;
}
@media all and (min-width: 768px) {
    #miniatures img:hover {
        -webkit-filter: brightness(100%);
                filter: brightness(100%);
        opacity: 1;
        cursor: pointer;
        -webkit-transition: opacity 0.25s, -webkit-filter 0.25s;
        transition: opacity 0.25s, -webkit-filter 0.25s;
        transition: filter 0.25s, opacity 0.25s;
        transition: filter 0.25s, opacity 0.25s, -webkit-filter 0.25s;
    }
}


@media all and (min-width: 1200px) { /*   + de 1200 px   */
}
                                /*   Base entre 1024 px et 1199 px  */ 

@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    #realisations .bloc-section {
        height: 635px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        overflow: scroll;
    }
    #img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente, .texte-real {
        width: 686px;
    }
    #img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente {
        height: 386px;
    }
    #img-bloc-real-transition, #img-bloc-real-attente {
        margin-top: -406px;
    }
    #miniatures {
        margin: -5px -8px 0;
        width: auto;
        height: 76px;
        white-space: nowrap ; /*  pas de retour à a ligne pour les enfants  */
        overflow-x: scroll;
        overflow-y: hidden; 
    }
    #miniatures img {
        margin: 0 8px;
    }

    .bouton-real {
        margin-left: -10px;
        margin-top: 168px;
    }
    .bouton-real.suivant {
        margin-left: 646px;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    #realisations .bloc-section {
        height: 540px;
    }
    #img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente, .texte-real {
        width: 478px;
    }
    #img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente {
        height: 269px;
    }
    #img-bloc-real-transition, #img-bloc-real-attente {
        margin-top: -289px;
    }
    .bouton-real {
        margin-left: -10px;
        margin-top: 110px;
    }
    .bouton-real.suivant {
        margin-left: 438px;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }
}

@media all and (max-width: 541px) { /*   - de 541px   */
        #realisations .bloc-section {
            height: 135vw;
        }
        .bouton-real {
            margin-left: -2.5vw;
            margin-top: 18.4vw;
            width: 11vw;
            height: 11vw;
            background-position: 2.75vw center;
            background-size: 4.5vw;
            -webkit-box-shadow: 1.25vw 0 2.5vw rgba(0,0,0,0.25);
                    box-shadow: 1.25vw 0 2.5vw rgba(0,0,0,0.25);
        }
        .bouton-real.suivant {
            margin-left: 76.5vw;
        }
        #img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente {
            height: 47.81vw;
            margin-bottom: 5vw;
            border-radius: 3vw;
        }
        #img-bloc-real-transition, #img-bloc-real-attente {
            margin-top: -52.81vw;
        }
        #img-bloc-real, #img-bloc-real-transition, #img-bloc-real-attente, .texte-real {
            width: 85vw;
        }
        #miniatures {
            margin: 0 -2vw;
            height: 19vw;
            width: auto;
        }
        #cadre-miniatures {
            margin-top: 1vw;
            width: 17vw;
            height: 17vw;
            -webkit-animation: cadreMiniMobile 2s alternate infinite ease-in-out;
                    animation: cadreMiniMobile 2s alternate infinite ease-in-out;
            border-radius: 3.75vw;
        }

        #miniatures img {
            width: 19vw;
            margin: 0 1.65vw;
            border-radius: 3.75vw;
        }
}


/* ////////////////////////////////////////////////// CERTIFICATIONS ////////////////////////////////////////////////// */

#certifications {
    grid-area: cer;
}

#certifications .bloc-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 15px 0 20px;
}

#certifications img {
    width: 430px;
    width: 85%;
}


/* ////////////////////////////////////////////////// CONTACT ////////////////////////////////////////////////// */

#contact {
    grid-area: con;
}

#contact .bloc-section {
    min-height: 526px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

/* Google Maps */
#maps {
    border-radius: 25px;
    overflow: hidden;
    width: 258px;
    height: 526px;
}

/* COORDONNEES CONTACT */

#coord-form-contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 642px;
}


#coord-contact h3 {
    color: #394d57;
}

#coord-contact strong.chiffres {
    font-size: 19px;
}

#coord-contact p {
    margin-bottom: 4px;
}


/* FORMULAIRE */

#form-contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    padding: 20px;
    color: white;
    background-color: #007ac2;
    border-radius: 25px;
}

#form-contact input, #form-contact textarea, #form-contact select {
    font-family: ubuntu;
    padding: 5px 10px;
    width: 229px;
    margin-right: 15px;
    background-color: white;
    border-radius: 10px;
    border: none;
}
#form-contact textarea {
    resize: none;
}

/* Petits Inputs */
#form-contact input#prenom, #form-contact input#tel {
    width: 153px;
}

/* Grands labels  */
#form-contact label[for="prenom"], #form-contact label[for="mail"] {
    width: 90px;
}

/* Forme bouton */
#form-contact input#envoi, #form-contact select  {
    position: relative;
    top: -1px;
    margin-top: 0px;
    margin-bottom: 4px;
    padding: 0 10px;
    height: 30px;
    font-size: 19px;
    font-family: quicksand;
    font-weight: bold;
    color: white;
    -webkit-box-shadow: 0 4px 0 #00568b;
            box-shadow: 0 4px 0 #00568b;
    -webkit-transition: top 0.5s, -webkit-box-shadow 0.5s;
    transition: top 0.5s, -webkit-box-shadow 0.5s;
    transition: top 0.5s, box-shadow 0.5s;
    transition: top 0.5s, box-shadow 0.5s, -webkit-box-shadow 0.5s;
}
@media all and (min-width: 768px) {
    #form-contact input#envoi:hover, #form-contact select:hover {
        cursor: pointer;
        top: 1px;
        -webkit-box-shadow: 0 2px 0 #00568b;
                box-shadow: 0 2px 0 #00568b;
        -webkit-transition: top 0.25s, -webkit-box-shadow 0.25s;
        transition: top 0.25s, -webkit-box-shadow 0.25s;
        transition: top 0.25s, box-shadow 0.25s;
        transition: top 0.25s, box-shadow 0.25s, -webkit-box-shadow 0.25s;
    }
}

#form-contact select {
    width: auto;
    margin-top: -2px;
    border: none;
    color: white;
    background-color: #00b1e7;
}

/* BLOC SUBMIT ENVOYER */
#form-contact input#envoi  {
    left: 478px;
    width: 125px;
    margin-bottom: 0;
    background-color: #95c039;
}

#form-contact label {
    display: inline-block;
    width: 70px;
}

#form-contact input:focus, #form-contact textarea:focus {
    background-color: #f4f7d4;
    outline: 0;
}
#form-contact select:focus {
    outline: 0;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgba(57,77,87,0.5);
}
::-moz-placeholder { /* Firefox 19+ */
    color: rgba(57,77,87,0.5);
}
:-ms-input-placeholder { /* IE 10+ */
    color: rgba(57,77,87,0.5);
}
:-moz-placeholder { /* Firefox 18- */
    color: rgba(57,77,87,0.5);
}

/* Textarea */
#form-contact textarea {
    margin-top: 5px;
    margin-bottom: 10px;
    width: 585px;
    min-height: 100px;
}

#form-contact p input:last-child, #form-contact textarea, #form-contact input#envoi {
    margin-right: 0;
}

#form-contact input#rec-copie {
    width: initial ;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

#form-contact label[for="rec-copie"] {
    width: auto;
}

#bloc-copie {
    position: absolute;
}


@media all and (min-width: 1200px) { /*   + de 1200 px   */
}
                                /*   Base entre 1024 px et 1199 px  */ 

@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    #contact .bloc-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #maps {
        width: 686px;
        height: 250px;
        margin-bottom: 20px;
        border-radius: 15px;
    }
    #coord-form-contact {
        width: 686px;
    }
    #coord-contact {
        text-align: center;
    }
    /* FORMULAIRE */
    #form-contact {
        border-radius: 15px;
    }
    /* Grands Inputs  */
    #form-contact input {
        width: 254px;
    }
    /* Petits Inputs */
    #form-contact input#prenom, #form-contact input#tel {
        width: 170px;
    }
    #form-contact textarea {
        width: 626px;
    }
    #form-contact input#envoi  {
        left: 521px;
    }
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    #maps {
        width: 478px;
        height: 220px;
    }
    #coord-form-contact {
        width: 478px;
    }
    /* Petits Inputs  */
    #form-contact input#prenom, #form-contact input#mail {
        width: 328px;
    }
    /* Grands Inputs */
    #form-contact input#nom, #form-contact input#tel {
        margin-right: 0;
        margin-bottom: 11px;
        width: 348px;
    }
    #form-contact textarea {
        margin-top: 10px;
        width: 418px;
    }
    #form-contact input#envoi  {
        left: 313px;
    }
}
@media all and (max-width: 541px) { /*   - de 541px   */
        #contact .bloc-section {
            min-height: 128.75vw;
        }
        /* Google Maps */
        #maps {
            width: 85vw;
            height: 55vw;
            margin-bottom: 5vw;
            border-radius: 3.75vw;
        }
        /* COORDONNEES CONTACT */
        #coord-form-contact {
            width: 85vw;
        }
        #coord-contact strong.chiffres {
            font-size: 5vw;
        }
        #coord-contact .chiffres {
            font-size: 4vw;
        }
        /* FORMULAIRE */
        #form-contact {
            margin-top: 2.5vw;
            padding: 5vw;
            border-radius: 3.75vw;
        }
        #form-contact input, #form-contact textarea, #form-contact select {
            padding: 1.25vw 2.5vw;
            margin-right: 3.75vw;
            border-radius: 2.5vw;
        }
        /* Petits Inputs  */
        #form-contact input#prenom, #form-contact input#mail {
            width: 48.5vw;
        }
        /* Grands Inputs */
        #form-contact input#nom, #form-contact input#tel {
            margin-bottom: 2.75vw;
            width: 55vw;
        }
        /* Petits labels  */
        #form-contact label {
            width: 15vw;
        }
        /* Grands labels  */
        #form-contact label[for="prenom"], #form-contact label[for="mail"] {
            width: 21.5vw;
        }
        /* Forme bouton */
        #form-contact input#envoi, #form-contact select  {
            top: -0.25vw;
            margin-bottom: 1vw;
            padding: 0 2.5vw;
            height: 7.5vw;
            font-size: 5vw;
            -webkit-box-shadow: 0 1vw 0 #00568b;
                    box-shadow: 0 1vw 0 #00568b;
        }
        #form-contact select {
            margin-top: -0.5vw;
        }
        #bloc-copie {
            left: 11vw;
            font-size: 13px;
        }
        /* BLOC SUBMIT ENVOYER */
        #form-contact input#envoi  {
            left: 50vw;
            width: 25vw;
            margin-bottom: -0.5vw;
        }
        /* Textarea */
        #form-contact textarea {
            margin-top: 2.5vw;
            margin-bottom: 2.5vw;
            width: 70vw;
            min-height: 22.5vw;
        }
        #form-contact input#rec-copie {
            width: initial;
            margin-right: 1.25vw;
            top: -0.5vw;
        }
}




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

footer {
    grid-area: foo;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 36px;
    background-color: #bccbd3;
}

footer a {
    color: #536c79;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
@media all and (min-width: 768px) {
    footer a:hover {
        -webkit-transform: scale(1.075);
                transform: scale(1.075);
        -webkit-transition: 0.25s;
        transition: 0.25s;
    }
}
@media all and (max-width: 541px) { /*   - de 541px   */
    footer {
        height: 9vw;
    }
}

/* ////////////////////////////////////////////////// GRILLE ////////////////////////////////////////////////// */

#conteneur-grille {
    display: grid;
    grid-template-columns: auto 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px 45px auto;
    grid-column-gap: 18px;
    grid-template-areas: 
            "acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc"
            "act act act act act act act act act act act act act act act act act act"
            " .   .   .   .   .  cer cer cer cer cer cer cer cer  .   .   .   .   . "
            " .  rea rea rea rea rea rea rea rea rea rea rea rea rea rea rea rea  . "
            " .  con con con con con con con con con con con con con con con con  . "
            "foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"
    ;
    margin-bottom: 0px;
}


@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
    #conteneur-grille {
        grid-template-columns: auto 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px 31px auto;
        grid-column-gap: 16px;
        grid-template-areas: 
                "acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc"
                "act act act act act act act act act act act act act act act act act act"
                " .   .   .   .  cer cer cer cer cer cer cer cer cer cer  .   .   .   . "
                " .  rea rea rea rea rea rea rea rea rea rea rea rea rea rea rea rea  . "
                " .  con con con con con con con con con con con con con con con con  . "
                "foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"
        ;
    }
}

@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
    #conteneur-grille {
        grid-template-columns: auto 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px 23px auto;
        grid-column-gap: 10px;
        grid-template-areas: 
                "acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc acc"
                "act act act act act act act act act act act act act act act act act act"
                " .   .   .   .  cer cer cer cer cer cer cer cer cer cer  .   .   .   . "
                " .  rea rea rea rea rea rea rea rea rea rea rea rea rea rea rea rea  . "
                " .  con con con con con con con con con con con con con con con con  . "
                "foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo"
        ;
    }
}

@media all and (max-width: 541px) { /*   - de 541 px   */
    #conteneur-grille {
        grid-template-columns: 2.5% 95% 2.5%;
        grid-column-gap: 0;
        grid-template-areas: 
                "acc acc acc"
                "act act act"
                " .  cer  . "
                " .  rea  . "
                " .  con  . "
                "foo foo foo"
        ;
    }
}


@media all and (min-width: 1200px) { /*   + de 1200 px   */
}
                                /*   Base entre 1024 px et 1199 px  */ 

@media all and (max-width: 1023px) { /*   entre 768 px et 1023px   */
}
@media all and (max-width: 767px) { /*   entre 542 px et 767px   */
}
@media all and (max-width: 541px) { /*   - de 541px   */
}